mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-20 06:40:31 +00:00
refactoring: sales tables.
refacoring: purchases tables.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,194 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
Menu,
|
||||
MenuItem,
|
||||
} from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import classNames from 'classnames';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { If, Icon } from 'components';
|
||||
import { useBillFormContext } from './BillFormProvider';
|
||||
|
||||
/**
|
||||
* Bill floating actions bar.
|
||||
*/
|
||||
export default function BillFloatingActions() {
|
||||
const history = useHistory();
|
||||
|
||||
// Formik context.
|
||||
const { resetForm, submitForm, isSubmitting } = useFormikContext();
|
||||
|
||||
// Bill form context.
|
||||
const { bill, setSubmitPayload } = useBillFormContext();
|
||||
|
||||
// Handle submit as open button click.
|
||||
const handleSubmitOpenBtnClick = (event) => {
|
||||
setSubmitPayload({ redirect: true, status: true });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle submit, open and anothe new button click.
|
||||
const handleSubmitOpenAndNewBtnClick = (event) => {
|
||||
setSubmitPayload({ redirect: false, status: true, resetForm: true });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle submit as open & continue editing button click.
|
||||
const handleSubmitOpenContinueEditingBtnClick = (event) => {
|
||||
setSubmitPayload({ redirect: false, status: true });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle submit as draft button click.
|
||||
const handleSubmitDraftBtnClick = (event) => {
|
||||
setSubmitPayload({ redirect: true, status: false });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// handle submit as draft & new button click.
|
||||
const handleSubmitDraftAndNewBtnClick = (event) => {
|
||||
setSubmitPayload({ redirect: false, status: false, resetForm: true });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle submit as draft & continue editing button click.
|
||||
const handleSubmitDraftContinueEditingBtnClick = (event) => {
|
||||
setSubmitPayload({ redirect: false, status: false, });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle cancel button click.
|
||||
const handleCancelBtnClick = (event) => {
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
const handleClearBtnClick = (event) => {
|
||||
resetForm();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
|
||||
{/* ----------- Save And Open ----------- */}
|
||||
<If condition={!bill || !bill?.is_open}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
loading={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitOpenBtnClick}
|
||||
text={<T id={'save_open'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'open_and_new'} />}
|
||||
onClick={handleSubmitOpenAndNewBtnClick}
|
||||
/>
|
||||
<MenuItem
|
||||
text={<T id={'open_continue_editing'} />}
|
||||
onClick={handleSubmitOpenContinueEditingBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
|
||||
/>
|
||||
</Popover>
|
||||
</ButtonGroup>
|
||||
{/* ----------- Save As Draft ----------- */}
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
className={'ml1'}
|
||||
type="submit"
|
||||
onClick={handleSubmitDraftBtnClick}
|
||||
text={<T id={'save_as_draft'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'save_and_new'} />}
|
||||
onClick={handleSubmitDraftAndNewBtnClick}
|
||||
/>
|
||||
<MenuItem
|
||||
text={<T id={'save_continue_editing'} />}
|
||||
onClick={handleSubmitDraftContinueEditingBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
|
||||
/>
|
||||
</Popover>
|
||||
</ButtonGroup>
|
||||
</If>
|
||||
{/* ----------- Save and New ----------- */}
|
||||
<If condition={bill && bill?.is_open}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitOpenBtnClick}
|
||||
text={<T id={'save'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'save_and_new'} />}
|
||||
onClick={handleSubmitOpenAndNewBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
|
||||
/>
|
||||
</Popover>
|
||||
</ButtonGroup>
|
||||
</If>
|
||||
|
||||
{/* ----------- Clear & Reset----------- */}
|
||||
<Button
|
||||
className={'ml1'}
|
||||
disabled={isSubmitting}
|
||||
onClick={handleClearBtnClick}
|
||||
text={bill ? <T id={'reset'} /> : <T id={'clear'} />}
|
||||
/>
|
||||
{/* ----------- Cancel ----------- */}
|
||||
<Button
|
||||
className={'ml1'}
|
||||
onClick={handleCancelBtnClick}
|
||||
text={<T id={'cancel'} />}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
202
client/src/containers/Purchases/Bills/BillForm/BillForm.js
Normal file
202
client/src/containers/Purchases/Bills/BillForm/BillForm.js
Normal file
@@ -0,0 +1,202 @@
|
||||
import React, { useMemo, useCallback, useEffect } from 'react';
|
||||
import { Formik, Form } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { pick, sumBy, isEmpty, omit } from 'lodash';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import { EditBillFormSchema, CreateBillFormSchema } from './BillForm.schema';
|
||||
import BillFormHeader from './BillFormHeader';
|
||||
import BillFloatingActions from './BillFloatingActions';
|
||||
import BillFormFooter from './BillFormFooter';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { AppToaster } from 'components';
|
||||
|
||||
import { ERROR } from 'common/errors';
|
||||
import { compose, repeatValue, orderingLinesIndexes } from 'utils';
|
||||
import BillFormBody from './BillFormBody';
|
||||
import { useBillFormContext } from './BillFormProvider';
|
||||
|
||||
const MIN_LINES_NUMBER = 5;
|
||||
|
||||
const defaultBill = {
|
||||
index: 0,
|
||||
item_id: '',
|
||||
rate: '',
|
||||
discount: 0,
|
||||
quantity: 1,
|
||||
description: '',
|
||||
};
|
||||
|
||||
const defaultInitialValues = {
|
||||
vendor_id: '',
|
||||
bill_number: '',
|
||||
bill_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
due_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference_no: '',
|
||||
note: '',
|
||||
open: '',
|
||||
entries: [...repeatValue(defaultBill, MIN_LINES_NUMBER)],
|
||||
};
|
||||
|
||||
/**
|
||||
* Bill form.
|
||||
*/
|
||||
function BillForm({
|
||||
//#withDashboard
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const history = useHistory();
|
||||
|
||||
const {
|
||||
bill,
|
||||
billId,
|
||||
submitPayload,
|
||||
createBillMutate,
|
||||
editBillMutate,
|
||||
} = useBillFormContext();
|
||||
|
||||
const isNewMode = !billId;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNewMode) {
|
||||
changePageTitle(formatMessage({ id: 'edit_bill' }));
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'new_bill' }));
|
||||
}
|
||||
}, [changePageTitle, isNewMode, formatMessage]);
|
||||
|
||||
// Initial values in create and edit mode.
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...(!isEmpty(bill)
|
||||
? {
|
||||
...pick(bill, Object.keys(defaultInitialValues)),
|
||||
entries: [
|
||||
...bill.entries.map((bill) => ({
|
||||
...pick(bill, Object.keys(defaultBill)),
|
||||
})),
|
||||
...repeatValue(
|
||||
defaultBill,
|
||||
Math.max(MIN_LINES_NUMBER - bill.entries.length, 0),
|
||||
),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...defaultInitialValues,
|
||||
entries: orderingLinesIndexes(defaultInitialValues.entries),
|
||||
}),
|
||||
}),
|
||||
[bill],
|
||||
);
|
||||
|
||||
// Transform response error to fields.
|
||||
const handleErrors = (errors, { setErrors }) => {
|
||||
if (errors.some((e) => e.type === ERROR.BILL_NUMBER_EXISTS)) {
|
||||
setErrors({
|
||||
bill_number: formatMessage({ id: 'bill_number_exists' }),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handles form submit.
|
||||
const handleFormSubmit = (
|
||||
values,
|
||||
{ setSubmitting, setErrors, resetForm },
|
||||
) => {
|
||||
const entries = values.entries.filter(
|
||||
(item) => item.item_id && item.quantity,
|
||||
);
|
||||
const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
|
||||
|
||||
if (totalQuantity === 0) {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'quantity_cannot_be_zero_or_empty',
|
||||
}),
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const form = {
|
||||
...values,
|
||||
open: submitPayload.status,
|
||||
entries: entries.map((entry) => ({ ...omit(entry, ['total']) })),
|
||||
};
|
||||
// Handle the request success.
|
||||
const onSuccess = (response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: isNewMode
|
||||
? 'the_bill_has_been_created_successfully'
|
||||
: 'the_bill_has_been_edited_successfully',
|
||||
},
|
||||
{ number: values.bill_number },
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
|
||||
changePageSubtitle('');
|
||||
|
||||
if (submitPayload.redirect) {
|
||||
history.push('/bills');
|
||||
}
|
||||
if (submitPayload.resetForm) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
// Handle the request error.
|
||||
const onError = (errors) => {
|
||||
handleErrors(errors, { setErrors });
|
||||
setSubmitting(false);
|
||||
};
|
||||
if (bill && bill.id) {
|
||||
editBillMutate(bill.id, form).then(onSuccess).catch(onError);
|
||||
} else {
|
||||
createBillMutate(form).then(onSuccess).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle bill number changed once the field blur.
|
||||
const handleBillNumberChanged = useCallback(
|
||||
(billNumber) => {
|
||||
changePageSubtitle(billNumber);
|
||||
},
|
||||
[changePageSubtitle],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
CLASSES.PAGE_FORM,
|
||||
CLASSES.PAGE_FORM_STRIP_STYLE,
|
||||
CLASSES.PAGE_FORM_BILL,
|
||||
)}
|
||||
>
|
||||
<Formik
|
||||
validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
<Form>
|
||||
<BillFormHeader onBillNumberChanged={handleBillNumberChanged} />
|
||||
<BillFormBody defaultBill={defaultBill} />
|
||||
<BillFormFooter />
|
||||
<BillFloatingActions />
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDashboardActions)(BillForm);
|
||||
@@ -0,0 +1,52 @@
|
||||
import * as Yup from 'yup';
|
||||
import { formatMessage } from 'services/intl';
|
||||
import { DATATYPES_LENGTH } from 'common/dataTypes';
|
||||
import { isBlank } from 'utils';
|
||||
|
||||
const BillFormSchema = Yup.object().shape({
|
||||
vendor_id: Yup.number()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'vendor_name_' })),
|
||||
bill_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'bill_date_' })),
|
||||
due_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'due_date_' })),
|
||||
bill_number: Yup.string()
|
||||
.max(DATATYPES_LENGTH.STRING)
|
||||
.label(formatMessage({ id: 'bill_number_' })),
|
||||
reference_no: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
|
||||
note: Yup.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(DATATYPES_LENGTH.TEXT)
|
||||
.label(formatMessage({ id: 'note' })),
|
||||
open: Yup.boolean(),
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
quantity: Yup.number()
|
||||
.nullable()
|
||||
.max(DATATYPES_LENGTH.INT_10)
|
||||
.when(['rate'], {
|
||||
is: (rate) => rate,
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
|
||||
item_id: Yup.number()
|
||||
.nullable()
|
||||
.when(['quantity', 'rate'], {
|
||||
is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
total: Yup.number().nullable(),
|
||||
discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),
|
||||
description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
const CreateBillFormSchema = BillFormSchema;
|
||||
const EditBillFormSchema = BillFormSchema;
|
||||
|
||||
export { CreateBillFormSchema, EditBillFormSchema };
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
|
||||
import { useBillFormContext } from './BillFormProvider';
|
||||
|
||||
export default function BillFormBody({ defaultBill }) {
|
||||
const { items } = useBillFormContext();
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
|
||||
<EditableItemsEntriesTable
|
||||
items={items}
|
||||
defaultEntry={defaultBill}
|
||||
filterPurchasableItems={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { FormGroup, TextArea } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FastField } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
import { Row, Col } from 'components';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
import { inputIntent } from 'utils';
|
||||
|
||||
// Bill form floating actions.
|
||||
export default function BillFormFooter() {
|
||||
return (
|
||||
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<FastField name={'note'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'note'} />}
|
||||
className={'form-group--note'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
>
|
||||
<TextArea growVertically={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
|
||||
<Col md={4}>
|
||||
<Dragzone
|
||||
initialFiles={[]}
|
||||
// onDrop={onDropFiles}
|
||||
// onDeleteFile={onDropFiles}
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { sumBy } from 'lodash';
|
||||
import { useFormikContext } from 'formik';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import BillFormHeaderFields from './BillFormHeaderFields';
|
||||
import { PageFormBigNumber } from 'components';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import { compose } from 'redux';
|
||||
|
||||
/**
|
||||
* Fill form header.
|
||||
*/
|
||||
function BillFormHeader({
|
||||
onBillNumberChanged,
|
||||
|
||||
// #withSettings
|
||||
baseCurrency,
|
||||
}) {
|
||||
const { values } = useFormikContext();
|
||||
|
||||
// Calculate the total due amount of bill entries.
|
||||
const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
|
||||
values.entries,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<BillFormHeaderFields onBillNumberChanged={onBillNumberChanged} />
|
||||
<PageFormBigNumber
|
||||
label={'Due Amount'}
|
||||
amount={totalDueAmount}
|
||||
currencyCode={baseCurrency}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default compose(
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
)(BillFormHeader);
|
||||
@@ -0,0 +1,153 @@
|
||||
import React from 'react';
|
||||
import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { ContactSelecetList, FieldRequiredHint, Icon } from 'components';
|
||||
|
||||
import { useBillFormContext } from './BillFormProvider';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import {
|
||||
momentFormatter,
|
||||
compose,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
inputIntent,
|
||||
saveInvoke,
|
||||
} from 'utils';
|
||||
|
||||
/**
|
||||
* Fill form header.
|
||||
*/
|
||||
function BillFormHeader({
|
||||
onBillNumberChanged,
|
||||
}) {
|
||||
// Bill form context.
|
||||
const { vendors } = useBillFormContext();
|
||||
|
||||
const handleBillNumberBlur = (event) => {
|
||||
saveInvoke(onBillNumberChanged, event.currentTarget.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
|
||||
{/* ------- Vendor name ------ */}
|
||||
<FastField name={'vendor_id'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'vendor_name'} />}
|
||||
inline={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--vendor')}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'vendor_id'} />}
|
||||
>
|
||||
<ContactSelecetList
|
||||
contactsList={vendors}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_vender_account'} />}
|
||||
onContactSelected={(contact) => {
|
||||
form.setFieldValue('vendor_id', contact.id);
|
||||
}}
|
||||
popoverFill={true}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------- Bill date ------- */}
|
||||
<FastField name={'bill_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'bill_date'} />}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames(CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="bill_date" />}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(value)}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('bill_date', formattedDate);
|
||||
})}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
inputProps={{ leftIcon: <Icon icon={'date-range'} /> }}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------- Due date ------- */}
|
||||
<FastField name={'due_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'due_date'} />}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--due-date',
|
||||
'form-group--select-list',
|
||||
CLASSES.FILL,
|
||||
)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="due_date" />}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(value)}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('due_date', formattedDate);
|
||||
})}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
inputProps={{
|
||||
leftIcon: <Icon icon={'date-range'} />,
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------- Bill number ------- */}
|
||||
<FastField name={'bill_number'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'bill_number'} />}
|
||||
inline={true}
|
||||
className={('form-group--bill_number', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="bill_number" />}
|
||||
>
|
||||
<InputGroup
|
||||
minimal={true}
|
||||
{...field}
|
||||
onBlur={handleBillNumberBlur}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------- Reference ------- */}
|
||||
<FastField name={'reference_no'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="reference" />}
|
||||
>
|
||||
<InputGroup minimal={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDialogActions,
|
||||
)(BillFormHeader);
|
||||
@@ -0,0 +1,45 @@
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
|
||||
import BillForm from './BillForm';
|
||||
|
||||
import { BillFormProvider } from './BillFormProvider';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
import 'style/pages/Bills/PageForm.scss';
|
||||
|
||||
function BillFormPage({
|
||||
// #withDashboardActions
|
||||
setSidebarShrink,
|
||||
resetSidebarPreviousExpand,
|
||||
setDashboardBackLink
|
||||
}) {
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
// Shrink the sidebar by foce.
|
||||
setSidebarShrink();
|
||||
// Show the back link on dashboard topbar.
|
||||
setDashboardBackLink(true);
|
||||
|
||||
return () => {
|
||||
// Reset the sidebar to the previous status.
|
||||
resetSidebarPreviousExpand();
|
||||
// Hide the back link on dashboard topbar.
|
||||
setDashboardBackLink(false);
|
||||
};
|
||||
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
|
||||
|
||||
return (
|
||||
<BillFormProvider billId={id}>
|
||||
<BillForm />
|
||||
</BillFormProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
|
||||
withDashboardActions
|
||||
)(BillFormPage);
|
||||
@@ -0,0 +1,81 @@
|
||||
import React, { createContext, useState } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import {
|
||||
useAccounts,
|
||||
useVendors,
|
||||
useItems,
|
||||
useBill,
|
||||
useSettings,
|
||||
useCreateBill,
|
||||
useEditBill
|
||||
} from 'hooks/query';
|
||||
|
||||
const BillFormContext = createContext();
|
||||
|
||||
/**
|
||||
* Bill form provider.
|
||||
*/
|
||||
function BillFormProvider({ billId, ...props }) {
|
||||
// Handle fetch accounts.
|
||||
const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
|
||||
|
||||
// Handle fetch vendors data table
|
||||
const {
|
||||
data: { vendors },
|
||||
isFetching: isVendorsLoading,
|
||||
} = useVendors();
|
||||
|
||||
// Handle fetch Items data table or list
|
||||
const {
|
||||
data: { items },
|
||||
isFetching: isItemsLoading,
|
||||
} = useItems();
|
||||
|
||||
// Handle fetch bill details.
|
||||
const { data: bill, isFetching: isBillLoading } = useBill(billId, {
|
||||
enabled: !!billId,
|
||||
});
|
||||
|
||||
// Handle fetching bill settings.
|
||||
const { isFetching: isSettingLoading } = useSettings();
|
||||
|
||||
// Form submit payload.
|
||||
const [submitPayload, setSubmitPayload] = useState({});
|
||||
|
||||
// Create and edit bills mutations.
|
||||
const { mutateAsync: createBillMutate } = useCreateBill();
|
||||
const { mutateAsync: editBillMutate } = useEditBill();
|
||||
|
||||
const provider = {
|
||||
accounts,
|
||||
vendors,
|
||||
items,
|
||||
bill,
|
||||
submitPayload,
|
||||
|
||||
isSettingLoading,
|
||||
isBillLoading,
|
||||
isAccountsLoading,
|
||||
isItemsLoading,
|
||||
isVendorsLoading,
|
||||
|
||||
createBillMutate,
|
||||
editBillMutate,
|
||||
setSubmitPayload
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
isVendorsLoading || isItemsLoading || isAccountsLoading || isBillLoading
|
||||
}
|
||||
name={'bill-form'}
|
||||
>
|
||||
<BillFormContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const useBillFormContext = () => React.useContext(BillFormContext);
|
||||
|
||||
export { BillFormProvider, useBillFormContext };
|
||||
@@ -0,0 +1,117 @@
|
||||
import React, { useState } from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
Popover,
|
||||
NavbarDivider,
|
||||
NavbarGroup,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import { If, DashboardActionViewsList } from 'components';
|
||||
|
||||
import withBillsActions from './withBillsActions';
|
||||
import { useBillsListContext } from './BillsListProvider';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Bills actions bar.
|
||||
*/
|
||||
function BillActionsBar({
|
||||
// #withBillActions
|
||||
setBillsTableState,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
|
||||
// React intl.
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
// Bills list context.
|
||||
const { billsViews } = useBillsListContext();
|
||||
|
||||
const [filterCount] = useState(0);
|
||||
|
||||
// Handle click a new bill.
|
||||
const handleClickNewBill = () => {
|
||||
history.push('/bills/new');
|
||||
};
|
||||
|
||||
// Handle tab change.
|
||||
const handleTabChange = (customView) => {
|
||||
setBillsTableState({
|
||||
customViewId: customView.id || null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<DashboardActionViewsList
|
||||
resourceName={'bills'}
|
||||
views={billsViews}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'plus'} />}
|
||||
text={<T id={'new_bill'} />}
|
||||
onClick={handleClickNewBill}
|
||||
/>
|
||||
<Popover
|
||||
minimal={true}
|
||||
content={[]}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL)}
|
||||
text={
|
||||
true ? (
|
||||
<T id={'filter'} />
|
||||
) : (
|
||||
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
|
||||
)
|
||||
}
|
||||
icon={<Icon icon={'filter-16'} iconSize={16} />}
|
||||
/>
|
||||
</Popover>
|
||||
<If condition={false}>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'trash-16'} iconSize={16} />}
|
||||
text={<T id={'delete'} />}
|
||||
intent={Intent.DANGER}
|
||||
// onClick={handleBulkDelete}
|
||||
/>
|
||||
</If>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'print-16'} iconSize={'16'} />}
|
||||
text={<T id={'print'} />}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'file-import-16'} />}
|
||||
text={<T id={'import'} />}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
|
||||
text={<T id={'export'} />}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withBillsActions)(BillActionsBar);
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import BillOpenAlert from 'containers/Alerts/Bills/BillOpenAlert';
|
||||
import BillDeleteAlert from 'containers/Alerts/Bills/BillDeleteAlert';
|
||||
|
||||
export default function BillsAlerts() {
|
||||
return (
|
||||
<div class="bills-alerts">
|
||||
<BillDeleteAlert name={'bill-delete'} />
|
||||
<BillOpenAlert name={'bill-open'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { EmptyStatus } from 'components';
|
||||
|
||||
export default function BillsEmptyStatus() {
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<EmptyStatus
|
||||
title={'Manage the organization’s services and products.'}
|
||||
description={
|
||||
<p>
|
||||
Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.
|
||||
</p>
|
||||
}
|
||||
action={
|
||||
<>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
large={true}
|
||||
onClick={() => {
|
||||
history.push('/bills/new');
|
||||
}}
|
||||
>
|
||||
New bill
|
||||
</Button>
|
||||
|
||||
<Button intent={Intent.NONE} large={true}>
|
||||
Learn more
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import { useIntl } from 'react-intl';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
|
||||
import { BillsListProvider } from './BillsListProvider';
|
||||
|
||||
import BillsActionsBar from './BillsActionsBar';
|
||||
import BillsAlerts from './BillsAlerts';
|
||||
import BillsViewsTabs from './BillsViewsTabs';
|
||||
import BillsTable from './BillsTable';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withBills from './withBills';
|
||||
|
||||
import { transformTableStateToQuery, compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Bills list.
|
||||
*/
|
||||
function BillsList({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
// #withBills
|
||||
billsTableState,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'bills_list' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
return (
|
||||
<BillsListProvider query={transformTableStateToQuery(billsTableState)}>
|
||||
<BillsActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<BillsViewsTabs />
|
||||
<BillsTable />
|
||||
</DashboardPageContent>
|
||||
|
||||
<BillsAlerts />
|
||||
</BillsListProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withBills(({ billsTableState }) => ({ billsTableState })),
|
||||
)(BillsList);
|
||||
@@ -0,0 +1,61 @@
|
||||
import React, { createContext } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import { useResourceViews, useResourceFields, useBills } from 'hooks/query';
|
||||
import { isTableEmptyStatus } from 'utils';
|
||||
|
||||
const BillsListContext = createContext();
|
||||
|
||||
/**
|
||||
* Accounts chart data provider.
|
||||
*/
|
||||
function BillsListProvider({ query, ...props }) {
|
||||
// Fetch accounts resource views and fields.
|
||||
const { data: billsViews, isFetching: isViewsLoading } = useResourceViews(
|
||||
'bills',
|
||||
);
|
||||
|
||||
// Fetch the accounts resource fields.
|
||||
const {
|
||||
data: billsFields,
|
||||
isFetching: isFieldsLoading,
|
||||
} = useResourceFields('bills');
|
||||
|
||||
// Fetch accounts list according to the given custom view id.
|
||||
const {
|
||||
data: { bills, pagination, filterMeta },
|
||||
isLoading: isBillsLoading,
|
||||
isFetching: isBillsFetching,
|
||||
} = useBills(query, { keepPreviousData: true });
|
||||
|
||||
// Detarmines the datatable empty status.
|
||||
const isEmptyStatus = isTableEmptyStatus({
|
||||
data: bills, pagination, filterMeta,
|
||||
}) && !isBillsFetching;
|
||||
|
||||
// Provider payload.
|
||||
const provider = {
|
||||
bills,
|
||||
pagination,
|
||||
billsFields,
|
||||
billsViews,
|
||||
|
||||
isBillsLoading,
|
||||
isBillsFetching,
|
||||
isFieldsLoading,
|
||||
isViewsLoading,
|
||||
isEmptyStatus
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={isViewsLoading || isFieldsLoading}
|
||||
name={'bills'}
|
||||
>
|
||||
<BillsListContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const useBillsListContext = () => React.useContext(BillsListContext);
|
||||
|
||||
export { BillsListProvider, useBillsListContext };
|
||||
108
client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
Normal file
108
client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
Normal file
@@ -0,0 +1,108 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import DataTable from 'components/DataTable';
|
||||
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
|
||||
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
|
||||
|
||||
import BillsEmptyStatus from './BillsEmptyStatus';
|
||||
|
||||
import withBillActions from './withBillsActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withAlertsActions from 'containers/Alert/withAlertActions';
|
||||
import { useBillsTableColumns, ActionsMenu } from './components';
|
||||
import { useBillsListContext } from './BillsListProvider';
|
||||
|
||||
/**
|
||||
* Bills transactions datatable.
|
||||
*/
|
||||
function BillsDataTable({
|
||||
// #withBillsActions
|
||||
setBillsTableState,
|
||||
|
||||
// #withAlerts
|
||||
openAlert
|
||||
}) {
|
||||
// Bills list context.
|
||||
const {
|
||||
bills,
|
||||
pagination,
|
||||
isBillsLoading,
|
||||
isBillsFetching,
|
||||
isEmptyStatus,
|
||||
} = useBillsListContext();
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
// Bills table columns.
|
||||
const columns = useBillsTableColumns();
|
||||
|
||||
const handleFetchData = useCallback(
|
||||
({ pageIndex, pageSize, sortBy }) => {
|
||||
setBillsTableState({
|
||||
pageIndex,
|
||||
pageSize,
|
||||
sortBy,
|
||||
});
|
||||
},
|
||||
[setBillsTableState],
|
||||
);
|
||||
|
||||
// Handle bill edit action.
|
||||
const handleEditBill = (bill) => {
|
||||
history.push(`/bills/${bill.id}/edit`);
|
||||
};
|
||||
|
||||
// Handle bill delete action.
|
||||
const handleDeleteBill = (bill) => {
|
||||
openAlert('bill-delete', { billId: bill.id });
|
||||
};
|
||||
|
||||
// Handle bill open action.
|
||||
const handleOpenBill = (bill) => {
|
||||
openAlert('bill-open', { billId: bill.id });
|
||||
};
|
||||
|
||||
if (isEmptyStatus) {
|
||||
return <BillsEmptyStatus />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={bills}
|
||||
loading={isBillsLoading}
|
||||
headerLoading={isBillsLoading}
|
||||
progressBarLoading={isBillsFetching}
|
||||
onFetchData={handleFetchData}
|
||||
manualSortBy={true}
|
||||
selectionColumn={true}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
pagination={true}
|
||||
pagesCount={pagination.pagesCount}
|
||||
TableLoadingRenderer={TableSkeletonRows}
|
||||
TableHeaderSkeletonRenderer={TableSkeletonHeader}
|
||||
ContextMenu={ActionsMenu}
|
||||
payload={{
|
||||
onDelete: handleDeleteBill,
|
||||
onEdit: handleEditBill,
|
||||
onOpen: handleOpenBill
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withBillActions,
|
||||
withAlertsActions,
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
)(BillsDataTable);
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
import { useBillsListContext } from './BillsListProvider';
|
||||
import withBillActions from './withBillsActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Bills view tabs.
|
||||
*/
|
||||
function BillViewTabs({
|
||||
//#withBillActions
|
||||
setBillsTableState,
|
||||
}) {
|
||||
const { custom_view_id: customViewId = null } = useParams();
|
||||
|
||||
// Bills list context.
|
||||
const { billsViews } = useBillsListContext();
|
||||
|
||||
// Handle tab chaging.
|
||||
const handleTabsChange = (customView) => {
|
||||
setBillsTableState({
|
||||
customViewId: customView || null,
|
||||
});
|
||||
};
|
||||
|
||||
const tabs = billsViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
initialViewId={customViewId}
|
||||
resourceName={'bills'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withBillActions)(BillViewTabs);
|
||||
167
client/src/containers/Purchases/Bills/BillsLanding/components.js
Normal file
167
client/src/containers/Purchases/Bills/BillsLanding/components.js
Normal file
@@ -0,0 +1,167 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Popover,
|
||||
Button,
|
||||
Position,
|
||||
Tag,
|
||||
} from '@blueprintjs/core';
|
||||
import { useIntl, FormattedMessage as T } from 'react-intl';
|
||||
import { Icon, If, Choose, Money } from 'components';
|
||||
import { safeCallback, isBlank } from 'utils';
|
||||
import moment from 'moment';
|
||||
|
||||
/**
|
||||
* Actions menu.
|
||||
*/
|
||||
export function ActionsMenu({
|
||||
payload: { onEdit, onOpen, onDelete },
|
||||
row: { original },
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={formatMessage({ id: 'view_details' })}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
icon={<Icon icon="pen-18" />}
|
||||
text={formatMessage({ id: 'edit_bill' })}
|
||||
onClick={safeCallback(onEdit, original)}
|
||||
/>
|
||||
|
||||
<If condition={!original.is_open}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_opened' })}
|
||||
onClick={safeCallback(onOpen, original)}
|
||||
/>
|
||||
</If>
|
||||
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'delete_bill' })}
|
||||
intent={Intent.DANGER}
|
||||
onClick={safeCallback(onDelete, original)}
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
/>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Amount accessor.
|
||||
*/
|
||||
export function AmountAccessor(bill) {
|
||||
return !isBlank(bill.amount) ? (
|
||||
<Money amount={bill.amount} currency={'USD'} />
|
||||
) : (
|
||||
''
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Status accessor.
|
||||
*/
|
||||
export function StatusAccessor(bill) {
|
||||
return (
|
||||
<Choose>
|
||||
<Choose.When condition={bill.is_open}>
|
||||
<Tag minimal={true} intent={Intent.SUCCESS}>
|
||||
<T id={'opened'} />
|
||||
</Tag>
|
||||
</Choose.When>
|
||||
|
||||
<Choose.Otherwise>
|
||||
<Tag minimal={true}>
|
||||
<T id={'draft'} />
|
||||
</Tag>
|
||||
</Choose.Otherwise>
|
||||
</Choose>
|
||||
);
|
||||
}
|
||||
|
||||
export function ActionsCell(props) {
|
||||
return (
|
||||
<Popover
|
||||
content={<ActionsMenu {...props} />}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve bills table columns.
|
||||
*/
|
||||
export function useBillsTableColumns() {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return React.useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'bill_date',
|
||||
Header: formatMessage({ id: 'bill_date' }),
|
||||
accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'bill_date',
|
||||
},
|
||||
{
|
||||
id: 'vendor_id',
|
||||
Header: formatMessage({ id: 'vendor_name' }),
|
||||
accessor: 'vendor.display_name',
|
||||
width: 140,
|
||||
className: 'vendor_id',
|
||||
},
|
||||
{
|
||||
id: 'bill_number',
|
||||
Header: formatMessage({ id: 'bill_number' }),
|
||||
accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
|
||||
width: 140,
|
||||
className: 'bill_number',
|
||||
},
|
||||
{
|
||||
id: 'due_date',
|
||||
Header: formatMessage({ id: 'due_date' }),
|
||||
accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'due_date',
|
||||
},
|
||||
{
|
||||
id: 'amount',
|
||||
Header: formatMessage({ id: 'amount' }),
|
||||
accessor: AmountAccessor,
|
||||
width: 140,
|
||||
className: 'amount',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
Header: formatMessage({ id: 'status' }),
|
||||
accessor: StatusAccessor,
|
||||
width: 140,
|
||||
className: 'status',
|
||||
},
|
||||
{
|
||||
id: 'reference_no',
|
||||
Header: formatMessage({ id: 'reference_no' }),
|
||||
accessor: 'reference_no',
|
||||
width: 140,
|
||||
className: 'reference_no',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ActionsCell,
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getBillsTableStateFactory } from 'store/Bills/bills.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const getBillsTableState = getBillsTableStateFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const mapped = {
|
||||
billsTableState: getBillsTableState(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { setBillsTableState } from 'store/Bills/bills.actions';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
Reference in New Issue
Block a user