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

feat: activate & inactive item.

Browse Source
This commit is contained in:
elforjani3
2020-12-16 18:54:01 +02:00
parent 9818215c78
commit bd09ab1144
6 changed files with 218 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/containers/Items/ItemsDataTable.js
View File

@@ -12,7 +12,14 @@ import {
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import { Icon, DataTable, Money, LoadingIndicator, Choose } from 'components';
import {
Icon,
DataTable,
Money,
LoadingIndicator,
Choose,
If,
} from 'components';
import ItemsEmptyStatus from './ItemsEmptyStatus';
import { useIsValuePassed } from 'hooks';
import { CLASSES } from 'common/classes';
@@ -36,6 +43,8 @@ function ItemsDataTable({
// props
onEditItem,
onDeleteItem,
onInactiveItem,
onActivateItem,
onSelectedRowsChange,
}) {
const { formatMessage } = useIntl();
@@ -83,6 +92,20 @@ function ItemsDataTable({
text={formatMessage({ id: 'edit_item' })}
onClick={handleEditItem(item)}
/>
<If condition={item.active}>
<MenuItem
text={formatMessage({ id: 'inactivate_item' })}
icon={<Icon icon="pause-16" iconSize={16} />}
onClick={() => onInactiveItem(item)}
/>
</If>
<If condition={!item.active}>
<MenuItem
text={formatMessage({ id: 'activate_item' })}
icon={<Icon icon="play-16" iconSize={16} />}
onClick={() => onActivateItem(item)}
/>
</If>
<MenuItem
text={formatMessage({ id: 'delete_item' })}
icon={<Icon icon="trash-16" iconSize={16} />}
@@ -91,7 +114,13 @@ function ItemsDataTable({
/>
</Menu>
),
[handleEditItem, handleDeleteItem, formatMessage],
[
handleEditItem,
handleDeleteItem,
onInactiveItem,
onActivateItem,
formatMessage,
],
);
const handleRowContextMenu = useCallback(
@@ -148,11 +177,11 @@ function ItemsDataTable({
{
Header: formatMessage({ id: 'cost_price' }),
accessor: (row) =>
!isBlank(row.sell_price) ? (
<Money amount={row.cost_price} currency={'USD'} />
) : (
''
),
!isBlank(row.sell_price) ? (
<Money amount={row.cost_price} currency={'USD'} />
) : (
''
),
className: 'cost-price',
width: 150,
},
@@ -196,6 +225,12 @@ function ItemsDataTable({
[onSelectedRowsChange],
);
const rowClassNames = (row) => {
return {
inactive: !row.original.active,
};
};
const showEmptyStatus = [
itemsCurrentPage.length === 0,
itemsCurrentViewId === -1,
@@ -221,6 +256,7 @@ function ItemsDataTable({
rowContextMenu={handleRowContextMenu}
expandable={false}
sticky={true}
rowClassNames={rowClassNames}
pagination={true}
pagesCount={itemsPagination.pagesCount}
autoResetSortBy={false}

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

@@ -1,7 +1,7 @@
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 { useQuery, queryCache } from 'react-query';
import {
FormattedMessage as T,
FormattedHTMLMessage,
@@ -38,10 +38,14 @@ function ItemsList({
// #withItemsActions
requestDeleteItem,
requestFetchItems,
requestInactiveItem,
requestActivateItem,
addItemsTableQueries,
requestDeleteBulkItems,
}) {
const [deleteItem, setDeleteItem] = useState(false);
const [inactiveItem, setInactiveItem] = useState(false);
const [activateItem, setActivateItem] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const [bulkDelete, setBulkDelete] = useState(false);
@@ -65,9 +69,8 @@ function ItemsList({
);
// Handle fetching the items table based on the given query.
const fetchItems = useQuery(
['items-table', itemsTableQuery],
(key, _query) => requestFetchItems({ ..._query }),
const fetchItems = useQuery(['items-table', itemsTableQuery], (key, _query) =>
requestFetchItems({ ..._query }),
);
// Handle click delete item.
@@ -92,33 +95,36 @@ function ItemsList({
// handle confirm delete item.
const handleConfirmDeleteItem = useCallback(() => {
requestDeleteItem(deleteItem.id).then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_item_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
setDeleteItem(false);
}).catch(({ errors }) => {
if (errors.find(error => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')) {
requestDeleteItem(deleteItem.id)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_item_has_associated_transactions',
id: 'the_item_has_been_successfully_deleted',
}),
intent: Intent.DANGER,
intent: Intent.SUCCESS,
});
}
setDeleteItem(false);
});
setDeleteItem(false);
})
.catch(({ errors }) => {
if (
errors.find(
(error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS',
)
) {
AppToaster.show({
message: formatMessage({
id: 'the_item_has_associated_transactions',
}),
intent: Intent.DANGER,
});
}
setDeleteItem(false);
});
}, [requestDeleteItem, deleteItem, formatMessage]);
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
},
[addItemsTableQueries],
);
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {}, [
addItemsTableQueries,
]);
// Handle filter change to re-fetch the items.
const handleFilterChanged = useCallback(
@@ -174,6 +180,62 @@ function ItemsList({
setBulkDelete(false);
}, []);
// Handle cancel/confirm item inactive.
const handleInactiveItem = useCallback((item) => {
setInactiveItem(item);
}, []);
// Handle cancel inactive item alert.
const handleCancelInactiveItem = useCallback(() => {
setInactiveItem(false);
}, []);
// Handle confirm item Inactive.
const handleConfirmItemInactive = useCallback(() => {
requestInactiveItem(inactiveItem.id)
.then(() => {
setInactiveItem(false);
AppToaster.show({
message: formatMessage({
id: 'the_item_has_been_successfully_inactivated',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('items-table');
})
.catch((error) => {
setInactiveItem(false);
});
}, [inactiveItem, requestInactiveItem, formatMessage]);
// Handle activate item click.
const handleActivateItem = useCallback((item) => {
setActivateItem(item);
});
// Handle activate item alert cancel.
const handleCancelActivateItem = useCallback(() => {
setActivateItem(false);
});
// Handle activate item confirm.
const handleConfirmItemActivate = useCallback(() => {
requestActivateItem(activateItem.id)
.then(() => {
setActivateItem(false);
AppToaster.show({
message: formatMessage({
id: 'the_item_has_been_successfully_activated',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('items-table');
})
.catch((error) => {
setActivateItem(false);
});
}, [activateItem, requestActivateItem, formatMessage]);
return (
<DashboardInsider
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
@@ -196,6 +258,8 @@ function ItemsList({
<ItemsDataTable
onDeleteItem={handleDeleteItem}
onEditItem={handleEditItem}
onInactiveItem={handleInactiveItem}
onActivateItem={handleActivateItem}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
@@ -231,6 +295,30 @@ function ItemsList({
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'inactivate'} />}
intent={Intent.WARNING}
isOpen={inactiveItem}
onCancel={handleCancelInactiveItem}
onConfirm={handleConfirmItemInactive}
>
<p>
<T id={'are_sure_to_inactive_this_item'} />
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'activate'} />}
intent={Intent.WARNING}
isOpen={activateItem}
onCancel={handleCancelActivateItem}
onConfirm={handleConfirmItemActivate}
>
<p>
<T id={'are_sure_to_activate_this_item'} />
</p>
</Alert>
</Route>
</Switch>
</DashboardPageContent>

4
client/src/containers/Items/withItemsActions.js
View File

@@ -6,6 +6,8 @@ import {
submitItem,
editItem,
deleteBulkItems,
activateItem,
inactiveItem,
} from 'store/items/items.actions';
import t from 'store/types';
@@ -16,6 +18,8 @@ export const mapDispatchToProps = (dispatch) => ({
requestDeleteBulkItems: (ids) => dispatch(deleteBulkItems({ ids })),
requestSubmitItem: (form) => dispatch(submitItem({ form })),
requestEditItem: (id, form) => dispatch(editItem({ id, form })),
requestInactiveItem: (id) => dispatch(inactiveItem({ id })),
requestActivateItem: (id) => dispatch(activateItem({ id })),
addBulkActionItem: (id) =>
dispatch({
type: t.ITEM_BULK_ACTION_ADD,

20
client/src/lang/en/index.js
View File

@@ -918,9 +918,17 @@ export default {
'Are you sure you want to reject this estimate?',
mark_as_approved: 'Mark as approved',
mark_as_rejected: 'Mark as rejected',
delivered:'Delivered',
rejected:'Rejected',
approved:'Approved'
};
delivered: 'Delivered',
rejected: 'Rejected',
approved: 'Approved',
the_item_has_been_successfully_inactivated:
'The item has been successfully inactivated.',
the_item_has_been_successfully_activated:
'The item has been successfully activated.',
are_sure_to_inactive_this_item:
'Are you sure you want to inactive this item? You will be able to activate it later',
are_sure_to_activate_this_item:
'Are you sure you want to activate this item? You will be able to inactivate it later',
inactivate_item: 'Inactivate Item',
activate_item: 'Activate Item',
};

8
client/src/store/items/items.actions.js
View File

@@ -105,3 +105,11 @@ export const deleteBulkItems = ({ ids }) => {
});
});
};
export const activateItem = ({ id }) => {
return (dispatch) => ApiService.post(`items/${id}/activate`);
};
export const inactiveItem = ({ id }) => {
return (dispatch) => ApiService.post(`items/${id}/inactivate`);
};

74
client/src/style/pages/items.scss
View File

@@ -1,12 +1,11 @@
.page-form--item{
.page-form--item {
$self: '.page-form';
padding: 20px;
#{$self}__header{
#{$self}__header {
padding: 0;
}
#{$self}__primary-section{
#{$self}__primary-section {
overflow: hidden;
padding-top: 5px;
margin-bottom: 20px;
@@ -15,89 +14,88 @@
max-width: 1000px;
}
#{$self}__body{
.bp3-form-group{
#{$self}__body {
.bp3-form-group {
max-width: 500px;
margin-bottom: 14px;
&.bp3-inline{
.bp3-label{
&.bp3-inline {
.bp3-label {
min-width: 140px;
}
}
.bp3-form-content{
.bp3-form-content {
width: 100%;
}
}
h3{
h3 {
font-weight: 500;
font-size: 14px;
margin-bottom: 1.4rem;
}
.bp3-control{
h3{
.bp3-control {
h3 {
display: inline;
margin-bottom: 0;
}
}
.form-group--sellable,
.form-group--purchasable{
.form-group--purchasable {
margin-bottom: 1rem;
}
}
#{$self}__section{
#{$self}__section {
max-width: 850px;
margin-bottom: 1rem;
.bp3-form-group{
.bp3-form-group {
max-width: 400px;
}
&--selling-cost{
&--selling-cost {
border-bottom: 1px solid #eaeaea;
margin-bottom: 1.25rem;
padding-bottom: 0.25rem;
}
}
#{$self}__floating-actions{
#{$self}__floating-actions {
margin-left: -40px;
margin-right: -40px;
.form-group--active{
.form-group--active {
display: inline-block;
margin: 0;
margin-left: 40px;
}
}
.bp3-tooltip-indicator{
.bp3-tooltip-indicator {
border-bottom: 1px dashed #d0d0d0;
}
}
.dashboard__insider--items-list{
.bigcapital-datatable{
.table{
.tbody{
.item_type.td{
.bp3-tag{
.dashboard__insider--items-list {
.bigcapital-datatable {
.table {
.tbody {
.item_type.td {
.bp3-tag {
font-size: 13px;
}
}
.tr.inactive .td {
color: #646b82;
&.normal .#{$ns}-icon {
color: #9eaab6;
}
}
}
}
}
}
}