mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
Merge remote-tracking branch 'origin/feature/Currencies'
This commit is contained in:
Ahmed Bouhuolia
182
client/src/containers/Dashboard/Dialogs/CurrencyDialog.js
Normal file
182
client/src/containers/Dashboard/Dialogs/CurrencyDialog.js
Normal file
@@ -0,0 +1,182 @@
|
||||
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);
|
||||
22
client/src/containers/Dashboard/Preferences/Currencies.js
Normal file
22
client/src/containers/Dashboard/Preferences/Currencies.js
Normal file
@@ -0,0 +1,22 @@
|
||||
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'}>
|
||||
<Button intent={Intent.PRIMARY} onClick={onClickNewCurrency}>
|
||||
New Currency
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(DialogConnect, CurrencyFromDialogConnect)(Currencies);
|
||||
146
client/src/containers/Dashboard/Preferences/CurrenciesList.js
Normal file
146
client/src/containers/Dashboard/Preferences/CurrenciesList.js
Normal file
@@ -0,0 +1,146 @@
|
||||
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 Currencies from './Currencies';
|
||||
import useAsync from 'hooks/async';
|
||||
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();
|
||||
}, []);
|
||||
console.log({ currencies }, 'X');
|
||||
|
||||
return (
|
||||
<LoadingIndicator>
|
||||
<Currencies />
|
||||
<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);
|
||||
Reference in New Issue
Block a user