QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature : Puschases & Sales / fix : tasks

Browse Source
This commit is contained in:
elforjani3
2020-09-04 00:41:22 +02:00
parent 73de0b934b e23b8d9947
commit 9c21e233ea
92 changed files with 4642 additions and 1610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/containers/Items/ItemCategoriesList.js
View File

@@ -14,6 +14,7 @@ import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
import { compose } from 'utils';
@@ -25,10 +26,15 @@ const ItemCategoryList = ({
// #withDashboardActions
changePageTitle,
// #withViewsActions
requestFetchResourceViews,
requestFetchResourceFields,
// #withItemCategoriesActions
requestFetchItemCategories,
requestDeleteItemCategory,
requestDeleteBulkItemCategories,
addItemCategoriesTableQueries,
// #withDialog
openDialog,
@@ -48,9 +54,13 @@ const ItemCategoryList = ({
: changePageTitle(formatMessage({ id: 'category_list' }));
}, [id, changePageTitle, formatMessage]);
const fetchCategories = useQuery(
['items-categories-list', filter],
(key, query) => requestFetchItemCategories(query),
const fetchCategories = useQuery(['items-categories-list'], () =>
requestFetchItemCategories(),
);
const fetchResourceFields = useQuery(
['resource-fields', 'items_categories'],
(key, resourceName) => requestFetchResourceFields(resourceName),
);
const handleFilterChanged = useCallback(() => {}, []);
@@ -63,17 +73,23 @@ const ItemCategoryList = ({
[setSelectedRows],
);
// Handle fetch data of accounts datatable.
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
setFilter({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
});
}, []);
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
const page = pageIndex + 1;
addItemCategoriesTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
page_size: pageSize,
page,
});
},
[addItemCategoriesTableQueries],
);
const handleDeleteCategory = (itemCategory) => {
setDeleteCategory(itemCategory);
@@ -139,7 +155,10 @@ const ItemCategoryList = ({
]);
return (
<DashboardInsider name={'item-category-list'}>
<DashboardInsider
loading={fetchResourceFields.isFetching}
name={'item-category-list'}
>
<ItemsCategoryActionsBar
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged}
@@ -151,7 +170,7 @@ const ItemCategoryList = ({
onFetchData={handleFetchData}
onSelectedRowsChange={handleSelectedRowsChange}
onDeleteCategory={handleDeleteCategory}
loading={tableLoading}
loading={fetchCategories.isFetching}
/>
<Alert
@@ -197,4 +216,5 @@ export default compose(
withItemCategoriesActions,
withDashboardActions,
withDialogActions,
withResourceActions,
)(ItemCategoryList);

376
client/src/containers/Items/ItemForm.js
View File

@@ -1,6 +1,6 @@
import React, { useState, useMemo, useCallback,useEffect } from 'react';
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useFormik, Formik } from 'formik';
import {
FormGroup,
MenuItem,
@@ -23,29 +23,28 @@ import ErrorMessage from 'components/ErrorMessage';
import Icon from 'components/Icon';
import MoneyInputGroup from 'components/MoneyInputGroup';
import Dragzone from 'components/Dragzone';
import { ListSelect } from 'components';
import { ListSelect, AccountsSelectList, If } from 'components';
import withItemsActions from 'containers/Items/withItemsActions';
import withItemCategories from 'containers/Items/withItemCategories'
import withItemCategories from 'containers/Items/withItemCategories';
import withAccounts from 'containers/Accounts/withAccounts';
import withMediaActions from 'containers/Media/withMediaActions';
import useMedia from 'hooks/useMedia';
import withItemDetail from 'containers/Items/withItemDetail'
import withItemDetail from 'containers/Items/withItemDetail';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withAccountDetail from 'containers/Accounts/withAccountDetail';
import { compose } from 'utils';
const ItemForm = ({
// #withItemActions
requestSubmitItem,
requestEditItem,
accounts,
accountsList,
itemDetail,
onFormSubmit,
onCancelForm,
onCancelForm,
// #withDashboardActions
changePageTitle,
@@ -55,10 +54,10 @@ const ItemForm = ({
// #withMediaActions
requestSubmitMedia,
requestDeleteMedia,
requestDeleteMedia,
}) => {
const [payload, setPayload] = useState({});
const history = useHistory();
const { formatMessage } = useIntl();
const {
@@ -72,22 +71,34 @@ const ItemForm = ({
deleteCallback: requestDeleteMedia,
});
const ItemTypeDisplay = useMemo(() => [
{ value: null, label: formatMessage({id:'select_item_type'}) },
{ value: 'service', label: formatMessage({id:'service'}) },
{ value: 'inventory', label: formatMessage({id:'inventory'}) },
{ value: 'non-inventory', label: formatMessage({id:'non_inventory'}) },
], [formatMessage]);
const ItemTypeDisplay = useMemo(
() => [
{ value: null, label: formatMessage({ id: 'select_item_type' }) },
{ value: 'service', label: formatMessage({ id: 'service' }) },
{ value: 'inventory', label: formatMessage({ id: 'inventory' }) },
{ value: 'non-inventory', label: formatMessage({ id: 'non_inventory' }) },
],
[formatMessage],
);
const validationSchema = Yup.object().shape({
active: Yup.boolean(),
name: Yup.string().required().label(formatMessage({id:'item_name_'})),
type: Yup.string().trim().required().label(formatMessage({id:'item_type_'})),
name: Yup.string()
.required()
.label(formatMessage({ id: 'item_name_' })),
type: Yup.string()
.trim()
.required()
.label(formatMessage({ id: 'item_type_' })),
sku: Yup.string().trim(),
cost_price: Yup.number(),
sell_price: Yup.number(),
cost_account_id: Yup.number().required().label(formatMessage({id:'cost_account_id'})),
sell_account_id: Yup.number().required().label(formatMessage({id:'sell_account_id'})),
cost_account_id: Yup.number()
.required()
.label(formatMessage({ id: 'cost_account_id' })),
sell_account_id: Yup.number()
.required()
.label(formatMessage({ id: 'sell_account_id' })),
inventory_account_id: Yup.number().when('type', {
is: (value) => value === 'inventory',
then: Yup.number().required(),
@@ -95,6 +106,8 @@ const ItemForm = ({
}),
category_id: Yup.number().nullable(),
stock: Yup.string() || Yup.boolean(),
sellable: Yup.boolean().required(),
purchasable: Yup.boolean().required(),
});
const defaultInitialValues = useMemo(
@@ -110,27 +123,36 @@ const ItemForm = ({
inventory_account_id: null,
category_id: null,
note: '',
sellable: null,
purchasable: null,
}),
[]
[],
);
const initialValues = useMemo(
() => ({
...(itemDetail
? {
...pick(itemDetail, Object.keys(defaultInitialValues)),
}
: {
...defaultInitialValues,
}),
}),
[itemDetail, defaultInitialValues],
);
const initialValues = useMemo(() => ({
...(itemDetail) ? {
...pick(itemDetail, Object.keys(defaultInitialValues)),
} : {
...defaultInitialValues,
}
}), [itemDetail, defaultInitialValues]);
const saveInvokeSubmit = useCallback((payload) => {
onFormSubmit && onFormSubmit(payload)
}, [onFormSubmit]);
const saveInvokeSubmit = useCallback(
(payload) => {
onFormSubmit && onFormSubmit(payload);
},
[onFormSubmit],
);
useEffect(() => {
itemDetail && itemDetail.id ?
changePageTitle(formatMessage({id:'edit_item_details'})) :
changePageTitle(formatMessage({id:'new_item'}));
}, [changePageTitle,itemDetail,formatMessage]);
itemDetail && itemDetail.id
? changePageTitle(formatMessage({ id: 'edit_item_details' }))
: changePageTitle(formatMessage({ id: 'new_item' }));
}, [changePageTitle, itemDetail, formatMessage]);
const {
getFieldProps,
@@ -146,55 +168,56 @@ const ItemForm = ({
initialValues: {
...initialValues,
},
onSubmit: (values, { setSubmitting,resetForm,setErrors }) => {
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
const saveItem = (mediaIds) => {
const formValues = { ...values, media_ids: mediaIds };
if(itemDetail && itemDetail.id ){
requestEditItem(itemDetail.id,formValues)
.then((response)=>{
AppToaster.show({
message:formatMessage({
id:'the_item_has_been_successfully_edited',
},{
number:itemDetail.id
}),
intent:Intent.SUCCESS
if (itemDetail && itemDetail.id) {
requestEditItem(itemDetail.id, formValues)
.then((response) => {
AppToaster.show({
message: formatMessage(
{
id: 'the_item_has_been_successfully_edited',
},
{
number: itemDetail.id,
},
),
intent: Intent.SUCCESS,
});
setSubmitting(false);
saveInvokeSubmit({ action: 'update', ...payload });
history.push('/items');
resetForm();
})
.catch((errors) => {
setSubmitting(false);
});
setSubmitting(false);
saveInvokeSubmit({action:'update',...payload})
history.push('/items');
resetForm();
}).catch((errors)=>{
setSubmitting(false)
});
}else{
} else {
requestSubmitItem(formValues).then((response) => {
AppToaster.show({
message: formatMessage({
id: 'service_has_been_successful_created',
}, {
name: values.name,
service: formatMessage({ id: 'item' }),
}),
message: formatMessage(
{
id: 'service_has_been_successful_created',
},
{
name: values.name,
service: formatMessage({ id: 'item' }),
},
),
intent: Intent.SUCCESS,
});
queryCache.removeQueries(['items-table']);
history.push('/items');
});
};
}
};
Promise.all([saveMedia(), deleteMedia()]).then(
([savedMediaResponses]) => {
const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
return saveItem(mediaIds);
}
},
);
},
});
@@ -208,53 +231,52 @@ const ItemForm = ({
onClick={handleClick}
/>
),
[]
[],
);
// Filter Account Items
const filterAccounts = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const filterAccounts = (query, item, _index, exactMatch) => {
const normalizedTitle = item.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
return `${item.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
const onItemAccountSelect = useCallback((filedName) => {
return (account) => {
setFieldValue(filedName, account.id);
};
}, [setFieldValue]);
const onItemAccountSelect = useCallback(
(filedName) => {
return (account) => {
setFieldValue(filedName, account.id);
};
},
[setFieldValue],
);
const categoryItem = useCallback(
(item, { handleClick }) => (
<MenuItem text={item.name} onClick={handleClick} />
<MenuItem key={item.id} text={item.name} onClick={handleClick} />
),
[]
[],
);
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
const handleMoneyInputChange = (fieldKey) => (e, value) => {
setFieldValue(fieldKey, value);
};
const initialAttachmentFiles =useMemo(()=>{
const initialAttachmentFiles = useMemo(() => {
return itemDetail && itemDetail.media
? itemDetail.media.map((attach)=>({
preview:attach.attachment_file,
upload:true,
metadata:{...attach}
})):[];
},[itemDetail])
? itemDetail.media.map((attach) => ({
preview: attach.attachment_file,
upload: true,
metadata: { ...attach },
}))
: [];
}, [itemDetail]);
const handleDropFiles = useCallback((_files) => {
setFiles(_files.filter((file) => file.uploaded === false));
}, []);
@@ -267,7 +289,7 @@ const ItemForm = ({
}
});
},
[setDeletedFiles, deletedFiles,]
[setDeletedFiles, deletedFiles],
);
const handleCancelClickBtn = () => {
@@ -275,12 +297,11 @@ const ItemForm = ({
};
return (
<div class='item-form'>
<div class="item-form">
<form onSubmit={handleSubmit}>
<div class='item-form__primary-section'>
<div class="item-form__primary-section">
<Row>
<Col xs={7}>
{/* Item type */}
<FormGroup
medium={true}
@@ -289,7 +310,7 @@ const ItemForm = ({
className={'form-group--item-type'}
intent={errors.type && touched.type && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='type' />
<ErrorMessage {...{ errors, touched }} name="type" />
}
inline={true}
>
@@ -299,7 +320,7 @@ const ItemForm = ({
{...getFieldProps('type')}
/>
</FormGroup>
{/* Item name */}
<FormGroup
label={<T id={'item_name'} />}
@@ -307,7 +328,7 @@ const ItemForm = ({
className={'form-group--item-name'}
intent={errors.name && touched.name && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='name' />
<ErrorMessage {...{ errors, touched }} name="name" />
}
inline={true}
>
@@ -324,7 +345,9 @@ const ItemForm = ({
labelInfo={infoIcon}
className={'form-group--item-sku'}
intent={errors.sku && touched.sku && Intent.DANGER}
helperText={<ErrorMessage {...{ errors, touched }} name='sku' />}
helperText={
<ErrorMessage {...{ errors, touched }} name="sku" />
}
inline={true}
>
<InputGroup
@@ -343,29 +366,28 @@ const ItemForm = ({
errors.category_id && touched.category_id && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='category' />
<ErrorMessage {...{ errors, touched }} name="category" />
}
className={classNames(
'form-group--select-list',
'form-group--category',
Classes.FILL
Classes.FILL,
)}
>
<ListSelect
items={categoriesList}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={categoryItem}
itemPredicate={filterAccounts}
popoverProps={{ minimal: true }}
onItemSelect={onItemAccountSelect('category_id')}
selectedItem={values.category_id}
selectedItem={values.customer_id}
selectedItemProp={'id'}
defaultText={<T id={'select_category'} />}
labelProp={'name'}
/>
</FormGroup>
{/* Active checkbox */}
<FormGroup
label={' '}
@@ -374,7 +396,7 @@ const ItemForm = ({
>
<Checkbox
inline={true}
label={<T id={'active'}/>}
label={<T id={'active'} />}
defaultChecked={values.active}
{...getFieldProps('active')}
/>
@@ -395,14 +417,18 @@ const ItemForm = ({
<Row gutterWidth={16} className={'item-form__accounts-section'}>
<Col width={404}>
<h4><T id={'purchase_information'}/></h4>
<h4>
<T id={'sales_information'} />
</h4>
<FormGroup
label={<T id={'selling_price'}/>}
label={<T id={'selling_price'} />}
className={'form-group--item-selling-price'}
intent={errors.selling_price && touched.selling_price && Intent.DANGER}
intent={
errors.selling_price && touched.selling_price && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='selling_price' />
<ErrorMessage {...{ errors, touched }} name="selling_price" />
}
inline={true}
>
@@ -417,9 +443,10 @@ const ItemForm = ({
touched.selling_price &&
Intent.DANGER,
}}
disabled={!values.sellable}
/>
</FormGroup>
{/* Selling account */}
<FormGroup
label={<T id={'account'} />}
@@ -431,32 +458,42 @@ const ItemForm = ({
Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='sell_account_id' />
<ErrorMessage {...{ errors, touched }} name="sell_account_id" />
}
className={classNames(
'form-group--sell-account',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
>
<ListSelect
items={accounts}
itemRenderer={accountItem}
itemPredicate={filterAccounts}
popoverProps={{ minimal: true }}
onItemSelect={onItemAccountSelect('sell_account_id')}
<AccountsSelectList
accounts={accountsList}
onAccountSelected={onItemAccountSelect('sell_account_id')}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.sell_account_id}
disabled={!values.sellable}
/>
</FormGroup>
selectedItem={values.sell_account_id}
selectedItemProp={'id'}
defaultText={<T id={'select_account'} />}
labelProp={'name'}
{/* sellable checkbox */}
<FormGroup
label={' '}
inline={true}
className={'form-group--sellable'}
>
<Checkbox
inline={true}
label={<T id={'sellable'} />}
checked={values.sellable}
{...getFieldProps('sellable')}
/>
</FormGroup>
</Col>
<Col width={404}>
<h4><T id={'sales_information'} /></h4>
<h4>
<T id={'purchase_information'} />
</h4>
{/* Cost price */}
<FormGroup
@@ -464,7 +501,7 @@ const ItemForm = ({
className={'form-group--item-cost-price'}
intent={errors.cost_price && touched.cost_price && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='cost_price' />
<ErrorMessage {...{ errors, touched }} name="cost_price" />
}
inline={true}
>
@@ -477,6 +514,7 @@ const ItemForm = ({
intent:
errors.cost_price && touched.cost_price && Intent.DANGER,
}}
disabled={!values.purchasable}
/>
</FormGroup>
@@ -490,25 +528,34 @@ const ItemForm = ({
Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='cost_account_id' />
<ErrorMessage {...{ errors, touched }} name="cost_account_id" />
}
className={classNames(
'form-group--cost-account',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
>
<ListSelect
items={accounts}
itemRenderer={accountItem}
itemPredicate={filterAccounts}
popoverProps={{ minimal: true }}
onItemSelect={onItemAccountSelect('cost_account_id')}
<AccountsSelectList
accounts={accountsList}
onAccountSelected={onItemAccountSelect('cost_account_id')}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.cost_account_id}
disabled={!values.purchasable}
/>
</FormGroup>
defaultText={<T id={'select_account'} />}
labelProp={'name'}
selectedItem={values.cost_account_id}
selectedItemProp={'id'}
{/* purchasable checkbox */}
<FormGroup
label={' '}
inline={true}
className={'form-group--purchasable'}
>
<Checkbox
inline={true}
label={<T id={'purchasable'} />}
defaultChecked={values.purchasable}
{...getFieldProps('purchasable')}
/>
</FormGroup>
</Col>
@@ -521,35 +568,35 @@ const ItemForm = ({
</h4>
<FormGroup
label={<T id={'inventory_account'}/>}
label={<T id={'inventory_account'} />}
inline={true}
intent={
errors.inventory_account_id &&
touched.inventory_account_id &&
Intent.DANGER
}
helperText={<ErrorMessage {...{ errors, touched }} name='inventory_account_id' />}
helperText={
<ErrorMessage
{...{ errors, touched }}
name="inventory_account_id"
/>
}
className={classNames(
'form-group--item-inventory_account',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
>
<ListSelect
items={accounts}
itemRenderer={accountItem}
itemPredicate={filterAccounts}
popoverProps={{ minimal: true }}
onItemSelect={onItemAccountSelect('inventory_account_id')}
defaultText={<T id={'select_account'} />}
labelProp={'name'}
selectedItem={values.inventory_account_id}
selectedItemProp={'id'} />
<AccountsSelectList
accounts={accountsList}
onAccountSelected={onItemAccountSelect('inventory_account_id')}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.inventory_account_id}
/>
</FormGroup>
<FormGroup
label={<T id={'opening_stock'}/>}
label={<T id={'opening_stock'} />}
className={'form-group--item-stock'}
inline={true}
>
@@ -562,14 +609,17 @@ const ItemForm = ({
</Col>
</Row>
<div class='form__floating-footer'>
<Button intent={Intent.PRIMARY} disabled={isSubmitting} type='submit'>
{ itemDetail && itemDetail.id ? <T id={'edit'}/> : <T id={'save'}/> }
<div class="form__floating-footer">
<Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
{itemDetail && itemDetail.id ? (
<T id={'edit'} />
) : (
<T id={'save'} />
)}
</Button>
<Button className={'ml1'} disabled={isSubmitting}>
<T id={'save_as_draft'}/>
<T id={'save_as_draft'} />
</Button>
<Button className={'ml1'} onClick={handleCancelClickBtn}>
@@ -582,8 +632,8 @@ const ItemForm = ({
};
export default compose(
withAccounts(({accounts})=>({
accounts,
withAccounts(({ accountsList }) => ({
accountsList,
})),
withAccountDetail,
withItemsActions,

40
client/src/containers/Items/ItemsActionsBar.js
View File

@@ -23,9 +23,10 @@ import { If } from 'components';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withItems from 'containers/Items/withItems';
import withItemsActions from './withItemsActions';
import { compose } from 'utils';
import { connect } from 'react-redux';
const ItemsActionsBar = ({
openDialog,
@@ -36,6 +37,9 @@ const ItemsActionsBar = ({
// #withItems
itemsViews,
//#withItemActions
addItemsTableQueries,
onFilterChanged,
selectedRows = [],
onBulkDelete,
@@ -56,10 +60,26 @@ const ItemsActionsBar = ({
selectedRows,
]);
// name
// const filterDropdown = FilterDropdown({
// fields: resourceFields,
// onFilterChange: (filterConditions) => {
// setFilterCount(filterConditions.length);
// onFilterChanged && onFilterChanged(filterConditions);
// },
// });
const filterDropdown = FilterDropdown({
initialCondition: {
fieldKey: 'name',
compatator: 'contains',
value: '',
},
fields: resourceFields,
onFilterChange: (filterConditions) => {
setFilterCount(filterConditions.length);
addItemsTableQueries({
filter_roles: filterConditions || '',
});
onFilterChanged && onFilterChanged(filterConditions);
},
});
@@ -107,9 +127,11 @@ const ItemsActionsBar = ({
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={
filterCount <= 0 ?
(<T id={'filter'} />) :
(`${filterCount} ${formatMessage({ id: 'filters_applied' })}`)
filterCount <= 0 ? (
<T id={'filter'} />
) : (
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
)
}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
@@ -140,7 +162,14 @@ const ItemsActionsBar = ({
);
};
const mapStateToProps = (state, props) => ({
resourceName: 'items',
});
const withItemsActionsBar = connect(mapStateToProps);
export default compose(
withItemsActionsBar,
withDialogActions,
withItems(({ itemsViews }) => ({
itemsViews,
@@ -148,4 +177,5 @@ export default compose(
withResourceDetail(({ resourceFields }) => ({
resourceFields,
})),
withItemsActions,
)(ItemsActionsBar);

68
client/src/containers/Items/ItemsCategoryActionsBar.js
View File

@@ -12,16 +12,18 @@ import {
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { If, Icon } from 'components';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import FilterDropdown from 'components/FilterDropdown';
import { If } from 'components';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withItemCategories from './withItemCategories';
import withItemCategoriesActions from './withItemCategoriesActions';
import { compose } from 'utils';
const ItemsCategoryActionsBar = ({
@@ -31,6 +33,12 @@ const ItemsCategoryActionsBar = ({
// #withDialog
openDialog,
// #withItemCategories
categoriesViews,
// #withItemCategoriesActions
addItemCategoriesTableQueries,
// #ownProps
selectedRows = [],
onFilterChanged,
@@ -46,17 +54,21 @@ const ItemsCategoryActionsBar = ({
selectedRows,
]);
// const handleDeleteCategory = useCallback((category) => {
// onDeleteCategory(selectedRows);
// }, [selectedRows, onDeleteCategory]);
const filterDropdown = FilterDropdown({
fields: resourceFields,
onFilterChange: (filterConditions) => {
setFilterCount(filterConditions.length || 0);
onFilterChanged && onFilterChanged(filterConditions);
},
});
// const filterDropdown = FilterDropdown({
// fields: resourceFields,
// initialCondition: {
// fieldKey: 'name',
// compatator: 'contains',
// value: '',
// },
// onFilterChange: (filterConditions) => {
// setFilterCount(filterConditions.length || 0);
// addItemCategoriesTableQueries({
// filter_roles: filterConditions || '',
// });
// onFilterChanged && onFilterChanged(filterConditions);
// },
// });
const handelBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
@@ -75,22 +87,29 @@ const ItemsCategoryActionsBar = ({
<Popover
minimal={true}
content={filterDropdown}
// content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
canOutsideClickClose={true}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={ filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
icon={<Icon icon='filter-16' iconSize={16} />}
text={
filterCount <= 0 ? (
<T id={'filter'} />
) : (
`${filterCount} filters applied`
)
}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
</Popover>
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash-16' iconSize={16} />}
text={<T id={'delete'}/>}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handelBulkDelete}
/>
@@ -98,13 +117,13 @@ const ItemsCategoryActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import-16' iconSize={16} />}
text={<T id={'import'}/>}
icon={<Icon icon="file-import-16" iconSize={16} />}
text={<T id={'import'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export-16' iconSize={16} />}
text={<T id={'export'}/>}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
@@ -114,7 +133,6 @@ const ItemsCategoryActionsBar = ({
const mapStateToProps = (state, props) => ({
resourceName: 'items_categories',
});
const withItemsCategoriesActionsBar = connect(mapStateToProps);
export default compose(
@@ -124,4 +142,8 @@ export default compose(
withResourceDetail(({ resourceFields }) => ({
resourceFields,
})),
// withItemCategories(({ categoriesViews }) => ({
// categoriesViews,
// })),
withItemCategoriesActions,
)(ItemsCategoryActionsBar);

248
client/src/containers/Items/ItemsList.js
View File

@@ -1,24 +1,21 @@
import React, { useEffect, useCallback, useState,useMemo } from 'react';
import {
Route,
Switch,
useHistory
} from 'react-router-dom';
import {
Intent,
Alert,
} from '@blueprintjs/core';
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import { Intent, Alert } from '@blueprintjs/core';
import { useQuery } from 'react-query';
import { FormattedMessage as T, FormattedHTMLMessage, useIntl } from 'react-intl';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
import { compose } from 'utils';
import ItemsDataTable from './ItemsDataTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ItemsViewsTabs from 'containers/Items/ItemsViewsTabs';
import ItemsDataTable from './ItemsDataTable';
import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import AppToaster from 'components/AppToaster';
import withItems from 'containers/Items/withItems';
@@ -27,7 +24,6 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withItemsActions from 'containers/Items/withItemsActions';
import withViewsActions from 'containers/Views/withViewsActions';
function ItemsList({
// #withDashboardActions
changePageTitle,
@@ -51,37 +47,41 @@ function ItemsList({
const [bulkDelete, setBulkDelete] = useState(false);
const { formatMessage } = useIntl();
const history = useHistory();
useEffect(() => {
changePageTitle(formatMessage({id:'items_list'}));
changePageTitle(formatMessage({ id: 'items_list' }));
}, [changePageTitle]);
const fetchHook = useQuery('items-resource', () => {
return Promise.all([
requestFetchResourceViews('items'),
requestFetchResourceFields('items'),
]);
});
const fetchResourceViews = useQuery(
['resource-views', 'items'],
(key, resourceName) => requestFetchResourceViews(resourceName),
);
const fetchItems = useQuery(['items-table', itemsTableQuery],
() => requestFetchItems({}));
const fetchResourceFields = useQuery(
['resource-fields', 'items'],
(key, resourceName) => requestFetchResourceFields(resourceName),
);
const fetchItems = useQuery(['items-table', itemsTableQuery], () =>
requestFetchItems({}),
);
// Handle click delete item.
const handleDeleteItem = useCallback((item) => {
setDeleteItem(item);
}, [setDeleteItem]);
const handleDeleteItem = useCallback(
(item) => {
setDeleteItem(item);
},
[setDeleteItem],
);
const handleEditItem = useCallback(
(item) => {
history.push(`/items/${item.id}/edit`);
},
[history]
[history],
);
// Handle cancel delete the item.
const handleCancelDeleteItem = useCallback(() => {
setDeleteItem(false);
@@ -98,29 +98,43 @@ function ItemsList({
});
setDeleteItem(false);
});
}, [requestDeleteItem, deleteItem,formatMessage]);
}, [requestDeleteItem, deleteItem, formatMessage]);
// Handle fetch data table.
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
addItemsTableQueries({
...(sortBy.length > 0) ? {
column_sort_order: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
} : {},
});
}, [fetchItems, addItemsTableQueries]);
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
const page = pageIndex + 1;
addItemsTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
page_size: pageSize,
page,
});
},
[addItemsTableQueries],
);
// Handle filter change to re-fetch the items.
const handleFilterChanged = useCallback((filterConditions) => {
addItemsTableQueries({
filter_roles: filterConditions || '',
});
}, [fetchItems]);
const handleFilterChanged = useCallback(
(filterConditions) => {
addItemsTableQueries({
filter_roles: filterConditions || '',
});
},
[fetchItems],
);
// Handle custom view change to re-fetch the items.
const handleCustomViewChanged = useCallback((customViewId) => {
setTableLoading(true);
}, [fetchItems]);
const handleCustomViewChanged = useCallback(
(customViewId) => {
setTableLoading(true);
},
[fetchItems],
);
useEffect(() => {
if (tableLoading && !fetchItems.isFetching) {
@@ -129,108 +143,124 @@ function ItemsList({
}, [tableLoading, fetchItems.isFetching]);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback((accounts) => {
setSelectedRows(accounts);
}, [setSelectedRows]);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows],
);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
selectedRows,
]);
// Handle items bulk delete button click.,
const handleBulkDelete = useCallback((itemsIds) => {
setBulkDelete(itemsIds);
}, [setBulkDelete]);
const handleBulkDelete = useCallback(
(itemsIds) => {
setBulkDelete(itemsIds);
},
[setBulkDelete],
);
// Handle confirm items bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkItems(bulkDelete).then(() => {
setBulkDelete(false);
AppToaster.show({
message: formatMessage({ id: 'the_items_has_been_successfully_deleted' }),
intent: Intent.SUCCESS,
// Handle confirm items bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkItems(bulkDelete)
.then(() => {
setBulkDelete(false);
AppToaster.show({
message: formatMessage({
id: 'the_items_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
setBulkDelete(false);
});
}).catch((errors) => {
setBulkDelete(false);
});
}, [requestDeleteBulkItems, bulkDelete,formatMessage]);
// Handle cancel accounts bulk delete.
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
}, [requestDeleteBulkItems, bulkDelete, formatMessage]);
// Handle cancel accounts bulk delete.
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
return (
<DashboardInsider
isLoading={fetchHook.isFetching}
name={'items-list'}>
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
// isLoading={fetchHook.isFetching}
name={'items-list'}
>
<ItemsActionsBar
selectedRows={selectedRows}
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged}
onBulkDelete={handleBulkDelete}/>
onBulkDelete={handleBulkDelete}
/>
<DashboardPageContent>
<Switch>
<Route
exact={true}
path={[
'/items/:custom_view_id/custom_view',
'/items'
]}>
<ItemsViewsTabs
onViewChanged={handleCustomViewChanged} />
path={['/items/:custom_view_id/custom_view', '/items']}
>
<ItemsViewsTabs onViewChanged={handleCustomViewChanged} />
<ItemsDataTable
loading={tableLoading}
loading={fetchItems.isFetching}
onDeleteItem={handleDeleteItem}
onEditItem={handleEditItem}
onFetchData={handleFetchData}
onSelectedRowsChange={handleSelectedRowsChange} />
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'delete'}/>}
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteItem}
onCancel={handleCancelDeleteItem}
onConfirm={handleConfirmDeleteItem}>
onConfirm={handleConfirmDeleteItem}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_item_you_will_able_to_restore_it'} />
id={'once_delete_this_item_you_will_able_to_restore_it'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
>
<p>
<T id={'once_delete_these_items_you_will_not_able_restore_them'} />
</p>
</Alert>
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={`${formatMessage({
id: 'delete',
})} (${selectedRowsCount})`}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
>
<p>
<T
id={'once_delete_these_items_you_will_not_able_restore_them'}
/>
</p>
</Alert>
</Route>
</Switch>
</DashboardPageContent>
</DashboardInsider>
)
);
}
export default compose(
withItems(({ itemsTableQuery }) => ({
itemsTableQuery,
})),
withResourceActions,
withDashboardActions,
withItemsActions,
withViewsActions,
withItems(({ itemsTableQuery }) => ({
itemsTableQuery,
})),
)(ItemsList);

76
client/src/containers/Items/ItemsViewsTabs.js
View File

@@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React, { useEffect, useRef } from 'react';
import { useHistory } from 'react-router';
import { connect } from 'react-redux';
import {
@@ -7,20 +7,22 @@ import {
NavbarGroup,
Tabs,
Tab,
Button
Button,
} from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import Icon from 'components/Icon';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'utils';
import {useUpdateEffect} from 'hooks';
import { useUpdateEffect } from 'hooks';
import { DashboardViewsTabs } from 'components';
import { pick, debounce } from 'lodash';
import withItemsActions from 'containers/Items/withItemsActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withViewDetail from 'containers/Views/withViewDetails';
import withItems from 'containers/Items/withItems';
import { FormattedMessage as T} from 'react-intl';
import { FormattedMessage as T } from 'react-intl';
function ItemsViewsTabs({
// #withViewDetail
@@ -42,7 +44,7 @@ function ItemsViewsTabs({
onViewChanged,
}) {
const history = useHistory();
const { custom_view_id: customViewId } = useParams();
const { custom_view_id: customViewId = null } = useParams();
const handleClickNewView = () => {
setTopbarEditView(null);
@@ -51,12 +53,12 @@ function ItemsViewsTabs({
const handleViewLinkClick = () => {
setTopbarEditView(customViewId);
}
};
useEffect(() => {
changeItemsCurrentView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle((customViewId && viewItem) ? viewItem.name : '');
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
addItemsTableQueries({
custom_view_id: customViewId || null,
@@ -67,45 +69,37 @@ function ItemsViewsTabs({
changeItemsCurrentView(-1);
changePageSubtitle('');
};
}, [customViewId]);
}, [customViewId, addItemsTableQueries, changeItemsCurrentView]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
const tabs = itemsViews.map(view => {
const baseUrl = '/items';
const link = (
<Link to={`${baseUrl}/${view.id}/custom_view`} onClick={handleViewLinkClick}>
{view.name}
</Link>
);
return (<Tab id={`custom_view_${view.id}`} title={link} />);
});
const debounceChangeHistory = useRef(
debounce((toUrl) => {
history.push(toUrl);
}, 250),
);
const handleTabsChange = (viewId) => {
const toPath = viewId ? `${viewId}/custom_view` : '';
debounceChangeHistory.current(`/items/${toPath}`);
setTopbarEditView(viewId);
};
const tabs = itemsViews.map((view) => ({
...pick(view, ['name', 'id']),
}));
return (
<Navbar className='navbar--dashboard-views'>
<Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}>
<Tabs
id='navbar'
large={true}
selectedTabId={customViewId ? `custom_view_${customViewId}` : 'all'}
className='tabs--dashboard-views'
>
<Tab
id='all'
title={<Link to={`/items`}><T id={'all'}/></Link>}
onClick={handleViewLinkClick} />
{tabs}
<Button
className='button--new-view'
icon={<Icon icon='plus' />}
onClick={handleClickNewView}
minimal={true}
/>
</Tabs>
<DashboardViewsTabs
initialViewId={customViewId}
baseUrl={'/items'}
tabs={tabs}
onNewViewTabClick={handleClickNewView}
onChange={handleTabsChange}
/>
</NavbarGroup>
</Navbar>
);
@@ -123,8 +117,8 @@ export default compose(
withItemsViewsTabs,
withDashboardActions,
withItemsActions,
withViewDetail,
withItems( ({ itemsViews }) => ({
withViewDetail(),
withItems(({ itemsViews }) => ({
itemsViews,
}))
})),
)(ItemsViewsTabs);

11
client/src/containers/Items/withItemCategories.js
View File

@@ -1,8 +1,6 @@
import { connect } from 'react-redux';
import {
getItemsCategoriesListFactory
} from 'store/itemCategories/ItemsCategories.selectors';
import { getItemsCategoriesListFactory } from 'store/itemCategories/ItemsCategories.selectors';
import { getResourceViews } from 'store/customViews/customViews.selectors';
export default (mapState) => {
const getItemsCategoriesList = getItemsCategoriesListFactory();
@@ -10,10 +8,11 @@ export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
categoriesList: getItemsCategoriesList(state, props),
itemCategoriesViews: getResourceViews(state, props, 'items_categories'),
categoriesTableLoading: state.itemCategories.loading,
};
return mapState ? mapState(mapped, state, props) : mapState;
};
return connect(mapStateToProps);
};
};

24
client/src/containers/Items/withItemCategoriesActions.js
View File

@@ -4,16 +4,30 @@ import {
submitItemCategory,
deleteItemCategory,
editItemCategory,
deleteBulkItemCategories
deleteBulkItemCategories,
} from 'store/itemCategories/itemsCategory.actions';
import t from 'store/types';
export const mapDispatchToProps = (dispatch) => ({
requestSubmitItemCategory: (form) => dispatch(submitItemCategory({ form })),
requestFetchItemCategories: (query) => dispatch(fetchItemCategories({ query })),
requestFetchItemCategories: (query) =>
dispatch(fetchItemCategories({ query })),
requestDeleteItemCategory: (id) => dispatch(deleteItemCategory(id)),
requestEditItemCategory: (id, form) => dispatch(editItemCategory(id, form)),
requestDeleteBulkItemCategories:(ids)=>dispatch(deleteBulkItemCategories({ids}))
requestDeleteBulkItemCategories: (ids) =>
dispatch(deleteBulkItemCategories({ ids })),
changeItemCategoriesView: (id) =>
dispatch({
type: t.ITEM_CATEGORIES_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
addItemCategoriesTableQueries: (queries) =>
dispatch({
type: t.ITEM_CATEGORIES_TABLE_QUERIES_ADD,
queries,
}),
});
export default connect(null, mapDispatchToProps);
export default connect(null, mapDispatchToProps);