mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-14 20:00:33 +00:00
BiG-5: Complete, add switch small and medium table row size.
This commit is contained in:
10
src/components/AvaterCell.js
Normal file
10
src/components/AvaterCell.js
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
@@ -73,7 +73,7 @@ function ManualJournalActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('manual_journal', 'tableSize', size);
|
||||
addSetting('manualJournals', 'tableSize', size);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -31,7 +31,7 @@ function CustomerBulkDeleteAlert({
|
||||
closeAlert(name);
|
||||
};
|
||||
|
||||
console.log(customersIds, 'EE');
|
||||
|
||||
|
||||
// Handle confirm customers bulk delete.
|
||||
const handleConfirmBulkDelete = useCallback(() => {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -80,7 +80,7 @@ function ExpensesActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('expense', 'tableSize', size);
|
||||
addSetting('expenses', 'tableSize', size);
|
||||
};
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -50,7 +50,7 @@ function ItemsCategoryActionsBar({
|
||||
});
|
||||
};
|
||||
|
||||
console.log(fields, categoriesFilterConditions, 'XXXX');
|
||||
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -73,7 +73,7 @@ function PaymentMadeActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('payment_made', 'tableSize', size);
|
||||
addSetting('billPayments', 'tableSize', size);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -73,7 +73,7 @@ function EstimateActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('estimate', 'tableSize', size);
|
||||
addSetting('salesEstimates', 'tableSize', size);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -71,7 +71,7 @@ function InvoiceActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('invoice', 'tableSize', size);
|
||||
addSetting('salesInvoices', 'tableSize', size);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -55,6 +55,7 @@ export const statusAccessor = (row) => {
|
||||
})}
|
||||
</span>
|
||||
<ProgressBar
|
||||
|
||||
animate={false}
|
||||
stripes={false}
|
||||
intent={Intent.PRIMARY}
|
||||
|
||||
@@ -73,7 +73,7 @@ function PaymentReceiveActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('payment_receive', 'tableSize', size);
|
||||
addSetting('paymentReceives', 'tableSize', size);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -72,7 +72,7 @@ function ReceiptActionsBar({
|
||||
|
||||
// Handle table row size change.
|
||||
const handleTableRowSizeChange = (size) => {
|
||||
addSetting('receipt', 'tableSize', size);
|
||||
addSetting('salesReceipts', 'tableSize', size);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
.dashboard__insider--bills {
|
||||
.bigcapital-datatable {
|
||||
.tbody {
|
||||
.tr {
|
||||
min-height: 46px;
|
||||
}
|
||||
.td.amount {
|
||||
.cell-inner {
|
||||
> span {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,10 +5,6 @@
|
||||
.bigcapital-datatable {
|
||||
.table {
|
||||
.tbody {
|
||||
|
||||
.tr{
|
||||
min-height: 46px;
|
||||
}
|
||||
.td.amount {
|
||||
span {
|
||||
font-weight: 600;
|
||||
@@ -17,4 +13,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user