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

feat: content & item detail.

Browse Source
This commit is contained in:
elforjani3
2021-08-23 19:31:02 +02:00
parent f5fd2aa324
commit 1150cb48da
25 changed files with 535 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/containers/Alerts/Customers/CustomerDeleteAlert.js
View File

@@ -20,7 +20,7 @@ function CustomerDeleteAlert({
// #withAlertStoreConnect
isOpen,
payload: { customerId },
payload: { contactId },
// #withAlertActions
closeAlert,
@@ -38,7 +38,7 @@ function CustomerDeleteAlert({
// handle confirm delete customer.
const handleConfirmDeleteCustomer = useCallback(() => {
deleteCustomerMutate(customerId)
deleteCustomerMutate(contactId)
.then(() => {
AppToaster.show({
message: intl.get('the_customer_has_been_deleted_successfully'),
@@ -51,7 +51,7 @@ function CustomerDeleteAlert({
.finally(() => {
closeAlert(name);
});
}, [deleteCustomerMutate, customerId, closeAlert, name]);
}, [deleteCustomerMutate, contactId, closeAlert, name]);
return (
<Alert

6
client/src/containers/Alerts/Vendors/VendorDeleteAlert.js
View File

@@ -20,7 +20,7 @@ function VendorDeleteAlert({
// #withAlertStoreConnect
isOpen,
payload: { vendorId },
payload: { contactId },
// #withAlertActions
closeAlert,
@@ -35,7 +35,7 @@ function VendorDeleteAlert({
// Handle confirm delete vendor.
const handleConfirmDeleteVendor = useCallback(() => {
deleteVendorMutate(vendorId)
deleteVendorMutate(contactId)
.then(() => {
AppToaster.show({
message: intl.get('the_vendor_has_been_deleted_successfully'),
@@ -54,7 +54,7 @@ function VendorDeleteAlert({
.finally(() => {
closeAlert(name);
});
}, [deleteVendorMutate, name, closeAlert, vendorId]);
}, [deleteVendorMutate, name, closeAlert, contactId]);
return (
<Alert

16
client/src/containers/Customers/CustomersLanding/CustomersTable.js
View File

@@ -11,6 +11,7 @@ import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { useCustomersListContext } from './CustomersListProvider';
import { ActionsMenu, useCustomersTableColumns } from './components';
@@ -29,6 +30,10 @@ function CustomersTable({
// #withAlerts
openAlert,
// #withDrawerActions
openDrawer,
// #withDialogActions
openDialog,
}) {
@@ -59,8 +64,8 @@ function CustomersTable({
);
// Handles the customer delete action.
const handleCustomerDelete = (customer) => {
openAlert('customer-delete', { customerId: customer.id });
const handleCustomerDelete = ({ id }) => {
openAlert('customer-delete', { contactId: id });
};
// Handle the customer edit action.
@@ -85,6 +90,11 @@ function CustomersTable({
openAlert('contact-activate', { contactId: id, service: contact_service });
};
// Handle view detail contact.
const handleViewDetailCustomer = ({ id }) => {
openDrawer('contact-detail-drawer', { contactId: id });
};
if (isEmptyStatus) {
return <CustomersEmptyStatus />;
}
@@ -117,6 +127,7 @@ function CustomersTable({
onDuplicate: handleContactDuplicate,
onInactivate: handleInactiveCustomer,
onActivate: handleActivateCustomer,
onViewDetails: handleViewDetailCustomer,
}}
ContextMenu={ActionsMenu}
/>
@@ -127,5 +138,6 @@ export default compose(
withAlertsActions,
withDialogActions,
withCustomersActions,
withDrawerActions,
withCustomers(({ customersTableState }) => ({ customersTableState })),
)(CustomersTable);

10
client/src/containers/Customers/CustomersLanding/components.js
View File

@@ -18,13 +18,21 @@ import intl from 'react-intl-universal';
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete, onDuplicate, onInactivate, onActivate },
payload: {
onEdit,
onDelete,
onDuplicate,
onInactivate,
onActivate,
onViewDetails,
},
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)}
/>
<MenuDivider />
<MenuItem

18
client/src/containers/Drawers/ContactDetailDrawer/ContactDetail.js Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import ContactDetailActionsBar from './ContactDetailActionsBar';
import ContactDetailList from './ContactDetailList';
import { Card } from 'components';
/**
* contact detail.
*/
export default function ContactDetail() {
return (
<div className="view-detail-drawer">
<ContactDetailActionsBar />
<Card>
<ContactDetailList />
</Card>
</div>
);
}

73
client/src/containers/Drawers/ContactDetailDrawer/ContactDetailActionsBar.js Normal file
View File

@@ -0,0 +1,73 @@
import React from 'react';
import intl from 'react-intl-universal';
import { useHistory } from 'react-router-dom';
import {
Button,
NavbarGroup,
Classes,
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useContactDetailDrawerContext } from './ContactDetailDrawerProvider';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
function ContactDetailActionsBar({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const { contact, contactId } = useContactDetailDrawerContext();
const history = useHistory();
// Handle edit contact.
const onEditContact = () => {
return contactId
? (history.push(`/${contact?.contact_service}s/${contactId}/edit`),
closeDrawer('contact-detail-drawer'))
: null;
};
// Handle delete contact.
const onDeleteContact = () => {
return contactId
? (openAlert(`${contact?.contact_service}-delete`, { contactId }),
closeDrawer('contact-detail-drawer'))
: null;
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={intl.get('edit_contact', { name: contact?.contact_service })}
onClick={safeCallback(onEditContact)}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeleteContact)}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
export default compose(
withDrawerActions,
withAlertsActions,
)(ContactDetailActionsBar);

20
client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerContent.js Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import ContactDetail from './ContactDetail';
import { ContactDetailDrawerProvider } from './ContactDetailDrawerProvider';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
/**
* Contact detail drawer content.
*/
export default function ContactDetailDrawerContent({
// #ownProp
contact,
}) {
return (
<ContactDetailDrawerProvider contactId={contact}>
<ContactDetail />
</ContactDetailDrawerProvider>
);
}

36
client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { DrawerHeaderContent, DashboardInsider } from 'components';
import { useContact } from 'hooks/query';
const ContactDetailDrawerContext = React.createContext();
/**
* Contact detail provider.
*/
function ContactDetailDrawerProvider({ contactId, ...props }) {
// Handle fetch contact duplicate details.
const { data: contact, isLoading: isContactLoading } = useContact(contactId, {
enabled: !!contactId,
});
//provider.
const provider = {
contact,
contactId,
};
return (
<DashboardInsider loading={isContactLoading}>
<DrawerHeaderContent
name="contact-detail-drawer"
title={contact?.display_name}
/>
<ContactDetailDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useContactDetailDrawerContext = () =>
React.useContext(ContactDetailDrawerContext);
export { ContactDetailDrawerProvider, useContactDetailDrawerContext };

48
client/src/containers/Drawers/ContactDetailDrawer/ContactDetailList.js Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { Money } from 'components';
import intl from 'react-intl-universal';
import { useContactDetailDrawerContext } from './ContactDetailDrawerProvider';
import { DetailItem } from '../../../components/Details';
export default function ContactDetailList({}) {
const { contact } = useContactDetailDrawerContext();
return (
<div className="details-menu">
<div className="details-menu--vertical">
<DetailItem
label={intl.get('display_name')}
children={contact.display_name}
/>
<DetailItem
label={intl.get('balance')}
children={
<Money
amount={contact?.balance}
currency={contact?.currency_code}
/>
}
/>
</div>
<div className="details-menu--horizontal">
<DetailItem
label={intl.get('closing_balance')}
children={
<Money
amount={contact.closing_balance}
currency={contact?.currency_code}
/>
}
/>
<DetailItem
label={intl.get('contact_type')}
children={contact.contact_type}
/>
<DetailItem
label={intl.get('email')}
children={contact.email ? contact.email : '--'}
/>
</div>
</div>
);
}

30
client/src/containers/Drawers/ContactDetailDrawer/index.js Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import { Drawer, DrawerSuspense } from 'components';
import withDrawers from 'containers/Drawer/withDrawers';
import { compose } from 'utils';
const ContactDetailDrawerContent = React.lazy(() =>
import('./ContactDetailDrawerContent'),
);
/**
* Contact detail drawer.
*/
function ContactDetailDrawer({
name,
// #withDrawer
isOpen,
payload: { contactId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<ContactDetailDrawerContent contact={contactId} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(ContactDetailDrawer);

21
client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
import ItemDetailActionsBar from './ItemDetailActionsBar';
import ItemDetailList from './ItemDetailList';
import { Card } from 'components';
/**
* Item detail.
*/
export default function ItemDetail() {
const { itemId, item } = useItemDetailDrawerContext();
return (
<div className="view-detail-drawer">
<ItemDetailActionsBar itemId={itemId} />
<Card>
<ItemDetailList item={item} />
</Card>
</div>
);
}

71
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import {
Button,
NavbarGroup,
Classes,
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
function ItemDetailActionsBar({
itemId,
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
// Handle edit item.
const onEditItem = () => {
return itemId
? (history.push(`/items/${itemId}/edit`),
closeDrawer('item-detail-drawer'))
: null;
};
// Handle delete item.
const onDeleteItem = () => {
return itemId
? (openAlert('item-delete', { itemId }),
closeDrawer('item-detail-drawer'))
: null;
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_item'} />}
onClick={safeCallback(onEditItem)}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeleteItem)}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
export default compose(
withDrawerActions,
withAlertsActions,
)(ItemDetailActionsBar);

20
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import ItemDetail from './ItemDetail';
import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
/**
* Item detail drawer content.
*/
export default function ItemDetailDrawerContent({
// #ownProp
item,
}) {
return (
<ItemDetailDrawerProvider itemId={item}>
<ItemDetail />
</ItemDetailDrawerProvider>
);
}

32
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { DrawerHeaderContent, DashboardInsider } from 'components';
import { useItem } from 'hooks/query';
const ItemDetailDrawerContext = React.createContext();
/**
* Item detail provider
*/
function ItemDetailDrawerProvider({ itemId, ...props }) {
// Fetches the given item detail.
const { isLoading: isItemLoading, data: item } = useItem(itemId, {
enabled: !!itemId,
});
//provider.
const provider = {
item,
itemId,
};
return (
<DashboardInsider loading={isItemLoading}>
<DrawerHeaderContent name="item-detail-drawer" title={item?.name} />
<ItemDetailDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useItemDetailDrawerContext = () =>
React.useContext(ItemDetailDrawerContext);
export { ItemDetailDrawerProvider, useItemDetailDrawerContext };

49
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailList.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DetailItem } from '../../../components/Details';
export default function ItemDetailList({
item: {
name,
code,
type,
category,
sell_price_formatted,
cost_price_formatted,
cost_account,
sell_account,
},
}) {
return (
<div className="details-menu">
<div className="details-menu--vertical">
<DetailItem label={intl.get('item_name')} children={name} />
<DetailItem label={intl.get('item_code')} children={code} />
<DetailItem
label={intl.get('sell_price')}
children={sell_price_formatted}
/>
<DetailItem
label={intl.get('cost_price')}
children={cost_price_formatted}
/>
</div>
<div className="details-menu--horizontal">
<DetailItem label={intl.get('item_type')} children={type} />
<DetailItem
label={intl.get('category_name')}
children={category?.name ? category?.name : '--'}
/>
<DetailItem
label={intl.get('cost_account_id')}
children={cost_account?.name}
/>
<DetailItem
label={intl.get('sell_account_id')}
children={sell_account?.name}
/>
</div>
</div>
);
}

29
client/src/containers/Drawers/ItemDetailDrawer/index.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { Drawer, DrawerSuspense } from 'components';
import withDrawers from 'containers/Drawer/withDrawers';
import { compose } from 'utils';
const ItemDetailDrawerContent = React.lazy(() =>
import('./ItemDetailDrawerContent'),
);
/**
* Item Detail drawer.
*/
function ItemDetailDrawer({
name,
// #withDrawer
isOpen,
payload: { itemId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<ItemDetailDrawerContent item={itemId} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(ItemDetailDrawer);

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

@@ -12,6 +12,7 @@ import withItems from 'containers/Items/withItems';
import withItemsActions from 'containers/Items/withItemsActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { useItemsListContext } from './ItemsListProvider';
import { useItemsTableColumns, ItemsActionMenuList } from './components';
@@ -30,6 +31,9 @@ function ItemsDataTable({
// #withAlertsActions
openAlert,
// #withDrawerActions
openDrawer,
// #withItems
itemsTableState,
@@ -93,6 +97,11 @@ function ItemsDataTable({
history.push(`/items/new?duplicate=${id}`, { action: id });
};
// Handle view detail item.
const handleViewDetailItem = ({ id }) => {
openDrawer('item-detail-drawer', { itemId: id });
};
// Cannot continue in case the items has empty status.
if (isEmptyStatus) {
return <ItemsEmptyStatus />;
@@ -129,6 +138,7 @@ function ItemsDataTable({
onActivateItem: handleActivateItem,
onMakeAdjustment: handleMakeAdjustment,
onDuplicate: handleDuplicate,
onViewDetails: handleViewDetailItem,
}}
noResults={<T id={'there_is_no_items_in_the_table_yet'} />}
{...tableProps}
@@ -139,6 +149,7 @@ function ItemsDataTable({
export default compose(
withItemsActions,
withAlertsActions,
withDrawerActions,
withDialogActions,
withItems(({ itemsTableState }) => ({ itemsTableState })),
)(ItemsDataTable);

5
client/src/containers/Items/components.js
View File

@@ -10,7 +10,7 @@ import {
Popover,
} from '@blueprintjs/core';
import intl from 'react-intl-universal';
import { FormattedMessage as T } from 'components';
import { FormattedMessage as T } from 'components';
import { isNumber } from 'lodash';
import { Icon, Money, If } from 'components';
import { isBlank, safeCallback } from 'utils';
@@ -80,14 +80,15 @@ export function ItemsActionMenuList({
onMakeAdjustment,
onDeleteItem,
onDuplicate,
onViewDetails,
},
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={<T id={'view_details'} />}
onClick={safeCallback(onViewDetails, original)}
/>
<MenuDivider />
<MenuItem

16
client/src/containers/Vendors/VendorsLanding/VendorsTable.js
View File

@@ -12,6 +12,7 @@ import withVendorsActions from './withVendorsActions';
import withVendors from './withVendors';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
import { ActionsMenu, useVendorsTableColumns } from './components';
@@ -28,6 +29,10 @@ function VendorsTable({
// #withAlertsActions
openAlert,
// #withDrawerActions
openDrawer,
// #withDialogActions
openDialog,
}) {
@@ -66,7 +71,7 @@ function VendorsTable({
// Handle click delete vendor.
const handleDeleteVendor = ({ id }) => {
openAlert('vendor-delete', { vendorId: id });
openAlert('vendor-delete', { contactId: id });
};
// Handle contact duplicate .
@@ -75,6 +80,12 @@ function VendorsTable({
contactId: id,
});
};
// Handle view detail item.
const handleViewDetailVendor = ({ id }) => {
openDrawer('contact-detail-drawer', { contactId: id });
};
// Handle fetch data once the page index, size or sort by of the table change.
const handleFetchData = React.useCallback(
({ pageSize, pageIndex, sortBy }) => {
@@ -119,6 +130,7 @@ function VendorsTable({
onDuplicate: handleContactDuplicate,
onInactivate: handleInactiveVendor,
onActivate: handleActivateVendor,
onViewDetails: handleViewDetailVendor,
}}
/>
);
@@ -128,5 +140,7 @@ export default compose(
withVendorsActions,
withAlertsActions,
withDialogActions,
withDrawerActions,
withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
)(VendorsTable);

10
client/src/containers/Vendors/VendorsLanding/components.js
View File

@@ -17,13 +17,21 @@ import { safeCallback, firstLettersArgs } from 'utils';
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete, onDuplicate, onInactivate, onActivate },
payload: {
onEdit,
onDelete,
onDuplicate,
onInactivate,
onActivate,
onViewDetails,
},
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)}
/>
<MenuDivider />
<MenuItem