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

WIP Fix & last tasks

Browse Source
This commit is contained in:
elforjani3
2020-05-31 21:33:45 +02:00
parent 2e8ffa2aa9
commit 41d106e1a7
30 changed files with 1483 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
client/src/containers/ExchangeRates/ExchangeRate.js
View File

@@ -1,8 +1,12 @@
import React, { useEffect, useState, useCallback,useMemo } from 'react';
import { useQuery } from 'react-query';
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useQuery, queryCache } from 'react-query';
import { useParams } from 'react-router-dom';
import { Alert, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl, FormattedHTMLMessage } from 'react-intl';
import {
FormattedMessage as T,
useIntl,
FormattedHTMLMessage,
} from 'react-intl';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -10,13 +14,13 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ExchangeRateTable from './ExchangeRateTable';
import ExchangeRateActionsBar from './ExchangeRateActionsBar';
import withDialog from 'connectors/Dialog.connector';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import { compose } from 'utils';
function ExchangeRate({
// #withDashboard
changePageTitle,
@@ -29,45 +33,56 @@ function ExchangeRate({
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());
const fetchExchangeRates = useQuery('exchange-rates-table', () =>
requestFetchExchangeRates(),
);
useEffect(() => {
id
? changePageTitle(formatMessage({id:'exchange_rate_details'}))
: changePageTitle(formatMessage({id:'exchange_rate_list'}));
}, [id, changePageTitle,formatMessage]);
? changePageTitle(formatMessage({ id: 'exchange_rate_details' }))
: changePageTitle(formatMessage({ id: 'exchange_rate_list' }));
}, [id, changePageTitle, formatMessage]);
const handelDeleteExchangeRate = useCallback(
(exchange_rate) => {
setDeleteExchangeRate(exchange_rate);
},
[setDeleteExchangeRate]
[setDeleteExchangeRate],
);
const handelEditExchangeRate = (exchange_rate) => {};
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_rate_has_been_successfully_deleted'}),
requestDeleteExchangeRate(deleteExchangeRate.id)
.then(() => {
setDeleteExchangeRate(false);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
})
.catch(() => {
setDeleteExchangeRate(false);
});
});
}, [deleteExchangeRate, requestDeleteExchangeRate,formatMessage]);
}, [deleteExchangeRate, requestDeleteExchangeRate, formatMessage]);
// Handle fetch data of Exchange_rates datatable.
const handleFetchData = useCallback(
@@ -81,58 +96,58 @@ function ExchangeRate({
: {}),
});
},
[addExchangeRatesTableQueries]
[addExchangeRatesTableQueries],
);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(exchange_rates) => {
setSelectedRows(exchange_rates);
},
[setSelectedRows]
[setSelectedRows],
);
// Handle Exchange Rates bulk delete.
const handleBulkDelete = useCallback(
(exchangeRates) => {
setBulkDelete(exchangeRates);
},
[setBulkDelete]
);
// Handle Exchange Rates bulk delete.
const handleBulkDelete = useCallback(
(exchangeRatesIds) => {
setBulkDelete(exchangeRatesIds);
},
[setBulkDelete],
);
//Handel cancel itemCategories bulk delete.
const handleCancelBulkDelete =useCallback(()=>{
setBulkDelete(false)
},[])
//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,
// 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);
});
})
.catch((errors) => {
setBulkDelete(false);
});
}, [requestDeleteBulkExchangeRates, bulkDelete,formatMessage]);
}, [requestDeleteBulkExchangeRates, bulkDelete, formatMessage]);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
selectedRows,
]);
return (
<DashboardInsider>
<DashboardInsider loading={fetchExchangeRates.isFetching}>
<ExchangeRateActionsBar
onDeleteExchangeRate={handelDeleteExchangeRate}
selectedRows={selectedRows}
onBulkDelete={handleBulkDelete}
/>
<DashboardPageContent>
<ExchangeRateTable
@@ -143,33 +158,38 @@ const handleConfirmBulkDelete = useCallback(() => {
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'move_to_trash'} />}
icon='trash'
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'}/>
<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>
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>
</DashboardInsider>
);
@@ -178,5 +198,6 @@ const handleConfirmBulkDelete = useCallback(() => {
export default compose(
withExchangeRatesActions,
withResourceActions,
withDashboardActions
withDashboardActions,
withDialog,
)(ExchangeRate);

43
client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
View File

@@ -11,7 +11,7 @@ import {
import classNames from 'classnames';
import Icon from 'components/Icon';
import { connect } from 'react-redux';
import { If } from 'components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withDialog from 'connectors/Dialog.connector';
@@ -19,8 +19,7 @@ import FilterDropdown from 'components/FilterDropdown';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import { compose } from 'utils';
import { FormattedMessage as T ,useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ExchangeRateActionsBar({
// #withDialog.
@@ -28,15 +27,15 @@ function ExchangeRateActionsBar({
// #withResourceDetail
resourceFields,
// #ownProps
selectedRows = [],
onDeleteExchangeRate,
onFilterChanged,
onBulkDelete
onBulkDelete,
}) {
const [filterCount, setFilterCount] = useState(0);
const {formatMessage} =useIntl()
const { formatMessage } = useIntl();
const onClickNewExchangeRate = () => {
openDialog('exchangeRate-form', {});
@@ -51,27 +50,20 @@ const {formatMessage} =useIntl()
},
});
// const handelDeleteExchangeRate = useCallback(
// (exchangeRate) => {
// onDeleteExchangeRate(exchangeRate);
// },
// [selectedRows, onDeleteExchangeRate]
// );
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows,
]);
const handelBulkDelete =useCallback(()=>{
onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
},[onBulkDelete,selectedRows])
const handelBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
icon={<Icon icon="plus" />}
text={<T id={'new_exchange_rate'} />}
onClick={onClickNewExchangeRate}
/>
@@ -87,29 +79,30 @@ const {formatMessage} =useIntl()
filterCount <= 0 ? (
<T id={'filter'} />
) : (
`${filterCount} ${formatMessage({id:'filters_applied'})}`
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
)
}
icon={<Icon icon='filter' />}
icon={<Icon icon="filter" />}
/>
</Popover>
{hasSelectedRows && (
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
icon={<Icon icon="trash" iconSize={15} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handelBulkDelete}
/>
)}
</If>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
icon={<Icon icon="file-import" />}
text={<T id={'import'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
icon={<Icon icon="file-export" />}
text={<T id={'export'} />}
/>
</NavbarGroup>
@@ -128,5 +121,5 @@ export default compose(
withDialog,
withResourceDetail(({ resourceFields }) => ({
resourceFields,
}))
})),
)(ExchangeRateActionsBar);

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

@@ -1,16 +1,15 @@
import React, { useCallback, useMemo,useState } from 'react';
import React, { useCallback, useMemo, useState, useEffect } from 'react';
import Icon from 'components/Icon';
import DialogConnect from 'connectors/Dialog.connector';
import DataTable from 'components/DataTable';
import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import LoadingIndicator from 'components/LoadingIndicator';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
import { compose } from 'utils';
function ExchangeRateTable({
// #withExchangeRates
exchangeRatesList,
@@ -25,7 +24,6 @@ function ExchangeRateTable({
onEditExchangeRate,
onSelectedRowsChange,
}) {
const [initialMount, setInitialMount] = useState(false);
const { formatMessage } = useIntl();
@@ -47,69 +45,81 @@ function ExchangeRateTable({
/>
<MenuItem
text={<T id={'delete_exchange_rate'} />}
intent={Intent.DANGER}
onClick={handleDeleteExchangeRate(ExchangeRate)}
/>
</Menu>
),
[handelEditExchangeRate, handleDeleteExchangeRate]
[handelEditExchangeRate, handleDeleteExchangeRate],
);
const columns = useMemo(() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
// accessor: 'date',
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: 'exchange_rate',
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: false,
},
], [actionMenuList,formatMessage]);
const columns = useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
// accessor: 'date',
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: 'exchange_rate',
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: false,
},
],
[actionMenuList, formatMessage],
);
const selectionColumn = useMemo(() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}), []);
const selectionColumn = useMemo(
() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}),
[],
);
const handelFetchData = useCallback(
(...params) => {
onFetchData && onFetchData(...params);
},
[onFetchData]
[onFetchData],
);
const handelSelectedRowsChange = useCallback((selectRows) => {
onSelectedRowsChange && onSelectedRowsChange(selectRows.map((c) => c.original));
}, [onSelectedRowsChange]);
const handelSelectedRowsChange = useCallback(
(selectRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectRows.map((c) => c.original));
},
[onSelectedRowsChange],
);
return (
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={exchangeRatesList}
@@ -122,14 +132,15 @@ function ExchangeRateTable({
onSelectedRowsChange={handelSelectedRowsChange}
spinnerProps={{ size: 30 }}
/>
</LoadingIndicator>
);
}
export default compose(
DialogConnect,
withExchangeRatesActions,
withExchangeRates(({ exchangeRatesList ,exchangeRatesLoading }) => ({
withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({
exchangeRatesList,
exchangeRatesLoading
}))
exchangeRatesLoading,
})),
)(ExchangeRateTable);