feat: view details.

This commit is contained in:
elforjani3
2021-07-29 23:18:40 +02:00
parent 720dc5b7d7
commit e04ba7e030
31 changed files with 522 additions and 34 deletions

View File

@@ -7,6 +7,10 @@ import AccountDrawer from 'containers/Drawers/AccountDrawer';
import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer';
import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer';
import BillDrawer from 'containers/Drawers/BillDrawer';
import InvoiceDetailDrawer from 'containers/Drawers/InvoiceDetailDrawer';
import ReceiptDetailDrawer from 'containers/Drawers/ReceiptDetailDrawer';
import PaymentReceiveDetailDrawer from 'containers/Drawers/PaymentReceiveDetailDrawer';
import PaymentMadeDetailDrawer from 'containers/Drawers/PaymentMadeDetailDrawer';
export default function DrawersContainer() {
return (
@@ -19,6 +23,10 @@ export default function DrawersContainer() {
<ManualJournalDrawer name={'journal-drawer'} />
<ExpenseDrawer name={'expense-drawer'} />
<BillDrawer name={'bill-drawer'} />
<InvoiceDetailDrawer name={'invoice-detail-drawer'} />
<ReceiptDetailDrawer name={'receipt-detail-drawer'} />
<PaymentReceiveDetailDrawer name={'payment-receive-detail-drawer'} />
<PaymentMadeDetailDrawer name={'payment-made-detail-drawer'} />
</div>
);
}

View File

@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
import {
CreateItemCategoryFormSchema,
EditItemCategoryFormSchema,
} from './ItemCategoryForm.schema';
} from './itemCategoryForm.schema';
import withDialogActions from 'containers/Dialog/withDialogActions';
import ItemCategoryFormContent from './ItemCategoryFormContent'

View File

@@ -1,6 +1,6 @@
import React from 'react';
import 'style/components/Drawers/BillDrawer.scss';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import { BillDrawerProvider } from './BillDrawerProvider';
import BillDrawerDetails from './BillDrawerDetails';

View File

@@ -3,15 +3,21 @@ import { Tabs, Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import LocatedLandedCostTable from './LocatedLandedCostTable';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
/**
* Bill view details.
*/
export default function BillDrawerDetails() {
return (
<div className="bill-drawer">
<Tabs animate={true} large={true} selectedTabId="landed_cost">
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="landed_cost">
<Tab title={intl.get('details')} id={'details'} disabled={true} />
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable />}
/>
<Tab
title={intl.get('located_landed_cost')}
id={'landed_cost'}

View File

@@ -0,0 +1,28 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
/**
* Invoice view detail.
*/
export default function InvoiceDetail() {
return (
<div className="view-detail-drawer">
<Tabs
animate={true}
large={true}
defaultSelectedTabId="journal_entries"
renderActiveTabPanelOnly={false}
>
<Tab title={intl.get('details')} disabled={true} />
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable journal={[]} />}
/>
</Tabs>
</div>
);
}

View File

@@ -0,0 +1,20 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import InvoiceDetail from './InvoiceDetail';
import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
/**
* Invoice detail drawer content.
*/
export default function InvoiceDetailDrawerContent({
// #ownProp
invoice,
}) {
return (
<InvoiceDetailDrawerProvider invoiceId={invoice}>
<InvoiceDetail />
</InvoiceDetailDrawerProvider>
);
}

View File

@@ -0,0 +1,26 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DashboardInsider } from 'components';
const InvoiceDetailDrawerContext = React.createContext();
/**
* Invoice detail provider.
*/
function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
//provider.
const provider = {};
return (
<DashboardInsider>
<DrawerHeaderContent
name="invoice-detail-drawer"
title={intl.get('invoice_details')}
/>
<InvoiceDetailDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useInvoiceDetailDrawerContext = () =>
React.useContext(InvoiceDetailDrawerContext);
export { InvoiceDetailDrawerProvider, useInvoiceDetailDrawerContext };

View File

@@ -0,0 +1,28 @@
import React from 'react';
import { Drawer, DrawerSuspense } from 'components';
import withDrawers from 'containers/Drawer/withDrawers';
import { compose } from 'utils';
const InvoiceDetailDrawerContent = React.lazy(() =>
import('./InvoiceDetailDrawerContent'),
);
/**
* Invoice Detail drawer.
*/
function InvoiceDetailDrawer({
name,
// #withDrawer
isOpen,
payload: { invoiceId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<InvoiceDetailDrawerContent invoice={invoiceId} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(InvoiceDetailDrawer);

View File

@@ -0,0 +1,20 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import PaymentMadeDetails from './PaymentMadeDetails';
import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
/**
* Payment made detail content.
*/
export default function PaymentMadeDetailContent({
// #ownProp
paymentMade,
}) {
return (
<PaymentMadeDetailProvider paymentMadeId={paymentMade}>
<PaymentMadeDetails />
</PaymentMadeDetailProvider>
);
}

View File

@@ -0,0 +1,23 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DashboardInsider } from 'components';
const PaymentMadeDetailContext = React.createContext();
function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
//provider.
const provider = {};
return (
<DashboardInsider>
<DrawerHeaderContent
name="payment-made-detail-drawer"
title={intl.get('payment_made_details')}
/>
<PaymentMadeDetailContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const usePaymentMadeDetailContext = () =>
React.useContext(PaymentMadeDetailContext);
export { PaymentMadeDetailProvider, usePaymentMadeDetailContext };

View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
/**
* payment made view detail.
*/
export default function PaymentMadeDetails() {
return (
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
<Tab title={intl.get('details')} id={'details'} disabled={true} />
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable journal={[]} />}
/>
</Tabs>
</div>
);
}

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 PaymentMadeDetailContent = React.lazy(() =>
import('./PaymentMadeDetailContent'),
);
/**
* Payment made detail drawer.
*/
function PaymentMadeDetailDrawer({
name,
// #withDrawer
isOpen,
payload: { paymentMadeId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<PaymentMadeDetailContent paymentMade={paymentMadeId} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(PaymentMadeDetailDrawer);

View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
/**
* payment receive view detail.
*/
export default function PaymentReceiveDetail() {
return (
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
<Tab title={intl.get('details')} id={'details'} disabled={true} />
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable journal={[]} />}
/>
</Tabs>
</div>
);
}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import PaymentReceiveDetail from './PaymentReceiveDetail';
import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
/**
* Payment receive detail content.
*/
export default function PaymentReceiveDetailContent({
// #ownProp
paymentReceive,
}) {
return (
<PaymentReceiveDetailProvider paymentReceiveId={paymentReceive}>
<PaymentReceiveDetail />
</PaymentReceiveDetailProvider>
);
}

View File

@@ -0,0 +1,27 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DashboardInsider } from 'components';
const PaymentReceiveDetailContext = React.createContext();
/**
* Payment receive detail provider.
*/
function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
//provider.
const provider = {};
return (
<DashboardInsider>
<DrawerHeaderContent
name="payment-receive-detail-drawer"
title={intl.get('payment_receive_details')}
/>
<PaymentReceiveDetailContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const usePaymentReceiveDetailContext = () =>
React.useContext(PaymentReceiveDetailContext);
export { PaymentReceiveDetailProvider, usePaymentReceiveDetailContext };

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 PaymentReceiveDetailContent = React.lazy(() =>
import('./PaymentReceiveDetailContent'),
);
/**
* Payment receive detail drawer
*/
function PaymentReceiveDetailDrawer({
name,
// #withDrawer
isOpen,
payload: { paymentReceiveId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(PaymentReceiveDetailDrawer);

View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
/**
* Receipt view detail.
*/
export default function ReceiptDetail() {
return (
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
<Tab title={intl.get('details')} id={'details'} disabled={true} />
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable journal={[]} />}
/>
</Tabs>
</div>
);
}

View File

@@ -0,0 +1,20 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import ReceiptDetail from './ReceiptDetail';
import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
/**
* Receipt detail drawer content.
*/
export default function ReceiptDetailDrawerContent({
// #ownProp
receipt,
}) {
return (
<ReceiptDetailDrawerProvider receiptId={receipt}>
<ReceiptDetail />
</ReceiptDetailDrawerProvider>
);
}

View File

@@ -0,0 +1,27 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DashboardInsider } from 'components';
const ReceiptDetailDrawerContext = React.createContext();
/**
* Receipt detail provider.
*/
function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
//provider.
const provider = {};
return (
<DashboardInsider>
<DrawerHeaderContent
name="receipt-detail-drawer"
title={intl.get('receipt_details')}
/>
<ReceiptDetailDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useReceiptDetailDrawerContext = () =>
React.useContext(ReceiptDetailDrawerContext);
export { ReceiptDetailDrawerProvider, useReceiptDetailDrawerContext };

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 ReceiptDetailDrawerContent = React.lazy(() =>
import('./ReceiptDetailDrawerContent'),
);
/**
* Receipt Detail drawer.
*/
function ReceiptDetailDrawer({
name,
// #withDrawer
isOpen,
payload: { receiptId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<DrawerSuspense>
<ReceiptDetailDrawerContent receipt={receiptId} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(ReceiptDetailDrawer);

View File

@@ -0,0 +1,51 @@
import React from 'react';
import { DataTable, Card } from 'components';
import intl from 'react-intl-universal';
import moment from 'moment';
/**
* Journal entries table.
*/
export default function JournalEntriesTable({ journal }) {
const columns = React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: 'date',
// accessor: (r) => moment(new Date()).format('YYYY MMM DD'),
width: 150,
},
{
Header: intl.get('account_name'),
accessor: 'account_name',
width: 150,
},
{
Header: intl.get('contact'),
accessor: 'contact',
width: 150,
},
{
Header: intl.get('credit'),
accessor: 'credit',
width: 100,
},
{
Header: intl.get('debit'),
accessor: 'debit',
width: 100,
},
],
[],
);
return (
<Card>
<DataTable
columns={columns}
data={journal}
className={'datatable--journal-entries'}
/>
</Card>
);
}

View File

@@ -12,6 +12,7 @@ import withPaymentMadeActions from './withPaymentMadeActions';
import withPaymentMade from './withPaymentMade';
import withSettings from 'containers/Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { usePaymentMadesTableColumns, ActionsMenu } from './components';
import { usePaymentMadesListContext } from './PaymentMadesListProvider';
@@ -27,6 +28,9 @@ function PaymentMadesTable({
// #withAlerts
openAlert,
// #withDrawerActions
openDrawer,
}) {
// Payment mades table columns.
const columns = usePaymentMadesTableColumns();
@@ -53,6 +57,11 @@ function PaymentMadesTable({
openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
};
// Handle view detail payment made.
const handleViewDetailPaymentMade = ({ id }) => {
openDrawer('payment-receive-detail-drawer', { paymentMadeId: id });
};
// Handle datatable fetch data once the table state change.
const handleDataTableFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
@@ -89,6 +98,7 @@ function PaymentMadesTable({
payload={{
onEdit: handleEditPaymentMade,
onDelete: handleDeletePaymentMade,
onViewDetails: handleViewDetailPaymentMade,
}}
/>
);
@@ -98,6 +108,7 @@ export default compose(
withPaymentMadeActions,
withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
withAlertsActions,
withDrawerActions,
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),

View File

@@ -26,15 +26,14 @@ export function AmountAccessor(row) {
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
payload: { onEdit, onDelete, onViewDetails },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)}
/>
<MenuDivider />
<MenuItem
@@ -70,8 +69,6 @@ export function ActionsCell(props) {
* Retrieve payment mades table columns.
*/
export function usePaymentMadesTableColumns() {
return React.useMemo(
() => [
{

View File

@@ -79,6 +79,12 @@ function InvoicesDataTable({
const handleQuickPaymentReceive = ({ id }) => {
openDialog('quick-payment-receive', { invoiceId: id });
};
// Handle view detail invoice.
const handleViewDetailInvoice = ({ id }) => {
openDrawer('invoice-detail-drawer', { invoiceId: id });
};
// Handles fetch data once the table state change.
const handleDataTableFetchData = useCallback(
({ pageSize, pageIndex, sortBy }) => {
@@ -123,6 +129,7 @@ function InvoicesDataTable({
onEdit: handleEditInvoice,
onDrawer: handleDrawerInvoice,
onQuick: handleQuickPaymentReceive,
onViewDetails: handleViewDetailInvoice,
baseCurrency,
}}
/>

View File

@@ -95,7 +95,7 @@ export const handleDeleteErrors = (errors) => {
};
export function ActionsMenu({
payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick, onViewDetails },
row: { original },
}) {
return (
@@ -103,6 +103,7 @@ export function ActionsMenu({
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)}
/>
<MenuDivider />
<MenuItem

View File

@@ -62,6 +62,11 @@ function PaymentReceivesDataTable({
openDrawer('payment-receive-drawer', { paymentReceiveId: id });
};
// Handle view detail payment receive..
const handleViewDetailPaymentReceive = ({ id }) => {
openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
};
// Handle datatable fetch once the table's state changing.
const handleDataTableFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
@@ -103,6 +108,7 @@ function PaymentReceivesDataTable({
onDelete: handleDeletePaymentReceive,
onEdit: handleEditPaymentReceive,
onDrawer: handleDrawerPaymentReceive,
onViewDetails: handleViewDetailPaymentReceive,
}}
/>
);

View File

@@ -19,15 +19,14 @@ import { safeCallback } from 'utils';
*/
export function ActionsMenu({
row: { original: paymentReceive },
payload: { onEdit, onDelete, onDrawer },
payload: { onEdit, onDelete, onDrawer, onViewDetails },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, paymentReceive)}
/>
<MenuDivider />
<MenuItem
@@ -82,8 +81,6 @@ export function ActionsCell(props) {
* Retrieve payment receives columns.
*/
export function usePaymentReceivesColumns() {
return React.useMemo(
() => [
{
@@ -128,7 +125,7 @@ export function usePaymentReceivesColumns() {
accessor: 'reference_no',
width: 140,
className: 'reference_no',
}
},
],
[],
);

View File

@@ -60,14 +60,19 @@ function ReceiptsDataTable({
openAlert('receipt-delete', { receiptId: receipt.id });
};
// Handle drawer receipts.
const handleDrawerReceipt = ({ id }) => {
openDrawer('receipt-drawer', { receiptId: id });
};
// Handles receipt close action.
const handleCloseReceipt = (receipt) => {
openAlert('receipt-close', { receiptId: receipt.id });
};
// Handle drawer receipts.
const handleDrawerReceipt = ({ id }) => {
openDrawer('receipt-drawer', { receiptId: id });
// Handle view detail receipt.
const handleViewDetailReceipt = ({ id }) => {
openDrawer('receipt-detail-drawer', { receiptId: id });
};
// Handles the datable fetch data once the state changing.
@@ -112,6 +117,7 @@ function ReceiptsDataTable({
onDelete: handleDeleteReceipt,
onClose: handleCloseReceipt,
onDrawer: handleDrawerReceipt,
onViewDetails: handleViewDetailReceipt,
baseCurrency,
}}
/>

View File

@@ -16,16 +16,15 @@ import { Choose, Money, Icon, If } from 'components';
import moment from 'moment';
export function ActionsMenu({
payload: { onEdit, onDelete, onClose, onDrawer },
payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails },
row: { original: receipt },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, receipt)}
/>
<MenuDivider />
<MenuItem
@@ -94,8 +93,6 @@ export function StatusAccessor(receipt) {
* Retrieve receipts table columns.
*/
export function useReceiptsTableColumns() {
return React.useMemo(
() => [
{

View File

@@ -1166,5 +1166,11 @@
"From transaction": "From transaction",
"Landed": "Landed",
"This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
"Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?"
"Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
"journal_entries":"Journal entries",
"contact":"Contact",
"invoice_details":"Invoice details",
"receipt_details":"Receipt details",
"payment_receive_details":"Payment receive details",
"payment_made_details":"Payment made details"
}

View File

@@ -1,11 +1,11 @@
@import '../../Base.scss';
@import '../../../Base.scss';
.bill-drawer {
.view-detail-drawer {
.bp3-tabs {
.bp3-tab-list {
position: relative;
background-color: #FFF;
background-color: #fff;
&:before {
content: '';
position: absolute;
@@ -31,10 +31,10 @@
}
}
.bp3-tab-panel{
.bp3-tab-panel {
margin-top: 0;
.card{
.card {
margin: 15px;
}
}
@@ -42,7 +42,6 @@
.datatable--landed-cost-transactions {
.table {
.tbody,
.tbody-inner {
height: auto;
@@ -55,11 +54,11 @@
.tr .td {
padding: 0.6rem;
&.amount{
&.amount {
font-weight: 600;
}
}
}
}
}
}
}