mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
WIP Version 0.0.1
This commit is contained in:
Ahmed Bouhuolia
@@ -1,56 +0,0 @@
|
||||
import React, {useMemo} from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
} from '@blueprintjs/core';
|
||||
import { FormattedList } from 'react-intl';
|
||||
|
||||
export default function MakeJournalEntriesFooter({
|
||||
formik: { isSubmitting },
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div class="form__floating-footer">
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
name={'save'}
|
||||
onClick={() => {
|
||||
onSubmitClick({ publish: true, redirect: true });
|
||||
}}>
|
||||
Save
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
className={'ml1'}
|
||||
name={'save_and_new'}
|
||||
onClick={() => {
|
||||
onSubmitClick({ publish: true, redirect: false });
|
||||
}}>
|
||||
Save & New
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
className={'button-secondary ml1'}
|
||||
onClick={() => {
|
||||
onSubmitClick({ publish: false, redirect: false });
|
||||
}}>
|
||||
Save as Draft
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={'button-secondary ml1'}
|
||||
onClick={() => {
|
||||
onCancelClick && onCancelClick();
|
||||
}}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,248 +0,0 @@
|
||||
import React, {useMemo, useState, useEffect, useRef, useCallback} from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
ProgressBar,
|
||||
Classes,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
|
||||
import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
|
||||
import MakeJournalEntriesTable from './MakeJournalEntriesTable';
|
||||
import {useFormik} from "formik";
|
||||
import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import {compose, saveFilesInAsync} from 'utils';
|
||||
import moment from 'moment';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import {pick} from 'lodash';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
import MediaConnect from 'connectors/Media.connect';
|
||||
import classNames from 'classnames';
|
||||
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
|
||||
import useMedia from 'hooks/useMedia';
|
||||
|
||||
function MakeJournalEntriesForm({
|
||||
requestSubmitMedia,
|
||||
requestMakeJournalEntries,
|
||||
requestEditManualJournal,
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
editJournal,
|
||||
onFormSubmit,
|
||||
onCancelForm,
|
||||
|
||||
requestDeleteMedia,
|
||||
manualJournalsItems
|
||||
}) {
|
||||
const { setFiles, saveMedia, deletedFiles, setDeletedFiles, deleteMedia } = useMedia({
|
||||
saveCallback: requestSubmitMedia,
|
||||
deleteCallback: requestDeleteMedia,
|
||||
});
|
||||
const handleDropFiles = useCallback((_files) => {
|
||||
setFiles(_files.filter((file) => file.uploaded === false));
|
||||
}, []);
|
||||
|
||||
const savedMediaIds = useRef([]);
|
||||
const clearSavedMediaIds = () => { savedMediaIds.current = []; }
|
||||
|
||||
useEffect(() => {
|
||||
if (editJournal && editJournal.id) {
|
||||
changePageTitle('Edit Journal');
|
||||
changePageSubtitle(`No. ${editJournal.journal_number}`);
|
||||
} else {
|
||||
changePageTitle('New Journal');
|
||||
}
|
||||
}, [changePageTitle, changePageSubtitle, editJournal]);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
journal_number: Yup.string().required(),
|
||||
date: Yup.date().required(),
|
||||
reference: Yup.string(),
|
||||
description: Yup.string(),
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
credit: Yup.number().nullable(),
|
||||
debit: Yup.number().nullable(),
|
||||
account_id: Yup.number().nullable().when(['credit', 'debit'], {
|
||||
is: (credit, debit) => credit || debit,
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
note: Yup.string().nullable(),
|
||||
}),
|
||||
)
|
||||
});
|
||||
|
||||
const saveInvokeSubmit = useCallback((payload) => {
|
||||
onFormSubmit && onFormSubmit(payload)
|
||||
}, [onFormSubmit]);
|
||||
|
||||
const [payload, setPayload] = useState({});
|
||||
|
||||
const defaultEntry = useMemo(() => ({
|
||||
account_id: null,
|
||||
credit: 0,
|
||||
debit: 0,
|
||||
note: '',
|
||||
}), []);
|
||||
|
||||
const defaultInitialValues = useMemo(() => ({
|
||||
journal_number: '',
|
||||
date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
description: '',
|
||||
reference: '',
|
||||
entries: [
|
||||
defaultEntry,
|
||||
defaultEntry,
|
||||
defaultEntry,
|
||||
defaultEntry,
|
||||
],
|
||||
}), [defaultEntry]);
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
...(editJournal) ? {
|
||||
...pick(editJournal, Object.keys(defaultInitialValues)),
|
||||
entries: editJournal.entries.map((entry) => ({
|
||||
...pick(entry, Object.keys(defaultEntry)),
|
||||
})),
|
||||
} : {
|
||||
...defaultInitialValues,
|
||||
}
|
||||
}), [editJournal, defaultInitialValues, defaultEntry]);
|
||||
|
||||
const initialAttachmentFiles = useMemo(() => {
|
||||
return editJournal && editJournal.media
|
||||
? editJournal.media.map((attach) => ({
|
||||
preview: attach.attachment_file,
|
||||
uploaded: true,
|
||||
metadata: { ...attach },
|
||||
})) : [];
|
||||
}, [editJournal]);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: async (values, actions) => {
|
||||
const entries = values.entries.filter((entry) => (
|
||||
(entry.credit || entry.debit)
|
||||
));
|
||||
const getTotal = (type = 'credit') => {
|
||||
return entries.reduce((total, item) => {
|
||||
return item[type] ? item[type] + total : total;
|
||||
}, 0);
|
||||
}
|
||||
const totalCredit = getTotal('credit');
|
||||
const totalDebit = getTotal('debit');
|
||||
|
||||
// Validate the total credit should be eqials total debit.
|
||||
if (totalCredit !== totalDebit) {
|
||||
AppToaster.show({
|
||||
message: 'credit_and_debit_not_equal',
|
||||
});
|
||||
actions.setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const form = { ...values, status: payload.publish, entries };
|
||||
|
||||
const saveJournal = (mediaIds) => new Promise((resolve, reject) => {
|
||||
const requestForm = { ...form, media_ids: mediaIds };
|
||||
|
||||
if (editJournal && editJournal.id) {
|
||||
requestEditManualJournal(editJournal.id, requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'manual_journal_has_been_edited',
|
||||
});
|
||||
actions.setSubmitting(false);
|
||||
saveInvokeSubmit({ action: 'update', ...payload });
|
||||
clearSavedMediaIds([]);
|
||||
resolve(response);
|
||||
}).catch((error) => {
|
||||
actions.setSubmitting(false);
|
||||
reject(error);
|
||||
});
|
||||
} else {
|
||||
requestMakeJournalEntries(requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'manual_journal_has_been_submit',
|
||||
});
|
||||
actions.setSubmitting(false);
|
||||
saveInvokeSubmit({ action: 'new', ...payload });
|
||||
clearSavedMediaIds();
|
||||
resolve(response);
|
||||
}).catch((error) => {
|
||||
actions.setSubmitting(false);
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
saveMedia(),
|
||||
deleteMedia(),
|
||||
]).then(([savedMediaResponses]) => {
|
||||
const mediaIds = savedMediaResponses.map(res => res.data.media.id);
|
||||
savedMediaIds.current = mediaIds;
|
||||
|
||||
return savedMediaResponses;
|
||||
}).then(() => {
|
||||
return saveJournal(savedMediaIds.current);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmitClick = useCallback((payload) => {
|
||||
setPayload(payload);
|
||||
formik.handleSubmit();
|
||||
}, [setPayload, formik]);
|
||||
|
||||
const handleCancelClick = useCallback((payload) => {
|
||||
onCancelForm && onCancelForm(payload);
|
||||
}, [onCancelForm]);
|
||||
|
||||
const handleDeleteFile = useCallback((_deletedFiles) => {
|
||||
_deletedFiles.forEach((deletedFile) => {
|
||||
if (deletedFile.uploaded && deletedFile.metadata.id) {
|
||||
setDeletedFiles([
|
||||
...deletedFiles, deletedFile.metadata.id,
|
||||
]);
|
||||
}
|
||||
});
|
||||
}, [setDeletedFiles, deletedFiles]);
|
||||
|
||||
return (
|
||||
<div class="make-journal-entries">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<MakeJournalEntriesHeader formik={formik} />
|
||||
|
||||
<MakeJournalEntriesTable
|
||||
initialValues={initialValues}
|
||||
formik={formik}
|
||||
defaultRow={defaultEntry} />
|
||||
|
||||
<MakeJournalEntriesFooter
|
||||
formik={formik}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancelClick={handleCancelClick} />
|
||||
</form>
|
||||
|
||||
<Dragzone
|
||||
initialFiles={initialAttachmentFiles}
|
||||
onDrop={handleDropFiles}
|
||||
onDeleteFile={handleDeleteFile}
|
||||
hint={'Attachments: Maxiumum size: 20MB'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ManualJournalsConnect,
|
||||
MakeJournalEntriesConnect,
|
||||
AccountsConnect,
|
||||
DashboardConnect,
|
||||
MediaConnect,
|
||||
)(MakeJournalEntriesForm);
|
||||
@@ -1,103 +0,0 @@
|
||||
import React, {useMemo, useCallback} from 'react';
|
||||
import {
|
||||
InputGroup,
|
||||
FormGroup,
|
||||
Intent,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import {DateInput} from '@blueprintjs/datetime';
|
||||
import {useIntl} from 'react-intl';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import moment from 'moment';
|
||||
import {momentFormatter} from 'utils';
|
||||
import Icon from 'components/Icon';
|
||||
import CurrenciesSelectList from 'components/CurrenciesSelectList';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
|
||||
export default function MakeJournalEntriesHeader({
|
||||
formik: { errors, touched, setFieldValue, getFieldProps }
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleDateChange = useCallback((date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
setFieldValue('date', formatted);
|
||||
}, [setFieldValue]);
|
||||
|
||||
const infoIcon = useMemo(() =>
|
||||
(<Icon icon="info-circle" iconSize={12} />), []);
|
||||
|
||||
return (
|
||||
<div class="make-journal-entries__header">
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={'Journal number'}
|
||||
labelInfo={infoIcon}
|
||||
className={'form-group--journal-number'}
|
||||
intent={(errors.journal_number && touched.journal_number) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="journal_number" {...{errors, touched}} />}
|
||||
fill={true}>
|
||||
|
||||
<InputGroup
|
||||
intent={(errors.journal_number && touched.journal_number) && Intent.DANGER}
|
||||
fill={true}
|
||||
{...getFieldProps('journal_number')} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={2}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'date'})}
|
||||
intent={(errors.date && touched.date) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="date" {...{errors, touched}} />}
|
||||
minimal={true}>
|
||||
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
defaultValue={new Date()}
|
||||
onChange={handleDateChange}
|
||||
popoverProps={{ position: Position.BOTTOM }} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={4}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'description'})}
|
||||
className={'form-group--description'}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="description" {...{errors, touched}} />}
|
||||
fill={true}>
|
||||
|
||||
<InputGroup
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
fill={true}
|
||||
{...getFieldProps('description')} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={'Reference'}
|
||||
labelInfo={infoIcon}
|
||||
className={'form-group--reference'}
|
||||
intent={(errors.reference && touched.reference) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="reference" {...{errors, touched}} />}
|
||||
fill={true}>
|
||||
|
||||
<InputGroup
|
||||
intent={(errors.reference && touched.reference) && Intent.DANGER}
|
||||
fill={true}
|
||||
{...getFieldProps('reference')} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={4}>
|
||||
<CurrenciesSelectList />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import React, {useMemo, useCallback} from 'react';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import useAsync from 'hooks/async';
|
||||
import MakeJournalEntriesForm from './MakeJournalEntriesForm';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import {compose} from 'utils';
|
||||
import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
|
||||
function MakeJournalEntriesPage({
|
||||
fetchManualJournal,
|
||||
getManualJournal,
|
||||
requestFetchAccounts,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { id } = useParams();
|
||||
|
||||
const fetchJournal = useAsync(() => {
|
||||
return Promise.all([
|
||||
requestFetchAccounts(),
|
||||
(id) && fetchManualJournal(id),
|
||||
]);
|
||||
});
|
||||
|
||||
const editJournal = useMemo(() =>
|
||||
getManualJournal(id) || null,
|
||||
[getManualJournal, id]);
|
||||
|
||||
const handleFormSubmit = useCallback((payload) => {
|
||||
payload.redirect &&
|
||||
history.push('/dashboard/accounting/manual-journals');
|
||||
}, [history]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
history.push('/dashboard/accounting/manual-journals');
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<DashboardInsider loading={fetchJournal.pending} name={'make-journal-page'}>
|
||||
<MakeJournalEntriesForm
|
||||
onFormSubmit={handleFormSubmit}
|
||||
editJournal={editJournal}
|
||||
onCancelForm={handleCancel} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
AccountsConnect,
|
||||
MakeJournalEntriesConnect,
|
||||
)(MakeJournalEntriesPage);
|
||||
@@ -1,227 +0,0 @@
|
||||
import React, {useState, useMemo, useEffect, useCallback} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Icon from 'components/Icon';
|
||||
import AccountsConnect from 'connectors/Accounts.connector.js';
|
||||
import {compose, formattedAmount} from 'utils';
|
||||
import {
|
||||
AccountsListFieldCell,
|
||||
MoneyFieldCell,
|
||||
InputGroupCell,
|
||||
} from 'components/DataTableCells';
|
||||
import { omit } from 'lodash';
|
||||
|
||||
// Actions cell renderer.
|
||||
const ActionsCellRenderer = ({
|
||||
row: { index },
|
||||
column: { id },
|
||||
cell: { value: initialValue },
|
||||
data,
|
||||
payload,
|
||||
}) => {
|
||||
if (data.length <= (index + 2)) {
|
||||
return '';
|
||||
}
|
||||
const onClickRemoveRole = () => {
|
||||
payload.removeRow(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
icon={<Icon icon="times-circle" iconSize={14} />}
|
||||
iconSize={14}
|
||||
className="ml2"
|
||||
minimal={true}
|
||||
intent={Intent.DANGER}
|
||||
onClick={onClickRemoveRole} />
|
||||
);
|
||||
};
|
||||
|
||||
// Total text cell renderer.
|
||||
const TotalAccountCellRenderer = (chainedComponent) => (props) => {
|
||||
if (props.data.length === (props.row.index + 2)) {
|
||||
return (<span>{ 'Total USD' }</span>);
|
||||
}
|
||||
return chainedComponent(props);
|
||||
};
|
||||
|
||||
// Total credit/debit cell renderer.
|
||||
const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
|
||||
if (props.data.length === (props.row.index + 2)) {
|
||||
const total = props.data.reduce((total, entry) => {
|
||||
const amount = parseInt(entry[type], 10);
|
||||
const computed = amount ? total + amount : total;
|
||||
|
||||
return computed;
|
||||
}, 0);
|
||||
|
||||
return (<span>{ formattedAmount(total, 'USD') }</span>);
|
||||
}
|
||||
return chainedComponent(props);
|
||||
};
|
||||
|
||||
const NoteCellRenderer = (chainedComponent) => (props) => {
|
||||
if (props.data.length === (props.row.index + 2)) {
|
||||
return '';
|
||||
}
|
||||
return chainedComponent(props);
|
||||
};
|
||||
|
||||
/**
|
||||
* Make journal entries table component.
|
||||
*/
|
||||
function MakeJournalEntriesTable({
|
||||
formik: { errors, values, setFieldValue },
|
||||
accounts,
|
||||
onClickRemoveRow,
|
||||
onClickAddNewRow,
|
||||
defaultRow,
|
||||
initialValues,
|
||||
}) {
|
||||
const [rows, setRow] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setRow([
|
||||
...initialValues.entries.map((e) => ({ ...e, rowType: 'editor'})),
|
||||
defaultRow,
|
||||
defaultRow,
|
||||
])
|
||||
}, [initialValues, defaultRow])
|
||||
|
||||
// Handles update datatable data.
|
||||
const handleUpdateData = useCallback((rowIndex, columnId, value) => {
|
||||
const newRows = rows.map((row, index) => {
|
||||
if (index === rowIndex) {
|
||||
return { ...rows[rowIndex], [columnId]: value };
|
||||
}
|
||||
return { ...row };
|
||||
});
|
||||
setRow(newRows);
|
||||
setFieldValue('entries', newRows.map(row => ({
|
||||
...omit(row, ['rowType']),
|
||||
})));
|
||||
}, [rows, setFieldValue]);
|
||||
|
||||
// Handles click remove datatable row.
|
||||
const handleRemoveRow = useCallback((rowIndex) => {
|
||||
const removeIndex = parseInt(rowIndex, 10);
|
||||
const newRows = rows.filter((row, index) => index !== removeIndex);
|
||||
|
||||
setRow([ ...newRows ]);
|
||||
setFieldValue('entries', newRows
|
||||
.filter(row => row.rowType === 'editor')
|
||||
.map(row => ({ ...omit(row, ['rowType']) })
|
||||
));
|
||||
onClickRemoveRow && onClickRemoveRow(removeIndex);
|
||||
}, [rows, setFieldValue, onClickRemoveRow]);
|
||||
|
||||
// Memorized data table columns.
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
Header: '#',
|
||||
accessor: 'index',
|
||||
Cell: ({ row: {index} }) => (
|
||||
<span>{ index + 1 }</span>
|
||||
),
|
||||
className: "index",
|
||||
width: 40,
|
||||
disableResizing: true,
|
||||
disableSortBy: true,
|
||||
},
|
||||
{
|
||||
Header: 'Account',
|
||||
id: 'account_id',
|
||||
accessor: 'account_id',
|
||||
Cell: TotalAccountCellRenderer(AccountsListFieldCell),
|
||||
className: "account",
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 250,
|
||||
},
|
||||
{
|
||||
Header: 'Credit (USD)',
|
||||
accessor: 'credit',
|
||||
Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
|
||||
className: "credit",
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
Header: 'Debit (USD)',
|
||||
accessor: 'debit',
|
||||
Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
|
||||
className: "debit",
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
Header: 'Note',
|
||||
accessor: 'note',
|
||||
Cell: NoteCellRenderer(InputGroupCell),
|
||||
disableSortBy: true,
|
||||
className: "note",
|
||||
},
|
||||
{
|
||||
Header: '',
|
||||
accessor: 'action',
|
||||
Cell: ActionsCellRenderer,
|
||||
className: "actions",
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 45,
|
||||
}
|
||||
], []);
|
||||
|
||||
// Handles click new line.
|
||||
const onClickNewRow = useCallback(() => {
|
||||
setRow([
|
||||
...rows,
|
||||
{ ...defaultRow, rowType: 'editor' },
|
||||
]);
|
||||
onClickAddNewRow && onClickAddNewRow();
|
||||
}, [defaultRow, rows, onClickAddNewRow]);
|
||||
|
||||
const rowClassNames = useCallback((row) => ({
|
||||
'row--total': rows.length === (row.index + 2),
|
||||
}), [rows]);
|
||||
|
||||
return (
|
||||
<div class="make-journal-entries__table">
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
rowClassNames={rowClassNames}
|
||||
payload={{
|
||||
accounts,
|
||||
errors: errors.entries || [],
|
||||
updateData: handleUpdateData,
|
||||
removeRow: handleRemoveRow,
|
||||
}}/>
|
||||
|
||||
<div class="mt1">
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--new-line'}
|
||||
onClick={onClickNewRow}>
|
||||
New lines
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--clear-lines ml1'}
|
||||
onClick={onClickNewRow}>
|
||||
Clear all lines
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AccountsConnect,
|
||||
)(MakeJournalEntriesTable);
|
||||
@@ -1,191 +0,0 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Route, Switch, useHistory } from 'react-router-dom';
|
||||
import useAsync from 'hooks/async';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import ManualJournalsViewTabs from 'components/JournalEntry/ManualJournalsViewTabs';
|
||||
import ManualJournalsDataTable from 'components/JournalEntry/ManualJournalsDataTable';
|
||||
import ManualJournalsActionsBar from 'components/JournalEntry/ManualJournalActionsBar';
|
||||
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import CustomViewConnect from 'connectors/CustomView.connector';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function ManualJournalsTable({
|
||||
changePageTitle,
|
||||
|
||||
fetchResourceViews,
|
||||
fetchManualJournalsTable,
|
||||
|
||||
requestDeleteManualJournal,
|
||||
requestPublishManualJournal,
|
||||
requestDeleteBulkManualJournals,
|
||||
|
||||
addManualJournalsTableQueries
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const [deleteManualJournal, setDeleteManualJournal] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const [bulkDelete, setBulkDelete] = useState(false);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchResourceViews('manual_journals'),
|
||||
]);
|
||||
});
|
||||
|
||||
const fetchManualJournalsHook = useAsync(async () => {
|
||||
return fetchManualJournalsTable();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle('Manual Journals');
|
||||
}, [changePageTitle]);
|
||||
|
||||
// Handle delete manual journal click.
|
||||
const handleDeleteJournal = useCallback((journal) => {
|
||||
setDeleteManualJournal(journal);
|
||||
}, [setDeleteManualJournal]);
|
||||
|
||||
// Handle cancel delete manual journal.
|
||||
const handleCancelManualJournalDelete = useCallback(() => {
|
||||
setDeleteManualJournal(false);
|
||||
}, [setDeleteManualJournal]);
|
||||
|
||||
// Handle confirm delete manual journal.
|
||||
const handleConfirmManualJournalDelete = useCallback(() => {
|
||||
requestDeleteManualJournal(deleteManualJournal.id).then(() => {
|
||||
setDeleteManualJournal(false);
|
||||
AppToaster.show({ message: 'the_manual_Journal_has_been_deleted' });
|
||||
});
|
||||
}, [deleteManualJournal, requestDeleteManualJournal]);
|
||||
|
||||
const handleBulkDelete = useCallback((accountsIds) => {
|
||||
setBulkDelete(accountsIds);
|
||||
}, [setBulkDelete]);
|
||||
|
||||
const handleConfirmBulkDelete = useCallback(() => {
|
||||
requestDeleteBulkManualJournals(bulkDelete).then(() => {
|
||||
setBulkDelete(false);
|
||||
AppToaster.show({ message: 'the_accounts_have_been_deleted' });
|
||||
}).catch((error) => {
|
||||
setBulkDelete(false);
|
||||
});
|
||||
}, [
|
||||
requestDeleteBulkManualJournals,
|
||||
bulkDelete,
|
||||
]);
|
||||
|
||||
const handleCancelBulkDelete = useCallback(() => {
|
||||
setBulkDelete(false);
|
||||
}, []);
|
||||
|
||||
const handleEditJournal = useCallback((journal) => {
|
||||
history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
|
||||
}, [history]);
|
||||
|
||||
// Handle filter change to re-fetch data-table.
|
||||
const handleFilterChanged = useCallback(() => {
|
||||
fetchManualJournalsHook.execute();
|
||||
}, [fetchManualJournalsHook]);
|
||||
|
||||
// Handle view change to re-fetch data table.
|
||||
const handleViewChanged = useCallback(() => {
|
||||
fetchManualJournalsHook.execute();
|
||||
}, [fetchManualJournalsHook]);
|
||||
|
||||
// Handle fetch data of manual jouranls datatable.
|
||||
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
|
||||
addManualJournalsTableQueries({
|
||||
...(sortBy.length > 0) ? {
|
||||
column_sort_by: sortBy[0].id,
|
||||
sort_order: sortBy[0].desc ? 'desc' : 'asc',
|
||||
} : {},
|
||||
});
|
||||
fetchManualJournalsHook.execute();
|
||||
}, [
|
||||
fetchManualJournalsHook,
|
||||
addManualJournalsTableQueries,
|
||||
]);
|
||||
|
||||
const handlePublishJournal = useCallback((journal) => {
|
||||
requestPublishManualJournal(journal.id).then(() => {
|
||||
AppToaster.show({ message: 'the_manual_journal_id_has_been_published' });
|
||||
})
|
||||
}, [requestPublishManualJournal]);
|
||||
|
||||
// Handle selected rows change.
|
||||
const handleSelectedRowsChange = useCallback((accounts) => {
|
||||
setSelectedRows(accounts);
|
||||
}, [setSelectedRows]);
|
||||
|
||||
return (
|
||||
<DashboardInsider loading={fetchHook.pending} name={'manual-journals'}>
|
||||
<ManualJournalsActionsBar
|
||||
onBulkDelete={handleBulkDelete}
|
||||
selectedRows={selectedRows}
|
||||
onFilterChanged={handleFilterChanged} />
|
||||
|
||||
<DashboardPageContent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact={true}
|
||||
path={[
|
||||
'/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
|
||||
'/dashboard/accounting/manual-journals',
|
||||
]}>
|
||||
<ManualJournalsViewTabs
|
||||
onViewChanged={handleViewChanged} />
|
||||
</Route>
|
||||
</Switch>
|
||||
|
||||
<ManualJournalsDataTable
|
||||
onDeleteJournal={handleDeleteJournal}
|
||||
onFetchData={handleFetchData}
|
||||
onEditJournal={handleEditJournal}
|
||||
onPublishJournal={handlePublishJournal}
|
||||
onSelectedRowsChange={handleSelectedRowsChange} />
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteManualJournal}
|
||||
onCancel={handleCancelManualJournalDelete}
|
||||
onConfirm={handleConfirmManualJournalDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={bulkDelete}
|
||||
onCancel={handleCancelBulkDelete}
|
||||
onConfirm={handleConfirmBulkDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ManualJournalsConnect,
|
||||
CustomViewConnect,
|
||||
ResourceConnect,
|
||||
DashboardConnect
|
||||
)(ManualJournalsTable);
|
||||
@@ -1,243 +0,0 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Route,
|
||||
Switch,
|
||||
} from 'react-router-dom';
|
||||
import useAsync from 'hooks/async';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import AccountsViewsTabs from 'components/Accounts/AccountsViewsTabs';
|
||||
import AccountsDataTable from 'components/Accounts/AccountsDataTable';
|
||||
import DashboardActionsBar from 'components/Accounts/AccountsActionsBar';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import CustomViewConnect from 'connectors/CustomView.connector';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function AccountsChart({
|
||||
changePageTitle,
|
||||
requestDeleteAccount,
|
||||
requestInactiveAccount,
|
||||
fetchResourceViews,
|
||||
fetchResourceFields,
|
||||
requestFetchAccountsTable,
|
||||
addAccountsTableQueries,
|
||||
requestDeleteBulkAccounts,
|
||||
}) {
|
||||
const [deleteAccount, setDeleteAccount] = useState(false);
|
||||
const [inactiveAccount, setInactiveAccount] = useState(false);
|
||||
const [bulkDelete, setBulkDelete] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
const [tableLoading, setTableLoading] = useState(false);
|
||||
|
||||
// Fetch accounts resource views and fields.
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchResourceViews('accounts'),
|
||||
fetchResourceFields('accounts'),
|
||||
]);
|
||||
});
|
||||
|
||||
// Fetch accounts list according to the given custom view id.
|
||||
const fetchAccountsHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
requestFetchAccountsTable(),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle('Chart of Accounts');
|
||||
}, [changePageTitle]);
|
||||
|
||||
// Handle click and cancel/confirm account delete
|
||||
const handleDeleteAccount = (account) => { setDeleteAccount(account); };
|
||||
|
||||
// handle cancel delete account alert.
|
||||
const handleCancelAccountDelete = useCallback(() => { setDeleteAccount(false); }, []);
|
||||
|
||||
// Handle confirm account delete
|
||||
const handleConfirmAccountDelete = useCallback(() => {
|
||||
requestDeleteAccount(deleteAccount.id).then(() => {
|
||||
setDeleteAccount(false);
|
||||
AppToaster.show({ message: 'the_account_has_been_deleted' });
|
||||
}).catch(errors => {
|
||||
setDeleteAccount(false);
|
||||
if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
|
||||
AppToaster.show({
|
||||
message: 'cannot_delete_predefined_account',
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
}
|
||||
if (errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')) {
|
||||
AppToaster.show({
|
||||
message: 'cannot_delete_account_has_associated_transactions'
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [deleteAccount, requestDeleteAccount]);
|
||||
|
||||
// Handle cancel/confirm account inactive.
|
||||
const handleInactiveAccount = useCallback((account) => {
|
||||
setInactiveAccount(account);
|
||||
}, []);
|
||||
|
||||
// Handle cancel inactive account alert.
|
||||
const handleCancelInactiveAccount = useCallback(() => {
|
||||
setInactiveAccount(false);
|
||||
}, []);
|
||||
|
||||
// Handle confirm account activation.
|
||||
const handleConfirmAccountActive = useCallback(() => {
|
||||
requestInactiveAccount(inactiveAccount.id).then(() => {
|
||||
setInactiveAccount(false);
|
||||
requestFetchAccountsTable();
|
||||
AppToaster.show({ message: 'the_account_has_been_inactivated' });
|
||||
});
|
||||
}, [inactiveAccount, requestFetchAccountsTable, requestInactiveAccount]);
|
||||
|
||||
|
||||
const handleEditAccount = (account) => {
|
||||
|
||||
};
|
||||
|
||||
const handleRestoreAccount = (account) => {
|
||||
|
||||
};
|
||||
|
||||
const handleBulkDelete = useCallback((accountsIds) => {
|
||||
setBulkDelete(accountsIds);
|
||||
}, [setBulkDelete]);
|
||||
|
||||
const handleConfirmBulkDelete = useCallback(() => {
|
||||
requestDeleteBulkAccounts(bulkDelete).then(() => {
|
||||
setBulkDelete(false);
|
||||
AppToaster.show({ message: 'the_accounts_have_been_deleted' });
|
||||
}).catch((error) => {
|
||||
setBulkDelete(false);
|
||||
});
|
||||
}, [requestDeleteBulkAccounts, bulkDelete]);
|
||||
|
||||
const handleCancelBulkDelete = useCallback(() => {
|
||||
setBulkDelete(false);
|
||||
}, []);
|
||||
|
||||
const handleBulkArchive = useCallback((accounts) => {
|
||||
|
||||
}, []);
|
||||
|
||||
// Handle selected rows change.
|
||||
const handleSelectedRowsChange = useCallback((accounts) => {
|
||||
setSelectedRows(accounts);
|
||||
}, [setSelectedRows]);
|
||||
|
||||
// Refetches accounts data table when current custom view changed.
|
||||
const handleFilterChanged = useCallback(() => {
|
||||
fetchAccountsHook.execute();
|
||||
}, [fetchAccountsHook]);
|
||||
|
||||
// Refetch accounts data table when current custom view changed.
|
||||
const handleViewChanged = useCallback(() => {
|
||||
setTableLoading(true);
|
||||
|
||||
fetchAccountsHook.execute().finally(() => {
|
||||
setTableLoading(false);
|
||||
});
|
||||
}, [fetchAccountsHook]);
|
||||
|
||||
// Handle fetch data of accounts datatable.
|
||||
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
|
||||
addAccountsTableQueries({
|
||||
...(sortBy.length > 0) ? {
|
||||
column_sort_by: sortBy[0].id,
|
||||
sort_order: sortBy[0].desc ? 'desc' : 'asc',
|
||||
} : {},
|
||||
});
|
||||
fetchAccountsHook.execute();
|
||||
}, [fetchAccountsHook, addAccountsTableQueries]);
|
||||
|
||||
return (
|
||||
<DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
|
||||
<DashboardActionsBar
|
||||
selectedRows={selectedRows}
|
||||
onFilterChanged={handleFilterChanged}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
onBulkArchive={handleBulkArchive} />
|
||||
|
||||
<DashboardPageContent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact={true}
|
||||
path={[
|
||||
'/dashboard/accounts/:custom_view_id/custom_view',
|
||||
'/dashboard/accounts',
|
||||
]}>
|
||||
<AccountsViewsTabs
|
||||
onViewChanged={handleViewChanged} />
|
||||
|
||||
<AccountsDataTable
|
||||
onDeleteAccount={handleDeleteAccount}
|
||||
onInactiveAccount={handleInactiveAccount}
|
||||
onRestoreAccount={handleRestoreAccount}
|
||||
onEditAccount={handleEditAccount}
|
||||
onFetchData={handleFetchData}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
loading={tableLoading} />
|
||||
</Route>
|
||||
</Switch>
|
||||
|
||||
<Alert
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Move to Trash"
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteAccount}
|
||||
onCancel={handleCancelAccountDelete}
|
||||
onConfirm={handleConfirmAccountDelete}>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
|
||||
but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Inactivate"
|
||||
icon="trash"
|
||||
intent={Intent.WARNING}
|
||||
isOpen={inactiveAccount}
|
||||
onCancel={handleCancelInactiveAccount}
|
||||
onConfirm={handleConfirmAccountActive}>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
|
||||
but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Delete"
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={bulkDelete}
|
||||
onCancel={handleCancelBulkDelete}
|
||||
onConfirm={handleConfirmBulkDelete}>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
|
||||
but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AccountsConnect,
|
||||
CustomViewConnect,
|
||||
ResourceConnect,
|
||||
DashboardConnect,
|
||||
)(AccountsChart);
|
||||
@@ -1,358 +0,0 @@
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
TextArea,
|
||||
MenuItem,
|
||||
Checkbox,
|
||||
Position
|
||||
} from '@blueprintjs/core';
|
||||
import { Select } from '@blueprintjs/select';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { omit } from 'lodash';
|
||||
import { compose } from 'utils';
|
||||
import useAsync from 'hooks/async';
|
||||
import Dialog from 'components/Dialog';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import classNames from 'classnames';
|
||||
import Icon from 'components/Icon';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
|
||||
function AccountFormDialog({
|
||||
name,
|
||||
payload,
|
||||
isOpen,
|
||||
accountsTypes,
|
||||
accounts,
|
||||
requestFetchAccounts,
|
||||
requestFetchAccountTypes,
|
||||
requestFetchAccount,
|
||||
closeDialog,
|
||||
requestSubmitAccount,
|
||||
requestEditAccount,
|
||||
getAccountById,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const accountFormValidationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
code: Yup.number(),
|
||||
account_type_id: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage({ id: 'required' })),
|
||||
description: Yup.string().trim()
|
||||
});
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
account_type_id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
}), []);
|
||||
|
||||
const [selectedAccountType, setSelectedAccountType] = useState(null);
|
||||
const [selectedSubaccount, setSelectedSubaccount] = useState(
|
||||
payload.action === 'new_child' ?
|
||||
accounts.find(a => a.id === payload.id) : null,
|
||||
);
|
||||
|
||||
const editAccount = useMemo(() =>
|
||||
payload.action === 'edit' ? getAccountById(payload.id) : null,
|
||||
[payload, getAccountById]);
|
||||
|
||||
const transformApiErrors = (errors) => {
|
||||
const fields = {};
|
||||
if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
|
||||
fields.code = 'Account code is not unqiue.'
|
||||
}
|
||||
return fields;
|
||||
};
|
||||
|
||||
// Formik
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...(payload.action === 'edit' && editAccount)
|
||||
? editAccount : initialValues,
|
||||
},
|
||||
validationSchema: accountFormValidationSchema,
|
||||
onSubmit: (values, { setSubmitting, setErrors }) => {
|
||||
const exclude = ['subaccount'];
|
||||
|
||||
if (payload.action === 'edit') {
|
||||
requestEditAccount({
|
||||
payload: payload.id,
|
||||
form: { ...omit(values, [...exclude, 'account_type_id']) }
|
||||
}).then((response) => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_account_has_been_edited',
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
}).catch((errors) => {
|
||||
setSubmitting(false);
|
||||
setErrors(transformApiErrors(errors));
|
||||
});
|
||||
} else {
|
||||
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(response => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_account_has_been_submit',
|
||||
intent: Intent.SUCCESS,
|
||||
position: Position.BOTTOM,
|
||||
});
|
||||
setSubmitting(false);
|
||||
}).catch((errors) => {
|
||||
setSubmitting(false);
|
||||
setErrors(transformApiErrors(errors));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
const { errors, values, touched } = useMemo(() => (formik), [formik]);
|
||||
|
||||
// Set default account type.
|
||||
useEffect(() => {
|
||||
if (editAccount && editAccount.account_type_id) {
|
||||
const defaultType = accountsTypes.find((t) =>
|
||||
t.id === editAccount.account_type_id);
|
||||
|
||||
defaultType && setSelectedAccountType(defaultType);
|
||||
}
|
||||
}, [editAccount, accountsTypes]);
|
||||
|
||||
// Filters accounts types items.
|
||||
const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
|
||||
const normalizedTitle = accountType.name.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return normalizedTitle.indexOf(normalizedQuery) >= 0;
|
||||
}
|
||||
};
|
||||
|
||||
// Account type item of select filed.
|
||||
const accountTypeItem = (item, { handleClick, modifiers, query }) => {
|
||||
return <MenuItem text={item.name} key={item.id} onClick={handleClick} />;
|
||||
};
|
||||
|
||||
// Account item of select accounts field.
|
||||
const accountItem = (item, { handleClick, modifiers, query }) => {
|
||||
return (
|
||||
<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
|
||||
);
|
||||
};
|
||||
|
||||
// Filters accounts items.
|
||||
const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
|
||||
const normalizedTitle = account.name.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handles dialog close.
|
||||
const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
requestFetchAccounts(),
|
||||
requestFetchAccountTypes(),
|
||||
// Fetch the target in case edit mode.
|
||||
...(payload.action === 'edit' ?
|
||||
[requestFetchAccount(payload.id)] : [])
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// Fetch requests on dialog opening.
|
||||
const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
|
||||
|
||||
const onChangeAccountType = useCallback((accountType) => {
|
||||
setSelectedAccountType(accountType);
|
||||
formik.setFieldValue('account_type_id', accountType.id);
|
||||
}, [setSelectedAccountType, formik]);
|
||||
|
||||
// Handles change sub-account.
|
||||
const onChangeSubaccount = useCallback((account) => {
|
||||
setSelectedSubaccount(account);
|
||||
formik.setFieldValue('parent_account_id', account.id);
|
||||
}, [setSelectedSubaccount, formik]);
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
formik.resetForm();
|
||||
setSelectedSubaccount(null);
|
||||
setSelectedAccountType(null);
|
||||
}, [formik]);
|
||||
|
||||
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
|
||||
|
||||
const subAccountLabel = useMemo(() => {
|
||||
return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
|
||||
}, []);
|
||||
|
||||
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
|
||||
className={{
|
||||
'dialog--loading': fetchHook.pending,
|
||||
'dialog--account-form': true
|
||||
}}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
isOpen={isOpen}
|
||||
isLoading={fetchHook.pending}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={'Account Type'}
|
||||
labelInfo={requiredSpan}
|
||||
className={classNames(
|
||||
'form-group--account-type',
|
||||
'form-group--select-list',
|
||||
Classes.FILL)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name="account_type_id" {...formik} />}
|
||||
intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
|
||||
>
|
||||
<Select
|
||||
items={accountsTypes}
|
||||
noResults={<MenuItem disabled={true} text='No results.' />}
|
||||
itemRenderer={accountTypeItem}
|
||||
itemPredicate={filterAccountTypeItems}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeAccountType}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={selectedAccountType ?
|
||||
selectedAccountType.name : 'Select account type'}
|
||||
disabled={payload.action === 'edit'}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Account Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--account-name'}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="name" {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
{...formik.getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Account Code'}
|
||||
className={'form-group--account-code'}
|
||||
intent={(errors.code && touched.code) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="code" {...formik} />}
|
||||
inline={true}
|
||||
labelInfo={infoIcon}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={(errors.code && touched.code) && Intent.DANGER}
|
||||
{...formik.getFieldProps('code')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={' '}
|
||||
className={classNames('form-group--subaccount')}
|
||||
inline={true}
|
||||
>
|
||||
<Checkbox
|
||||
inline={true}
|
||||
label={subAccountLabel}
|
||||
{...formik.getFieldProps('subaccount')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{values.subaccount && (
|
||||
<FormGroup
|
||||
label={'Parent Account'}
|
||||
className={classNames(
|
||||
'form-group--parent-account',
|
||||
'form-group--select-list',
|
||||
Classes.FILL)}
|
||||
inline={true}
|
||||
>
|
||||
<Select
|
||||
items={accounts}
|
||||
noResults={<MenuItem disabled={true} text='No results.' />}
|
||||
itemRenderer={accountItem}
|
||||
itemPredicate={filterAccountsPredicater}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeSubaccount}
|
||||
{...formik.getFieldProps('parent_account_id')}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={
|
||||
selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
|
||||
}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
)}
|
||||
|
||||
<FormGroup
|
||||
label={'Description'}
|
||||
className={'form-group--description'}
|
||||
intent={formik.errors.description && Intent.DANGER}
|
||||
helperText={formik.errors.description && formik.errors.credential}
|
||||
inline={true}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
{...formik.getFieldProps('description')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>Close</Button>
|
||||
<Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
|
||||
{payload.action === 'edit' ? 'Edit' : 'Submit'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AccountFormDialogConnect,
|
||||
AccountsConnect,
|
||||
DialogReduxConnect,
|
||||
DialogConnect
|
||||
)(AccountFormDialog);
|
||||
@@ -1,182 +0,0 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import * as Yup from 'yup';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import { compose } from 'utils';
|
||||
import Dialog from 'components/Dialog';
|
||||
import useAsync from 'hooks/async';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import classNames from 'classnames';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
function CurrencyDialog({
|
||||
name,
|
||||
payload,
|
||||
isOpen,
|
||||
closeDialog,
|
||||
requestFetchCurrencies,
|
||||
requestSubmitCurrencies,
|
||||
requestEditCurrency,
|
||||
editCurrency,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
currency_name: Yup.string().required(
|
||||
intl.formatMessage({ id: 'required' })
|
||||
),
|
||||
currency_code: Yup.string()
|
||||
.max(4)
|
||||
.required(intl.formatMessage({ id: 'required' })),
|
||||
});
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
currency_name: '',
|
||||
currency_code: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
|
||||
initialValues: {
|
||||
...(payload.action === 'edit' &&
|
||||
pick(editCurrency, Object.keys(initialValues))),
|
||||
},
|
||||
|
||||
validationSchema: ValidationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
if (payload.action === 'edit') {
|
||||
requestEditCurrency(editCurrency.id, values)
|
||||
.then((response) => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_currency_has_been_edited',
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitCurrencies(values)
|
||||
.then((response) => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_currency_has_been_submit',
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const { values, errors, touched } = useMemo(() => formik, [formik]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
closeDialog(name);
|
||||
}, [name, closeDialog]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([requestFetchCurrencies()]);
|
||||
});
|
||||
|
||||
const onDialogOpening = useCallback(() => {
|
||||
fetchHook.execute();
|
||||
}, [fetchHook]);
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
formik.resetForm();
|
||||
closeDialog(name);
|
||||
}, [formik, closeDialog, name]);
|
||||
|
||||
const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
title={payload.action === 'edit' ? 'Edit Currency' : ' New Currency'}
|
||||
className={classNames(
|
||||
{
|
||||
'dialog--loading': fetchHook.pending,
|
||||
},
|
||||
'dialog--currency-form'
|
||||
)}
|
||||
isOpen={isOpen}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
isLoading={fetchHook.pending}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={'Currency Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--currency-name'}
|
||||
intent={
|
||||
errors.currency_name && touched.currency_name && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name='currency_name' {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={
|
||||
errors.currency_name && touched.currency_name && Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('currency_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={'Currency Code'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--currency-code'}
|
||||
intent={
|
||||
errors.currency_code && touched.currency_code && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name='currency_code' {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={
|
||||
errors.currency_code && touched.currency_code && Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('currency_code')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>Close</Button>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
{payload.action === 'edit' ? 'Edit' : 'Submit'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
CurrencyFromDialogConnect,
|
||||
DialogConnect,
|
||||
DialogReduxConnect
|
||||
)(CurrencyDialog);
|
||||
@@ -1,192 +0,0 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
Dialog,
|
||||
Button,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
import UserListDialogConnect from 'connectors/UsersList.connector';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import useAsync from 'hooks/async';
|
||||
import { objectKeysTransform } from 'utils';
|
||||
import { pick, snakeCase } from 'lodash';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import classNames from 'classnames';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function InviteUserDialog({
|
||||
name,
|
||||
payload,
|
||||
isOpen,
|
||||
closeDialog,
|
||||
requestFetchUser,
|
||||
requestEditUser,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
first_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
last_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
email: Yup.string()
|
||||
.email()
|
||||
.required(intl.formatMessage({ id: 'required' })),
|
||||
phone_number: Yup.number().required(intl.formatMessage({ id: 'required' })),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone_number: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...(payload.action === 'edit' &&
|
||||
pick(
|
||||
objectKeysTransform(payload.user, snakeCase),
|
||||
Object.keys(initialValues)
|
||||
)),
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
const form = {
|
||||
...values,
|
||||
};
|
||||
if (payload.action === 'edit') {
|
||||
requestEditUser(payload.user.id, form)
|
||||
.then((response) => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_user_details_has_been_updated',
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
const { values, errors, touched } = useMemo(() => formik, [formik]);
|
||||
|
||||
const onDialogOpening = () => {
|
||||
fetchHook.execute();
|
||||
};
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
formik.resetForm();
|
||||
}, [formik.resetForm]);
|
||||
|
||||
const handleClose = () => {
|
||||
closeDialog(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
title={payload.action === 'edit' ? 'Edit invite' : ''}
|
||||
className={classNames({
|
||||
'dialog--loading': fetchHook.pending,
|
||||
'dialog--invite-user': true,
|
||||
})}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
isLoading={fetchHook.pending}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
className={'form-group--first-name'}
|
||||
intent={errors.first_name && touched.first_name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='first_name' {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.first_name && touched.first_name && Intent.DANGER}
|
||||
{...formik.getFieldProps('first_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
className={'form-group--last-name'}
|
||||
intent={errors.last_name && touched.last_name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='last_name' {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.last_name && touched.last_name && Intent.DANGER}
|
||||
{...formik.getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Email'}
|
||||
className={'form-group--email'}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='email' {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
{...formik.getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
className={'form-group--phone-number'}
|
||||
intent={
|
||||
errors.phone_number && touched.phone_number && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name='phone_number' {...formik} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.phone_number && touched.phone_number && Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>Close</Button>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
{payload.action === 'edit' ? 'Edit' : ''}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
UserListDialogConnect,
|
||||
DialogReduxConnect
|
||||
)(InviteUserDialog);
|
||||
@@ -1,221 +0,0 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
TextArea,
|
||||
MenuItem
|
||||
} from '@blueprintjs/core';
|
||||
import { Select } from '@blueprintjs/select';
|
||||
import { pick } from 'lodash';
|
||||
import * as Yup from 'yup';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import { compose } from 'utils';
|
||||
import Dialog from 'components/Dialog';
|
||||
import useAsync from 'hooks/async';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import classNames from 'classnames';
|
||||
import Icon from 'components/Icon';
|
||||
|
||||
function ItemCategoryDialog({
|
||||
name,
|
||||
payload,
|
||||
isOpen,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
categories,
|
||||
requestSubmitItemCategory,
|
||||
requestFetchItemCategories,
|
||||
requestEditItemCategory,
|
||||
editItemCategory
|
||||
}) {
|
||||
const [selectedParentCategory, setParentCategory] = useState(null);
|
||||
|
||||
const intl = useIntl();
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
parent_category_id: Yup.string().nullable(),
|
||||
description: Yup.string().trim()
|
||||
});
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
name: '',
|
||||
description: '',
|
||||
parent_category_id: null
|
||||
}), []);
|
||||
|
||||
//Formik
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...(payload.action === 'edit' &&
|
||||
pick(editItemCategory, Object.keys(initialValues)))
|
||||
},
|
||||
validationSchema: ValidationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
if (payload.action === 'edit') {
|
||||
requestEditItemCategory(payload.id, values).then(response => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_category_has_been_edited'
|
||||
});
|
||||
setSubmitting(false);
|
||||
}).catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitItemCategory(values)
|
||||
.then((response) => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: 'the_category_has_been_submit'
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
const { values, errors, touched } = useMemo(() => formik, [formik]);
|
||||
|
||||
const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
|
||||
const normalizedTitle = category.name.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return normalizedTitle.indexOf(normalizedQuery) >= 0;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
|
||||
return (
|
||||
<MenuItem text={category.name} key={category.id} onClick={handleClick} />
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
requestFetchItemCategories(),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
|
||||
|
||||
const onChangeParentCategory = useCallback((parentCategory) => {
|
||||
setParentCategory(parentCategory);
|
||||
formik.setFieldValue('parent_category_id', parentCategory.id);
|
||||
}, [formik]);
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
formik.resetForm();
|
||||
closeDialog(name);
|
||||
}, [formik, closeDialog, name]);
|
||||
|
||||
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
|
||||
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
|
||||
className={classNames({
|
||||
'dialog--loading': fetchHook.pending,
|
||||
},
|
||||
'dialog--category-form',
|
||||
)}
|
||||
isOpen={isOpen}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
isLoading={fetchHook.pending}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={'Category Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--category-name'}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
helperText={(<ErrorMessage name="name" {...formik} />)}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
{...formik.getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Parent Category'}
|
||||
labelInfo={infoIcon}
|
||||
className={classNames(
|
||||
'form-group--select-list',
|
||||
'form-group--parent-category',
|
||||
Classes.FILL,
|
||||
)}
|
||||
inline={true}
|
||||
helperText={(<ErrorMessage name="parent_category_id" {...formik} />)}
|
||||
intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
|
||||
>
|
||||
<Select
|
||||
items={Object.values(categories)}
|
||||
noResults={<MenuItem disabled={true} text='No results.' />}
|
||||
itemRenderer={parentCategoryItem}
|
||||
itemPredicate={filterItemCategory}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeParentCategory}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={selectedParentCategory
|
||||
? selectedParentCategory.name : 'Select Parent Category'}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Description'}
|
||||
className={'form-group--description'}
|
||||
intent={(errors.description && touched.description) && Intent.DANGER}
|
||||
helperText={(<ErrorMessage name="description" {...formik} />)}
|
||||
inline={true}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
{...formik.getFieldProps('description')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>Close</Button>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
{payload.action === 'edit' ? 'Edit' : 'Submit'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ItemsCategoryConnect,
|
||||
DialogConnect,
|
||||
DialogReduxConnect
|
||||
)(ItemCategoryDialog);
|
||||
@@ -1,130 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
TextArea
|
||||
} from '@blueprintjs/core';
|
||||
import * as Yup from 'yup';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import { compose } from 'utils';
|
||||
import Dialog from 'components/Dialog';
|
||||
import useAsync from 'hooks/async';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import ItemFormDialogConnect from 'connectors/ItemFormDialog.connect';
|
||||
|
||||
function ItemFromDialog({
|
||||
name,
|
||||
payload,
|
||||
isOpen,
|
||||
submitItemCategory,
|
||||
fetchCategory,
|
||||
openDialog,
|
||||
closeDialog
|
||||
}) {
|
||||
const [state, setState] = useState({});
|
||||
const intl = useIntl();
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
description: Yup.string().trim()
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {},
|
||||
validationSchema: ValidationSchema,
|
||||
onSubmit: values => {
|
||||
submitItemCategory({ values })
|
||||
.then(response => {
|
||||
AppToaster.show({
|
||||
message: 'the_category_has_been_submit'
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
alert(error.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([submitItemCategory]);
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
closeDialog(name);
|
||||
};
|
||||
|
||||
const onDialogOpening = () => {
|
||||
fetchHook.execute();
|
||||
openDialog(name);
|
||||
};
|
||||
const onDialogClosed = () => {
|
||||
// formik.resetForm();
|
||||
closeDialog(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
title={payload.action === 'new' ? 'New' : ' New Category'}
|
||||
className={{
|
||||
'dialog--loading': state.isLoading,
|
||||
'dialog--item-form': true
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
isLoading={fetchHook.pending}
|
||||
>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={'Category Name'}
|
||||
className={'form-group--category-name'}
|
||||
intent={formik.errors.name && Intent.DANGER}
|
||||
helperText={formik.errors.name && formik.errors.name}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={formik.values.toString()}
|
||||
intent={formik.errors.name && Intent.DANGER}
|
||||
{...formik.getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={'Description'}
|
||||
className={'form-group--description'}
|
||||
intent={formik.errors.description && Intent.DANGER}
|
||||
helperText={formik.errors.description && formik.errors.credential}
|
||||
inline={true}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
{...formik.getFieldProps('description')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>Close</Button>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
{payload.action === 'new' ? 'New' : 'Submit'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ItemFormDialogConnect,
|
||||
DialogConnect,
|
||||
DialogReduxConnect
|
||||
)(ItemFromDialog);
|
||||
@@ -1,146 +0,0 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
Dialog,
|
||||
Button,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
import UserFormDialogConnect from 'connectors/UserFormDialog.connector';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import useAsync from 'hooks/async';
|
||||
import { objectKeysTransform } from 'utils';
|
||||
import { pick, snakeCase } from 'lodash';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import classNames from 'classnames';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function UserFormDialog({
|
||||
requestFetchUser,
|
||||
requestSubmitInvite,
|
||||
requestEditUser,
|
||||
name,
|
||||
payload,
|
||||
isOpen,
|
||||
closeDialog,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string().email().required(intl.formatMessage({id:'required'})),
|
||||
});
|
||||
|
||||
const initialValues = {
|
||||
status: 1,
|
||||
...(payload.action === 'edit' &&
|
||||
pick(
|
||||
objectKeysTransform(payload.user, snakeCase),
|
||||
Object.keys(validationSchema.fields)
|
||||
)),
|
||||
};
|
||||
|
||||
const {
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
resetForm,
|
||||
getFieldProps,
|
||||
handleSubmit,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues,
|
||||
validationSchema,
|
||||
onSubmit: (values) => {
|
||||
const form = {
|
||||
...values,
|
||||
};
|
||||
if (payload.action === 'edit') {
|
||||
requestEditUser(payload.user.id, form).then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'the_user_details_has_been_updated',
|
||||
});
|
||||
closeDialog(name);
|
||||
});
|
||||
} else {
|
||||
requestSubmitInvite(form).then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'the_user_has_been_invited',
|
||||
});
|
||||
closeDialog(name);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
const onDialogOpening = () => {
|
||||
fetchHook.execute();
|
||||
};
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
resetForm();
|
||||
}, [resetForm]);
|
||||
|
||||
const handleClose = () => {
|
||||
closeDialog(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
title={payload.action === 'edit' ? 'Edit invite' : 'invite User'}
|
||||
className={classNames({
|
||||
'dialog--loading': fetchHook.pending,
|
||||
'dialog--invite-form': true,
|
||||
})}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
isLoading={fetchHook.pending}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<p class="mb2">Your teammate will get an email that gives them access to your team.</p>
|
||||
|
||||
<FormGroup
|
||||
label={'Email'}
|
||||
className={classNames('form-group--email', Classes.FILL)}
|
||||
intent={(errors.email && touched.email) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='email' {...{errors, touched}} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={(errors.email && touched.email) && Intent.DANGER}
|
||||
{...getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>Close</Button>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
{payload.action === 'edit' ? 'Edit' : 'invite'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
UserFormDialogConnect,
|
||||
DialogReduxConnect
|
||||
)(UserFormDialog);
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, {useEffect} from 'react';
|
||||
import { useAsync } from 'react-use';
|
||||
import {useParams} from 'react-router-dom';
|
||||
import Connector from 'connectors/ExpenseForm.connector';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import ExpenseForm from 'components/Expenses/ExpenseForm';
|
||||
|
||||
function ExpenseFormContainer({
|
||||
fetchAccounts,
|
||||
fetchCurrencies,
|
||||
accounts,
|
||||
changePageTitle,
|
||||
submitExpense,
|
||||
editExpense,
|
||||
currencies,
|
||||
}) {
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
changePageTitle('Edit Expense Details');
|
||||
} else {
|
||||
changePageTitle('New Expense');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchAccounts(),
|
||||
fetchCurrencies(),
|
||||
]);
|
||||
});
|
||||
return (
|
||||
<DashboardInsider isLoading={fetchHook.loading} name={'expense-form'}>
|
||||
<ExpenseForm {...{submitExpense, editExpense, accounts, currencies} } />
|
||||
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default Connector(ExpenseFormContainer);
|
||||
@@ -1,79 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useAsync } from 'react-use';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import ExpensesActionsBar from 'components/Expenses/ExpensesActionsBar';
|
||||
import ExpensesViewsTabs from 'components/Expenses/ExpensesViewsTabs';
|
||||
import ExpensesTable from 'components/Expenses/ExpensesTable';
|
||||
import connector from 'connectors/ExpensesList.connector';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
function ExpensesList({
|
||||
fetchExpenses,
|
||||
deleteExpense,
|
||||
// fetchViews,
|
||||
expenses,
|
||||
getResourceViews,
|
||||
changePageTitle
|
||||
}) {
|
||||
useEffect(() => {
|
||||
changePageTitle('Expenses List');
|
||||
}, []);
|
||||
|
||||
const [deleteExpenseState, setDeleteExpense] = useState();
|
||||
|
||||
const handleDeleteExpense = expense => {
|
||||
setDeleteExpense(expense);
|
||||
};
|
||||
const handleCancelAccountDelete = () => {
|
||||
setDeleteExpense(false);
|
||||
};
|
||||
|
||||
const handleConfirmAccountDelete = () => {
|
||||
deleteExpense(deleteExpenseState.id).then(() => {
|
||||
setDeleteExpense(false);
|
||||
AppToaster.show({
|
||||
message: 'the_expense_has_been_deleted'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchExpenses()
|
||||
// getResourceViews('expenses'),
|
||||
]);
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardInsider loading={false}>
|
||||
<ExpensesActionsBar />
|
||||
<ExpensesViewsTabs />
|
||||
|
||||
<DashboardPageContent>
|
||||
<ExpensesTable
|
||||
expenses={expenses}
|
||||
onDeleteExpense={handleDeleteExpense}
|
||||
/>
|
||||
</DashboardPageContent>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteExpenseState}
|
||||
onCancel={handleCancelAccountDelete}
|
||||
onConfirm={handleConfirmAccountDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(ExpensesList);
|
||||
@@ -1,89 +0,0 @@
|
||||
import React, {useEffect, useMemo, useCallback, useState} from 'react';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import {compose} from 'utils';
|
||||
import useAsync from 'hooks/async';
|
||||
import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
|
||||
import {useIntl} from 'react-intl';
|
||||
import BalanceSheetHeader from './BalanceSheetHeader';
|
||||
import BalanceSheetTable from './BalanceSheetTable';
|
||||
import moment from 'moment';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function BalanceSheet({
|
||||
fetchBalanceSheet,
|
||||
changePageTitle,
|
||||
balanceSheetLoading,
|
||||
getBalanceSheetIndex,
|
||||
getBalanceSheet,
|
||||
organizationSettings
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const [filter, setFilter] = useState({
|
||||
from_date: moment().startOf('year').format('YYYY-MM-DD'),
|
||||
to_date: moment().endOf('year').format('YYYY-MM-DD'),
|
||||
basis: 'cash',
|
||||
display_columns_type: 'total',
|
||||
display_columns_by: '',
|
||||
none_zero: false,
|
||||
});
|
||||
|
||||
const fetchHook = useAsync(async (query = filter) => {
|
||||
await Promise.all([
|
||||
fetchBalanceSheet({ ...query }),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// Handle fetch the data of balance sheet.
|
||||
const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle('Balance Sheet');
|
||||
}, []);
|
||||
|
||||
// Retrieve balance sheet index by the given filter query.
|
||||
const balanceSheetIndex = useMemo(() =>
|
||||
getBalanceSheetIndex(filter),
|
||||
[filter, getBalanceSheetIndex]);
|
||||
|
||||
// Handle re-fetch balance sheet after filter change.
|
||||
const handleFilterSubmit = useCallback((filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
|
||||
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter({ ..._filter });
|
||||
fetchHook.execute(_filter);
|
||||
}, [setFilter, fetchHook]);
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<BalanceSheetActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<div class="financial-statement">
|
||||
<BalanceSheetHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit} />
|
||||
|
||||
<div class="financial-statement__body">
|
||||
<BalanceSheetTable
|
||||
companyName={organizationSettings.name}
|
||||
loading={balanceSheetLoading}
|
||||
balanceSheetIndex={balanceSheetIndex}
|
||||
onFetchData={handleFetchData} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
BalanceSheetConnect,
|
||||
SettingsConnect,
|
||||
)(BalanceSheet);
|
||||
@@ -1,63 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
NavbarHeading,
|
||||
NavbarDivider,
|
||||
Intent,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
|
||||
import classNames from 'classnames';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
|
||||
|
||||
export default function JournalActionsBar({
|
||||
|
||||
}) {
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: [],
|
||||
onFilterChange: (filterConditions) => {
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='cog' />}
|
||||
text='Customize Report'
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Popover
|
||||
content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}>
|
||||
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text="Filter"
|
||||
icon={ <Icon icon="filter" /> } />
|
||||
</Popover>
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Print'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
)
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import React, {useMemo, useCallback} from 'react';
|
||||
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
Button,
|
||||
FormGroup,
|
||||
MenuItem,
|
||||
} from "@blueprintjs/core";
|
||||
import SelectList from 'components/SelectList';
|
||||
import {useIntl} from 'react-intl';
|
||||
import moment from 'moment';
|
||||
import Icon from 'components/Icon';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
|
||||
import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
|
||||
import RadiosAccountingBasis from '../RadiosAccountingBasis';
|
||||
|
||||
export default function BalanceSheetHeader({
|
||||
onSubmitFilter,
|
||||
pageFilter,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...pageFilter,
|
||||
basis: 'cash',
|
||||
from_date: moment(pageFilter.from_date).toDate(),
|
||||
to_date: moment(pageFilter.to_date).toDate(),
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
from_date: Yup.date().required(),
|
||||
to_date: Yup.date().min(Yup.ref('from_date')).required(),
|
||||
}),
|
||||
onSubmit: (values, actions) => {
|
||||
onSubmitFilter(values);
|
||||
actions.setSubmitting(false);
|
||||
},
|
||||
});
|
||||
|
||||
// Handle item select of `display columns by` field.
|
||||
const onItemSelectDisplayColumns = useCallback((item) => {
|
||||
formik.setFieldValue('display_columns_type', item.type);
|
||||
formik.setFieldValue('display_columns_by', item.by);
|
||||
}, []);
|
||||
|
||||
// Handle submit filter submit button.
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, [formik]);
|
||||
|
||||
const filterAccountsOptions = useMemo(() => [
|
||||
{key: '', name: 'Accounts with Zero Balance'},
|
||||
{key: 'all-trans', name: 'All Transactions' },
|
||||
], []);
|
||||
|
||||
const filterAccountRenderer = useCallback((item, { handleClick, modifiers, query }) => {
|
||||
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
|
||||
}, []);
|
||||
|
||||
const infoIcon = useMemo(() =>
|
||||
(<Icon icon="info-circle" iconSize={12} />), []);
|
||||
|
||||
const handleAccountingBasisChange = useCallback((value) => {
|
||||
formik.setFieldValue('basis', value);
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<SelectDisplayColumnsBy
|
||||
onItemSelect={onItemSelectDisplayColumns} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={'Filter Accounts'}
|
||||
className="form-group--select-list bp3-fill"
|
||||
inline={false}>
|
||||
|
||||
<SelectList
|
||||
items={filterAccountsOptions}
|
||||
itemRenderer={filterAccountRenderer}
|
||||
onItemSelect={onItemSelectDisplayColumns}
|
||||
popoverProps={{ minimal: true }}
|
||||
filterable={false} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<RadiosAccountingBasis
|
||||
selectedValue={formik.values.basis}
|
||||
onChange={handleAccountingBasisChange} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
disabled={formik.isSubmitting}
|
||||
className={'button--submit-filter mt2'}>
|
||||
{ 'Calculate Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FinancialStatementHeader>
|
||||
)
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
import React, {useMemo, useState, useCallback, useEffect} from 'react';
|
||||
import moment from 'moment';
|
||||
import Money from 'components/Money';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
|
||||
import BalanceSheetTableConnect from 'connectors/BalanceSheetTable.connect';
|
||||
import {
|
||||
compose,
|
||||
defaultExpanderReducer,
|
||||
} from 'utils';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function BalanceSheetTable({
|
||||
organizationSettings,
|
||||
balanceSheetAccounts,
|
||||
balanceSheetColumns,
|
||||
balanceSheetQuery,
|
||||
onFetchData,
|
||||
asDate,
|
||||
loading,
|
||||
}) {
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
// Build our expander column
|
||||
id: 'expander', // Make sure it has an ID
|
||||
className: 'expander',
|
||||
Header: ({
|
||||
getToggleAllRowsExpandedProps,
|
||||
isAllRowsExpanded
|
||||
}) => (
|
||||
<span {...getToggleAllRowsExpandedProps()} className="toggle">
|
||||
{isAllRowsExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
),
|
||||
Cell: ({ row }) =>
|
||||
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
|
||||
// to build the toggle for expanding a row
|
||||
row.canExpand ? (
|
||||
<span
|
||||
{...row.getToggleRowExpandedProps({
|
||||
style: {
|
||||
// We can even use the row.depth property
|
||||
// and paddingLeft to indicate the depth
|
||||
// of the row
|
||||
paddingLeft: `${row.depth * 2}rem`,
|
||||
},
|
||||
className: 'toggle',
|
||||
})}
|
||||
>
|
||||
{row.isExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
) : null,
|
||||
width: 20,
|
||||
disableResizing: true,
|
||||
},
|
||||
{
|
||||
Header: 'Account Name',
|
||||
accessor: 'name',
|
||||
className: "account_name",
|
||||
},
|
||||
{
|
||||
Header: 'Code',
|
||||
accessor: 'code',
|
||||
className: "code",
|
||||
},
|
||||
...(balanceSheetQuery.display_columns_type === 'total') ? [
|
||||
{
|
||||
Header: 'Total',
|
||||
accessor: 'balance.formatted_amount',
|
||||
Cell: ({ cell }) => {
|
||||
const row = cell.row.original;
|
||||
if (row.total) {
|
||||
return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
className: "credit",
|
||||
}
|
||||
] : [],
|
||||
...(balanceSheetQuery.display_columns_type === 'date_periods') ?
|
||||
(balanceSheetColumns.map((column, index) => ({
|
||||
id: `date_period_${index}`,
|
||||
Header: column,
|
||||
accessor: (row) => {
|
||||
if (row.total_periods && row.total_periods[index]) {
|
||||
const amount = row.total_periods[index].formatted_amount;
|
||||
return (<Money amount={amount} currency={'USD'} />);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
width: 100,
|
||||
})))
|
||||
: [],
|
||||
], [balanceSheetQuery, balanceSheetColumns]);
|
||||
|
||||
const handleFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, [onFetchData]);
|
||||
|
||||
// Calculates the default expanded rows of balance sheet table.
|
||||
const expandedRows = useMemo(() =>
|
||||
defaultExpanderReducer(balanceSheetAccounts, 1),
|
||||
[balanceSheetAccounts]);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={organizationSettings.name}
|
||||
sheetType={'Balance Sheet'}
|
||||
fromDate={balanceSheetQuery.from_date}
|
||||
toDate={balanceSheetQuery.to_date}
|
||||
basis={balanceSheetQuery.basis}
|
||||
loading={loading}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={balanceSheetAccounts}
|
||||
onFetchData={handleFetchData}
|
||||
expanded={expandedRows}
|
||||
expandSubRows={true}
|
||||
noInitialFetch={true} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
BalanceSheetConnect,
|
||||
BalanceSheetTableConnect,
|
||||
SettingsConnect,
|
||||
)(BalanceSheetTable);
|
||||
@@ -1,105 +0,0 @@
|
||||
import React, {useState, useCallback, useMemo} from 'react';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {momentFormatter} from 'utils';
|
||||
import {DateInput} from '@blueprintjs/datetime';
|
||||
import {useIntl} from 'react-intl';
|
||||
import {
|
||||
HTMLSelect,
|
||||
FormGroup,
|
||||
Intent,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
parseDateRangeQuery
|
||||
} from 'utils';
|
||||
|
||||
export default function FinancialStatementDateRange({
|
||||
formik,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const [reportDateRange, setReportDateRange] = useState('this_year');
|
||||
|
||||
const dateRangeOptions = useMemo(() => [
|
||||
{value: 'today', label: 'Today', },
|
||||
{value: 'this_week', label: 'This Week'},
|
||||
{value: 'this_month', label: 'This Month'},
|
||||
{value: 'this_quarter', label: 'This Quarter'},
|
||||
{value: 'this_year', label: 'This Year'},
|
||||
{value: 'custom', label: 'Custom Range'},
|
||||
], []);
|
||||
|
||||
const handleDateChange = useCallback((name) => (date) => {
|
||||
setReportDateRange('custom');
|
||||
formik.setFieldValue(name, date);
|
||||
}, [setReportDateRange, formik]);
|
||||
|
||||
// Handles date range field change.
|
||||
const handleDateRangeChange = useCallback((e) => {
|
||||
const value = e.target.value;
|
||||
if (value !== 'custom') {
|
||||
const dateRange = parseDateRangeQuery(value);
|
||||
if (dateRange) {
|
||||
formik.setFieldValue('from_date', dateRange.from_date);
|
||||
formik.setFieldValue('to_date', dateRange.to_date);
|
||||
}
|
||||
}
|
||||
setReportDateRange(value);
|
||||
}, [formik]);
|
||||
|
||||
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'report_date_range'})}
|
||||
labelInfo={infoIcon}
|
||||
minimal={true}
|
||||
fill={true}>
|
||||
|
||||
<HTMLSelect
|
||||
fill={true}
|
||||
options={dateRangeOptions}
|
||||
value={reportDateRange}
|
||||
onChange={handleDateRangeChange} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'from_date'})}
|
||||
labelInfo={infoIcon}
|
||||
minimal={true}
|
||||
fill={true}
|
||||
intent={formik.errors.from_date && Intent.DANGER}>
|
||||
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={formik.values.from_date}
|
||||
onChange={handleDateChange('from_date')}
|
||||
popoverProps={{ position: Position.BOTTOM }}
|
||||
fill={true} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'to_date'})}
|
||||
labelInfo={infoIcon}
|
||||
minimal={true}
|
||||
fill={true}
|
||||
intent={formik.errors.to_date && Intent.DANGER}>
|
||||
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={formik.values.to_date}
|
||||
onChange={handleDateChange('to_date')}
|
||||
popoverProps={{ position: Position.BOTTOM }}
|
||||
fill={true}
|
||||
intent={formik.errors.to_date && Intent.DANGER} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function FinancialStatementHeader({ children }) {
|
||||
return (
|
||||
<div class="financial-statement__header">
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import moment from 'moment';
|
||||
import GeneralLedgerTable from 'containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable';
|
||||
import useAsync from 'hooks/async';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';
|
||||
import GeneralLedgerHeader from './GeneralLedgerHeader';
|
||||
import {compose} from 'utils';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider'
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function GeneralLedger({
|
||||
changePageTitle,
|
||||
getGeneralLedgerSheetIndex,
|
||||
getGeneralLedgerSheet,
|
||||
fetchGeneralLedger,
|
||||
generalLedgerSheetLoading,
|
||||
requestFetchAccounts,
|
||||
organizationSettings,
|
||||
}) {
|
||||
const [filter, setFilter] = useState({
|
||||
from_date: moment().startOf('year').format('YYYY-MM-DD'),
|
||||
to_date: moment().endOf('year').format('YYYY-MM-DD'),
|
||||
basis: 'accural',
|
||||
none_zero: true,
|
||||
});
|
||||
|
||||
// Change page title of the dashboard.
|
||||
useEffect(() => {
|
||||
changePageTitle('General Ledger');
|
||||
}, []);
|
||||
|
||||
const fetchHook = useAsync(() => {
|
||||
return Promise.all([
|
||||
requestFetchAccounts(),
|
||||
]);
|
||||
});
|
||||
|
||||
const fetchSheet = useAsync((query = filter) => {
|
||||
return Promise.all([
|
||||
fetchGeneralLedger(query),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
const generalLedgerSheetIndex = useMemo(() =>
|
||||
getGeneralLedgerSheetIndex(filter),
|
||||
[getGeneralLedgerSheetIndex, filter]);
|
||||
|
||||
const generalLedgerSheet = useMemo(() =>
|
||||
getGeneralLedgerSheet(generalLedgerSheetIndex),
|
||||
[generalLedgerSheetIndex, getGeneralLedgerSheet])
|
||||
|
||||
// Handle fetch data of trial balance table.
|
||||
const handleFetchData = useCallback(() => { fetchSheet.execute() }, [fetchSheet]);
|
||||
|
||||
// Handle financial statement filter change.
|
||||
const handleFilterSubmit = useCallback((filter) => {
|
||||
const parsedFilter = {
|
||||
...filter,
|
||||
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
|
||||
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter(parsedFilter);
|
||||
fetchSheet.execute(parsedFilter);
|
||||
}, [setFilter, fetchSheet]);
|
||||
|
||||
const handleFilterChanged = () => {};
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<GeneralLedgerActionsBar onFilterChanged={handleFilterChanged} />
|
||||
|
||||
<DashboardPageContent>
|
||||
<div class="financial-statement financial-statement--general-ledger">
|
||||
<GeneralLedgerHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit} />
|
||||
|
||||
<div class="financial-statement__table">
|
||||
<GeneralLedgerTable
|
||||
companyName={organizationSettings.name}
|
||||
loading={generalLedgerSheetLoading}
|
||||
data={[
|
||||
... (generalLedgerSheet) ?
|
||||
generalLedgerSheet.tableRows : [],
|
||||
]}
|
||||
onFetchData={handleFetchData} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
AccountsConnect,
|
||||
GeneralLedgerConnect,
|
||||
SettingsConnect,
|
||||
)(GeneralLedger);
|
||||
@@ -1,63 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
NavbarHeading,
|
||||
NavbarDivider,
|
||||
Intent,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
|
||||
import classNames from 'classnames';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
|
||||
export default function GeneralLedgerActionsBar({
|
||||
|
||||
}) {
|
||||
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: [],
|
||||
onFilterChange: (filterConditions) => {
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='cog' />}
|
||||
text='Customize Report'
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Popover
|
||||
content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}>
|
||||
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text="Filter"
|
||||
icon={ <Icon icon="filter" /> } />
|
||||
</Popover>
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Print'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
import React, {useState, useMemo, useEffect, useCallback} from 'react';
|
||||
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
|
||||
import {useIntl} from 'react-intl';
|
||||
import {
|
||||
Button,
|
||||
FormGroup,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
compose,
|
||||
} from 'utils';
|
||||
import moment from 'moment';
|
||||
import AccountsConnect from 'connectors/Accounts.connector'
|
||||
import classNames from 'classnames';
|
||||
import AccountsMultiSelect from 'components/AccountsMultiSelect';
|
||||
import {useFormik} from 'formik';
|
||||
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
|
||||
import * as Yup from 'yup';
|
||||
import RadiosAccountingBasis from '../RadiosAccountingBasis';
|
||||
|
||||
|
||||
function GeneralLedgerHeader({
|
||||
onSubmitFilter,
|
||||
pageFilter,
|
||||
accounts,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...pageFilter,
|
||||
from_date: moment(pageFilter.from_date).toDate(),
|
||||
to_date: moment(pageFilter.to_date).toDate()
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
from_date: Yup.date().required(),
|
||||
to_date: Yup.date().min(Yup.ref('from_date')).required(),
|
||||
}),
|
||||
onSubmit(values, actions) {
|
||||
onSubmitFilter(values);
|
||||
actions.setSubmitting(false);
|
||||
},
|
||||
});
|
||||
|
||||
// handle submit filter submit button.
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, []);
|
||||
|
||||
const onAccountSelected = useCallback((selectedAccounts) => {
|
||||
console.log(selectedAccounts);
|
||||
}, []);
|
||||
|
||||
const handleAccountingBasisChange = useCallback((value) => {
|
||||
formik.setFieldValue('basis', value);
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<FormGroup
|
||||
label={'Specific Accounts'}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
>
|
||||
<AccountsMultiSelect
|
||||
accounts={accounts}
|
||||
onAccountSelected={onAccountSelected} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col sm={3}>
|
||||
<RadiosAccountingBasis
|
||||
onChange={handleAccountingBasisChange}
|
||||
selectedValue={formik.values.basis} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
disabled={formik.isSubmitting}
|
||||
className={'button--submit-filter mt2'}>
|
||||
{ 'Calculate Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FinancialStatementHeader>
|
||||
)
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AccountsConnect
|
||||
)(GeneralLedgerHeader);
|
||||
@@ -1,165 +0,0 @@
|
||||
import React, {useEffect, useState, useCallback, useMemo} from 'react';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Money from 'components/Money';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
defaultExpanderReducer,
|
||||
} from 'utils';
|
||||
|
||||
|
||||
const ROW_TYPE = {
|
||||
CLOSING_BALANCE: 'closing_balance',
|
||||
OPENING_BALANCE: 'opening_balance',
|
||||
ACCOUNT: 'account_name',
|
||||
TRANSACTION: 'transaction',
|
||||
}
|
||||
|
||||
export default function GeneralLedgerTable({
|
||||
companyName,
|
||||
onFetchData,
|
||||
loading,
|
||||
data,
|
||||
}) {
|
||||
// Account name column accessor.
|
||||
const accountNameAccessor = useCallback((row) => {
|
||||
switch(row.rowType) {
|
||||
case ROW_TYPE.OPENING_BALANCE:
|
||||
return 'Opening Balance';
|
||||
case ROW_TYPE.CLOSING_BALANCE:
|
||||
return 'Closing Balance';
|
||||
default:
|
||||
return row.name;
|
||||
}
|
||||
}, [ROW_TYPE]);
|
||||
|
||||
// Date accessor.
|
||||
const dateAccessor = useCallback((row) => {
|
||||
const TYPES = [
|
||||
ROW_TYPE.OPENING_BALANCE,
|
||||
ROW_TYPE.CLOSING_BALANCE,
|
||||
ROW_TYPE.TRANSACTION];
|
||||
|
||||
return (TYPES.indexOf(row.rowType) !== -1)
|
||||
? moment(row.date).format('DD-MM-YYYY') : '';
|
||||
}, [moment, ROW_TYPE]);
|
||||
|
||||
// Amount cell
|
||||
const amountCell = useCallback(({ cell }) => {
|
||||
const transaction = cell.row.original
|
||||
|
||||
if (transaction.rowType === ROW_TYPE.ACCOUNT) {
|
||||
return (!cell.row.isExpanded) ?
|
||||
(<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
|
||||
}
|
||||
return (<Money amount={transaction.amount} currency={"USD"} />);
|
||||
}, []);
|
||||
|
||||
const referenceLink = useCallback((row) => {
|
||||
return (<a href="">{ row.referenceId }</a>);
|
||||
});
|
||||
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
// Build our expander column
|
||||
id: 'expander', // Make sure it has an ID
|
||||
className: 'expander',
|
||||
Header: ({
|
||||
getToggleAllRowsExpandedProps,
|
||||
isAllRowsExpanded
|
||||
}) => (
|
||||
<span {...getToggleAllRowsExpandedProps()} className="toggle">
|
||||
{isAllRowsExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
),
|
||||
Cell: ({ row }) =>
|
||||
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
|
||||
// to build the toggle for expanding a row
|
||||
row.canExpand ? (
|
||||
<span
|
||||
{...row.getToggleRowExpandedProps({
|
||||
style: {
|
||||
// We can even use the row.depth property
|
||||
// and paddingLeft to indicate the depth
|
||||
// of the row
|
||||
paddingLeft: `${row.depth * 2}rem`,
|
||||
},
|
||||
className: 'toggle',
|
||||
})}
|
||||
>
|
||||
{row.isExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
) : null,
|
||||
width: 20,
|
||||
disableResizing: true,
|
||||
},
|
||||
{
|
||||
Header: 'Account Name',
|
||||
accessor: accountNameAccessor,
|
||||
className: "name",
|
||||
},
|
||||
{
|
||||
Header: 'Date',
|
||||
accessor: dateAccessor,
|
||||
className: "date",
|
||||
},
|
||||
{
|
||||
Header: 'Transaction Type',
|
||||
accessor: 'referenceType',
|
||||
className: 'transaction_type',
|
||||
},
|
||||
{
|
||||
Header: 'Trans. NUM',
|
||||
accessor: referenceLink,
|
||||
className: 'transaction_number'
|
||||
},
|
||||
{
|
||||
Header: 'Description',
|
||||
accessor: 'note',
|
||||
className: 'description',
|
||||
},
|
||||
{
|
||||
Header: 'Amount',
|
||||
Cell: amountCell,
|
||||
className: 'amount'
|
||||
},
|
||||
{
|
||||
Header: 'Balance',
|
||||
Cell: amountCell,
|
||||
className: 'balance',
|
||||
},
|
||||
], []);
|
||||
|
||||
const handleFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, [onFetchData]);
|
||||
|
||||
// Default expanded rows of general ledger table.
|
||||
const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'General Ledger Sheet'}
|
||||
date={new Date()}
|
||||
name="general-ledger"
|
||||
loading={loading}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={data}
|
||||
onFetchData={handleFetchData}
|
||||
expanded={expandedRows}
|
||||
virtualizedRows={true}
|
||||
fixedItemSize={37}
|
||||
fixedSizeHeight={1000} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
import React, {useState, useCallback, useEffect, useMemo} from 'react';
|
||||
import {compose} from 'utils';
|
||||
import JournalConnect from 'connectors/Journal.connect';
|
||||
import JournalHeader from 'containers/Dashboard/FinancialStatements/Journal/JournalHeader';
|
||||
import useAsync from 'hooks/async';
|
||||
import {useIntl} from 'react-intl';
|
||||
import moment from 'moment';
|
||||
import JournalTable from './JournalTable';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import JournalActionsBar from './JournalActionsBar';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function Journal({
|
||||
fetchJournalSheet,
|
||||
getJournalSheet,
|
||||
getJournalSheetIndex,
|
||||
changePageTitle,
|
||||
journalSheetLoading,
|
||||
organizationSettings,
|
||||
}) {
|
||||
const [filter, setFilter] = useState({
|
||||
from_date: moment().startOf('year').format('YYYY-MM-DD'),
|
||||
to_date: moment().endOf('year').format('YYYY-MM-DD'),
|
||||
basis: 'accural'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle('Journal Sheet');
|
||||
}, []);
|
||||
|
||||
const fetchHook = useAsync((query = filter) => {
|
||||
return Promise.all([
|
||||
fetchJournalSheet(query),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// Retrieve journal sheet index by the given filter query.
|
||||
const journalSheetIndex = useMemo(() =>
|
||||
getJournalSheetIndex(filter),
|
||||
[getJournalSheetIndex, filter]);
|
||||
|
||||
// Retrieve journal sheet by the given sheet index.
|
||||
const journalSheet = useMemo(() =>
|
||||
getJournalSheet(journalSheetIndex),
|
||||
[getJournalSheet, journalSheetIndex]);
|
||||
|
||||
// Handle financial statement filter change.
|
||||
const handleFilterSubmit = useCallback((filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
|
||||
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter(_filter);
|
||||
fetchHook.execute(_filter);
|
||||
}, [fetchHook]);
|
||||
|
||||
const handlePrintClick = useCallback(() => {
|
||||
|
||||
}, []);
|
||||
|
||||
const handleExportClick = useCallback(() => {
|
||||
|
||||
}, []);
|
||||
|
||||
const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
|
||||
fetchHook.execute();
|
||||
}, [fetchHook]);
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<JournalActionsBar
|
||||
onFilterChanged={() => {}}
|
||||
onPrintClick={handlePrintClick}
|
||||
onExportClick={handleExportClick} />
|
||||
|
||||
<DashboardPageContent>
|
||||
<div class="financial-statement financial-statement--journal">
|
||||
<JournalHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit} />
|
||||
|
||||
<div class="financial-statement__table">
|
||||
<JournalTable
|
||||
companyName={organizationSettings.name}
|
||||
data={[
|
||||
...(journalSheet && journalSheet.tableRows)
|
||||
? journalSheet.tableRows : []
|
||||
]}
|
||||
loading={journalSheetLoading}
|
||||
onFetchData={handleFetchData} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
)
|
||||
}
|
||||
|
||||
export default compose(
|
||||
JournalConnect,
|
||||
DashboardConnect,
|
||||
SettingsConnect,
|
||||
)(Journal);
|
||||
@@ -1,63 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
NavbarHeading,
|
||||
NavbarDivider,
|
||||
Intent,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
|
||||
import classNames from 'classnames';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
|
||||
|
||||
export default function JournalActionsBar({
|
||||
|
||||
}) {
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: [],
|
||||
onFilterChange: (filterConditions) => {
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='cog' />}
|
||||
text='Customize Report'
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Popover
|
||||
content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}>
|
||||
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text="Filter"
|
||||
icon={ <Icon icon="filter" /> } />
|
||||
</Popover>
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Print'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
)
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import moment from 'moment';
|
||||
import {useFormik} from 'formik';
|
||||
import {useIntl} from 'react-intl';
|
||||
import * as Yup from 'yup';
|
||||
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
|
||||
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
|
||||
|
||||
|
||||
export default function JournalHeader({
|
||||
pageFilter,
|
||||
onSubmitFilter,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...pageFilter,
|
||||
from_date: moment(pageFilter.from_date).toDate(),
|
||||
to_date: moment(pageFilter.to_date).toDate()
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
from_date: Yup.date().required(),
|
||||
to_date: Yup.date().min(Yup.ref('from_date')).required(),
|
||||
}),
|
||||
onSubmit: (values, actions) => {
|
||||
onSubmitFilter(values);
|
||||
actions.setSubmitting(false);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
className={'button--submit-filter'}>
|
||||
{ 'Run Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</FinancialStatementHeader>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import React, {useState, useEffect, useCallback, useMemo} from 'react';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import {compose, defaultExpanderReducer} from 'utils';
|
||||
import moment from 'moment';
|
||||
import JournalConnect from 'connectors/Journal.connect';
|
||||
import {
|
||||
getFinancialSheet,
|
||||
} from 'store/financialStatement/financialStatements.selectors';
|
||||
import {connect} from 'react-redux';
|
||||
import Money from 'components/Money';
|
||||
|
||||
function JournalSheetTable({
|
||||
onFetchData,
|
||||
data,
|
||||
loading,
|
||||
companyName,
|
||||
}) {
|
||||
const rowTypeFilter = (rowType, value, types) => {
|
||||
return (types.indexOf(rowType) === -1) ? '' : value;
|
||||
};
|
||||
|
||||
const exceptRowTypes = (rowType, value, types) => {
|
||||
return (types.indexOf(rowType) !== -1) ? '' : value;
|
||||
};
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
Header: 'Date',
|
||||
accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
|
||||
className: 'date',
|
||||
width: 85,
|
||||
},
|
||||
{
|
||||
Header: 'Transaction Type',
|
||||
accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
|
||||
className: "transaction_type",
|
||||
width: 145,
|
||||
},
|
||||
{
|
||||
Header: 'Num.',
|
||||
accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
|
||||
className: 'reference_id',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
Header: 'Description',
|
||||
accessor: 'note',
|
||||
},
|
||||
{
|
||||
Header: 'Acc. Code',
|
||||
accessor: 'account.code',
|
||||
width: 120,
|
||||
className: 'account_code',
|
||||
},
|
||||
{
|
||||
Header: 'Account',
|
||||
accessor: 'account.name',
|
||||
},
|
||||
{
|
||||
Header: 'Credit',
|
||||
accessor: r => exceptRowTypes(
|
||||
r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
|
||||
},
|
||||
{
|
||||
Header: 'Debit',
|
||||
accessor: r => exceptRowTypes(
|
||||
r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
|
||||
},
|
||||
], []);
|
||||
|
||||
const handleFetchData = useCallback((...args) => {
|
||||
onFetchData && onFetchData(...args)
|
||||
}, [onFetchData]);
|
||||
|
||||
// Default expanded rows of general journal table.
|
||||
const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'Journal Sheet'}
|
||||
date={new Date()}
|
||||
name="journal"
|
||||
loading={loading}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={data}
|
||||
onFetchData={handleFetchData}
|
||||
noResults={"This report does not contain any data."}
|
||||
expanded={expandedRows}
|
||||
noInitialFetch={true} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
JournalConnect,
|
||||
)(JournalSheetTable);
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
NavbarHeading,
|
||||
NavbarDivider,
|
||||
Intent,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
|
||||
import classNames from 'classnames';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
|
||||
export default function ProfitLossActionsBar({
|
||||
|
||||
}) {
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: [],
|
||||
onFilterChange: (filterConditions) => {
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='cog' />}
|
||||
text='Customize Report'
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Print'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import React, {useState, useMemo, useCallback, useEffect} from 'react';
|
||||
import moment from 'moment';
|
||||
import useAsync from 'hooks/async';
|
||||
import {compose} from 'utils';
|
||||
import ProfitLossSheetHeader from './ProfitLossSheetHeader';
|
||||
import ProfitLossSheetTable from './ProfitLossSheetTable';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider'
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
|
||||
import ProfitLossActionsBar from './ProfitLossActionsBar';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
|
||||
function ProfitLossSheet({
|
||||
changePageTitle,
|
||||
fetchProfitLossSheet,
|
||||
getProfitLossSheetIndex,
|
||||
profitLossSheetLoading,
|
||||
organizationSettings,
|
||||
}) {
|
||||
const [filter, setFilter] = useState({
|
||||
basis: 'cash',
|
||||
from_date: moment().startOf('year').format('YYYY-MM-DD'),
|
||||
to_date: moment().endOf('year').format('YYYY-MM-DD'),
|
||||
});
|
||||
|
||||
// Change page title of the dashboard.
|
||||
useEffect(() => {
|
||||
changePageTitle('Profit/Loss Sheet');
|
||||
}, [changePageTitle]);
|
||||
|
||||
// Fetches profit/loss sheet.
|
||||
const fetchHook = useAsync((query = filter) => {
|
||||
return Promise.all([
|
||||
fetchProfitLossSheet(query),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// Retrieve profit/loss sheet index based on the given filter query.
|
||||
const profitLossSheetIndex = useMemo(() =>
|
||||
getProfitLossSheetIndex(filter),
|
||||
[getProfitLossSheetIndex, filter]);
|
||||
|
||||
// Handle submit filter.
|
||||
const handleSubmitFilter = useCallback((filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
|
||||
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter(_filter);
|
||||
fetchHook.execute(_filter);
|
||||
}, [fetchHook]);
|
||||
|
||||
// Handle fetch data of profit/loss sheet table.
|
||||
const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<ProfitLossActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<div class="financial-statement">
|
||||
<ProfitLossSheetHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleSubmitFilter} />
|
||||
|
||||
<div class="financial-statement__body">
|
||||
<ProfitLossSheetTable
|
||||
companyName={organizationSettings.name}
|
||||
profitLossSheetIndex={profitLossSheetIndex}
|
||||
onFetchData={handleFetchData}
|
||||
loading={profitLossSheetLoading} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
ProfitLossSheetConnect,
|
||||
SettingsConnect,
|
||||
)(ProfitLossSheet);
|
||||
@@ -1,78 +0,0 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
Button,
|
||||
} from '@blueprintjs/core';
|
||||
import moment from 'moment';
|
||||
import {useFormik} from 'formik';
|
||||
import {useIntl} from 'react-intl';
|
||||
import * as Yup from 'yup';
|
||||
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
|
||||
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
|
||||
import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
|
||||
import RadiosAccountingBasis from '../RadiosAccountingBasis';
|
||||
|
||||
|
||||
export default function JournalHeader({
|
||||
pageFilter,
|
||||
onSubmitFilter,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...pageFilter,
|
||||
from_date: moment(pageFilter.from_date).toDate(),
|
||||
to_date: moment(pageFilter.to_date).toDate()
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
from_date: Yup.date().required(),
|
||||
to_date: Yup.date().min(Yup.ref('from_date')).required(),
|
||||
}),
|
||||
onSubmit: (values, actions) => {
|
||||
onSubmitFilter(values);
|
||||
actions.setSubmitting(false);
|
||||
},
|
||||
});
|
||||
|
||||
// Handle item select of `display columns by` field.
|
||||
const handleItemSelectDisplayColumns = useCallback((item) => {
|
||||
formik.setFieldValue('display_columns_type', item.type);
|
||||
formik.setFieldValue('display_columns_by', item.by);
|
||||
}, [formik]);
|
||||
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, [formik]);
|
||||
|
||||
const handleAccountingBasisChange = useCallback((value) => {
|
||||
formik.setFieldValue('basis', value);
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<SelectsListColumnsBy onItemSelect={handleItemSelectDisplayColumns} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<RadiosAccountingBasis
|
||||
selectedValue={formik.values.basis}
|
||||
onChange={handleAccountingBasisChange} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
className={'button--submit-filter mt2'}>
|
||||
{ 'Run Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FinancialStatementHeader>
|
||||
);
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
import React, {useState, useMemo, useCallback} from 'react';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Money from 'components/Money';
|
||||
import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
|
||||
import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
|
||||
import { compose, defaultExpanderReducer } from 'utils';
|
||||
|
||||
|
||||
function ProfitLossSheetTable({
|
||||
loading,
|
||||
onFetchData,
|
||||
profitLossTableRows,
|
||||
profitLossQuery,
|
||||
profitLossColumns,
|
||||
companyName,
|
||||
}) {
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
// Build our expander column
|
||||
id: 'expander', // Make sure it has an ID
|
||||
className: 'expander',
|
||||
Header: ({
|
||||
getToggleAllRowsExpandedProps,
|
||||
isAllRowsExpanded
|
||||
}) => (
|
||||
<span {...getToggleAllRowsExpandedProps()} className="toggle">
|
||||
{isAllRowsExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
),
|
||||
Cell: ({ row }) =>
|
||||
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
|
||||
// to build the toggle for expanding a row
|
||||
row.canExpand ? (
|
||||
<span
|
||||
{...row.getToggleRowExpandedProps({
|
||||
style: {
|
||||
// We can even use the row.depth property
|
||||
// and paddingLeft to indicate the depth
|
||||
// of the row
|
||||
paddingLeft: `${row.depth * 2}rem`,
|
||||
},
|
||||
className: 'toggle',
|
||||
})}
|
||||
>
|
||||
{row.isExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
) : null,
|
||||
width: 20,
|
||||
disableResizing: true,
|
||||
},
|
||||
{
|
||||
Header: 'Account Name',
|
||||
accessor: 'name',
|
||||
className: "name",
|
||||
},
|
||||
{
|
||||
Header: 'Acc. Code',
|
||||
accessor: 'code',
|
||||
className: "account_code",
|
||||
},
|
||||
...(profitLossQuery.display_columns_type === 'total') ? [
|
||||
{
|
||||
Header: 'Total',
|
||||
Cell: ({ cell }) => {
|
||||
const row = cell.row.original;
|
||||
if (row.total) {
|
||||
return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
className: "total",
|
||||
}
|
||||
] : [],
|
||||
...(profitLossQuery.display_columns_type === 'date_periods') ?
|
||||
(profitLossColumns.map((column, index) => ({
|
||||
id: `date_period_${index}`,
|
||||
Header: column,
|
||||
accessor: (row) => {
|
||||
if (row.periods && row.periods[index]) {
|
||||
const amount = row.periods[index].formatted_amount;
|
||||
return (<Money amount={amount} currency={'USD'} />);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
width: 100,
|
||||
})))
|
||||
: [],
|
||||
], [profitLossQuery.display_columns_type, profitLossColumns]);
|
||||
|
||||
// Handle data table fetch data.
|
||||
const handleFetchData = useCallback((...args) => {
|
||||
onFetchData && onFetchData(...args);
|
||||
}, [onFetchData]);
|
||||
|
||||
// Retrieve default expanded rows of balance sheet.
|
||||
const expandedRows = useMemo(() =>
|
||||
defaultExpanderReducer(profitLossTableRows, 1),
|
||||
[profitLossTableRows]);
|
||||
|
||||
// Retrieve conditional datatable row classnames.
|
||||
const rowClassNames = useCallback((row) => {
|
||||
return {
|
||||
[`row--${row.rowType}`]: row.rowType,
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'Profit/Loss Sheet'}
|
||||
date={new Date()}
|
||||
name="profit-loss-sheet"
|
||||
loading={loading}
|
||||
basis={profitLossQuery.basis}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={profitLossTableRows}
|
||||
onFetchData={handleFetchData}
|
||||
expanded={expandedRows}
|
||||
rowClassNames={rowClassNames}
|
||||
noInitialFetch={true} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ProfitLossSheetConnect,
|
||||
ProfitLossSheetTableConnect,
|
||||
)(ProfitLossSheetTable);
|
||||
@@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import {handleStringChange} from 'utils';
|
||||
import {useIntl} from 'react-intl';
|
||||
import {
|
||||
RadioGroup,
|
||||
Radio,
|
||||
} from "@blueprintjs/core";
|
||||
|
||||
|
||||
export default function RadiosAccountingBasis(props) {
|
||||
const { onChange, ...rest } = props;
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<RadioGroup
|
||||
inline={true}
|
||||
label={intl.formatMessage({'id': 'accounting_basis'})}
|
||||
name="basis"
|
||||
onChange={handleStringChange((value) => {
|
||||
onChange && onChange(value);
|
||||
})}
|
||||
className={'radio-group---accounting-basis'}
|
||||
{...rest}>
|
||||
<Radio label="Cash" value="cash" />
|
||||
<Radio label="Accural" value="accural" />
|
||||
</RadioGroup>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
|
||||
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import SelectList from 'components/SelectList';
|
||||
import {
|
||||
FormGroup,
|
||||
MenuItem,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
export default function SelectsListColumnsBy(props) {
|
||||
const { onItemSelect, formGroupProps, selectListProps } = props;
|
||||
const [itemSelected, setItemSelected] = useState(null);
|
||||
|
||||
const displayColumnsByOptions = useMemo(() => [
|
||||
{key: 'total', name: 'Total', type: 'total', by: '', },
|
||||
{key: 'year', name: 'Date/Year', type: 'date_periods', by: 'year'},
|
||||
{key: 'month', name: 'Date/Month', type: 'date_periods', by: 'month'},
|
||||
{key: 'week', name: 'Date/Week', type: 'date_periods', by: 'month'},
|
||||
{key: 'day', name: 'Date/Day', type: 'date_periods', by: 'day'},
|
||||
{key: 'quarter', name: 'Date/Quarter', type: 'date_periods', by: 'quarter'},
|
||||
]);
|
||||
|
||||
const itemRenderer = useCallback((item, { handleClick, modifiers, query }) => {
|
||||
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
|
||||
}, []);
|
||||
|
||||
const handleItemSelect = useCallback((item) => {
|
||||
setItemSelected(item);
|
||||
onItemSelect && onItemSelect(item);
|
||||
}, [setItemSelected, onItemSelect]);
|
||||
|
||||
const buttonLabel = useMemo(() =>
|
||||
itemSelected ? itemSelected.name : 'Select display columns by...',
|
||||
[itemSelected]);
|
||||
|
||||
return (
|
||||
<FormGroup
|
||||
label={'Display report columns'}
|
||||
className="form-group-display-columns-by form-group--select-list bp3-fill"
|
||||
inline={false}
|
||||
{...formGroupProps}>
|
||||
|
||||
<SelectList
|
||||
items={displayColumnsByOptions}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
filterable={false}
|
||||
itemRenderer={itemRenderer}
|
||||
popoverProps={{ minimal: true }}
|
||||
buttonLabel={buttonLabel}
|
||||
onItemSelect={handleItemSelect}
|
||||
{...selectListProps} />
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
NavbarHeading,
|
||||
NavbarDivider,
|
||||
Intent,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
|
||||
import classNames from 'classnames';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
|
||||
export default function GeneralLedgerActionsBar({
|
||||
|
||||
}) {
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: [],
|
||||
onFilterChange: (filterConditions) => {
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='cog' />}
|
||||
text='Customize Report'
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Print'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
|
||||
import TrialBalanceSheetTable from './TrialBalanceSheetTable';
|
||||
import useAsync from 'hooks/async';
|
||||
import moment from 'moment';
|
||||
import {compose} from 'utils';
|
||||
import TrialBalanceSheetConnect from 'connectors/TrialBalanceSheet.connect';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import TrialBalanceActionsBar from './TrialBalanceActionsBar';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function TrialBalanceSheet({
|
||||
changePageTitle,
|
||||
fetchTrialBalanceSheet,
|
||||
getTrialBalanceSheetIndex,
|
||||
getTrialBalanceAccounts,
|
||||
trialBalanceSheetLoading,
|
||||
organizationSettings,
|
||||
}) {
|
||||
const [filter, setFilter] = useState({
|
||||
from_date: moment().startOf('year').format('YYYY-MM-DD'),
|
||||
to_date: moment().endOf('year').format('YYYY-MM-DD'),
|
||||
basis: 'accural',
|
||||
none_zero: false,
|
||||
});
|
||||
|
||||
const fetchHook = useAsync((query = filter) => {
|
||||
return Promise.all([
|
||||
fetchTrialBalanceSheet(query),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// handle fetch data of trial balance table.
|
||||
const handleFetchData = useCallback(() => { fetchHook.execute() }, [fetchHook]);
|
||||
|
||||
// Retrieve balance sheet index by the given filter query.
|
||||
const trialBalanceSheetIndex = useMemo(() =>
|
||||
getTrialBalanceSheetIndex(filter),
|
||||
[getTrialBalanceSheetIndex, filter]);
|
||||
|
||||
// Retrieve balance sheet accounts bu the given sheet index.
|
||||
const trialBalanceAccounts = useMemo(() =>
|
||||
getTrialBalanceAccounts(trialBalanceSheetIndex),
|
||||
[getTrialBalanceAccounts, trialBalanceSheetIndex]);
|
||||
|
||||
// Change page title of the dashboard.
|
||||
useEffect(() => {
|
||||
changePageTitle('Trial Balance Sheet');
|
||||
}, []);
|
||||
|
||||
const handleFilterSubmit = useCallback((filter) => {
|
||||
const parsedFilter = {
|
||||
...filter,
|
||||
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
|
||||
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter(parsedFilter);
|
||||
fetchHook.execute(parsedFilter);
|
||||
}, [setFilter, fetchHook]);
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<TrialBalanceActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<div class="financial-statement">
|
||||
<TrialBalanceSheetHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit} />
|
||||
|
||||
<div class="financial-statement__body">
|
||||
<TrialBalanceSheetTable
|
||||
companyName={organizationSettings.name}
|
||||
trialBalanceSheetAccounts={trialBalanceAccounts}
|
||||
trialBalanceSheetIndex={trialBalanceSheetIndex}
|
||||
onFetchData={handleFetchData}
|
||||
loading={trialBalanceSheetLoading} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
)
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
TrialBalanceSheetConnect,
|
||||
SettingsConnect,
|
||||
)(TrialBalanceSheet);
|
||||
@@ -1,66 +0,0 @@
|
||||
import React, {useState, useCallback, useMemo} from 'react';
|
||||
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
Button,
|
||||
FormGroup,
|
||||
Position,
|
||||
MenuItem,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
HTMLSelect,
|
||||
Intent,
|
||||
Popover,
|
||||
} from "@blueprintjs/core";
|
||||
import moment from 'moment';
|
||||
import {useIntl} from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import Icon from 'components/Icon';
|
||||
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
|
||||
|
||||
export default function TrialBalanceSheetHeader({
|
||||
pageFilter,
|
||||
onSubmitFilter,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...pageFilter,
|
||||
from_date: moment(pageFilter.from_date).toDate(),
|
||||
to_date: moment(pageFilter.to_date).toDate()
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
from_date: Yup.date().required(),
|
||||
to_date: Yup.date().min(Yup.ref('from_date')).required(),
|
||||
}),
|
||||
onSubmit: (values, actions) => {
|
||||
onSubmitFilter(values);
|
||||
actions.setSubmitting(false);
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
disabled={formik.isSubmitting}
|
||||
className={'button--submit-filter'}>
|
||||
{ 'Run Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FinancialStatementHeader>
|
||||
);
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
import React, {useEffect, useState, useCallback, useMemo} from 'react';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Money from 'components/Money';
|
||||
|
||||
export default function TrialBalanceSheetTable({
|
||||
trialBalanceSheetAccounts,
|
||||
trialBalanceSheetIndex,
|
||||
onFetchData,
|
||||
loading,
|
||||
companyName,
|
||||
}) {
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
// Build our expander column
|
||||
id: 'expander', // Make sure it has an ID
|
||||
className: 'expander',
|
||||
Header: ({
|
||||
getToggleAllRowsExpandedProps,
|
||||
isAllRowsExpanded
|
||||
}) => (
|
||||
<span {...getToggleAllRowsExpandedProps()} className="toggle">
|
||||
{isAllRowsExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
),
|
||||
Cell: ({ row }) =>
|
||||
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
|
||||
// to build the toggle for expanding a row
|
||||
row.canExpand ? (
|
||||
<span
|
||||
{...row.getToggleRowExpandedProps({
|
||||
style: {
|
||||
// We can even use the row.depth property
|
||||
// and paddingLeft to indicate the depth
|
||||
// of the row
|
||||
paddingLeft: `${row.depth * 2}rem`,
|
||||
},
|
||||
className: 'toggle',
|
||||
})}
|
||||
>
|
||||
{row.isExpanded ?
|
||||
(<span class="arrow-down" />) :
|
||||
(<span class="arrow-right" />)
|
||||
}
|
||||
</span>
|
||||
) : null,
|
||||
width: 20,
|
||||
disableResizing: true,
|
||||
},
|
||||
{
|
||||
Header: 'Account Name',
|
||||
accessor: 'name',
|
||||
className: "name",
|
||||
},
|
||||
{
|
||||
Header: 'Code',
|
||||
accessor: 'code',
|
||||
className: "code",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
Header: 'Credit',
|
||||
accessor: r => (<Money amount={r.credit} currency="USD" />),
|
||||
className: 'credit',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
Header: 'Debit',
|
||||
accessor: r => (<Money amount={r.debit} currency="USD" />),
|
||||
className: 'debit',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
Header: 'Balance',
|
||||
accessor: r => (<Money amount={r.balance} currency="USD" />),
|
||||
className: 'balance',
|
||||
width: 120,
|
||||
}
|
||||
], []);
|
||||
|
||||
const handleFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, [onFetchData]);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'Trial Balance Sheet'}
|
||||
date={new Date()}
|
||||
name="trial-balance"
|
||||
loading={loading}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={trialBalanceSheetAccounts}
|
||||
onFetchData={handleFetchData} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Omnibar } from '@blueprintjs/select';
|
||||
import { MenuItem } from '@blueprintjs/core';
|
||||
import { compose } from 'utils';
|
||||
import SearchConnect from 'connectors/Search.connect';
|
||||
|
||||
function Search({
|
||||
resultSearch,
|
||||
globalSearchShow,
|
||||
openGlobalSearch,
|
||||
closeGlobalSearch,
|
||||
}) {
|
||||
const items = [
|
||||
{ title: 'The Shawshank Redemption', year: 1994 },
|
||||
{ title: 'The Godfather', year: 1972 },
|
||||
{ title: 'The Godfather: Part II', year: 1974 },
|
||||
];
|
||||
|
||||
const renderSearch = (search, { handleClick }) => (
|
||||
<MenuItem
|
||||
key={search.year}
|
||||
text={search.title}
|
||||
label={search.title}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Omnibar
|
||||
className={'navbar-omnibar'}
|
||||
isOpen={globalSearchShow}
|
||||
noResults={<MenuItem disabled={true} text='No results.' />}
|
||||
onClose={() => closeGlobalSearch(false)}
|
||||
resetOnSelect={true}
|
||||
itemRenderer={renderSearch}
|
||||
items={items}
|
||||
// onItemSelect={onItemsSelect()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(SearchConnect)(Search);
|
||||
@@ -1,19 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import t from 'store/types';
|
||||
|
||||
const DashboardHomepage = ({ changePageTitle }) => {
|
||||
useEffect(() => {
|
||||
changePageTitle('Craig’s Design and Landscaping Services')
|
||||
});
|
||||
return (
|
||||
<div>asdasd</div>
|
||||
);
|
||||
}
|
||||
|
||||
const mapActionsToProps = (dispatch) => ({
|
||||
changePageTitle: pageTitle => dispatch({
|
||||
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
|
||||
}),
|
||||
});
|
||||
export default connect(null, mapActionsToProps)(DashboardHomepage);
|
||||
@@ -1,24 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import CategoryList from 'components/Items/categoryList';
|
||||
import ItemFormDialog from 'connectors/ItemFormDialog.connect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const ItemCategoryList = ({ changePageTitle }) => {
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
id
|
||||
? changePageTitle('Edit Category Details')
|
||||
: changePageTitle('Category List');
|
||||
}, []);
|
||||
return (
|
||||
<DashboardInsider isLoading={null} name={'item-category-list'}>
|
||||
<CategoryList />
|
||||
</DashboardInsider>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(DashboardConnect, ItemFormDialog)(ItemCategoryList);
|
||||
@@ -1,43 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useAsync } from 'react-use';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ItemForm from 'components/Items/ItemForm';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import ItemsConnect from 'connectors/Items.connect';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import ItemCategoryConnect from 'connectors/ItemsCategory.connect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const ItemFormContainer = ({
|
||||
changePageTitle,
|
||||
requestFetchAccounts,
|
||||
requestFetchItemCategories,
|
||||
}) => {
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
id ?
|
||||
changePageTitle('Edit Item Details') :
|
||||
changePageTitle('New Item');
|
||||
}, [id, changePageTitle]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
requestFetchAccounts(),
|
||||
requestFetchItemCategories(),
|
||||
]);
|
||||
});
|
||||
return (
|
||||
<DashboardInsider loading={fetchHook.loading} name={'item-form'}>
|
||||
<ItemForm />
|
||||
</DashboardInsider>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
ItemsConnect,
|
||||
AccountsConnect,
|
||||
ItemCategoryConnect,
|
||||
)(ItemFormContainer);
|
||||
@@ -1,137 +0,0 @@
|
||||
import React, { useMemo, useCallback, useState } from 'react';
|
||||
import { useRouteMatch, useHistory } from 'react-router-dom';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import {
|
||||
MenuItem,
|
||||
Popover,
|
||||
NavbarGroup,
|
||||
Menu,
|
||||
NavbarDivider,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
Button,
|
||||
Classes,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
import ItemsConnect from 'connectors/Items.connect';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
|
||||
const ItemsActionsBar = ({
|
||||
openDialog,
|
||||
getResourceFields,
|
||||
getResourceViews,
|
||||
views,
|
||||
onFilterChanged,
|
||||
addItemsTableQueries,
|
||||
selectedRows = [],
|
||||
}) => {
|
||||
const { path } = useRouteMatch();
|
||||
const history = useHistory();
|
||||
const [filterCount, setFilterCount] = useState(0);
|
||||
|
||||
const viewsMenuItems = views.map(view =>
|
||||
(<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />));
|
||||
|
||||
const onClickNewItem = () => {
|
||||
history.push('/dashboard/items/new');
|
||||
};
|
||||
const itemsFields = getResourceFields('items');
|
||||
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
|
||||
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: itemsFields,
|
||||
onFilterChange: (filterConditions) => {
|
||||
setFilterCount(filterConditions.length);
|
||||
addItemsTableQueries({
|
||||
filter_roles: filterConditions || '',
|
||||
});
|
||||
onFilterChanged && onFilterChanged(filterConditions);
|
||||
}
|
||||
});
|
||||
|
||||
const onClickNewCategory = useCallback(() => {
|
||||
openDialog('item-form', {});
|
||||
}, [openDialog]);
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Popover
|
||||
content={<Menu>{viewsMenuItems}</Menu>}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.HOVER}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='table' />}
|
||||
text='Table Views'
|
||||
rightIcon={'caret-down'}
|
||||
/>
|
||||
</Popover>
|
||||
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='plus' />}
|
||||
text='New Item'
|
||||
onClick={onClickNewItem}
|
||||
/>
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='plus' />}
|
||||
text='New Category'
|
||||
onClick={onClickNewCategory}
|
||||
/>
|
||||
|
||||
<Popover
|
||||
content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text={filterCount <= 0 ? 'Filter' : `${filterCount} filters applied`}
|
||||
icon={<Icon icon='filter' />}
|
||||
/>
|
||||
</Popover>
|
||||
|
||||
{hasSelectedRows && (
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
intent={Intent.DANGER}
|
||||
icon={<Icon icon='trash' />}
|
||||
text='Delete'
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-import' />}
|
||||
text='Import'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
DashboardConnect,
|
||||
ResourceConnect,
|
||||
ItemsConnect
|
||||
)(ItemsActionsBar);
|
||||
@@ -1,96 +0,0 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import { compose } from 'utils';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
Intent,
|
||||
Popover,
|
||||
Position,
|
||||
PopoverInteractionKind,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
|
||||
|
||||
const ItemsCategoryActionsBar = ({
|
||||
openDialog,
|
||||
onDeleteCategory,
|
||||
onFilterChanged,
|
||||
getResourceFields,
|
||||
selectedRows,
|
||||
}) => {
|
||||
const onClickNewCategory = useCallback(() => {
|
||||
openDialog('item-form', {});
|
||||
}, [openDialog]);
|
||||
|
||||
const handleDeleteCategory = useCallback((category) => {
|
||||
onDeleteCategory(selectedRows);
|
||||
}, [selectedRows, onDeleteCategory]);
|
||||
|
||||
const categoriesFields = getResourceFields('itemCategories');
|
||||
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
|
||||
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: categoriesFields,
|
||||
onFilterChange: (filterConditions) => {
|
||||
onFilterChanged && onFilterChanged(filterConditions);
|
||||
},
|
||||
});
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='plus' />}
|
||||
text='New Category'
|
||||
onClick={onClickNewCategory}
|
||||
/>
|
||||
<Popover
|
||||
content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text='Filter'
|
||||
icon={<Icon icon='filter' />}
|
||||
/>
|
||||
</Popover>
|
||||
|
||||
{ hasSelectedRows && (
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='trash' iconSize={15} />}
|
||||
text='Delete'
|
||||
intent={Intent.DANGER}
|
||||
onClick={handleDeleteCategory}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-import' />}
|
||||
text='Import'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
DashboardConnect,
|
||||
ItemsCategoryConnect,
|
||||
ResourceConnect
|
||||
)(ItemsCategoryActionsBar);
|
||||
@@ -1,102 +0,0 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import useAsync from 'hooks/async';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
|
||||
import { compose } from 'utils';
|
||||
import ItemsCategoryList from 'components/Items/ItemsCategoryList';
|
||||
import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
|
||||
const ItemCategoriesList = ({
|
||||
changePageTitle,
|
||||
views,
|
||||
requestFetchItemCategories,
|
||||
requestEditItemCategory,
|
||||
requestDeleteItemCategory,
|
||||
}) => {
|
||||
const { id } = useParams();
|
||||
const [deleteCategory, setDeleteCategory] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
id
|
||||
? changePageTitle('Edit Item Details')
|
||||
: changePageTitle('Categories List');
|
||||
}, [id, changePageTitle]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
requestFetchItemCategories(),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
const handelDeleteCategory = useCallback((category) => {
|
||||
setDeleteCategory(category);
|
||||
}, [setDeleteCategory]);
|
||||
|
||||
const handelEditCategory = category => {};
|
||||
|
||||
const handelCancelCategoryDelete = useCallback(() => {
|
||||
setDeleteCategory(false);
|
||||
}, [setDeleteCategory]);
|
||||
|
||||
const handelConfirmCategoryDelete = useCallback(() => {
|
||||
requestDeleteItemCategory(deleteCategory.id).then(() => {
|
||||
setDeleteCategory(false);
|
||||
AppToaster.show({
|
||||
message: 'the_category_has_been_delete'
|
||||
});
|
||||
});
|
||||
}, [deleteCategory, requestDeleteItemCategory, setDeleteCategory]);
|
||||
|
||||
const handleFetchData = useCallback(() => {
|
||||
fetchHook.execute();
|
||||
}, []);
|
||||
|
||||
// Handle selected rows change.
|
||||
const handleSelectedRowsChange = useCallback((accounts) => {
|
||||
setSelectedRows(accounts);
|
||||
}, [setSelectedRows]);
|
||||
|
||||
return (
|
||||
<DashboardInsider loading={fetchHook.pending} name="items-categories">
|
||||
<ItemsCategoryActionsBar
|
||||
views={views}
|
||||
onDeleteCategory={handelDeleteCategory}
|
||||
selectedRows={selectedRows}
|
||||
/>
|
||||
<DashboardPageContent>
|
||||
<ItemsCategoryList
|
||||
onDeleteCategory={handelDeleteCategory}
|
||||
onFetchData={handleFetchData}
|
||||
onEditCategory={handelEditCategory}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteCategory}
|
||||
onCancel={handelCancelCategoryDelete}
|
||||
onConfirm={handelConfirmCategoryDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
ItemsCategoryConnect
|
||||
)(ItemCategoriesList);
|
||||
@@ -1,129 +0,0 @@
|
||||
import React, {useState, useEffect, useCallback, useMemo} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
} from '@blueprintjs/core'
|
||||
import CustomViewConnect from 'connectors/View.connector';
|
||||
import ItemsConnect from 'connectors/Items.connect';
|
||||
import {compose} from 'utils';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Icon from 'components/Icon';
|
||||
import Money from 'components/Money';
|
||||
|
||||
|
||||
const ItemsDataTable = ({
|
||||
itemsTableLoading,
|
||||
currentPageItems,
|
||||
onEditItem,
|
||||
onDeleteItem,
|
||||
onFetchData,
|
||||
onSelectedRowsChange,
|
||||
}) => {
|
||||
const [initialMount, setInitialMount] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!itemsTableLoading) {
|
||||
setInitialMount(true);
|
||||
}
|
||||
}, [itemsTableLoading, setInitialMount]);
|
||||
|
||||
const handleEditItem = (item) => () => { onEditItem(item); };
|
||||
const handleDeleteItem = (item) => () => { onDeleteItem(item); };
|
||||
|
||||
const actionMenuList = useCallback((item) =>
|
||||
(<Menu>
|
||||
<MenuItem text="View Details" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Edit Item" onClick={handleEditItem(item)} />
|
||||
<MenuItem text="Delete Item" onClick={handleDeleteItem(item)} />
|
||||
</Menu>), [handleEditItem, handleDeleteItem]);
|
||||
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
Header: 'Item Name',
|
||||
accessor: 'name',
|
||||
className: "actions",
|
||||
},
|
||||
{
|
||||
Header: 'SKU',
|
||||
accessor: 'sku',
|
||||
className: "sku",
|
||||
},
|
||||
{
|
||||
Header: 'Category',
|
||||
accessor: 'category.name',
|
||||
className: 'category',
|
||||
},
|
||||
{
|
||||
Header: 'Sell Price',
|
||||
accessor: row => (<Money amount={row.sell_price} currency={'USD'} />),
|
||||
className: 'sell-price',
|
||||
},
|
||||
{
|
||||
Header: 'Cost Price',
|
||||
accessor: row => (<Money amount={row.cost_price} currency={'USD'} />),
|
||||
className: 'cost-price',
|
||||
},
|
||||
// {
|
||||
// Header: 'Cost Account',
|
||||
// accessor: 'cost_account.name',
|
||||
// className: "cost-account",
|
||||
// },
|
||||
// {
|
||||
// Header: 'Sell Account',
|
||||
// accessor: 'sell_account.name',
|
||||
// className: "sell-account",
|
||||
// },
|
||||
// {
|
||||
// Header: 'Inventory Account',
|
||||
// accessor: 'inventory_account.name',
|
||||
// className: "inventory-account",
|
||||
// },
|
||||
{
|
||||
id: 'actions',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_BOTTOM}>
|
||||
<Button icon={<Icon icon="ellipsis-h" />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
},
|
||||
], [actionMenuList]);
|
||||
|
||||
const selectionColumn = useMemo(() => ({
|
||||
minWidth: 42,
|
||||
width: 42,
|
||||
maxWidth: 42,
|
||||
}), []);
|
||||
|
||||
const handleFetchData = useCallback((...args) => {
|
||||
onFetchData && onFetchData(...args)
|
||||
}, [onFetchData]);
|
||||
|
||||
const handleSelectedRowsChange = useCallback((selectedRows) => {
|
||||
onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
|
||||
}, [onSelectedRowsChange]);
|
||||
|
||||
return (
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={currentPageItems}
|
||||
selectionColumn={selectionColumn}
|
||||
onFetchData={handleFetchData}
|
||||
loading={itemsTableLoading && !initialMount}
|
||||
noInitialFetch={true}
|
||||
onSelectedRowsChange={handleSelectedRowsChange} />
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
ItemsConnect,
|
||||
CustomViewConnect,
|
||||
)(ItemsDataTable);
|
||||
@@ -1,147 +0,0 @@
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import {
|
||||
Route,
|
||||
Switch,
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
Intent,
|
||||
Alert,
|
||||
} from '@blueprintjs/core';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import useAsync from 'hooks/async';
|
||||
import ItemsActionsBar from 'containers/Dashboard/Items/ItemsActionsBar';
|
||||
import { compose } from 'utils';
|
||||
import ItemsDataTable from './ItemsDataTable';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ItemsConnect from 'connectors/Items.connect';
|
||||
import CustomViewsConnect from 'connectors/CustomView.connector'
|
||||
import ItemsViewsTabs from 'containers/Dashboard/Items/ItemsViewsTabs';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
|
||||
function ItemsList({
|
||||
changePageTitle,
|
||||
fetchResourceViews,
|
||||
fetchResourceFields,
|
||||
views,
|
||||
requestDeleteItem,
|
||||
requestFetchItems,
|
||||
addItemsTableQueries,
|
||||
}) {
|
||||
const [deleteItem, setDeleteItem] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle('Items List');
|
||||
}, [changePageTitle]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchResourceViews('items'),
|
||||
fetchResourceFields('items'),
|
||||
]);
|
||||
});
|
||||
|
||||
const fetchItems = useAsync(async () => {
|
||||
await Promise.all([
|
||||
requestFetchItems({ }),
|
||||
])
|
||||
});
|
||||
|
||||
// Handle click delete item.
|
||||
const handleDeleteItem = useCallback((item) => {
|
||||
setDeleteItem(item);
|
||||
}, [setDeleteItem]);
|
||||
|
||||
const handleEditItem = () => {};
|
||||
|
||||
// Handle cancel delete the item.
|
||||
const handleCancelDeleteItem = useCallback(() => {
|
||||
setDeleteItem(false);
|
||||
}, [setDeleteItem]);
|
||||
|
||||
// handle confirm delete item.
|
||||
const handleConfirmDeleteItem = useCallback(() => {
|
||||
requestDeleteItem(deleteItem.id).then(() => {
|
||||
AppToaster.show({ message: 'the_item_has_been_deleted' });
|
||||
setDeleteItem(false);
|
||||
});
|
||||
}, [requestDeleteItem, deleteItem]);
|
||||
|
||||
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
|
||||
addItemsTableQueries({
|
||||
...(sortBy.length > 0) ? {
|
||||
column_sort_order: sortBy[0].id,
|
||||
sort_order: sortBy[0].desc ? 'desc' : 'asc',
|
||||
} : {},
|
||||
});
|
||||
fetchItems.execute();
|
||||
}, [fetchItems, addItemsTableQueries]);
|
||||
|
||||
// Handle filter change to re-fetch the items.
|
||||
const handleFilterChanged = useCallback(() => {
|
||||
fetchItems.execute();
|
||||
}, [fetchItems]);
|
||||
|
||||
// Handle custom view change to re-fetch the items.
|
||||
const handleCustomViewChanged = useCallback(() => {
|
||||
fetchItems.execute();
|
||||
}, [fetchItems]);
|
||||
|
||||
// Handle selected rows change.
|
||||
const handleSelectedRowsChange = useCallback((accounts) => {
|
||||
setSelectedRows(accounts);
|
||||
}, [setSelectedRows]);
|
||||
|
||||
return (
|
||||
<DashboardInsider isLoading={fetchHook.pending} name={'items-list'}>
|
||||
<ItemsActionsBar
|
||||
onFilterChanged={handleFilterChanged}
|
||||
selectedRows={selectedRows}
|
||||
views={views} />
|
||||
|
||||
<DashboardPageContent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact={true}
|
||||
path={[
|
||||
'/dashboard/items/:custom_view_id/custom_view',
|
||||
'/dashboard/items'
|
||||
]}>
|
||||
<ItemsViewsTabs
|
||||
onViewChanged={handleCustomViewChanged} />
|
||||
|
||||
<ItemsDataTable
|
||||
onDeleteItem={handleDeleteItem}
|
||||
onEditItem={handleEditItem}
|
||||
onFetchData={handleFetchData}
|
||||
onSelectedRowsChange={handleSelectedRowsChange} />
|
||||
|
||||
<Alert
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Move to Trash"
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteItem}
|
||||
onCancel={handleCancelDeleteItem}
|
||||
onConfirm={handleConfirmDeleteItem}>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
|
||||
but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</Route>
|
||||
</Switch>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
)
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
ResourceConnect,
|
||||
ItemsConnect,
|
||||
CustomViewsConnect,
|
||||
)(ItemsList);
|
||||
@@ -1,94 +0,0 @@
|
||||
import React, {useEffect} from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
Alignment,
|
||||
Navbar,
|
||||
NavbarGroup,
|
||||
Tabs,
|
||||
Tab,
|
||||
Button
|
||||
} from '@blueprintjs/core';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import Icon from 'components/Icon';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { compose } from 'utils';
|
||||
import ItemsConnect from 'connectors/Items.connect';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import {useUpdateEffect} from 'hooks';
|
||||
|
||||
function ItemsViewsTabs({
|
||||
views,
|
||||
setTopbarEditView,
|
||||
customViewChanged,
|
||||
addItemsTableQueries,
|
||||
onViewChanged,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { custom_view_id: customViewId } = useParams();
|
||||
|
||||
const handleClickNewView = () => {
|
||||
setTopbarEditView(null);
|
||||
history.push('/dashboard/custom_views/items/new');
|
||||
};
|
||||
const handleViewLinkClick = () => {
|
||||
setTopbarEditView(customViewId);
|
||||
}
|
||||
|
||||
useUpdateEffect(() => {
|
||||
customViewChanged && customViewChanged(customViewId);
|
||||
|
||||
addItemsTableQueries({
|
||||
custom_view_id: customViewId || null,
|
||||
});
|
||||
onViewChanged && onViewChanged(customViewId);
|
||||
}, [customViewId]);
|
||||
|
||||
useEffect(() => {
|
||||
addItemsTableQueries({
|
||||
custom_view_id: customViewId,
|
||||
})
|
||||
}, [customViewId, addItemsTableQueries]);
|
||||
|
||||
const tabs = views.map(view => {
|
||||
const baseUrl = '/dashboard/items';
|
||||
const link = (
|
||||
<Link
|
||||
to={`${baseUrl}/${view.id}/custom_view`}
|
||||
onClick={handleViewLinkClick}
|
||||
>{view.name}</Link>
|
||||
);
|
||||
return <Tab
|
||||
id={`custom_view_${view.id}`}
|
||||
title={link} />;
|
||||
});
|
||||
return (
|
||||
<Navbar className='navbar--dashboard-views'>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<Tabs
|
||||
id='navbar'
|
||||
large={true}
|
||||
selectedTabId={`custom_view_${customViewId}`}
|
||||
className='tabs--dashboard-views'
|
||||
>
|
||||
<Tab
|
||||
id='all'
|
||||
title={<Link to={`/dashboard/items`}>All</Link>} />
|
||||
|
||||
{tabs}
|
||||
<Button
|
||||
className='button--new-view'
|
||||
icon={<Icon icon='plus' />}
|
||||
onClick={handleClickNewView}
|
||||
minimal={true}
|
||||
/>
|
||||
</Tabs>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ItemsConnect,
|
||||
DashboardConnect,
|
||||
)(ItemsViewsTabs);
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function AccountantPreferences() {
|
||||
return (
|
||||
<div class="preferences__inside-content--accountant">
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import {Tabs, Tab} from '@blueprintjs/core';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
|
||||
|
||||
export default function AccountsPreferences() {
|
||||
const history = useHistory();
|
||||
const onChangeTabs = (currentTabId) => {
|
||||
switch(currentTabId) {
|
||||
default:
|
||||
history.push('/dashboard/preferences/accounts/general');
|
||||
break;
|
||||
case 'custom_fields':
|
||||
history.push('/dashboard/preferences/accounts/custom_fields');
|
||||
break;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div class="preferences__inside-content preferences__inside-content--accounts">
|
||||
<Tabs
|
||||
animate={true}
|
||||
large={true}
|
||||
onChange={onChangeTabs}>
|
||||
<Tab id="general" title="General" />
|
||||
<Tab id="custom_fields" title="Custom Fields" />
|
||||
</Tabs>
|
||||
|
||||
<PreferencesSubContent preferenceTab="accounts" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
Popover,
|
||||
Button,
|
||||
Menu,
|
||||
MenuDivider,
|
||||
MenuItem,
|
||||
Position,
|
||||
Icon
|
||||
} from '@blueprintjs/core';
|
||||
import {
|
||||
GridComponent,
|
||||
ColumnsDirective,
|
||||
ColumnDirective,
|
||||
} from '@syncfusion/ej2-react-grids';
|
||||
import useAsync from 'hooks/async';
|
||||
import {connect} from 'react-redux';
|
||||
import {
|
||||
fetchResourceFields,
|
||||
} from 'store/customFields/customFields.actions';
|
||||
|
||||
function AccountsCustomFields({ fetchResourceFields, fields }) {
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
// fetchResourceFields('accounts'),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
useEffect(() => { fetchHook.execute(); }, []);
|
||||
|
||||
const actionMenuList = (column) => (
|
||||
<Menu>
|
||||
<MenuItem text="View Details" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Edit Account" />
|
||||
<MenuItem text="New Account" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Inactivate Account" />
|
||||
<MenuItem text="Delete Account" />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const statusRowTemplate = (column) => {
|
||||
return ('Active');
|
||||
};
|
||||
const actionsRowTemplate = (column) => (
|
||||
<Popover content={actionMenuList(column)} position={Position.RIGHT_BOTTOM}>
|
||||
<Button icon={<Icon icon="ellipsis-h" />} />
|
||||
</Popover>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{field: 'label_name', headerText: 'Field Label'},
|
||||
{field: 'data_type', headerText: 'Type'},
|
||||
{template: statusRowTemplate, headerText: 'Status'},
|
||||
{template: actionsRowTemplate, headerText: ''},
|
||||
];
|
||||
return (
|
||||
<div class="preferences__inside-content-tab preferences__inside-content-tab--custom-fields">
|
||||
<GridComponent dataSource={fields}>
|
||||
<ColumnsDirective>
|
||||
{columns.map((column) => {
|
||||
return (<ColumnDirective
|
||||
field={column.field}
|
||||
headerText={column.headerText}
|
||||
template={column.template} />);
|
||||
})}
|
||||
</ColumnsDirective>
|
||||
</GridComponent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
fields: state.fields.custom_fields['accounts'] || [],
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AccountsCustomFields);
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function AccountsGeneralPreferences() {
|
||||
return (
|
||||
<div class="preferences__inside-content preferences__inside-content--general">
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import { compose } from 'utils';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
|
||||
function Currencies({ openDialog }) {
|
||||
const onClickNewCurrency = () => {
|
||||
openDialog('currency-form',{});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'preferences__inside-content'}>
|
||||
<div className={'preferences__tabs'}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(DialogConnect, CurrencyFromDialogConnect)(Currencies);
|
||||
@@ -1,31 +0,0 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import {compose} from 'utils';
|
||||
|
||||
function CurrenciesActions({
|
||||
openDialog,
|
||||
}) {
|
||||
const handleClickNewCurrency = useCallback(() => {
|
||||
openDialog('currency-form');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class="users-actions">
|
||||
<Button
|
||||
icon={<Icon icon='plus' iconSize={12} />}
|
||||
onClick={handleClickNewCurrency}
|
||||
intent={Intent.PRIMARY}>
|
||||
New Currency
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
)(CurrenciesActions);
|
||||
@@ -1,142 +0,0 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Classes,
|
||||
Tooltip,
|
||||
Alert,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import { snakeCase } from 'lodash';
|
||||
import { compose } from 'utils';
|
||||
import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import DataTable from 'components/DataTable';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
function CurrenciesList({
|
||||
currencies,
|
||||
openDialog,
|
||||
onFetchData,
|
||||
requestDeleteCurrency,
|
||||
}) {
|
||||
const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
|
||||
|
||||
const handleEditCurrency = (currency) => () => {
|
||||
openDialog('currency-form', {
|
||||
action: 'edit',
|
||||
currency_code: currency.currency_code,
|
||||
});
|
||||
};
|
||||
|
||||
const onDeleteCurrency = (currency) => {
|
||||
setDeleteCurrencyState(currency);
|
||||
};
|
||||
const handleCancelCurrencyDelete = () => {
|
||||
setDeleteCurrencyState(false);
|
||||
};
|
||||
|
||||
const handleConfirmCurrencyDelete = useCallback(() => {
|
||||
requestDeleteCurrency(deleteCurrencyState.currency_code).then(
|
||||
(response) => {
|
||||
setDeleteCurrencyState(false);
|
||||
AppToaster.show({
|
||||
message: 'the_Currency_has_been_deleted',
|
||||
});
|
||||
}
|
||||
);
|
||||
}, [deleteCurrencyState]);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(currency) => (
|
||||
<Menu>
|
||||
<MenuItem text='Edit Currency' onClick={handleEditCurrency(currency)} />
|
||||
|
||||
<MenuItem
|
||||
text='Delete Currency'
|
||||
onClick={() => onDeleteCurrency(currency)}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'currency_name',
|
||||
Header: 'Currency Name',
|
||||
accessor: 'currency_name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
id: 'currency_code',
|
||||
Header: 'Currency Code',
|
||||
accessor: 'currency_code',
|
||||
className: 'currency_code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
Header: 'Currency sign',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_TOP}
|
||||
>
|
||||
<Button icon={<Icon icon='ellipsis-h' />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
},
|
||||
],
|
||||
[actionMenuList]
|
||||
);
|
||||
const handleDatatableFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LoadingIndicator>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={Object.values(currencies)}
|
||||
onFetchData={handleDatatableFetchData()}
|
||||
selectionColumn={true}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteCurrencyState}
|
||||
onCancel={handleCancelCurrencyDelete}
|
||||
onConfirm={handleConfirmCurrencyDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
CurrencyFromDialogConnect,
|
||||
DialogConnect,
|
||||
DashboardConnect
|
||||
)(CurrenciesList);
|
||||
@@ -1,377 +0,0 @@
|
||||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
Button,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
MenuItem,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import { optionsMapToArray, momentFormatter, optionsArrayToMap } from 'utils';
|
||||
import { TimezonePicker } from '@blueprintjs/timezone';
|
||||
import { Select } from '@blueprintjs/select';
|
||||
import classNames from 'classnames';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import Icon from 'components/Icon';
|
||||
import { compose } from 'utils';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { useIntl } from 'react-intl';
|
||||
import useAsync from 'hooks/async';
|
||||
|
||||
function GeneralPreferences({
|
||||
organizationSettings,
|
||||
requestSubmitOptions,
|
||||
requestFetchOptions,
|
||||
}) {
|
||||
const [selectedItems, setSelectedItems] = useState({});
|
||||
const [timeZone, setTimeZone] = useState('');
|
||||
|
||||
const businessLocation = [
|
||||
{ id: 218, name: 'LIBYA', code: 'LY' },
|
||||
{ id: 380, name: 'UKRAINE', code: 'UA' },
|
||||
{ id: 212, name: 'Morocco', code: 'MA' },
|
||||
];
|
||||
const languagesDisplay = [
|
||||
{ id: 0, name: 'EN', label: 'English' },
|
||||
{ id: 1, name: 'Arb', label: 'Arabic' },
|
||||
];
|
||||
const currencies = [
|
||||
{ id: 0, name: 'US Dollar', code: 'USD' },
|
||||
{ id: 1, name: 'Euro', code: 'EUR' },
|
||||
{ id: 2, name: 'Libyan Dinar ', code: 'LYD' },
|
||||
];
|
||||
const fiscalYear = [
|
||||
{ id: 0, name: 'January-July', label: 'January-July' },
|
||||
{ id: 1, name: 'August-December', label: 'August-December' },
|
||||
];
|
||||
const dateFormat = [
|
||||
{ id: 1, name: '04/11/2020', format: 'MM-DD-YY' },
|
||||
{ id: 3, name: '2020/03/21', format: 'YY/MM/DD' },
|
||||
{ id: 4, name: 'Apr 11, 2020', format: 'MMMM yyyy' },
|
||||
{ id: 6, name: 'Saturday, Apr 11, 2020', format: 'EEEE, MMM d, yyyy' },
|
||||
];
|
||||
|
||||
const intl = useIntl();
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
industry: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
location: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
base_currency: Yup.string().required(
|
||||
intl.formatMessage({ id: 'required' })
|
||||
),
|
||||
fiscal_year: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
language: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
// time_zone: Yup.object().required(intl.formatMessage({ id: 'required' })),
|
||||
date_format: Yup.date().required(intl.formatMessage({ id: 'required' })),
|
||||
});
|
||||
console.log(organizationSettings.name);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...organizationSettings,
|
||||
},
|
||||
validationSchema: validationSchema,
|
||||
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
const options = optionsMapToArray(values).map((option) => {
|
||||
return { key: option.key, ...option, group: 'organization' };
|
||||
});
|
||||
|
||||
requestSubmitOptions({ options })
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'The_Options_has_been_Submit',
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { errors, values, touched } = useMemo(() => formik, [formik]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([requestFetchOptions()]);
|
||||
});
|
||||
|
||||
const businessLocationItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
label={item.code}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const currencyItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
label={item.code}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
const fiscalYearItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const languageItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
label={item.label}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const date_format = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.format}
|
||||
label={item.name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const onItemsSelect = (filedName) => {
|
||||
return (filed) => {
|
||||
setSelectedItems({
|
||||
...selectedItems,
|
||||
[filedName]: filed,
|
||||
});
|
||||
formik.setFieldValue(filedName, filed.name);
|
||||
};
|
||||
};
|
||||
|
||||
const getSelectedItemLabel = (filedName, defaultLabel) => {
|
||||
return typeof selectedItems[filedName] !== 'undefined'
|
||||
? selectedItems[filedName].name
|
||||
: defaultLabel;
|
||||
};
|
||||
|
||||
const handleTimezoneChange = (timezone) => setTimeZone(timezone);
|
||||
|
||||
return (
|
||||
<div className='preferences__inside-content--general'>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<FormGroup
|
||||
label={'Organization Name'}
|
||||
inline={true}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='name' {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
medium={'true'}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
{...formik.getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Organization Industry'}
|
||||
inline={true}
|
||||
intent={errors.industry && touched.industry && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='industry' {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
medium={'true'}
|
||||
intent={errors.industry && touched.industry && Intent.DANGER}
|
||||
{...formik.getFieldProps('industry')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Business Location'}
|
||||
className={classNames(
|
||||
'form-group--business-location',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name='location' {...formik} />}
|
||||
intent={errors.location && touched.location && Intent.DANGER}
|
||||
>
|
||||
<Select
|
||||
items={businessLocation}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={businessLocationItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('location')}
|
||||
>
|
||||
<Button
|
||||
fill={true}
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'location',
|
||||
organizationSettings.location
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Base Currency'}
|
||||
className={classNames(
|
||||
'form-group--base-currency',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name='base_currency' {...formik} />}
|
||||
intent={
|
||||
errors.base_currency && touched.base_currency && Intent.DANGER
|
||||
}
|
||||
>
|
||||
<Select
|
||||
items={currencies}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={currencyItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('base_currency')}
|
||||
>
|
||||
<Button
|
||||
fill={true}
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'base_currency',
|
||||
organizationSettings.base_currency
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Fiscal Year'}
|
||||
className={classNames(
|
||||
'form-group--fiscal-year',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name='fiscal_year' {...formik} />}
|
||||
intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
|
||||
>
|
||||
<Select
|
||||
items={fiscalYear}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={fiscalYearItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('fiscal_year')}
|
||||
>
|
||||
<Button
|
||||
fill={true}
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'fiscal_year',
|
||||
organizationSettings.fiscal_year
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Language'}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--language',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
intent={errors.language && touched.language && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='language' {...formik} />}
|
||||
>
|
||||
<Select
|
||||
items={languagesDisplay}
|
||||
noResults={<MenuItem disabled={true} text='No results.' />}
|
||||
itemRenderer={languageItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('language')}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'language',
|
||||
organizationSettings.language
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={'Time Zone'}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--time-zone',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
intent={errors.time_zone && touched.time_zone && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='time_zone' {...formik} />}
|
||||
>
|
||||
<TimezonePicker
|
||||
value={timeZone}
|
||||
onChange={handleTimezoneChange}
|
||||
showLocalTimezone={true}
|
||||
valueDisplayFormat='composite'
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={'Date Format'}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--language',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
intent={errors.date_format && touched.date_format && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='date_format' {...formik} />}
|
||||
>
|
||||
<Select
|
||||
items={dateFormat}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={date_format}
|
||||
popoverProp={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('date_format')}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'date_format',
|
||||
organizationSettings.date_format
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<div className={'preferences__floating-footer '}>
|
||||
<Button
|
||||
className={'preferences-button'}
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
>
|
||||
{'Save'}
|
||||
</Button>
|
||||
<Button onClick={'handleClose'}>Close</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(SettingsConnect)(GeneralPreferences);
|
||||
@@ -1,22 +0,0 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
|
||||
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
|
||||
import connector from 'connectors/UsersPreferences.connector';
|
||||
|
||||
function UsersPreferences({ openDialog }) {
|
||||
const onChangeTabs = (currentTabId) => {};
|
||||
|
||||
return (
|
||||
<div class='preferences__inside-content preferences__inside-content--users-roles'>
|
||||
<div class='preferences__tabs'>
|
||||
<Tabs animate={true} onChange={onChangeTabs}>
|
||||
<Tab id='users' title='Users' />
|
||||
<Tab id='roles' title='Roles' />
|
||||
</Tabs>
|
||||
</div>
|
||||
<PreferencesSubContent preferenceTab='users' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(UsersPreferences);
|
||||
@@ -1,38 +0,0 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import {compose} from 'utils';
|
||||
|
||||
function UsersActions({
|
||||
openDialog,
|
||||
closeDialog,
|
||||
}) {
|
||||
const onClickNewUser = useCallback(() => {
|
||||
openDialog('user-form');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div claass="preferences-actions">
|
||||
<Button
|
||||
icon={<Icon icon='plus' iconSize={12} />}
|
||||
onClick={onClickNewUser}
|
||||
intent={Intent.PRIMARY}>
|
||||
Invite User
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={<Icon icon='plus' iconSize={12} />}
|
||||
onClick={onClickNewUser}>
|
||||
New Role
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
)(UsersActions);
|
||||
@@ -1,204 +0,0 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { useAsync } from 'react-use';
|
||||
import DataTable from 'components/DataTable';
|
||||
import {
|
||||
Alert,
|
||||
Popover,
|
||||
Button,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { snakeCase } from 'lodash';
|
||||
import UserListConnect from 'connectors/UsersList.connector';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose } from 'utils';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
|
||||
function UsersListPreferences({
|
||||
requestFetchUsers,
|
||||
usersList,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
requestDeleteUser,
|
||||
requestInactiveUser,
|
||||
onFetchData,
|
||||
}) {
|
||||
const [deleteUserState, setDeleteUserState] = useState(false);
|
||||
const [inactiveUserState, setInactiveUserState] = useState(false);
|
||||
|
||||
const asyncHook = useAsync(async () => {
|
||||
await Promise.all([requestFetchUsers()]);
|
||||
}, []);
|
||||
|
||||
const onInactiveUser = (user) => {
|
||||
setInactiveUserState(user);
|
||||
};
|
||||
|
||||
// Handle cancel inactive user alert
|
||||
const handleCancelInactiveUser = useCallback(() => {
|
||||
setInactiveUserState(false);
|
||||
}, []);
|
||||
|
||||
// handel confirm user activation
|
||||
const handleConfirmUserActive = useCallback(() => {
|
||||
requestInactiveUser(inactiveUserState.id).then(() => {
|
||||
setInactiveUserState(false);
|
||||
requestFetchUsers();
|
||||
AppToaster.show({ message: 'the_user_has_been_inactivated' });
|
||||
});
|
||||
}, [inactiveUserState, requestInactiveUser, requestFetchUsers]);
|
||||
|
||||
const onDeleteUser = (user) => {
|
||||
setDeleteUserState(user);
|
||||
};
|
||||
|
||||
const handleCancelUserDelete = () => {
|
||||
setDeleteUserState(false);
|
||||
};
|
||||
|
||||
const onEditInviteUser = (user) => () => {
|
||||
const form = Object.keys(user).reduce((obj, key) => {
|
||||
const camelKey = snakeCase(key);
|
||||
obj[camelKey] = user[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
openDialog('user-form', { action: 'edit', user: form });
|
||||
};
|
||||
|
||||
const onEditUser = (user) => () => {
|
||||
const form = Object.keys(user).reduce((obj, key) => {
|
||||
const camelKey = snakeCase(key);
|
||||
obj[camelKey] = user[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
openDialog('userList-form', { action: 'edit', user: form });
|
||||
};
|
||||
|
||||
const handleConfirmUserDelete = () => {
|
||||
if (!deleteUserState) { return; }
|
||||
requestDeleteUser(deleteUserState.id).then((response) => {
|
||||
setDeleteUserState(false);
|
||||
AppToaster.show({
|
||||
message: 'the_user_has_been_deleted',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(user) => (
|
||||
<Menu>
|
||||
<MenuItem text='Edit User' onClick={onEditUser(user)} />
|
||||
<MenuDivider />
|
||||
<MenuItem text='Edit Invite ' onClick={onEditInviteUser(user)} />
|
||||
<MenuItem text='Inactivate User' onClick={() => onInactiveUser(user)} />
|
||||
<MenuItem text='Delete User' onClick={() => onDeleteUser(user)} />
|
||||
</Menu>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'full_name',
|
||||
Header: 'Full Name',
|
||||
accessor: 'full_name',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
id: 'email',
|
||||
Header: 'Email',
|
||||
accessor: 'email',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'phone_number',
|
||||
Header: 'Phone Number',
|
||||
accessor: 'phone_number',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'active',
|
||||
Header: 'Status',
|
||||
accessor: (user) =>
|
||||
user.active ? <span>Active</span> : <span>Inactivate</span>,
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_TOP}
|
||||
>
|
||||
<Button icon={<Icon icon='ellipsis-h' />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
},
|
||||
],
|
||||
[actionMenuList]
|
||||
);
|
||||
|
||||
const handelDataTableFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LoadingIndicator>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={usersList}
|
||||
onFetchData={handelDataTableFetchData()}
|
||||
manualSortBy={true}
|
||||
expandable={false}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteUserState}
|
||||
onCancel={handleCancelUserDelete}
|
||||
onConfirm={handleConfirmUserDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Inactivate'
|
||||
icon='trash'
|
||||
intent={Intent.WARNING}
|
||||
isOpen={inactiveUserState}
|
||||
onCancel={handleCancelInactiveUser}
|
||||
onConfirm={handleConfirmUserActive}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
UserListConnect,
|
||||
DialogConnect,
|
||||
DashboardConnect
|
||||
)(UsersListPreferences);
|
||||
@@ -1,101 +0,0 @@
|
||||
import React, {useEffect, useState, useCallback} from 'react';
|
||||
import { useAsync } from 'react-use';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import ViewForm from 'components/Views/ViewForm';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
import ViewConnect from 'connectors/View.connector';
|
||||
import {compose} from 'utils';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
function ViewFormPage({
|
||||
changePageTitle,
|
||||
fetchResourceFields,
|
||||
fetchResourceColumns,
|
||||
fetchView,
|
||||
getResourceColumns,
|
||||
getResourceFields,
|
||||
submitView,
|
||||
getViewMeta,
|
||||
deleteView,
|
||||
}) {
|
||||
const { resource_slug: resourceSlug, view_id: viewId } = useParams();
|
||||
|
||||
const columns = getResourceColumns('accounts');
|
||||
const fields = getResourceFields('accounts');
|
||||
|
||||
const viewForm = (viewId) ? getViewMeta(viewId) : null;
|
||||
|
||||
const [stateDeleteView, setStateDeleteView] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (viewId) {
|
||||
changePageTitle('Edit Custom View');
|
||||
} else {
|
||||
changePageTitle('New Custom View');
|
||||
}
|
||||
}, [viewId, changePageTitle]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchResourceColumns('accounts'),
|
||||
fetchResourceFields('accounts'),
|
||||
...(viewId) ? [
|
||||
fetchView(viewId),
|
||||
] : [],
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const handleDeleteView = useCallback((view) => {
|
||||
setStateDeleteView(view);
|
||||
}, []);
|
||||
|
||||
const handleCancelDeleteView = useCallback(() => {
|
||||
setStateDeleteView(null);
|
||||
}, []);
|
||||
|
||||
const handleConfirmDeleteView = useCallback(() => {
|
||||
deleteView(stateDeleteView.id).then((response) => {
|
||||
setStateDeleteView(null);
|
||||
AppToaster.show({
|
||||
message: 'the_custom_view_has_been_deleted',
|
||||
});
|
||||
})
|
||||
}, [deleteView, stateDeleteView]);
|
||||
|
||||
return (
|
||||
<DashboardInsider name={'view-form'} loading={fetchHook.loading} mount={false}>
|
||||
<DashboardPageContent>
|
||||
<ViewForm
|
||||
resourceName={resourceSlug}
|
||||
columns={columns}
|
||||
fields={fields}
|
||||
viewForm={viewForm}
|
||||
onDelete={handleDeleteView} />
|
||||
|
||||
<Alert
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Move to Trash"
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={stateDeleteView}
|
||||
onCancel={handleCancelDeleteView}
|
||||
onConfirm={handleConfirmDeleteView}>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
|
||||
but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
ResourceConnect,
|
||||
ViewConnect,
|
||||
)(ViewFormPage);
|
||||
27
client/src/containers/Dashboard/withDashboard.js
Normal file
27
client/src/containers/Dashboard/withDashboard.js
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import t from 'store/types';
|
||||
|
||||
const mapActionsToProps = (dispatch) => ({
|
||||
changePageTitle: (pageTitle) => dispatch({
|
||||
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
|
||||
}),
|
||||
|
||||
changePageSubtitle: (pageSubtitle) => dispatch({
|
||||
type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
|
||||
}),
|
||||
|
||||
setTopbarEditView: (id) => dispatch({
|
||||
type: t.SET_TOPBAR_EDIT_VIEW, id,
|
||||
}),
|
||||
|
||||
setDashboardRequestLoading: () => dispatch({
|
||||
type: t.SET_DASHBOARD_REQUEST_LOADING,
|
||||
}),
|
||||
|
||||
setDashboardRequestCompleted: () => dispatch({
|
||||
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
|
||||
}),
|
||||
});
|
||||
|
||||
export default connect(null, mapActionsToProps);
|
||||
Reference in New Issue
Block a user