BiG-5: Complete, add switch small and medium table row size.

This commit is contained in:
elforjani13
2021-09-26 21:02:53 +02:00
parent fcace4213c
commit 71f9fa47d4
45 changed files with 337 additions and 196 deletions

View File

@@ -0,0 +1,10 @@
import React from 'react';
import { firstLettersArgs } from 'utils';
export default function AvatarCell({ row: { original }, size }) {
return (
<span className="avatar" data-size={size}>
{firstLettersArgs(original?.display_name)}
</span>
);
}

View File

@@ -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,
};

View File

@@ -73,7 +73,7 @@ function ManualJournalActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('manual_journal', 'tableSize', size);
addSetting('manualJournals', 'tableSize', size);
};
return (

View File

@@ -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);

View File

@@ -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',

View File

@@ -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 (
<DashboardActionsBar>
<NavbarGroup>
@@ -167,7 +178,10 @@ function AccountsActionsBar({
text={<T id={'import'} />}
/>
<NavbarDivider />
<DashboardRowsHeightButton />
<DashboardRowsHeightButton
initialValue={accountsTableSize}
onChange={handleTableRowSizeChange}
/>
<NavbarDivider />
<Switch
labelElement={<T id={'inactive'} />}
@@ -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);

View File

@@ -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);

View File

@@ -31,7 +31,7 @@ function CustomerBulkDeleteAlert({
closeAlert(name);
};
console.log(customersIds, 'EE');
// Handle confirm customers bulk delete.
const handleConfirmBulkDelete = useCallback(() => {

View File

@@ -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);

View File

@@ -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);

View File

@@ -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 <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
}
/**
* Phone number accessor.
*/
@@ -99,7 +87,7 @@ export function useCustomersTableColumns() {
{
id: 'avatar',
Header: '',
accessor: AvatarCell,
Cell: AvaterCell,
className: 'avatar',
width: 45,
disableResizing: true,

View File

@@ -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;

View File

@@ -80,7 +80,7 @@ function ExpensesActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('expense', 'tableSize', size);
addSetting('expenses', 'tableSize', size);
};
return (
<DashboardActionsBar>

View File

@@ -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);

View File

@@ -50,7 +50,7 @@ function ItemsCategoryActionsBar({
});
};
console.log(fields, categoriesFilterConditions, 'XXXX');
return (
<DashboardActionsBar>

View File

@@ -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.

View File

@@ -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);

View File

@@ -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);

View File

@@ -73,7 +73,7 @@ function PaymentMadeActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('payment_made', 'tableSize', size);
addSetting('billPayments', 'tableSize', size);
};
return (

View File

@@ -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);

View File

@@ -73,7 +73,7 @@ function EstimateActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('estimate', 'tableSize', size);
addSetting('salesEstimates', 'tableSize', size);
};
return (

View File

@@ -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);

View File

@@ -71,7 +71,7 @@ function InvoiceActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('invoice', 'tableSize', size);
addSetting('salesInvoices', 'tableSize', size);
};
return (

View File

@@ -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);

View File

@@ -55,6 +55,7 @@ export const statusAccessor = (row) => {
})}
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}

View File

@@ -73,7 +73,7 @@ function PaymentReceiveActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('payment_receive', 'tableSize', size);
addSetting('paymentReceives', 'tableSize', size);
};
return (

View File

@@ -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);

View File

@@ -72,7 +72,7 @@ function ReceiptActionsBar({
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('receipt', 'tableSize', size);
addSetting('salesReceipts', 'tableSize', size);
};
return (

View File

@@ -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);

View File

@@ -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;
};

View File

@@ -79,7 +79,7 @@ function VendorActionsBar({
};
const handleTableRowSizeChange = (size) => {
addSetting('vendor', 'tableSize', size);
addSetting('vendors', 'tableSize', size);
};
return (
<DashboardActionsBar>
@@ -160,7 +160,7 @@ export default compose(
vendorsInactiveMode: vendorsTableState.inactiveMode,
vendorsFilterConditions: vendorsTableState.filterRoles,
})),
// withSettings(({ }) => ({
// vendorsTableSize:
// })),
withSettings(({ vendorsSettings }) => ({
vendorsTableSize: vendorsSettings?.tableSize,
})),
)(VendorActionsBar);

View File

@@ -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);

View File

@@ -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,

View File

@@ -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',
},
},
};

View File

@@ -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;
}
}
}
}
}
}

View File

@@ -1,9 +1,6 @@
.dashboard__insider--bills {
.bigcapital-datatable {
.tbody {
.tr {
min-height: 46px;
}
.td.amount {
.cell-inner {
> span {

View File

@@ -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;
}
}
}
}
}

View File

@@ -5,10 +5,6 @@
.bigcapital-datatable {
.table {
.tbody {
.tr{
min-height: 46px;
}
.td.amount {
span {
font-weight: 600;
@@ -17,4 +13,4 @@
}
}
}
}
}

View File

@@ -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;

View File

@@ -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;
}
}
}
}
}
}
}

View File

@@ -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;
}
}
}
}
}
}
}

View File

@@ -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;
}
}
}
}
}
}
}

View File

@@ -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;
}
}
}
}
}
}

View File

@@ -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;
}
}
}
}
}
}
}

View File

@@ -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;
}
}
}
.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;
}
}
}
}
}