mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
feat: content & item detail.
This commit is contained in:
elforjani3
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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
30
client/src/containers/Drawers/ContactDetailDrawer/index.js
Normal 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
21
client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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
29
client/src/containers/Drawers/ItemDetailDrawer/index.js
Normal 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);
|
||||
Reference in New Issue
Block a user