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

refactoring: exchanges rates list.

Browse Source
This commit is contained in:
elforjani3
2021-02-18 17:58:01 +02:00
parent 5171cf7ef5
commit 4b0c266f34
9 changed files with 437 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
client/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js Normal file
View File

@@ -0,0 +1,71 @@
import React, { useState } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { size } from 'lodash';
import { AppToaster } from 'components';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
/**
* Exchange rate bulk delete alert.
*/
function ExchangeRateBulkDeleteAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { exchangeRatesIds },
// #withAlertActions
closeAlert,
}) {
// handle cancel item bulk delete alert.
const handleCancelBulkDelete = () => {
closeAlert(name);
};
// handle confirm Exchange Rates bulk delete.
// const handleConfirmBulkDelete = () => {
// bulkDeleteExchangeRate(exchangeRatesIds)
// .then(() => {
// AppToaster.show({
// message: formatMessage({
// id: 'the_exchange_rates_has_been_successfully_deleted',
// }),
// intent: Intent.SUCCESS,
// });
// })
// .catch(({ errors }) => {
// handleDeleteErrors(errors);
// });
// };
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={
<T id={'delete_count'} values={{ count: size(exchangeRatesIds) }} />
}
icon="trash"
intent={Intent.DANGER}
isOpen={isOpen}
onCancel={handleCancelBulkDelete}
// onConfirm={}
// loading={isLoading}
>
<p>
<T
id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
/>
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ExchangeRateBulkDeleteAlert);

76
client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { AppToaster } from 'components';
import { useDeleteExchangeRate } from 'hooks/query';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
/**
* exchange rate delete alerts.
*/
function ExchangeRateDeleteAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { exchangeRateId },
// #withAlertActions
closeAlert,
}) {
const {
mutateAsync: deleteExchangeRate,
isLoading,
} = useDeleteExchangeRate();
const { formatMessage } = useIntl();
// Handle cancel delete exchange rate alert.
const handleCancelExchangeRateDelete = () => closeAlert(name);
const handelConfirmExchangeRateDelete = () => {
deleteExchangeRate(exchangeRateId)
.then((response) => {
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_deleted_successfully',
}),
intent: Intent.SUCCESS,
});
closeAlert(name);
})
.catch(() => {
closeAlert(name);
});
};
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
intent={Intent.DANGER}
isOpen={isOpen}
onCancel={handleCancelExchangeRateDelete}
onConfirm={handelConfirmExchangeRateDelete}
loading={isLoading}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}
/>
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ExchangeRateDeleteAlert);

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

@@ -1,183 +1,75 @@
import React, { useCallback, useMemo, useState } from 'react'; import React from 'react';
import {
Button,
Popover,
Menu,
MenuItem,
Position,
Intent,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import { CLASSES } from 'common/classes'; import { DataTable } from 'components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import { DataTable, Icon, Money } from 'components'; import { useExchangeRatesContext } from './ExchangeRatesProvider';
import LoadingIndicator from 'components/LoadingIndicator'; import { useExchangeRatesTableColumns, ActionMenuList } from './components';
import withDialogActions from 'containers/Dialog/withDialogActions'; import withDialogActions from 'containers/Dialog/withDialogActions';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions'; import withAlertActions from 'containers/Alert/withAlertActions';
import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
import { compose } from 'utils'; import { compose } from 'utils';
/**
* Exchange rates table.
*/
function ExchangeRateTable({ function ExchangeRateTable({
// #withExchangeRates // #ownProps
exchangeRatesList, tableProps,
exchangeRatesLoading,
exchangeRatesPageination,
// #withDialogActions. // #withDialogActions.
openDialog, openDialog,
// own properties // #withAlertActions
loading, openAlert,
onFetchData,
onDeleteExchangeRate,
onSelectedRowsChange,
}) { }) {
const [initialMount, setInitialMount] = useState(false); const {
const { formatMessage } = useIntl(); isExchangeRatesFetching,
isExchangeRatesLoading,
const handelEditExchangeRate = useCallback( exchangesRates,
(exchange_rate) => () => { pagination,
openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id }); } = useExchangeRatesContext();
},
[openDialog],
);
const handleDeleteExchangeRate = (exchange_rate) => () => { // Table columns.
onDeleteExchangeRate(exchange_rate); const columns = useExchangeRatesTableColumns();
// Handle delete exchange rate.
const handleDeleteExchangeRate = ({ id }) => {
openAlert('exchange-rate-delete', { exchangeRateId: id });
}; };
const actionMenuList = useCallback( // Handle Edit exchange rate.
(ExchangeRate) => ( const handelEditExchangeRate = (exchangeRate) => {
<Menu> openDialog('exchangeRate-form', {
<MenuItem action: 'edit',
icon={<Icon icon="pen-18" />} exchangeRate: exchangeRate,
text={formatMessage({ id: 'edit_exchange_rate' })} });
onClick={handelEditExchangeRate(ExchangeRate)}
/>
<MenuItem
text={formatMessage({ id: 'delete_exchange_rate' })}
intent={Intent.DANGER}
onClick={handleDeleteExchangeRate(ExchangeRate)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
),
[handelEditExchangeRate, handleDeleteExchangeRate, formatMessage],
);
const rowContextMenu = (cell) => {
return actionMenuList(cell.row.original);
}; };
const columns = useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
accessor: (r) => moment(r.date).format('YYYY MMM DD'),
width: 150,
},
{
id: 'currency_code',
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 150,
},
{
id: 'exchange_rate',
Header: formatMessage({ id: 'exchange_rate' }),
accessor: (r) => (
<Money
amount={r.exchange_rate}
currency={r.currency_code}
/>
),
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
className: 'actions',
width: 50,
},
],
[actionMenuList, formatMessage],
);
const selectionColumn = useMemo(
() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}),
[],
);
const handelFetchData = useCallback(
(...params) => {
onFetchData && onFetchData(...params);
},
[onFetchData],
);
const handelSelectedRowsChange = useCallback(
(selectRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectRows.map((c) => c.original));
},
[onSelectedRowsChange],
);
return ( return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}> <DataTable
<LoadingIndicator loading={loading} mount={false}> columns={columns}
<DataTable data={exchangesRates}
columns={columns} noInitialFetch={true}
data={exchangeRatesList} loading={isExchangeRatesLoading}
onFetchData={handelFetchData} headerLoading={isExchangeRatesLoading}
loading={exchangeRatesLoading && !initialMount} progressBarLoading={isExchangeRatesFetching}
manualSortBy={true} selectionColumn={true}
selectionColumn={selectionColumn} manualSortBy={true}
expandable={true} expandable={true}
treeGraph={true} sticky={true}
onSelectedRowsChange={handelSelectedRowsChange} // pagination={true}
rowContextMenu={rowContextMenu} TableLoadingRenderer={TableSkeletonRows}
pagination={true} payload={{
pagesCount={exchangeRatesPageination.pagesCount} onDeleteExchangeRate: handleDeleteExchangeRate,
initialPageSize={exchangeRatesPageination.pageSize} onEditExchangeRate: handelEditExchangeRate,
initialPageIndex={exchangeRatesPageination.page - 1} }}
/> ContextMenu={ActionMenuList}
</LoadingIndicator> {...tableProps}
</div> />
); );
} }
export default compose( export default compose(withDialogActions, withAlertActions)(ExchangeRateTable);
withDialogActions,
withExchangeRatesActions,
withExchangeRates(
({
exchangeRatesList,
exchangeRatesLoading,
exchangeRatesPageination,
}) => ({
exchangeRatesList,
exchangeRatesLoading,
exchangeRatesPageination,
}),
),
)(ExchangeRateTable);

12
client/src/containers/ExchangeRates/ExchangeRatesAlerts.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import ExchangeRateDeleteAlert from 'containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert';
// import ExchangeRateBulkDeleteAlert from 'containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert';
export default function ExchangeRatesAlerts() {
return (
<div>
<ExchangeRateDeleteAlert name={'exchange-rate-delete'} />
</div>
);
}

211
client/src/containers/ExchangeRates/ExchangeRatesList.js
View File

@@ -1,204 +1,27 @@
import React, { useEffect, useState, useCallback, useMemo } from 'react'; import React from 'react';
import { useQuery, queryCache } from 'react-query';
import { useParams } from 'react-router-dom'; import { DashboardContentTable, DashboardPageContent } from 'components';
import { Alert, Intent } from '@blueprintjs/core';
import {
FormattedMessage as T,
useIntl,
FormattedHTMLMessage,
} from 'react-intl';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ExchangeRateTable from './ExchangeRateTable'; import ExchangeRateTable from './ExchangeRateTable';
import ExchangeRateActionsBar from './ExchangeRateActionsBar'; import ExchangeRateActionsBar from './ExchangeRateActionsBar';
import withDialogActions from 'containers/Dialog/withDialogActions'; import { ExchangeRatesProvider } from './ExchangeRatesProvider';
import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import ExchangeRatesAlerts from './ExchangeRatesAlerts';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import { compose } from 'utils';
function ExchangeRatesList({
// #withDashboardActions
changePageTitle,
// #withResourceActions
requestFetchResourceFields,
// #withExchangeRatesActions
requestFetchExchangeRates,
requestDeleteExchangeRate,
addExchangeRatesTableQueries,
requestDeleteBulkExchangeRates,
// #withDialog
openDialog,
}) {
const { id } = useParams();
const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const { formatMessage } = useIntl();
const [bulkDelete, setBulkDelete] = useState(false);
const [filter, setFilter] = useState({});
const fetchExchangeRates = useQuery('exchange-rates-table', () =>
requestFetchExchangeRates(),
);
useEffect(() => {
id
? changePageTitle(formatMessage({ id: 'exchange_rate_details' }))
: changePageTitle(formatMessage({ id: 'exchange_rates_list' }));
}, [id, changePageTitle, formatMessage]);
const handelDeleteExchangeRate = useCallback(
(exchange_rate) => {
setDeleteExchangeRate(exchange_rate);
},
[setDeleteExchangeRate],
);
const handelEditExchangeRate = (exchange_rate) => {
openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
};
const handelCancelExchangeRateDelete = useCallback(() => {
setDeleteExchangeRate(false);
}, [setDeleteExchangeRate]);
const handelConfirmExchangeRateDelete = useCallback(() => {
requestDeleteExchangeRate(deleteExchangeRate.id)
.then(() => {
setDeleteExchangeRate(false);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_deleted_successfully',
}),
intent: Intent.SUCCESS,
});
})
.catch(() => {
setDeleteExchangeRate(false);
});
}, [deleteExchangeRate, requestDeleteExchangeRate, formatMessage]);
// Handle fetch data of Exchange_rates datatable.
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
addExchangeRatesTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
});
},
[addExchangeRatesTableQueries],
);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(exchange_rates) => {
setSelectedRows(exchange_rates);
},
[setSelectedRows],
);
// Handle Exchange Rates bulk delete.
const handleBulkDelete = useCallback(
(exchangeRatesIds) => {
setBulkDelete(exchangeRatesIds);
},
[setBulkDelete],
);
//Handel cancel itemCategories bulk delete.
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
// handle confirm Exchange Rates bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkExchangeRates(bulkDelete)
.then(() => {
setBulkDelete(false);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
setBulkDelete(false);
});
}, [requestDeleteBulkExchangeRates, bulkDelete, formatMessage]);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
selectedRows,
]);
/**
* Exchange Rates list.
*/
export default function ExchangeRatesList() {
return ( return (
<DashboardInsider loading={fetchExchangeRates.isFetching}> <ExchangeRatesProvider>
<ExchangeRateActionsBar <ExchangeRateActionsBar />
onDeleteExchangeRate={handelDeleteExchangeRate}
selectedRows={selectedRows}
onBulkDelete={handleBulkDelete}
/>
<DashboardPageContent> <DashboardPageContent>
<ExchangeRateTable <DashboardContentTable>
onDeleteExchangeRate={handelDeleteExchangeRate} <ExchangeRateTable />
onEditExchangeRate={handelEditExchangeRate} </DashboardContentTable>
onFetchData={handleFetchData}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteExchangeRate}
onCancel={handelCancelExchangeRateDelete}
onConfirm={handelConfirmExchangeRateDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={`${formatMessage({
id: 'delete',
})} (${selectedRowsCount})`}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
>
<p>
<FormattedHTMLMessage
id={
'once_delete_these_exchange_rates_you_will_not_able_restore_them'
}
/>
</p>
</Alert>
</DashboardPageContent> </DashboardPageContent>
</DashboardInsider> <ExchangeRatesAlerts />
</ExchangeRatesProvider>
); );
} }
export default compose(
withExchangeRatesActions,
withResourceActions,
withDashboardActions,
withDialogActions,
)(ExchangeRatesList);

35
client/src/containers/ExchangeRates/ExchangeRatesProvider.js Normal file
View File

@@ -0,0 +1,35 @@
import React, { createContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useExchangeRates } from 'hooks/query';
const ExchangesRatesContext = createContext();
/**
* Exchanges rates list provider.
*/
function ExchangeRatesProvider({ query, ...props }) {
const {
data: { exchangesRates, pagination },
isFetching: isExchangeRatesFetching,
isLoading: isExchangeRatesLoading,
} = useExchangeRates();
const state = {
isExchangeRatesFetching,
isExchangeRatesLoading,
exchangesRates,
pagination,
query,
};
return (
<DashboardInsider name={'exchange-rate-list'}>
<ExchangesRatesContext.Provider value={state} {...props} />
</DashboardInsider>
);
}
const useExchangeRatesContext = () => React.useContext(ExchangesRatesContext);
export { ExchangeRatesProvider, useExchangeRatesContext };

94
client/src/containers/ExchangeRates/components.js Normal file
View File

@@ -0,0 +1,94 @@
import React, { useMemo } from 'react';
import {
Menu,
Popover,
Button,
Position,
MenuItem,
MenuDivider,
Intent,
} from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import { Icon, Money } from 'components';
import moment from 'moment';
import { safeCallback } from 'utils';
/**
* Row actions menu list.
*/
export function ActionMenuList({
row: { original },
payload: { onEditExchangeRate, onDeleteExchangeRate },
}) {
const { formatMessage } = useIntl();
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_exchange_rate' })}
onClick={safeCallback(onEditExchangeRate, original)}
/>
<MenuDivider />
<MenuItem
text={formatMessage({ id: 'delete_exchange_rate' })}
intent={Intent.DANGER}
onClick={safeCallback(onDeleteExchangeRate, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Table actions cell.
*/
export function TableActionsCell(props) {
return (
<Popover
content={<ActionMenuList {...props} />}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
);
}
export function useExchangeRatesTableColumns() {
const { formatMessage } = useIntl();
return useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
accessor: (r) => moment(r.date).format('YYYY MMM DD'),
width: 150,
},
{
id: 'currency_code',
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 150,
},
{
id: 'exchange_rate',
Header: formatMessage({ id: 'exchange_rate' }),
accessor: (r) => (
<Money amount={r.exchange_rate} currency={r.currency_code} />
),
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: TableActionsCell,
className: 'actions',
width: 50,
},
],
[formatMessage],
);
}

78
client/src/hooks/query/exchangeRates.js Normal file
View File

@@ -0,0 +1,78 @@
import { useQuery, useMutation, useQueryClient } from 'react-query';
import { defaultTo } from 'lodash';
import ApiService from 'services/ApiService';
/**
* Creates a new exchange rate.
*/
export function useCreateExchangeRate(props) {
const queryClient = useQueryClient();
return useMutation((values) => ApiService.post('exchange_rates', values), {
onSuccess: () => {
queryClient.invalidateQueries('EXCHANGES_RATES');
},
...props,
});
}
/**
* Edits the exchange rate.
*/
export function useEdiExchangeRate(props) {
const queryClient = useQueryClient();
return useMutation(
([id, values]) => ApiService.post(`exchange_rates/${id}`, values),
{
onSuccess: () => {
queryClient.invalidateQueries('EXCHANGES_RATES');
},
...props,
},
);
}
/**
* Deletes the exchange rate.
*/
export function useDeleteExchangeRate(props) {
const queryClient = useQueryClient();
return useMutation((id) => ApiService.delete(`exchange_rates/${id}`), {
onSuccess: () => {
queryClient.invalidateQueries('EXCHANGES_RATES');
},
...props,
});
}
// Transforms items categories.
const transformExchangesRates = (response) => {
return {
exchangesRates: response.data.exchange_rates.results,
pagination: response.data.exchange_rates.pagination,
};
};
/**
* Retrieve the exchange rate list.
*/
export function useExchangeRates(query, props) {
const states = useQuery(
['EXCHANGES_RATES', query],
() =>
ApiService.get('exchange_rates', { params: { query } }).then(
transformExchangesRates,
),
props,
);
return {
...states,
data: defaultTo(states.data, {
exchangesRates: [],
pagination: {},
}),
};
}

1
client/src/routes/dashboard.js
View File

@@ -167,6 +167,7 @@ export default [
path: `/exchange-rates`, path: `/exchange-rates`,
component: lazy(() => import('containers/ExchangeRates/ExchangeRatesList')), component: lazy(() => import('containers/ExchangeRates/ExchangeRatesList')),
breadcrumb: 'Exchange Rates', breadcrumb: 'Exchange Rates',
pageTitle: formatMessage({ id: 'exchange_rates_list' }),
}, },
// Expenses. // Expenses.
{ {