QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 21:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: apply new cards design system.

Browse Source 
feat: empty status datatables.
fix: edit account.
This commit is contained in:
Ahmed Bouhuolia
2020-11-18 21:55:17 +02:00
parent 0b386a7cb2
commit 128feb73f8
64 changed files with 869 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/containers/Accounting/MakeJournalEntriesForm.js
View File

@@ -444,7 +444,6 @@ function MakeJournalEntriesForm({
},
[changePageSubtitle],
);
console.log(values, 'Val');
return (
<div class="make-journal-entries">
<form onSubmit={handleSubmit}>

115
client/src/containers/Accounting/ManualJournalsDataTable.js
View File

@@ -1,19 +1,18 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import React, { useCallback, useMemo } from 'react';
import {
Intent,
Button,
Classes,
Popover,
Tooltip,
Menu,
MenuItem,
MenuDivider,
Position,
Tag,
} from '@blueprintjs/core';
import { withRouter, useParams } from 'react-router-dom';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import {
DataTable,
@@ -23,9 +22,11 @@ import {
Icon,
LoadingIndicator,
} from 'components';
import { CLASSES } from 'common/classes';
import { useIsValuePassed } from 'hooks';
import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
import { AmountPopoverContent, NoteAccessor, StatusAccessor } from './components';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -33,44 +34,7 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
import { compose, saveInvoke } from 'utils';
/**
* Status column accessor.
*/
const StatusAccessor = (row) => {
return (
<Choose>
<Choose.When condition={!!row.status}>
<Tag minimal={true}>
<T id={'published'} />
</Tag>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} intent={Intent.WARNING}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>
</Choose>
);
};
/**
* Note column accessor.
*/
function NoteAccessor(row) {
return (
<If condition={row.description}>
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={row.description}
position={Position.LEFT_TOP}
hoverOpenDelay={50}
>
<Icon icon={'file-alt'} iconSize={16} />
</Tooltip>
</If>
);
}
function ManualJournalsDataTable({
// #withManualJournals
@@ -166,7 +130,14 @@ function ManualJournalsDataTable({
{
id: 'amount',
Header: formatMessage({ id: 'amount' }),
accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
accessor: (r) => (
<Tooltip
content={<AmountPopoverContent journalEntries={r.entries} />}
position={Position.RIGHT_BOTTOM}
>
<Money amount={r.amount} currency={'USD'} />
</Tooltip>
),
className: 'amount',
width: 115,
},
@@ -254,37 +225,39 @@ function ManualJournalsDataTable({
const showEmptyStatus = [
manualJournalsCurrentViewId === -1,
manualJournalsCurrentPage.length === 0,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator loading={manualJournalsLoading && !isLoadedBefore}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ManualJournalsEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={manualJournalsLoading && !isLoadedBefore}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ManualJournalsEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={manualJournalsCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagesCount={manualJournalsPagination.pagesCount}
pagination={true}
initialPageSize={manualJournalsTableQuery.page_size}
initialPageIndex={manualJournalsTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={manualJournalsCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagesCount={manualJournalsPagination.pagesCount}
pagination={true}
initialPageSize={manualJournalsTableQuery.page_size}
initialPageIndex={manualJournalsTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}
@@ -304,7 +277,7 @@ export default compose(
manualJournalsLoading,
manualJournalsPagination,
manualJournalsTableQuery,
manualJournalsCurrentViewId
manualJournalsCurrentViewId,
}),
),
)(ManualJournalsDataTable);

102
client/src/containers/Accounting/components.js Normal file
View File

@@ -0,0 +1,102 @@
import React from 'react';
import {
Intent,
Classes,
Tooltip,
Position,
Tag,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { Choose, Money, If, Icon } from 'components';
import withAccountDetails from 'containers/Accounts/withAccountDetail';
import { compose } from 'utils';
const AmountPopoverContentLineRender = ({
journalEntry,
accountId,
// #withAccountDetail
account,
}) => {
const isCredit = !!journalEntry.credit;
const isDebit = !!journalEntry.debit;
return (
<Choose>
<Choose.When condition={isDebit}>
<div>
C. <Money amount={journalEntry.debit} currency={'USD'} /> USD -{' '}
{account.name} <If condition={account.code}>({account.code})</If>
</div>
</Choose.When>
<Choose.When condition={isCredit}>
<div class={'ml1'}>
D. <Money amount={journalEntry.credit} currency={'USD'} /> USD -{' '}
{account.name} <If condition={account.code}>({account.code})</If>
</div>
</Choose.When>
</Choose>
);
};
const AmountPopoverContentLine = compose(withAccountDetails)(
AmountPopoverContentLineRender,
);
export function AmountPopoverContent({ journalEntries }) {
const journalLinesProps = journalEntries.map((journalEntry) => ({
journalEntry,
accountId: journalEntry.account_id,
}));
return (
<div>
{journalLinesProps.map(({ journalEntry, accountId }) => (
<AmountPopoverContentLine
journalEntry={journalEntry}
accountId={accountId}
/>
))}
</div>
);
}
/**
* Status column accessor.
*/
export const StatusAccessor = (row) => {
return (
<Choose>
<Choose.When condition={!!row.status}>
<Tag minimal={true}>
<T id={'published'} />
</Tag>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} intent={Intent.WARNING}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>
</Choose>
);
};
/**
* Note column accessor.
*/
export function NoteAccessor(row) {
return (
<If condition={row.description}>
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={row.description}
position={Position.LEFT_TOP}
hoverOpenDelay={50}
>
<Icon icon={'file-alt'} iconSize={16} />
</Tooltip>
</If>
);
}

63
client/src/containers/Accounts/AccountsDataTable.js
View File

@@ -12,17 +12,13 @@ import {
} from '@blueprintjs/core';
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classnames from 'classnames';
import {
Icon,
DataTable,
Money,
If,
Choose,
} from 'components';
import classNames from 'classnames';
import { Icon, DataTable, Money, If, Choose } from 'components';
import { compose } from 'utils';
import { useUpdateEffect } from 'hooks';
import { CLASSES } from 'common/classes';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withAccounts from 'containers/Accounts/withAccounts';
@@ -30,6 +26,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrentView from 'containers/Views/withCurrentView';
function NormalCell({ cell }) {
const { formatMessage } = useIntl();
@@ -52,7 +49,7 @@ function NormalCell({ cell }) {
function BalanceCell({ cell }) {
const account = cell.row.original;
return (account.amount) ? (
return account.amount ? (
<span>
<Money amount={account.amount} currency={'USD'} />
</span>
@@ -64,13 +61,14 @@ function BalanceCell({ cell }) {
function InactiveSemafro() {
return (
<Tooltip
content={<T id='inactive' />}
className={classnames(
content={<T id="inactive" />}
className={classNames(
Classes.TOOLTIP_INDICATOR,
'bp3-popover-wrapper--inactive-semafro'
'bp3-popover-wrapper--inactive-semafro',
)}
position={Position.TOP}
hoverOpenDelay={250}>
hoverOpenDelay={250}
>
<div className="inactive-semafro"></div>
</Tooltip>
);
@@ -82,7 +80,7 @@ function AccountNameAccessor(row) {
<Choose>
<Choose.When condition={!!row.description}>
<Tooltip
className={classnames(
className={classNames(
Classes.TOOLTIP_INDICATOR,
'bp3-popover-wrapper--account-desc',
)}
@@ -94,9 +92,7 @@ function AccountNameAccessor(row) {
</Tooltip>
</Choose.When>
<Choose.Otherwise>
{ row.name }
</Choose.Otherwise>
<Choose.Otherwise>{row.name}</Choose.Otherwise>
</Choose>
<If condition={!row.active}>
@@ -159,7 +155,8 @@ function AccountsDataTable({
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })} />
text={formatMessage({ id: 'view_details' })}
/>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
@@ -287,20 +284,22 @@ function AccountsDataTable({
);
return (
<DataTable
noInitialFetch={true}
columns={columns}
data={accountsTable}
onFetchData={handleDatatableFetchData}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
loading={accountsLoading && !isMounted}
rowContextMenu={rowContextMenu}
expandColumnSpace={1}
/>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<DataTable
noInitialFetch={true}
columns={columns}
data={accountsTable}
onFetchData={handleDatatableFetchData}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
loading={accountsLoading && !isMounted}
rowContextMenu={rowContextMenu}
expandColumnSpace={1}
/>
</div>
);
}

20
client/src/containers/Customers/Customer.js
View File

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
import { DashboardCard } from 'components';
import CustomerForm from 'containers/Customers/CustomerForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -40,12 +41,7 @@ function Customer({
requestFetchCurrencies(),
);
const handleFormSubmit = useCallback(
(payload) => {
},
[history],
);
const handleFormSubmit = useCallback((payload) => {}, [history]);
const handleCancel = useCallback(() => {
history.goBack();
@@ -60,11 +56,13 @@ function Customer({
}
name={'customer-form'}
>
<CustomerForm
onFormSubmit={handleFormSubmit}
customerId={id}
onCancelForm={handleCancel}
/>
<DashboardCard page>
<CustomerForm
onFormSubmit={handleFormSubmit}
customerId={id}
onCancelForm={handleCancel}
/>
</DashboardCard>
</DashboardInsider>
);
}

22
client/src/containers/Customers/CustomerForm.js
View File

@@ -172,9 +172,9 @@ function CustomerForm({
const onSuccess = () => {
AppToaster.show({
message: formatMessage({
id: customer ?
'the_item_customer_has_been_successfully_edited' :
'the_customer_has_been_successfully_created',
id: customer
? 'the_item_customer_has_been_successfully_edited'
: 'the_customer_has_been_successfully_created',
}),
intent: Intent.SUCCESS,
});
@@ -191,7 +191,9 @@ function CustomerForm({
};
if (customer && customer.id) {
requestEditCustomer(customer.id, formValues).then(onSuccess).catch(onError);
requestEditCustomer(customer.id, formValues)
.then(onSuccess)
.catch(onError);
} else {
requestSubmitCustomer(formValues).then(onSuccess).catch(onError);
}
@@ -239,14 +241,12 @@ function CustomerForm({
>
{({ isSubmitting }) => (
<Form>
<div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection />
</div>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection />
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection />
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection />
</div>
<div className={classNames(CLASSES.PAGE_FORM_TABS)}>

69
client/src/containers/Customers/CustomerTable.js
View File

@@ -10,9 +10,11 @@ import {
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useIsValuePassed } from 'hooks';
import classNames from 'classnames';
import CustomersEmptyStatus from './CustomersEmptyStatus';
import { DataTable, Icon, Money, Choose, LoadingIndicator } from 'components';
import { CLASSES } from 'common/classes';
import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions';
@@ -186,42 +188,41 @@ const CustomerTable = ({
const showEmptyStatus = [
customersCurrentViewId === -1,
customers.length === 0,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator
loading={customersLoading && !isLoadedBefore}
mount={false}
>
<Choose>
<Choose.When condition={showEmptyStatus}>
<CustomersEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={customersLoading && !isLoadedBefore}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<CustomersEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={customers}
// loading={customersLoading}
onFetchData={handleFetchData}
selectionColumn={true}
expandable={false}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
spinnerProps={{ size: 30 }}
rowContextMenu={rowContextMenu}
pagination={true}
manualSortBy={true}
pagesCount={customerPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={customersTableQuery.page_size}
initialPageIndex={customersTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={customers}
// loading={customersLoading}
onFetchData={handleFetchData}
selectionColumn={true}
expandable={false}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
spinnerProps={{ size: 30 }}
rowContextMenu={rowContextMenu}
pagination={true}
manualSortBy={true}
pagesCount={customerPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={customersTableQuery.page_size}
initialPageIndex={customersTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
};
@@ -238,7 +239,7 @@ export default compose(
customersLoading,
customerPagination,
customersTableQuery,
customersCurrentViewId
customersCurrentViewId,
}),
),
withCustomersActions,

1
client/src/containers/Dashboard/withDashboard.js
View File

@@ -6,6 +6,7 @@ export default (mapState) => {
const mapped = {
pageTitle: state.dashboard.pageTitle,
pageSubtitle: state.dashboard.pageSubtitle,
pageHint: state.dashboard.pageHint,
editViewId: state.dashboard.topbarEditViewId,
sidebarExpended: state.dashboard.sidebarExpended,
preferencesPageTitle: state.dashboard.preferencesPageTitle,

6
client/src/containers/Dashboard/withDashboardActions.js
View File

@@ -14,6 +14,12 @@ const mapActionsToProps = (dispatch) => ({
pageSubtitle,
}),
changePageHint: (pageHint) =>
dispatch({
type: t.CHANGE_DASHBOARD_PAGE_HINT,
payload: { pageHint }
}),
setTopbarEditView: (id) =>
dispatch({
type: t.SET_TOPBAR_EDIT_VIEW,

3
client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogContent.js
View File

@@ -88,6 +88,9 @@ function AccountFormDialogContent({
if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
fields.code = formatMessage({ id: 'account_code_is_not_unique' });
}
if (errors.find((e) => e.type === 'ACCOUNT.NAME.NOT.UNIQUE')) {
fields.name = formatMessage({ id: 'account_name_is_already_used' });
}
return fields;
};

41
client/src/containers/ExchangeRates/ExchangeRateTable.js
View File

@@ -9,6 +9,9 @@ import {
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { DataTable, Icon, MoneyExchangeRate } from 'components';
import LoadingIndicator from 'components/LoadingIndicator';
@@ -140,24 +143,26 @@ function ExchangeRateTable({
);
return (
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={exchangeRatesList}
onFetchData={handelFetchData}
loading={exchangeRatesLoading && !initialMount}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
treeGraph={true}
onSelectedRowsChange={handelSelectedRowsChange}
rowContextMenu={rowContextMenu}
pagination={true}
pagesCount={exchangeRatesPageination.pagesCount}
initialPageSize={exchangeRatesPageination.pageSize}
initialPageIndex={exchangeRatesPageination.page - 1}
/>
</LoadingIndicator>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={exchangeRatesList}
onFetchData={handelFetchData}
loading={exchangeRatesLoading && !initialMount}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
treeGraph={true}
onSelectedRowsChange={handelSelectedRowsChange}
rowContextMenu={rowContextMenu}
pagination={true}
pagesCount={exchangeRatesPageination.pagesCount}
initialPageSize={exchangeRatesPageination.pageSize}
initialPageIndex={exchangeRatesPageination.page - 1}
/>
</LoadingIndicator>
</div>
);
}

66
client/src/containers/Expenses/ExpenseDataTable.js
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import React, { useEffect, useCallback, useMemo } from 'react';
import {
Intent,
Button,
@@ -15,12 +15,15 @@ import { useParams } from 'react-router-dom';
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import Icon from 'components/Icon';
import { compose, saveInvoke } from 'utils';
import { useIsValuePassed } from 'hooks';
import { If, Money, Choose, LoadingIndicator } from 'components';
import { CLASSES } from 'common/classes';
import DataTable from 'components/DataTable';
import ExpensesEmptyStatus from './ExpensesEmptyStatus';
@@ -268,40 +271,39 @@ function ExpensesDataTable({
const showEmptyStatus = [
expensesCurrentViewId === -1,
expensesCurrentPage.length === 0
].every(condition => condition === true);
expensesCurrentPage.length === 0,
].every((condition) => condition === true);
return (
<LoadingIndicator
loading={expensesLoading && !isLoadedBefore}
mount={false}
>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ExpensesEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={expensesLoading && !isLoadedBefore}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ExpensesEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={expensesCurrentPage}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
onFetchData={handleFetchData}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={expensesPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={expensesTableQuery.page_size}
initialPageIndex={expensesTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
columns={columns}
data={expensesCurrentPage}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
onFetchData={handleFetchData}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={expensesPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={expensesTableQuery.page_size}
initialPageIndex={expensesTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}

9
client/src/containers/FinancialStatements/FinancialReports.js
View File

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { For } from 'components';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import financialReportMenus from 'config/financialReportsMenu';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -42,9 +43,11 @@ function FinancialReports({
}, [changePageTitle, formatMessage]);
return (
<div class="financial-reports">
<For render={FinancialReportsSection} of={financialReportMenus} />
</div>
<DashboardInsider name={'financial-reports'}>
<div class="financial-reports">
<For render={FinancialReportsSection} of={financialReportMenus} />
</div>
</DashboardInsider>
);
}

35
client/src/containers/Items/ItemCategoriesTable.js
View File

@@ -9,12 +9,15 @@ import {
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import Icon from 'components/Icon';
import LoadingIndicator from 'components/LoadingIndicator';
import { compose } from 'utils';
import DataTable from 'components/DataTable';
import { CLASSES } from 'common/classes';
import withItemCategories from './withItemCategories';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -139,21 +142,23 @@ const ItemsCategoryList = ({
);
return (
<LoadingIndicator mount={false}>
<DataTable
noInitialFetch={true}
columns={columns}
data={categoriesList}
onFetchData={handelFetchData}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
loading={categoriesTableLoading}
rowContextMenu={handleRowContextMenu}
/>
</LoadingIndicator>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator mount={false}>
<DataTable
noInitialFetch={true}
columns={columns}
data={categoriesList}
onFetchData={handelFetchData}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
loading={categoriesTableLoading}
rowContextMenu={handleRowContextMenu}
/>
</LoadingIndicator>
</div>
);
};

82
client/src/containers/Items/ItemForm.js
View File

@@ -1,11 +1,11 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { useHistory } from 'react-router-dom';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import { defaultTo } from 'lodash';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
@@ -22,6 +22,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
import { compose, transformToForm } from 'utils';
import { transitionItemTypeKeyToLabel } from './utils';
import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
const defaultInitialValues = {
active: true,
@@ -83,66 +85,15 @@ function ItemForm({
deleteCallback: requestDeleteMedia,
});
const validationSchema = Yup.object().shape({
active: Yup.boolean(),
name: Yup.string()
.required()
.label(formatMessage({ id: 'item_name_' })),
type: Yup.string()
.trim()
.required()
.label(formatMessage({ id: 'item_type_' })),
sku: Yup.string().trim(),
cost_price: Yup.number().when(['purchasable'], {
is: true,
then: Yup.number()
.required()
.label(formatMessage({ id: 'cost_price_' })),
otherwise: Yup.number().nullable(true),
}),
sell_price: Yup.number().when(['sellable'], {
is: true,
then: Yup.number()
.required()
.label(formatMessage({ id: 'sell_price_' })),
otherwise: Yup.number().nullable(true),
}),
cost_account_id: Yup.number()
.when(['purchasable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
})
.label(formatMessage({ id: 'cost_account_id' })),
sell_account_id: Yup.number()
.when(['sellable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
})
.label(formatMessage({ id: 'sell_account_id' })),
inventory_account_id: Yup.number()
.when(['type'], {
is: (value) => value === 'inventory',
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
})
.label(formatMessage({ id: 'inventory_account' })),
category_id: Yup.number().positive().nullable(),
stock: Yup.string() || Yup.boolean(),
sellable: Yup.boolean().required(),
purchasable: Yup.boolean().required(),
});
/**
* Initial values in create and edit mode.
*/
const initialValues = useMemo(
() => ({
...defaultInitialValues,
cost_account_id: parseInt(preferredCostAccount),
sell_account_id: parseInt(preferredSellAccount),
inventory_account_id: parseInt(preferredInventoryAccount),
cost_account_id: defaultTo(preferredCostAccount, ''),
sell_account_id: defaultTo(preferredSellAccount, ''),
inventory_account_id: defaultTo(preferredInventoryAccount, ''),
/**
* We only care about the fields in the form. Previously unfilled optional
* values such as `notes` come back from the API as null, so remove those
@@ -150,7 +101,12 @@ function ItemForm({
*/
...transformToForm(itemDetail, defaultInitialValues),
}),
[],
[
itemDetail,
preferredCostAccount,
preferredSellAccount,
preferredInventoryAccount,
],
);
useEffect(() => {
@@ -214,7 +170,7 @@ function ItemForm({
useEffect(() => {
if (itemDetail && itemDetail.type) {
changePageSubtitle(formatMessage({ id: itemDetail.type }));
changePageSubtitle(transitionItemTypeKeyToLabel(itemDetail.type));
}
}, [itemDetail, changePageSubtitle, formatMessage]);
@@ -262,14 +218,14 @@ function ItemForm({
<div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
<Formik
enableReinitialize={true}
validationSchema={validationSchema}
validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
{({ isSubmitting, handleSubmit }) => (
<Form>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection />
<ItemFormPrimarySection itemId={itemId} />
<ItemFormBody />
<ItemFormInventorySection />
</div>
@@ -294,8 +250,10 @@ export default compose(
withDashboardActions,
withMediaActions,
withSettings(({ itemsSettings }) => ({
preferredCostAccount: itemsSettings.preferredCostAccount,
preferredSellAccount: itemsSettings.preferredSellAccount,
preferredInventoryAccount: itemsSettings.preferredInventoryAccount,
preferredCostAccount: parseInt(itemsSettings?.preferredCostAccount),
preferredSellAccount: parseInt(itemsSettings?.preferredSellAccount),
preferredInventoryAccount: parseInt(
itemsSettings?.preferredInventoryAccount,
),
})),
)(ItemForm);

56
client/src/containers/Items/ItemForm.schema.js Normal file
View File

@@ -0,0 +1,56 @@
import * as Yup from 'yup';
import { formatMessage } from 'services/intl';
const Schema = Yup.object().shape({
active: Yup.boolean(),
name: Yup.string()
.required()
.label(formatMessage({ id: 'item_name_' })),
type: Yup.string()
.trim()
.required()
.label(formatMessage({ id: 'item_type_' })),
sku: Yup.string().trim(),
cost_price: Yup.number().when(['purchasable'], {
is: true,
then: Yup.number()
.required()
.label(formatMessage({ id: 'cost_price_' })),
otherwise: Yup.number().nullable(true),
}),
sell_price: Yup.number().when(['sellable'], {
is: true,
then: Yup.number()
.required()
.label(formatMessage({ id: 'sell_price_' })),
otherwise: Yup.number().nullable(true),
}),
cost_account_id: Yup.number()
.when(['purchasable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
})
.label(formatMessage({ id: 'cost_account_id' })),
sell_account_id: Yup.number()
.when(['sellable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
})
.label(formatMessage({ id: 'sell_account_id' })),
inventory_account_id: Yup.number()
.when(['type'], {
is: (value) => value === 'inventory',
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
})
.label(formatMessage({ id: 'inventory_account' })),
category_id: Yup.number().positive().nullable(),
stock: Yup.string() || Yup.boolean(),
sellable: Yup.boolean().required(),
purchasable: Yup.boolean().required(),
});
export const CreateItemFormSchema = Schema;
export const EditItemFormSchema = Schema;

12
client/src/containers/Items/ItemFormBody.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage } from 'formik';
import {
FormGroup,
Classes,
@@ -27,8 +27,8 @@ function ItemFormBody({ accountsList }) {
<Row>
<Col xs={6}>
{/*------------- Purchasable checbox ------------- */}
<FastField name={'sellable'}>
{({ field, field: { value } }) => (
<FastField name={'sellable'} type="checkbox">
{({ field: { onChange, onBlur, name, checked } }) => (
<FormGroup inline={true} className={'form-group--sellable'}>
<Checkbox
inline={true}
@@ -37,8 +37,10 @@ function ItemFormBody({ accountsList }) {
<T id={'i_sell_this_item'} />
</h3>
}
checked={value}
{...field}
name={'sellable'}
checked={!!checked}
onChange={onChange}
onBlur={onBlur}
/>
</FormGroup>
)}

2
client/src/containers/Items/ItemFormFloatingActions.js
View File

@@ -56,7 +56,7 @@ export default function ItemFormFloatingActions({
{/*----------- Active ----------*/}
<FastField name={'active'}>
{({ field, field: { value } }) => (
<FormGroup label={' '} inline={true} className={'form-group--active'}>
<FormGroup inline={true} className={'form-group--active'}>
<Checkbox
inline={true}
label={<T id={'active'} />}

13
client/src/containers/Items/ItemFormPage.js
View File

@@ -3,6 +3,7 @@ import { useParams, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardCard from 'components/Dashboard/DashboardCard';
import ItemForm from 'containers/Items/ItemForm';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -62,11 +63,13 @@ const ItemFormContainer = ({
}
name={'item-form'}
>
<ItemForm
onFormSubmit={handleFormSubmit}
itemId={id}
onCancelForm={handleCancel}
/>
<DashboardCard page>
<ItemForm
onFormSubmit={handleFormSubmit}
itemId={id}
onCancelForm={handleCancel}
/>
</DashboardCard>
</DashboardInsider>
);
};

82
client/src/containers/Items/ItemFormPrimarySection.js
View File

@@ -25,6 +25,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose, handleStringChange, inputIntent } from 'utils';
import { transitionItemTypeKeyToLabel } from './utils';
/**
* Item form primary section.
@@ -35,8 +36,12 @@ function ItemFormPrimarySection({
// #withDashboardActions
changePageSubtitle,
// #ownProps
itemId,
}) {
const { formatMessage } = useIntl();
const isNewMode = !itemId;
const itemTypeHintContent = (
<>
@@ -59,48 +64,45 @@ function ItemFormPrimarySection({
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
{/*----------- Item type ----------*/}
<FastField name={'type'}>
{({ form, field: { value }, meta: { touched, error } }) => (
<FormGroup
medium={true}
label={<T id={'item_type'} />}
labelInfo={
<span>
<FieldRequiredHint />
<Hint
content={itemTypeHintContent}
position={Position.BOTTOM_LEFT}
/>
</span>
}
className={'form-group--item-type'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="item_type" />}
inline={true}
>
<RadioGroup
inline={true}
onChange={handleStringChange((_value) => {
form.setFieldValue('type', _value);
changePageSubtitle(transitionItemTypeKeyToLabel(_value));
})}
selectedValue={value}
disabled={value === 'inventory' && !isNewMode}
>
<Radio label={<T id={'service'} />} value="service" />
<Radio label={<T id={'non_inventory'} />} value="non-inventory" />
<Radio label={<T id={'inventory'} />} value="inventory" />
</RadioGroup>
</FormGroup>
)}
</FastField>
<Row>
<Col xs={7}>
{/*----------- Item type ----------*/}
<FastField name={'type'}>
{({ form, field: { value }, meta: { touched, error } }) => (
<FormGroup
medium={true}
label={<T id={'item_type'} />}
labelInfo={
<span>
<FieldRequiredHint />
<Hint
content={itemTypeHintContent}
position={Position.BOTTOM_LEFT}
/>
</span>
}
className={'form-group--item-type'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="item_type" />}
inline={true}
>
<RadioGroup
inline={true}
onChange={handleStringChange((_value) => {
form.setFieldValue('type', _value);
changePageSubtitle(formatMessage({ id: _value }));
})}
selectedValue={value}
disabled={value === 'inventory'}
>
<Radio label={<T id={'service'} />} value="service" />
<Radio
label={<T id={'non_inventory'} />}
value="non-inventory"
/>
<Radio label={<T id={'inventory'} />} value="inventory" />
</RadioGroup>
</FormGroup>
)}
</FastField>
{/*----------- Item name ----------*/}
<FastField name={'name'}>
{({ field, meta: { error, touched } }) => (

10
client/src/containers/Items/utils.js Normal file
View File

@@ -0,0 +1,10 @@
import { formatMessage } from "services/intl";
export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
const table = {
'service': formatMessage({ id: 'service' }),
'inventory': formatMessage({ id: 'inventory' }),
'non-inventory': formatMessage({ id: 'non_inventory' }),
};
return typeof table[itemTypeKey] === 'string' ? table[itemTypeKey] : '';
};

61
client/src/containers/Purchases/Bill/BillsDataTable.js
View File

@@ -1,8 +1,7 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import React, { useEffect, useCallback, useMemo } from 'react';
import {
Intent,
Button,
Classes,
Popover,
Menu,
MenuItem,
@@ -14,9 +13,11 @@ import { useParams } from 'react-router-dom';
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import Icon from 'components/Icon';
import { compose, saveInvoke } from 'utils';
import { CLASSES } from 'common/classes';
import { useIsValuePassed } from 'hooks';
import { LoadingIndicator, Choose } from 'components';
@@ -221,34 +222,36 @@ function BillsDataTable({
const showEmptyStatus = [
billsCurrentViewId === -1,
billsCurrentPage.length === 0,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator loading={billsLoading && !isLoadedBefore} mount={false}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<BillsEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={billsLoading && !isLoadedBefore} mount={false}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<BillsEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={billsCurrentPage}
onFetchData={handleFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={billsPageination.pagesCount}
initialPageSize={billsPageination.pageSize}
initialPageIndex={billsPageination.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
columns={columns}
data={billsCurrentPage}
onFetchData={handleFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={billsPageination.pagesCount}
initialPageSize={billsPageination.pageSize}
initialPageIndex={billsPageination.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}
@@ -264,13 +267,13 @@ export default compose(
billsLoading,
billsPageination,
billsTableQuery,
billsCurrentViewId
billsCurrentViewId,
}) => ({
billsCurrentPage,
billsLoading,
billsPageination,
billsTableQuery,
billsCurrentViewId
billsCurrentViewId,
}),
),
withViewDetails(),

62
client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js
View File

@@ -11,10 +11,12 @@ import {
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import { compose, saveInvoke } from 'utils';
import { useIsValuePassed } from 'hooks';
import { CLASSES } from 'common/classes';
import { DataTable, Money, Icon, Choose, LoadingIndicator } from 'components';
import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
@@ -182,36 +184,38 @@ function PaymentMadeDataTable({
const showEmptyStatuts = [
paymentMadeCurrentPage.length === 0,
paymentMadesCurrentViewId === -1,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator loading={paymentMadesLoading && !isLoaded}>
<Choose>
<Choose.When condition={showEmptyStatuts}>
<PaymentMadesEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={paymentMadesLoading && !isLoaded}>
<Choose>
<Choose.When condition={showEmptyStatuts}>
<PaymentMadesEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={paymentMadeCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={paymentMadePageination.pagesCount}
initialPageSize={paymentMadeTableQuery.page_size}
initialPageIndex={paymentMadeTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
columns={columns}
data={paymentMadeCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={paymentMadePageination.pagesCount}
initialPageSize={paymentMadeTableQuery.page_size}
initialPageIndex={paymentMadeTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}
@@ -225,13 +229,13 @@ export default compose(
paymentMadesLoading,
paymentMadePageination,
paymentMadeTableQuery,
paymentMadesCurrentViewId
paymentMadesCurrentViewId,
}) => ({
paymentMadeCurrentPage,
paymentMadesLoading,
paymentMadePageination,
paymentMadeTableQuery,
paymentMadesCurrentViewId
paymentMadesCurrentViewId,
}),
),
)(PaymentMadeDataTable);

4
client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
View File

@@ -63,7 +63,9 @@ function PaymentReceiveFormPage({
fetchAccounts.isFetching ||
// fetchSettings.isFetching ||
fetchCustomers.isFetching
}>
}
name={'payment-receive-form'}
>
<PaymentReceiveForm
paymentReceiveId={paymentReceiveId}
/>

5
client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
View File

@@ -11,10 +11,13 @@ import {
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import { compose, saveInvoke } from 'utils';
import { useIsValuePassed } from 'hooks';
import { CLASSES } from 'common/classes';
import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
import { LoadingIndicator, DataTable, Choose, Money, Icon } from 'components';
@@ -186,6 +189,7 @@ function PaymentReceivesDataTable({
].every(condition => condition === true);
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator
loading={paymentReceivesLoading && !isLoaded}
mount={false}
@@ -216,6 +220,7 @@ function PaymentReceivesDataTable({
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}

62
client/src/containers/Sales/Receipt/ReceiptsDataTable.js
View File

@@ -11,10 +11,12 @@ import {
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import { compose, saveInvoke } from 'utils';
import { useIsValuePassed } from 'hooks';
import { CLASSES } from 'common/classes';
import { Choose, LoadingIndicator, DataTable, Money, Icon } from 'components';
import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
@@ -192,36 +194,38 @@ function ReceiptsDataTable({
const showEmptyStatus = [
receiptsCurrentViewId === -1,
receiptsCurrentPage.length === 0,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator loading={receiptsLoading && !isLoadedBefore}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ReceiptsEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={receiptsLoading && !isLoadedBefore}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ReceiptsEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={receiptsCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={receiptsPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={receiptTableQuery.page_size}
initialPageIndex={receiptTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
columns={columns}
data={receiptsCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={receiptsPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={receiptTableQuery.page_size}
initialPageIndex={receiptTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}
@@ -236,13 +240,13 @@ export default compose(
receiptsLoading,
receiptsPagination,
receiptTableQuery,
receiptsCurrentViewId
receiptsCurrentViewId,
}) => ({
receiptsCurrentPage,
receiptsLoading,
receiptsPagination,
receiptTableQuery,
receiptsCurrentViewId
receiptsCurrentViewId,
}),
),
)(ReceiptsDataTable);