feat: apply new cards design system.

feat: empty status datatables.
fix: edit account.
This commit is contained in:
Ahmed Bouhuolia
2020-11-18 21:55:17 +02:00
parent 0b386a7cb2
commit 128feb73f8
64 changed files with 869 additions and 688 deletions

View File

@@ -1,8 +1,7 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import React, { useEffect, useCallback, useMemo } from 'react';
import {
Intent,
Button,
Classes,
Popover,
Menu,
MenuItem,
@@ -14,9 +13,11 @@ import { useParams } from 'react-router-dom';
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import Icon from 'components/Icon';
import { compose, saveInvoke } from 'utils';
import { CLASSES } from 'common/classes';
import { useIsValuePassed } from 'hooks';
import { LoadingIndicator, Choose } from 'components';
@@ -221,34 +222,36 @@ function BillsDataTable({
const showEmptyStatus = [
billsCurrentViewId === -1,
billsCurrentPage.length === 0,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator loading={billsLoading && !isLoadedBefore} mount={false}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<BillsEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={billsLoading && !isLoadedBefore} mount={false}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<BillsEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={billsCurrentPage}
onFetchData={handleFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={billsPageination.pagesCount}
initialPageSize={billsPageination.pageSize}
initialPageIndex={billsPageination.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
columns={columns}
data={billsCurrentPage}
onFetchData={handleFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={billsPageination.pagesCount}
initialPageSize={billsPageination.pageSize}
initialPageIndex={billsPageination.page - 1}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}
@@ -264,13 +267,13 @@ export default compose(
billsLoading,
billsPageination,
billsTableQuery,
billsCurrentViewId
billsCurrentViewId,
}) => ({
billsCurrentPage,
billsLoading,
billsPageination,
billsTableQuery,
billsCurrentViewId
billsCurrentViewId,
}),
),
withViewDetails(),

View File

@@ -11,10 +11,12 @@ import {
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import { compose, saveInvoke } from 'utils';
import { useIsValuePassed } from 'hooks';
import { CLASSES } from 'common/classes';
import { DataTable, Money, Icon, Choose, LoadingIndicator } from 'components';
import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
@@ -182,36 +184,38 @@ function PaymentMadeDataTable({
const showEmptyStatuts = [
paymentMadeCurrentPage.length === 0,
paymentMadesCurrentViewId === -1,
].every(condition => condition === true);
].every((condition) => condition === true);
return (
<LoadingIndicator loading={paymentMadesLoading && !isLoaded}>
<Choose>
<Choose.When condition={showEmptyStatuts}>
<PaymentMadesEmptyStatus />
</Choose.When>
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={paymentMadesLoading && !isLoaded}>
<Choose>
<Choose.When condition={showEmptyStatuts}>
<PaymentMadesEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={paymentMadeCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={paymentMadePageination.pagesCount}
initialPageSize={paymentMadeTableQuery.page_size}
initialPageIndex={paymentMadeTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
<Choose.Otherwise>
<DataTable
columns={columns}
data={paymentMadeCurrentPage}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
pagination={true}
pagesCount={paymentMadePageination.pagesCount}
initialPageSize={paymentMadeTableQuery.page_size}
initialPageIndex={paymentMadeTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
/>
</Choose.Otherwise>
</Choose>
</LoadingIndicator>
</div>
);
}
@@ -225,13 +229,13 @@ export default compose(
paymentMadesLoading,
paymentMadePageination,
paymentMadeTableQuery,
paymentMadesCurrentViewId
paymentMadesCurrentViewId,
}) => ({
paymentMadeCurrentPage,
paymentMadesLoading,
paymentMadePageination,
paymentMadeTableQuery,
paymentMadesCurrentViewId
paymentMadesCurrentViewId,
}),
),
)(PaymentMadeDataTable);