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

feat: item read-only details drawer style.

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-24 19:40:49 +02:00
parent 467ac5965e
commit 8a3ab96c53
12 changed files with 177 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,21 +0,0 @@
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>
);
}

31
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
View File

@@ -9,38 +9,39 @@ import {
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
import { compose } from 'utils';
/**
* Item action-bar of readonly details drawer.
*/
function ItemDetailActionsBar({
itemId,
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
// Item readonly drawer context.
const { itemId } = useItemDetailDrawerContext();
const history = useHistory();
// Handle edit item.
const onEditItem = () => {
return itemId
? (history.push(`/items/${itemId}/edit`),
closeDrawer('item-detail-drawer'))
: null;
const handleEditItem = () => {
history.push(`/items/${itemId}/edit`);
closeDrawer('item-detail-drawer');
};
// Handle delete item.
const onDeleteItem = () => {
return itemId
? (openAlert('item-delete', { itemId }),
closeDrawer('item-detail-drawer'))
: null;
const handleDeleteItem = () => {
openAlert('item-delete', { itemId });
};
return (
@@ -50,7 +51,7 @@ function ItemDetailActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_item'} />}
onClick={safeCallback(onEditItem)}
onClick={handleEditItem}
/>
<NavbarDivider />
<Button
@@ -58,7 +59,7 @@ function ItemDetailActionsBar({
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeleteItem)}
onClick={handleDeleteItem}
/>
</NavbarGroup>
</DashboardActionsBar>

10
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js
View File

@@ -1,8 +1,8 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import 'style/components/Drawers/ItemDrawer.scss';
import ItemDetail from './ItemDetail';
import ItemContentDetails from './ItemContentDetails';
import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
/**
@@ -10,11 +10,11 @@ import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
*/
export default function ItemDetailDrawerContent({
// #ownProp
item,
itemId,
}) {
return (
<ItemDetailDrawerProvider itemId={item}>
<ItemDetail />
<ItemDetailDrawerProvider itemId={itemId}>
<ItemContentDetails />
</ItemDetailDrawerProvider>
);
}

1
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
View File

@@ -17,6 +17,7 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
const provider = {
item,
itemId,
isItemLoading,
};
return (

80
client/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import classNames from 'classnames';
import { If, DetailsMenu, DetailItem } from 'components';
import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
/**
* Item header drawer of readonly details.
*/
export default function ItemDetailHeader() {
const { item } = useItemDetailDrawerContext();
return (
<div class="item-drawer__content">
<DetailsMenu direction={'vertical'}>
<DetailItem
name={'name'}
label={intl.get('item_name')}
children={item.name}
/>
<DetailItem
label={intl.get('sell_price')}
children={item.sell_price_formatted}
/>
<DetailItem
label={intl.get('cost_price')}
children={item.cost_price_formatted}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('item_type')} children={item.type} />
<DetailItem
label={intl.get('item_code')}
children={defaultTo(item.code, '-')}
/>
<If condition={item.type === 'inventory'}>
<DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
<span
className={classNames({
mines: item.quantity_on_hand <= 0,
plus: item.quantity_on_hand > 0,
})}
>
{defaultTo(item.quantity_on_hand, '-')}
</span>
</DetailItem>
</If>
<DetailItem
label={intl.get('category_name')}
children={defaultTo(item.category?.name, '-')}
/>
<DetailItem
label={intl.get('cost_account_id')}
children={defaultTo(item.cost_account?.name, '-')}
/>
<If condition={item.type === 'inventory'}>
<DetailItem
label={intl.get('inventory_account')}
children={defaultTo(item?.inventory_account?.name, '-')}
/>
</If>
<DetailItem
label={intl.get('sell_account_id')}
children={defaultTo(item?.sell_account?.name, '-')}
/>
<DetailItem
label={intl.get('item.sell_description')}
children={defaultTo(item.sell_description, '-')}
/>
<DetailItem
label={intl.get('item.purchase_description')}
children={defaultTo(item.cost_description, '-')}
/>
</DetailsMenu>
</div>
);
}

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

@@ -1,49 +0,0 @@
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>
);
}

2
client/src/containers/Drawers/ItemDetailDrawer/index.js
View File

@@ -21,7 +21,7 @@ function ItemDetailDrawer({
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<ItemDetailDrawerContent item={itemId} />
<ItemDetailDrawerContent itemId={itemId} />
</DrawerSuspense>
</Drawer>
);

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

@@ -9,12 +9,14 @@ function ItemUniversalSearchSelectComponent({
// #ownProps
resourceType,
resourceId,
onAction,
// #withDrawerActions
openDrawer,
}) {
if (resourceType === RESOURCES_TYPES.ITEM) {
openDrawer('item-detail-drawer', { itemId: resourceId });
onAction && onAction();
}
return null;
}
@@ -29,6 +31,7 @@ export const ItemUniversalSearchSelectAction = withDrawerActions(
* @returns
*/
const transfromItemsToSearch = (item) => ({
id: item.id,
text: item.name,
subText: item.code,
label: item.type,

4
client/src/lang/en/index.json
View File

@@ -1209,5 +1209,7 @@
"invoice_preview.dialog.title": "Invoice PDF Preview",
"estimate_preview.dialog.title":"Estimate PDF Preview",
"receipt_preview.dialog.title":"Receipt PDF Preview",
"edit_contact":"Edit {name}"
"edit_contact":"Edit {name}",
"item.sell_description": "Sell description",
"item.purchase_description": "Purchase description"
}

1
client/src/style/components/Details.scss
View File

@@ -7,6 +7,7 @@
.detail-item{
flex-direction: column;
flex-grow: 1;
&__content{
margin: 5px 0;

45
client/src/style/components/Drawers/ItemDrawer.scss Normal file
View File

@@ -0,0 +1,45 @@
.item-drawer {
.card {
margin: 15px;
padding: 22px 15px;
}
&__content {
.detail-item--name {
width: 30%;
.detail-item__content {
font-weight: 600;
}
}
.detail-item--quantity {
.detail-item__content {
font-weight: 600;
.mines {
color: #c23030;
}
}
}
.details-menu--vertical {
padding-bottom: 15px;
border-bottom: 1px solid #e2e2e2;
}
.details-menu--horizantal {
.detail-item:not(:first-of-type) {
margin-top: 16px;
}
.detail-item__label {
min-width: 180px;
}
}
}
}