From 3a9f3c0e04fb4d7165e16d2fb92bae80b707e94a Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Tue, 27 Apr 2021 16:18:44 +0200 Subject: [PATCH] feat: drawer. --- client/src/components/Drawer/Drawer.js | 11 +- .../src/components/Drawer/DrawerSuspense.js | 12 +- client/src/components/DrawersContainer.js | 6 + client/src/lang/en/index.js | 11 +- client/src/static/json/icons.js | 7 ++ .../style/components/Drawer/ViewDetails.scss | 117 ++++++++++++++++++ 6 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 client/src/style/components/Drawer/ViewDetails.scss diff --git a/client/src/components/Drawer/Drawer.js b/client/src/components/Drawer/Drawer.js index 4d5f35214..07832c16d 100644 --- a/client/src/components/Drawer/Drawer.js +++ b/client/src/components/Drawer/Drawer.js @@ -2,11 +2,18 @@ import React from 'react'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { Position, Drawer } from '@blueprintjs/core'; -export default function ({ children, isOpen, isClose, drawerProps }) { +export default function ({ + title = , + children, + isOpen, + isClose, + drawerProps, +}) { + return ( } + title={title} position={Position.RIGHT} canOutsideClickClose={true} canEscapeKeyClose={true} diff --git a/client/src/components/Drawer/DrawerSuspense.js b/client/src/components/Drawer/DrawerSuspense.js index 3c3141016..c6d1fddf0 100644 --- a/client/src/components/Drawer/DrawerSuspense.js +++ b/client/src/components/Drawer/DrawerSuspense.js @@ -1,6 +1,14 @@ import React, { Suspense } from 'react'; -import { Spinner } from '@blueprintjs/core'; +import { Spinner, Classes } from '@blueprintjs/core'; + +function LoadingContent() { + return ( +
+ +
+ ); +} export default function DrawerSuspense({ children }) { - return }>{children}; + return }>{children}; } diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js index e86c659cb..177101057 100644 --- a/client/src/components/DrawersContainer.js +++ b/client/src/components/DrawersContainer.js @@ -3,6 +3,9 @@ import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateD import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer'; import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer'; import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer'; +import AccountDrawer from 'containers/Drawers/AccountDrawer'; +import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer'; +import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer'; export default function DrawersContainer() { return ( @@ -11,6 +14,9 @@ export default function DrawersContainer() { + + + ); } diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 860014a3e..6f1600660 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -1041,7 +1041,7 @@ export default { purchases_by_items: 'Purchases by items', quantity_purchased: 'Quantity purchased', purchase_amount: 'Purchase amount', - average_price: 'Average price', + average_price: 'Average price', sales_by_items: 'Sales by items', sold_quantity: 'Sold quantity', sold_amount: 'Sold amount', @@ -1049,5 +1049,12 @@ export default { asset_value: 'Asset value', average: 'Average', inventory_valuation: 'Inventory valuation', - payable_accounts_should_assign_with_vendors: 'Payable accounts should assign with vendors.' + payable_accounts_should_assign_with_vendors: + 'Payable accounts should assign with vendors.', + account_paper: 'Account Paper', + transaction_date: 'Transaction date', + transaction_type: 'Transaction type', + running_balance: 'Running Balance', + account_normal:'Account normal', + published_at:'Published at', }; diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js index 6d90c177e..4d4b6d31f 100644 --- a/client/src/static/json/icons.js +++ b/client/src/static/json/icons.js @@ -437,4 +437,11 @@ export default { ], viewBox: '0 0 24 24', }, + + 'trash-18': { + path: [ + 'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z', + ], + viewBox: '0 0 24 24', + }, }; diff --git a/client/src/style/components/Drawer/ViewDetails.scss b/client/src/style/components/Drawer/ViewDetails.scss new file mode 100644 index 000000000..2a71ec9d8 --- /dev/null +++ b/client/src/style/components/Drawer/ViewDetails.scss @@ -0,0 +1,117 @@ +.journal-drawer, +.expense-drawer { + background: #f5f5f5; + + &__content { + display: flex; + flex-direction: column; + margin: 15px; + padding: 15px; + border: 1px solid #d2dce2; + box-shadow: 1px 1px #fbf8f8; + background-color: #ffffff; + min-height: 508px; + + &--header { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin: 15px 0 20px; + font-size: 14px; + // color: #333333; + color: #666666; + > div { + flex-grow: 1; + span { + display: block; + color: #666666; + font-weight: 500; + margin: 10px 0; + } + } + .info { + flex: 0 1 25%; + padding-left: 2%; + margin: 10px 0; + } + .balance { + font-size: 26px; + font-weight: 500; + color: #0f1118; + } + } + + &--table { + flex-grow: 1; + flex-shrink: 0; + .table { + color: #666666; + font-size: 14px; + .thead .tr .th .resizer { + display: none; + } + .thead .th { + color: #222222; + border-bottom: 1px solid #000000; + } + .thead .th, + .tbody .tr .td { + background: transparent; + padding: 0.8rem 0.5rem; + } + } + .desc { + margin: 20px 0 60px; + + // margin: 20px 0; + > b { + color: #2f2f2f; + } + } + } + + &--footer { + display: flex; + flex-direction: column; + align-items: flex-end; + color: #666666; + .wrapper > div { + display: flex; + border-top: 1px solid #000000; + border-bottom: 1px solid #000000; + padding: 0.2rem; + span, + p { + margin: 10px 50px 5px 0px; + } + span { + color: #333333; + flex-grow: 1; + font-weight: 500; + } + } + } + } +} + +.bp3-drawer.bp3-position-right { + bottom: 0; + right: 0; + top: 0; + overflow: auto; + height: 100%; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + + .bp3-drawer-header { + margin-bottom: 2px; + box-shadow: (0, 0, 0); + background-color: #6a7993; + .bp3-heading, + .bp3-icon { + color: white; + } + } +}