From 71f9fa47d4f84b00f3d2fdaa5f0d59122fd552ca Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 26 Sep 2021 21:02:53 +0200 Subject: [PATCH] BiG-5: Complete, add switch small and medium table row size. --- src/components/AvaterCell.js | 10 ++++ src/components/index.js | 6 +- .../ManualJournalActionsBar.js | 2 +- .../ManualJournalsDataTable.js | 8 +++ .../Accounting/JournalsLanding/utils.js | 2 + src/containers/Accounts/AccountsActionsBar.js | 24 +++++++- src/containers/Accounts/AccountsDataTable.js | 10 +++- .../Customers/CustomerBulkDeleteAlert.js | 2 +- .../CustomersLanding/CustomersActionsBar.js | 10 ++-- .../CustomersLanding/CustomersTable.js | 8 +++ .../Customers/CustomersLanding/components.js | 24 ++------ src/containers/Expenses/ExpenseForm/utils.js | 13 ++++- .../ExpensesLanding/ExpenseActionsBar.js | 2 +- .../ExpensesLanding/ExpenseDataTable.js | 8 +++ .../ItemsCategoryActionsBar.js | 2 +- .../Purchases/Bills/BillForm/BillForm.js | 12 ++++ .../Bills/BillsLanding/BillsActionsBar.js | 6 +- .../Bills/BillsLanding/BillsTable.js | 8 +++ .../PaymentsLanding/PaymentMadeActionsBar.js | 2 +- .../PaymentsLanding/PaymentMadesTable.js | 8 +++ .../EstimatesLanding/EstimatesActionsBar.js | 2 +- .../EstimatesLanding/EstimatesDataTable.js | 8 +++ .../InvoicesLanding/InvoicesActionsBar.js | 2 +- .../InvoicesLanding/InvoicesDataTable.js | 8 +++ .../Invoices/InvoicesLanding/components.js | 1 + .../PaymentReceiveActionsBar.js | 2 +- .../PaymentsLanding/PaymentReceivesTable.js | 8 +++ .../ReceiptsLanding/ReceiptActionsBar.js | 2 +- .../Receipts/ReceiptsLanding/ReceiptsTable.js | 8 +++ src/containers/Settings/withSettings.js | 3 + .../VendorsLanding/VendorActionsBar.js | 8 +-- .../Vendors/VendorsLanding/VendorsTable.js | 8 +++ .../Vendors/VendorsLanding/components.js | 4 +- src/store/settings/settings.reducer.js | 34 +++++++++-- src/style/pages/Accounts/List.scss | 12 +++- src/style/pages/Bills/List.scss | 3 - src/style/pages/Customers/List.scss | 50 +++++++++------- src/style/pages/Expense/List.scss | 6 +- src/style/pages/ManualJournal/List.scss | 6 +- src/style/pages/PaymentMade/List.scss | 20 ++----- src/style/pages/PaymentReceive/List.scss | 20 ++----- src/style/pages/SaleEstimate/List.scss | 25 ++------ src/style/pages/SaleInvoice/List.scss | 48 +++++++-------- src/style/pages/SaleReceipt/List.scss | 20 ++----- src/style/pages/Vendors/List.scss | 58 ++++++++++--------- 45 files changed, 337 insertions(+), 196 deletions(-) create mode 100644 src/components/AvaterCell.js diff --git a/src/components/AvaterCell.js b/src/components/AvaterCell.js new file mode 100644 index 000000000..189042a61 --- /dev/null +++ b/src/components/AvaterCell.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { firstLettersArgs } from 'utils'; + +export default function AvatarCell({ row: { original }, size }) { + return ( + + {firstLettersArgs(original?.display_name)} + + ); +} diff --git a/src/components/index.js b/src/components/index.js index 836e7706f..4c93d1628 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -58,6 +58,7 @@ import AccountsSuggestField from './AccountsSuggestField'; import MaterialProgressBar from './MaterialProgressBar'; import { MoneyFieldCell } from './DataTableCells'; import Card from './Card'; +import AvaterCell from './AvaterCell'; import { ItemsMultiSelect } from './Items'; @@ -71,13 +72,13 @@ export * from './PdfPreview'; export * from './Details'; export * from './Drawer/DrawerInsider'; export * from './Drawer/DrawerMainTabs'; -export * from './TotalLines/index' +export * from './TotalLines/index'; export * from './Alert'; export * from './Subscriptions'; export * from './Dashboard'; export * from './Drawer'; export * from './Forms'; -export * from './MultiSelectTaggable' +export * from './MultiSelectTaggable'; export * from './Utils/FormatNumber'; export * from './Utils/FormatDate'; @@ -150,4 +151,5 @@ export { MoneyFieldCell, ItemsMultiSelect, Card, + AvaterCell, }; diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js index c75fc1a57..a3f65be13 100644 --- a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js +++ b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js @@ -73,7 +73,7 @@ function ManualJournalActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('manual_journal', 'tableSize', size); + addSetting('manualJournals', 'tableSize', size); }; return ( diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js b/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js index 4b5efad04..7e2da9537 100644 --- a/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js +++ b/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js @@ -13,6 +13,7 @@ import withManualJournals from './withManualJournals'; import withManualJournalsActions from './withManualJournalsActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../Settings/withSettings'; import { useManualJournalsContext } from './ManualJournalsListProvider'; import { useMemorizedColumnsWidths } from 'hooks'; @@ -38,6 +39,9 @@ function ManualJournalsDataTable({ // #ownProps onSelectedRowsChange, + + // #withSettings + manualJournalsTableSize, }) { // Manual journals context. const { @@ -125,6 +129,7 @@ function ManualJournalsDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={manualJournalsTableSize} payload={{ onDelete: handleDeleteJournal, onPublish: handlePublishJournal, @@ -143,4 +148,7 @@ export default compose( })), withAlertsActions, withDrawerActions, + withSettings(({ manualJournalsSettings }) => ({ + manualJournalsTableSize: manualJournalsSettings?.tableSize, + })), )(ManualJournalsDataTable); diff --git a/src/containers/Accounting/JournalsLanding/utils.js b/src/containers/Accounting/JournalsLanding/utils.js index 1a6dc19cb..d493958c2 100644 --- a/src/containers/Accounting/JournalsLanding/utils.js +++ b/src/containers/Accounting/JournalsLanding/utils.js @@ -37,6 +37,7 @@ export const useManualJournalsColumns = () => { className: 'journal_number', width: 100, clickable: true, + textOverview: true, }, { id: 'journal_type', @@ -44,6 +45,7 @@ export const useManualJournalsColumns = () => { accessor: 'journal_type', width: 110, clickable: true, + textOverview: true, }, { id: 'status', diff --git a/src/containers/Accounts/AccountsActionsBar.js b/src/containers/Accounts/AccountsActionsBar.js index 3e85b13d5..e96d69c8a 100644 --- a/src/containers/Accounts/AccountsActionsBar.js +++ b/src/containers/Accounts/AccountsActionsBar.js @@ -17,7 +17,7 @@ import { If, DashboardActionViewsList, DashboardFilterButton, - DashboardRowsHeightButton + DashboardRowsHeightButton, } from 'components'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; @@ -28,7 +28,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions'; import withAccounts from 'containers/Accounts/withAccounts'; import withAlertActions from 'containers/Alert/withAlertActions'; import withAccountsTableActions from './withAccountsTableActions'; - +import withSettings from '../Settings/withSettings'; +import withSettingsActions from '../Settings/withSettingsActions'; import { compose } from 'utils'; /** @@ -51,6 +52,12 @@ function AccountsActionsBar({ // #ownProps onFilterChanged, + + // #withSettings + accountsTableSize, + + // #withSettingsActions + addSetting, }) { const { resourceViews, fields } = useAccountsChartContext(); @@ -94,6 +101,10 @@ function AccountsActionsBar({ refresh(); }; + // Handle table row size change. + const handleTableRowSizeChange = (size) => { + addSetting('accounts', 'tableSize', size); + }; return ( @@ -167,7 +178,10 @@ function AccountsActionsBar({ text={} /> - + } @@ -189,10 +203,14 @@ function AccountsActionsBar({ export default compose( withDialogActions, withAlertActions, + withSettingsActions, withAccounts(({ accountsSelectedRows, accountsTableState }) => ({ accountsSelectedRows, accountsInactiveMode: accountsTableState.inactiveMode, accountsFilterConditions: accountsTableState.filterRoles, })), + withSettings(({ accountsSettings }) => ({ + accountsTableSize: accountsSettings.tableSize, + })), withAccountsTableActions, )(AccountsActionsBar); diff --git a/src/containers/Accounts/AccountsDataTable.js b/src/containers/Accounts/AccountsDataTable.js index e004d501d..8d12404ee 100644 --- a/src/containers/Accounts/AccountsDataTable.js +++ b/src/containers/Accounts/AccountsDataTable.js @@ -10,6 +10,7 @@ import { TABLES } from 'common/tables'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; +import withSettings from '../Settings/withSettings'; import { useAccountsChartContext } from './AccountsChartProvider'; import { useMemorizedColumnsWidths } from '../../hooks'; @@ -30,6 +31,9 @@ function AccountsDataTable({ // #withDrawerActions openDrawer, + + // #withSettings + accountsTableSize, }) { const { isAccountsLoading, isAccountsFetching, accounts } = useAccountsChartContext(); @@ -102,11 +106,12 @@ function AccountsDataTable({ TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} // #TableVirtualizedListRows props. - vListrowHeight={42} + vListrowHeight={accountsTableSize == 'small' ? 40 : 42} vListOverscanRowCount={0} onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={accountsTableSize} payload={{ onEdit: handleEditAccount, onDelete: handleDeleteAccount, @@ -123,4 +128,7 @@ export default compose( withAlertsActions, withDrawerActions, withDialogActions, + withSettings(({ accountsSettings }) => ({ + accountsTableSize: accountsSettings.tableSize, + })), )(AccountsDataTable); diff --git a/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js b/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js index 7b71469ac..2dc6b0042 100644 --- a/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js +++ b/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js @@ -31,7 +31,7 @@ function CustomerBulkDeleteAlert({ closeAlert(name); }; - console.log(customersIds, 'EE'); + // Handle confirm customers bulk delete. const handleConfirmBulkDelete = useCallback(() => { diff --git a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js index f90fd24fa..c8ed0fdb6 100644 --- a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js +++ b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js @@ -86,10 +86,10 @@ function CustomerActionsBar({ const handleRefreshBtnClick = () => { refresh(); }; - + // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('customer', 'tableSize', size); + addSetting('custoemrs', 'tableSize', size); }; return ( @@ -177,8 +177,8 @@ export default compose( accountsInactiveMode: customersTableState.inactiveMode, customersFilterConditions: customersTableState.filterRoles, })), - // withSettings(({ }) => ({ - // customersTableSize: - // })), + withSettings(({ customersSettings }) => ({ + customersTableSize: customersSettings?.tableSize, + })), withAlertActions, )(CustomerActionsBar); diff --git a/src/containers/Customers/CustomersLanding/CustomersTable.js b/src/containers/Customers/CustomersLanding/CustomersTable.js index 317468215..7619936ac 100644 --- a/src/containers/Customers/CustomersLanding/CustomersTable.js +++ b/src/containers/Customers/CustomersLanding/CustomersTable.js @@ -14,6 +14,7 @@ import withCustomersActions from './withCustomersActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../Settings/withSettings'; import { useCustomersListContext } from './CustomersListProvider'; import { useMemorizedColumnsWidths } from 'hooks'; @@ -38,6 +39,9 @@ function CustomersTable({ // #withDialogActions openDialog, + + // #withSettings + customersTableSize, }) { const history = useHistory(); @@ -135,6 +139,7 @@ function CustomersTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={customersTableSize} payload={{ onDelete: handleCustomerDelete, onEdit: handleCustomerEdit, @@ -155,4 +160,7 @@ export default compose( withCustomersActions, withDrawerActions, withCustomers(({ customersTableState }) => ({ customersTableState })), + withSettings(({ customersSettings }) => ({ + customersTableSize: customersSettings?.tableSize, + })), )(CustomersTable); diff --git a/src/containers/Customers/CustomersLanding/components.js b/src/containers/Customers/CustomersLanding/components.js index 958563ae2..0cce24139 100644 --- a/src/containers/Customers/CustomersLanding/components.js +++ b/src/containers/Customers/CustomersLanding/components.js @@ -1,17 +1,12 @@ import React, { useMemo } from 'react'; -import { - Menu, - MenuItem, - MenuDivider, - Intent, -} from '@blueprintjs/core'; +import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core'; import clsx from 'classnames'; + import intl from 'react-intl-universal'; -import { CLASSES } from '../../../common/classes'; -import { Icon, Money, If } from 'components'; -import { } from 'utils'; -import { safeCallback, firstLettersArgs } from 'utils'; +import { Icon, Money, If, AvaterCell } from 'components'; + +import { safeCallback } from 'utils'; /** * Actions menu. @@ -69,13 +64,6 @@ export function ActionsMenu({ ); } -/** - * Avatar cell. - */ -export function AvatarCell(row) { - return {firstLettersArgs(row.display_name)}; -} - /** * Phone number accessor. */ @@ -99,7 +87,7 @@ export function useCustomersTableColumns() { { id: 'avatar', Header: '', - accessor: AvatarCell, + Cell: AvaterCell, className: 'avatar', width: 45, disableResizing: true, diff --git a/src/containers/Expenses/ExpenseForm/utils.js b/src/containers/Expenses/ExpenseForm/utils.js index 27ec5bd3a..d197b69b3 100644 --- a/src/containers/Expenses/ExpenseForm/utils.js +++ b/src/containers/Expenses/ExpenseForm/utils.js @@ -1,4 +1,5 @@ import { AppToaster } from 'components'; +import { Intent } from '@blueprintjs/core'; import moment from 'moment'; import intl from 'react-intl-universal'; import * as R from 'ramda'; @@ -6,11 +7,13 @@ import { defaultFastFieldShouldUpdate, transformToForm, repeatValue, - ensureEntriesHasEmptyLine + ensureEntriesHasEmptyLine, } from 'utils'; const ERROR = { EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED', + ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED: + 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED', }; // Transform API errors in toasts messages. @@ -24,6 +27,14 @@ export const transformErrors = (errors, { setErrors }) => { }), ); } + if (hasError(ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED)) { + setErrors( + AppToaster.show({ + intent: Intent.DANGER, + message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED', + }), + ); + } }; export const MIN_LINES_NUMBER = 4; diff --git a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js index 75b10b937..6b4e59ec5 100644 --- a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js +++ b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js @@ -80,7 +80,7 @@ function ExpensesActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('expense', 'tableSize', size); + addSetting('expenses', 'tableSize', size); }; return ( diff --git a/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js b/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js index d85b7dd72..1b90bb526 100644 --- a/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js +++ b/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js @@ -16,6 +16,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withExpensesActions from './withExpensesActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../Settings/withSettings'; import { ActionsMenu, useExpensesTableColumns } from './components'; @@ -31,6 +32,9 @@ function ExpensesDataTable({ // #withAlertsActions openAlert, + + // #withSettings + expensesTableSize, }) { // Expenses list context. const { @@ -119,6 +123,7 @@ function ExpensesDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={expensesTableSize} payload={{ onPublish: handlePublishExpense, onDelete: handleDeleteExpense, @@ -135,4 +140,7 @@ export default compose( withAlertsActions, withDrawerActions, withExpensesActions, + withSettings(({ expenseSettings }) => ({ + expensesTableSize: expenseSettings?.tableSize, + })), )(ExpensesDataTable); diff --git a/src/containers/ItemsCategories/ItemsCategoryActionsBar.js b/src/containers/ItemsCategories/ItemsCategoryActionsBar.js index 011228175..6fef2aab1 100644 --- a/src/containers/ItemsCategories/ItemsCategoryActionsBar.js +++ b/src/containers/ItemsCategories/ItemsCategoryActionsBar.js @@ -50,7 +50,7 @@ function ItemsCategoryActionsBar({ }); }; - console.log(fields, categoriesFilterConditions, 'XXXX'); + return ( diff --git a/src/containers/Purchases/Bills/BillForm/BillForm.js b/src/containers/Purchases/Bills/BillForm/BillForm.js index 3df70d1af..a63e20c54 100644 --- a/src/containers/Purchases/Bills/BillForm/BillForm.js +++ b/src/containers/Purchases/Bills/BillForm/BillForm.js @@ -62,6 +62,18 @@ function BillForm({ bill_number: intl.get('bill_number_exists'), }); } + if ( + errors.some( + (e) => e.type === ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED, + ) + ) { + setErrors( + AppToaster.show({ + intent: Intent.DANGER, + message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED', + }), + ); + } }; // Handles form submit. diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js index 403757ae8..d021d63b2 100644 --- a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js +++ b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js @@ -72,7 +72,7 @@ function BillActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('bill', 'tableSize', size); + addSetting('bills', 'tableSize', size); }; return ( @@ -156,7 +156,7 @@ export default compose( withBills(({ billsTableState }) => ({ billsConditionsRoles: billsTableState.filterRoles, })), - withSettings(({ billPaymentSettings }) => ({ - billsTableSize: billPaymentSettings?.tableSize, // fix to bill + withSettings(({ billsettings }) => ({ + billsTableSize: billsettings?.tableSize, })), )(BillActionsBar); diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/src/containers/Purchases/Bills/BillsLanding/BillsTable.js index c232c62f1..f2a2ef353 100644 --- a/src/containers/Purchases/Bills/BillsLanding/BillsTable.js +++ b/src/containers/Purchases/Bills/BillsLanding/BillsTable.js @@ -15,6 +15,7 @@ import withBillActions from './withBillsActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../../Settings/withSettings'; import { useBillsTableColumns, ActionsMenu } from './components'; import { useBillsListContext } from './BillsListProvider'; @@ -40,6 +41,9 @@ function BillsDataTable({ // #withDrawerActions openDrawer, + + // #withSettings + billsTableSize, }) { // Bills list context. const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } = @@ -125,6 +129,7 @@ function BillsDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={billsTableSize} payload={{ onDelete: handleDeleteBill, onEdit: handleEditBill, @@ -144,4 +149,7 @@ export default compose( withAlertsActions, withDrawerActions, withDialogActions, + withSettings(({ billsettings }) => ({ + billsTableSize: billsettings?.tableSize, + })), )(BillsDataTable); diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js index fbc79001a..b3c8776c0 100644 --- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js +++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js @@ -73,7 +73,7 @@ function PaymentMadeActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('payment_made', 'tableSize', size); + addSetting('billPayments', 'tableSize', size); }; return ( diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js index 2fae9a6c0..b72c875ce 100644 --- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js +++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js @@ -16,6 +16,7 @@ import withCurrentOrganization from 'containers/Organization/withCurrentOrganiza import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../../Settings/withSettings'; import { usePaymentMadesTableColumns, ActionsMenu } from './components'; import { usePaymentMadesListContext } from './PaymentMadesListProvider'; @@ -36,6 +37,9 @@ function PaymentMadesTable({ // #withDrawerActions openDrawer, + + // #withSettings + paymentMadesTableSize, }) { // Payment mades table columns. const columns = usePaymentMadesTableColumns(); @@ -114,6 +118,7 @@ function PaymentMadesTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={paymentMadesTableSize} payload={{ onEdit: handleEditPaymentMade, onDelete: handleDeletePaymentMade, @@ -130,4 +135,7 @@ export default compose( withAlertsActions, withDrawerActions, withCurrentOrganization(), + withSettings(({ billPaymentSettings }) => ({ + paymentMadesTableSize: billPaymentSettings?.tableSize, + })), )(PaymentMadesTable); diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js index ea754ee67..e25b09083 100644 --- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js +++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js @@ -73,7 +73,7 @@ function EstimateActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('estimate', 'tableSize', size); + addSetting('salesEstimates', 'tableSize', size); }; return ( diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js index f2d0797b4..8e1568d43 100644 --- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js +++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js @@ -10,6 +10,7 @@ import withEstimatesActions from './withEstimatesActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; +import withSettings from '../../../Settings/withSettings'; import { useEstimatesListContext } from './EstimatesListProvider'; import { useMemorizedColumnsWidths } from 'hooks'; @@ -33,6 +34,9 @@ function EstimatesDataTable({ // #withDialogAction openDialog, + + // #withSettings + estimatesTableSize, }) { const history = useHistory(); @@ -135,6 +139,7 @@ function EstimatesDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={estimatesTableSize} payload={{ onApprove: handleApproveEstimate, onEdit: handleEditEstimate, @@ -155,4 +160,7 @@ export default compose( withAlertsActions, withDrawerActions, withDialogActions, + withSettings(({ estimatesSettings }) => ({ + estimatesTableSize: estimatesSettings?.tableSize, + })), )(EstimatesDataTable); diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js index f78af696d..6b03ab3a7 100644 --- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js +++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js @@ -71,7 +71,7 @@ function InvoiceActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('invoice', 'tableSize', size); + addSetting('salesInvoices', 'tableSize', size); }; return ( diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js index 407e553d0..501618392 100644 --- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js +++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js @@ -16,6 +16,7 @@ import withInvoiceActions from './withInvoiceActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; +import withSettings from '../../../Settings/withSettings'; import { useInvoicesTableColumns, ActionsMenu } from './components'; import { useInvoicesListContext } from './InvoicesListProvider'; @@ -40,6 +41,9 @@ function InvoicesDataTable({ // #withDialogAction openDialog, + + // #withSettings + invoicesTableSize, }) { const history = useHistory(); @@ -135,6 +139,7 @@ function InvoicesDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={invoicesTableSize} payload={{ onDelete: handleDeleteInvoice, onDeliver: handleDeliverInvoice, @@ -155,4 +160,7 @@ export default compose( withDrawerActions, withDialogActions, withInvoices(({ invoicesTableState }) => ({ invoicesTableState })), + withSettings(({ invoiceSettings }) => ({ + invoicesTableSize: invoiceSettings?.tableSize, + })), )(InvoicesDataTable); diff --git a/src/containers/Sales/Invoices/InvoicesLanding/components.js b/src/containers/Sales/Invoices/InvoicesLanding/components.js index 8bac61b39..2efde999e 100644 --- a/src/containers/Sales/Invoices/InvoicesLanding/components.js +++ b/src/containers/Sales/Invoices/InvoicesLanding/components.js @@ -55,6 +55,7 @@ export const statusAccessor = (row) => { })} { - addSetting('payment_receive', 'tableSize', size); + addSetting('paymentReceives', 'tableSize', size); }; return ( diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js index 3d981dc76..5b6682b5d 100644 --- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js +++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js @@ -13,6 +13,7 @@ import withPaymentReceives from './withPaymentReceives'; import withPaymentReceivesActions from './withPaymentReceivesActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../../Settings/withSettings'; import { usePaymentReceivesColumns, ActionsMenu } from './components'; import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider'; @@ -33,6 +34,9 @@ function PaymentReceivesDataTable({ // #withDrawerActions openDrawer, + + // #withSettings + paymentReceivesTableSize, }) { const history = useHistory(); @@ -115,6 +119,7 @@ function PaymentReceivesDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={paymentReceivesTableSize} payload={{ onDelete: handleDeletePaymentReceive, onEdit: handleEditPaymentReceive, @@ -132,4 +137,7 @@ export default compose( withPaymentReceives(({ paymentReceivesTableState }) => ({ paymentReceivesTableState, })), + withSettings(({ paymentReceiveSettings }) => ({ + paymentReceivesTableSize: paymentReceiveSettings?.tableSize, + })), )(PaymentReceivesDataTable); diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js index ad365a3c2..4f7020d2d 100644 --- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js +++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js @@ -72,7 +72,7 @@ function ReceiptActionsBar({ // Handle table row size change. const handleTableRowSizeChange = (size) => { - addSetting('receipt', 'tableSize', size); + addSetting('salesReceipts', 'tableSize', size); }; return ( diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js index 16f6c95a6..e7c73c3b1 100644 --- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js +++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js @@ -14,6 +14,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withReceipts from './withReceipts'; import withReceiptsActions from './withReceiptsActions'; +import withSettings from '../../../Settings/withSettings'; import { useReceiptsListContext } from './ReceiptsListProvider'; import { useReceiptsTableColumns, ActionsMenu } from './components'; @@ -37,6 +38,9 @@ function ReceiptsDataTable({ // #withDialogAction openDialog, + + // #withSettings + receiptsTableSize, }) { const history = useHistory(); @@ -125,6 +129,7 @@ function ReceiptsDataTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={receiptsTableSize} payload={{ onEdit: handleEditReceipt, onDelete: handleDeleteReceipt, @@ -145,4 +150,7 @@ export default compose( withReceipts(({ receiptTableState }) => ({ receiptTableState, })), + withSettings(({ receiptSettings }) => ({ + receiptsTableSize: receiptSettings?.tableSize, + })), )(ReceiptsDataTable); diff --git a/src/containers/Settings/withSettings.js b/src/containers/Settings/withSettings.js index 04f104343..5094f271c 100644 --- a/src/containers/Settings/withSettings.js +++ b/src/containers/Settings/withSettings.js @@ -6,6 +6,7 @@ export default (mapState) => { organizationSettings: state.settings.data.organization, manualJournalsSettings: state.settings.data.manualJournals, billPaymentSettings: state.settings.data.billPayments, + billsettings: state.settings.data.bills, paymentReceiveSettings: state.settings.data.paymentReceives, estimatesSettings: state.settings.data.salesEstimates, receiptSettings: state.settings.data.salesReceipts, @@ -13,6 +14,8 @@ export default (mapState) => { itemsSettings: state.settings.data.items, expenseSettings: state.settings.data.expenses, accountsSettings: state.settings.data.accounts, + customersSettings: state.settings.data.custoemrs, + vendorsSettings: state.settings.data.vendors, }; return mapState ? mapState(mapped, state, props) : mapped; }; diff --git a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js index a2a322567..6f392cb7c 100644 --- a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js +++ b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js @@ -79,7 +79,7 @@ function VendorActionsBar({ }; const handleTableRowSizeChange = (size) => { - addSetting('vendor', 'tableSize', size); + addSetting('vendors', 'tableSize', size); }; return ( @@ -160,7 +160,7 @@ export default compose( vendorsInactiveMode: vendorsTableState.inactiveMode, vendorsFilterConditions: vendorsTableState.filterRoles, })), - // withSettings(({ }) => ({ - // vendorsTableSize: - // })), + withSettings(({ vendorsSettings }) => ({ + vendorsTableSize: vendorsSettings?.tableSize, + })), )(VendorActionsBar); diff --git a/src/containers/Vendors/VendorsLanding/VendorsTable.js b/src/containers/Vendors/VendorsLanding/VendorsTable.js index 2d3640588..fc117d291 100644 --- a/src/containers/Vendors/VendorsLanding/VendorsTable.js +++ b/src/containers/Vendors/VendorsLanding/VendorsTable.js @@ -17,6 +17,7 @@ import withVendors from './withVendors'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import withSettings from '../../Settings/withSettings'; import { ActionsMenu, useVendorsTableColumns } from './components'; @@ -40,6 +41,9 @@ function VendorsTable({ // #withDialogActions openDialog, + + // #withSettings + vendorsTableSize, }) { // Vendors list context. const { @@ -141,6 +145,7 @@ function VendorsTable({ onCellClick={handleCellClick} initialColumnsWidths={initialColumnsWidths} onColumnResizing={handleColumnResizing} + size={vendorsTableSize} payload={{ onEdit: handleEditVendor, onDelete: handleDeleteVendor, @@ -161,4 +166,7 @@ export default compose( withDrawerActions, withVendors(({ vendorsTableState }) => ({ vendorsTableState })), + withSettings(({ vendorsSettings }) => ({ + vendorsTableSize: vendorsSettings?.tableSize, + })), )(VendorsTable); diff --git a/src/containers/Vendors/VendorsLanding/components.js b/src/containers/Vendors/VendorsLanding/components.js index 35d653930..680c1469c 100644 --- a/src/containers/Vendors/VendorsLanding/components.js +++ b/src/containers/Vendors/VendorsLanding/components.js @@ -10,7 +10,7 @@ import { } from '@blueprintjs/core'; import intl from 'react-intl-universal'; -import { Icon, Money, If } from 'components'; +import { Icon, Money, If, AvaterCell } from 'components'; import { safeCallback, firstLettersArgs } from 'utils'; /** @@ -113,7 +113,7 @@ export function useVendorsTableColumns() { { id: 'avatar', Header: '', - accessor: AvatarAccessor, + Cell: AvaterCell, className: 'avatar', width: 45, disableResizing: true, diff --git a/src/store/settings/settings.reducer.js b/src/store/settings/settings.reducer.js index 29c9c117a..3c37aaefb 100644 --- a/src/store/settings/settings.reducer.js +++ b/src/store/settings/settings.reducer.js @@ -10,13 +10,39 @@ const initialState = { organization: { name: 'Bigcapital, LLC', }, - manualJournals: {}, - bills: {}, - billPayments: {}, - salesEstimates: {}, + manualJournals: { + tableSize: 'medium', + }, + bills: { + tableSize: 'medium', + }, + billPayments: { + tableSize: 'medium', + }, + paymentReceives: { + tableSize: 'medium', + }, + salesEstimates: { + tableSize: 'medium', + }, items: { tableSize: 'medium', }, + salesInvoices: { + tableSize: 'medium', + }, + salesReceipts: { + tableSize: 'medium', + }, + expenses: { + tableSize: 'medium', + }, + customers: { + tableSize: 'medium', + }, + vendors: { + tableSize: 'medium', + }, }, }; diff --git a/src/style/pages/Accounts/List.scss b/src/style/pages/Accounts/List.scss index 97665f457..314dec53b 100644 --- a/src/style/pages/Accounts/List.scss +++ b/src/style/pages/Accounts/List.scss @@ -34,7 +34,7 @@ border-radius: 8px; } } - .account-desc{ + .account-desc { font-size: 11px; color: hsl(0, 0%, 50%); margin-top: 2px; @@ -57,5 +57,15 @@ } } } + .table-size--small { + .tbody .tr { + .normal { + svg { + width: 14px; + height: 14px; + } + } + } + } } } diff --git a/src/style/pages/Bills/List.scss b/src/style/pages/Bills/List.scss index 38fb79e66..2fcb700cb 100644 --- a/src/style/pages/Bills/List.scss +++ b/src/style/pages/Bills/List.scss @@ -1,9 +1,6 @@ .dashboard__insider--bills { .bigcapital-datatable { .tbody { - .tr { - min-height: 46px; - } .td.amount { .cell-inner { > span { diff --git a/src/style/pages/Customers/List.scss b/src/style/pages/Customers/List.scss index a12f9e3b4..57ceabc3c 100644 --- a/src/style/pages/Customers/List.scss +++ b/src/style/pages/Customers/List.scss @@ -1,27 +1,33 @@ +.dashboard__insider--customers-list { + .bigcapital-datatable { + .tbody { + .tr .td { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .avatar.td { + .avatar { + display: inline-block; + background: #adbcc9; + border-radius: 50%; + text-align: center; + font-weight: 400; + color: #fff; -.dashboard__insider--customers-list{ - - .bigcapital-datatable{ - - .tr .td{ - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - - .avatar.td{ - - .avatar{ - height: 30px; - width: 30px; - display: inline-block; - background: #adbcc9; - border-radius: 50%; - line-height: 30px; - text-align: center; - font-weight: 400; - font-size: 14px; - color: #fff; + &[data-size='medium'] { + height: 30px; + width: 30px; + line-height: 30px; + font-size: 14px; + } + &[data-size='small'] { + height: 25px; + width: 25px; + line-height: 25px; + font-size: 12px; + } + } } } } diff --git a/src/style/pages/Expense/List.scss b/src/style/pages/Expense/List.scss index e6471c90b..f8b29100c 100644 --- a/src/style/pages/Expense/List.scss +++ b/src/style/pages/Expense/List.scss @@ -5,10 +5,6 @@ .bigcapital-datatable { .table { .tbody { - - .tr{ - min-height: 46px; - } .td.amount { span { font-weight: 600; @@ -17,4 +13,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/style/pages/ManualJournal/List.scss b/src/style/pages/ManualJournal/List.scss index 3dff76dab..df30f4d0f 100644 --- a/src/style/pages/ManualJournal/List.scss +++ b/src/style/pages/ManualJournal/List.scss @@ -4,9 +4,9 @@ } .tbody { - .tr .td{ - padding: 0.8rem 0.5rem; - } + // .tr .td{ + // padding: 0.8rem 0.5rem; + // } .td.amount { .bp3-popover-target { border-bottom: 1px solid #e7e7e7; diff --git a/src/style/pages/PaymentMade/List.scss b/src/style/pages/PaymentMade/List.scss index e3e41df3c..27e9f34be 100644 --- a/src/style/pages/PaymentMade/List.scss +++ b/src/style/pages/PaymentMade/List.scss @@ -1,21 +1,13 @@ - -.dashboard__insider--payment-mades-list{ - - .bigcapital-datatable{ - - .tbody{ - .tr{ - min-height: 46px; - } - +.dashboard__insider--payment-mades-list { + .bigcapital-datatable { + .tbody { .td.amount { - - .cell-inner{ - > span{ + .cell-inner { + > span { font-weight: 600; } } } } } -} \ No newline at end of file +} diff --git a/src/style/pages/PaymentReceive/List.scss b/src/style/pages/PaymentReceive/List.scss index 89d1bf4b3..4fc92a04a 100644 --- a/src/style/pages/PaymentReceive/List.scss +++ b/src/style/pages/PaymentReceive/List.scss @@ -1,21 +1,13 @@ - -.dashboard__insider--payment-receives-list{ - - .bigcapital-datatable{ - - .tbody{ - .tr .td{ - min-height: 46px; - } - +.dashboard__insider--payment-receives-list { + .bigcapital-datatable { + .tbody { .td.amount { - - .cell-inner{ - > span{ + .cell-inner { + > span { font-weight: 600; } } } } } -} \ No newline at end of file +} diff --git a/src/style/pages/SaleEstimate/List.scss b/src/style/pages/SaleEstimate/List.scss index 02e7d738b..434894ba4 100644 --- a/src/style/pages/SaleEstimate/List.scss +++ b/src/style/pages/SaleEstimate/List.scss @@ -1,26 +1,13 @@ - -.dashboard__insider--sale_estimate{ - - .bigcapital-datatable{ - - .tbody{ - .tr{ - min-height: 46px; - } - - .tr .td{ - padding-top: 0.88rem; - padding-bottom: 0.88rem; - } - +.dashboard__insider--sale_estimate { + .bigcapital-datatable { + .tbody { .td.amount { - - .cell-inner{ - > span{ + .cell-inner { + > span { font-weight: 600; } } } } } -} \ No newline at end of file +} diff --git a/src/style/pages/SaleInvoice/List.scss b/src/style/pages/SaleInvoice/List.scss index 21e0328b1..adb06f1e7 100644 --- a/src/style/pages/SaleInvoice/List.scss +++ b/src/style/pages/SaleInvoice/List.scss @@ -1,43 +1,38 @@ - - -.dashboard__insider--sales-invoices-list{ - - .bigcapital-datatable{ - .tbody{ - .balance.td{ - - .cell-inner{ - > span{ +.dashboard__insider--sales-invoices-list { + .bigcapital-datatable { + .tbody { + .balance.td { + .cell-inner { + > span { font-weight: 600; } } } - .status.td{ - + .status.td { .overdue-status, - .due-status{ + .due-status { display: block; font-size: 13.5px; line-height: 1.4; - + .partial-paid{ + + .partial-paid { margin-top: 2px; } } - .overdue-status{ + .overdue-status { color: #ec5b0a; } - .due-status{ + .due-status { color: #1652c8; } - .partial-paid{ + .partial-paid { font-size: 12px; line-height: 1; display: block; margin-bottom: 6px; opacity: 0.7; } - .fully-paid-icon{ + .fully-paid-icon { width: 18px; height: 18px; margin-right: 8px; @@ -46,19 +41,26 @@ fill: #2ba01d; } } - .fully-paid-text{ + .fully-paid-text { font-size: 13.5px; } - .bp3-progress-bar{ + .bp3-progress-bar { height: 4px; max-width: 180px; - + &, - .bp3-progress-meter{ + .bp3-progress-meter { border-radius: 0; } } } } + .table-size--small { + .status.td { + .bp3-progress-bar { + height: 3px; + } + } + } } -} \ No newline at end of file +} diff --git a/src/style/pages/SaleReceipt/List.scss b/src/style/pages/SaleReceipt/List.scss index b246a5a9f..7522241ef 100644 --- a/src/style/pages/SaleReceipt/List.scss +++ b/src/style/pages/SaleReceipt/List.scss @@ -1,21 +1,13 @@ - -.dashboard__insider--sales_receipts{ - - .bigcapital-datatable{ - - .tbody{ - .tr{ - min-height: 46px; - } - +.dashboard__insider--sales_receipts { + .bigcapital-datatable { + .tbody { .td.amount { - - .cell-inner{ - > span{ + .cell-inner { + > span { font-weight: 600; } } } } } -} \ No newline at end of file +} diff --git a/src/style/pages/Vendors/List.scss b/src/style/pages/Vendors/List.scss index ef592ef98..f71bc5eeb 100644 --- a/src/style/pages/Vendors/List.scss +++ b/src/style/pages/Vendors/List.scss @@ -1,28 +1,34 @@ .dashboard__insider--vendors-list { - - .bigcapital-datatable { - - tbody { - .tr .td { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - } - - .avatar.td { - - .avatar { - height: 30px; - width: 30px; - display: inline-block; - background: #adbcc9; - border-radius: 50%; - line-height: 30px; - text-align: center; - font-weight: 400; - font-size: 14px; - color: #fff; - } - } + .bigcapital-datatable { + tbody { + .tr .td { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } } -} \ No newline at end of file + + .avatar.td { + .avatar { + display: inline-block; + background: #adbcc9; + border-radius: 50%; + text-align: center; + font-weight: 400; + color: #fff; + + &[data-size='medium'] { + height: 30px; + width: 30px; + line-height: 30px; + font-size: 14px; + } + &[data-size='small'] { + height: 25px; + width: 25px; + line-height: 25px; + font-size: 12px; + } + } + } + } +}