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

feat: Drawer.

Browse Source
This commit is contained in:
elforjani3
2021-02-04 18:03:28 +02:00
parent 08f257ae1f
commit 8b44ae4b73
19 changed files with 581 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Dashboard/Dashboard.js
View File

@@ -14,6 +14,7 @@ import Search from 'containers/GeneralSearch/Search';
import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane'; import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
import GlobalHotkeys from './GlobalHotkeys'; import GlobalHotkeys from './GlobalHotkeys';
import withSettingsActions from 'containers/Settings/withSettingsActions'; import withSettingsActions from 'containers/Settings/withSettingsActions';
import DrawersContainer from 'components/DrawersContainer';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -47,6 +48,7 @@ function Dashboard({
<Search /> <Search />
<DialogsContainer /> <DialogsContainer />
<GlobalHotkeys /> <GlobalHotkeys />
<DrawersContainer />
</DashboardLoadingIndicator> </DashboardLoadingIndicator>
); );
} }

12
client/src/components/DrawersContainer.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer';
import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer';
export default function DrawersContainer() {
return (
<div>
<EstimateDrawer name={'estimate-drawer'} />
<InvoiceDrawer name={'invoice-drawer'} />
</div>
);
}

15
client/src/containers/Drawer/withDrawerActions.js Normal file
View File

@@ -0,0 +1,15 @@
import { connect } from 'react-redux';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
return {};
};
export const mapDispatchToProps = (dispatch) => ({
openDrawer: (name, payload) =>
dispatch({ type: t.OPEN_DRAWER, name, payload }),
closeDrawer: (name, payload) =>
dispatch({ type: t.CLOSE_DRAWER, name, payload }),
});
export default connect(null, mapDispatchToProps);

19
client/src/containers/Drawer/withDrawers.js Normal file
View File

@@ -0,0 +1,19 @@
import { connect } from 'react-redux';
import {
isDrawerOpenFactory,
getDrawerPayloadFactory,
} from 'store/dashboard/dashboard.selectors';
export default (mapState) => {
const isDrawerOpen = isDrawerOpenFactory();
const getDrawerPayload = getDrawerPayloadFactory();
const mapStateToProps = (state, props) => {
const mapped = {
isOpen: isDrawerOpen(state, props),
payload: getDrawerPayload(state, props),
};
return mapState ? mapState(mapped) : mapped;
};
return connect(mapStateToProps);
};

29
client/src/containers/Drawers/DrawerTemplate.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Position, Drawer } from '@blueprintjs/core';
export default function DrawerTemplate({
children,
isOpen,
isClose,
drawerProps,
}) {
return (
<div>
<Drawer
isOpen={isOpen}
usePortal={false}
hasBackdrop={true}
title={<T id={'view_paper'} />}
position={Position.RIGHT}
canOutsideClickClose={true}
canEscapeKeyClose={true}
size={'65%'}
onClose={isClose}
{...drawerProps}
>
{children}
</Drawer>
</div>
);
}

123
client/src/containers/Drawers/PaperTemplate.js Normal file
View File

@@ -0,0 +1,123 @@
import React from 'react';
import { Icon } from 'components';
import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaperTemplate({ labels: propLabels }) {
const labels = {
name: 'Estimate',
billedTo: 'Billed to',
date: 'Estimate date',
refNo: 'Estimate No.',
billedFrom: 'Billed from',
amount: 'Estimate amount',
dueDate: 'Due date',
...propLabels,
};
return (
<div id={'page-size'}>
<div className={'template'}>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{labels.name}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {labels.billedTo} </span>
<p className={'info-paragraph'}>Joe Biden</p>
</div>
<div className="template__content__info">
<span> {labels.date} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {labels.refNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {labels.amount} </span>
<p className={'info-paragraph-amount'}>6,000 LYD</p>
</div>
<div className="template__content__info">
<span> {labels.billedFrom} </span>
<p className={'info-paragraph'}>Donald Trump</p>
</div>
<div className="template__content__info">
<span> {labels.dueDate} </span>
<p className={'info-paragraph'}>25/03/2022</p>
</div>
</div>
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell ">Description</span>
<span className="template__table__rows--cell">Rate</span>
<span className="template__table__rows--cell">Qty</span>
<span className="template__table__rows--cell">Total</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla commodo magnanon dolor excepteur nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
</div>
<div className="template__terms">
<div className="template__terms__title">
<h4>Conditions and terms</h4>
</div>
<ul>
<li>Est excepteur laboris do sit dolore sit exercitation non.</li>
<li>Lorem duis aliqua minim elit cillum.</li>
<li>Dolor ad quis Lorem ut mollit consectetur.</li>
</ul>
</div>
</div>
</div>
);
}

29
client/src/containers/Sales/Estimate/EstimateDrawer.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
function EstimateDrawer({
name,
//#withDrawer
isOpen,
payload,
closeDrawer,
}) {
// handle close Drawer
const handleDrawerClose = () => {
closeDrawer(name);
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaperTemplate />
</DrawerTemplate>
);
}
export default compose(withDrawers(), withDrawerActions)(EstimateDrawer);

6
client/src/containers/Sales/Estimate/EstimatesDataTable.js
View File

@@ -46,6 +46,7 @@ function EstimatesDataTable({
onDeliverEstimate, onDeliverEstimate,
onApproveEstimate, onApproveEstimate,
onRejectEstimate, onRejectEstimate,
onDrawerEstimate,
onSelectedRowsChange, onSelectedRowsChange,
}) { }) {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@@ -112,6 +113,11 @@ function EstimatesDataTable({
/> />
</Choose.When> </Choose.When>
</Choose> </Choose>
<MenuItem
text={formatMessage({ id: 'estimate_paper' })}
onClick={() => onDrawerEstimate()}
/>
<MenuItem <MenuItem
text={formatMessage({ id: 'delete_estimate' })} text={formatMessage({ id: 'delete_estimate' })}
intent={Intent.DANGER} intent={Intent.DANGER}

14
client/src/containers/Sales/Estimate/EstimatesList.js
View File

@@ -19,6 +19,7 @@ import withEstimates from './withEstimates';
import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions'; import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
import withViewsActions from 'containers/Views/withViewsActions'; import withViewsActions from 'containers/Views/withViewsActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -37,6 +38,9 @@ function EstimatesList({
// #withAlertsActions. // #withAlertsActions.
openAlert, openAlert,
// #withDrawerActions
openDrawer,
//#withEistimateActions //#withEistimateActions
requestFetchEstimatesTable, requestFetchEstimatesTable,
requestDeliverdEstimate, requestDeliverdEstimate,
@@ -46,10 +50,6 @@ function EstimatesList({
}) { }) {
const history = useHistory(); const history = useHistory();
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [deliverEstimate, setDeliverEstimate] = useState(false);
const [approveEstimate, setApproveEstimate] = useState(false);
const [rejectEstimate, setRejectEstimate] = useState(false);
const [selectedRows, setSelectedRows] = useState([]); const [selectedRows, setSelectedRows] = useState([]);
const fetchResourceViews = useQuery( const fetchResourceViews = useQuery(
@@ -103,6 +103,10 @@ function EstimatesList({
[openAlert], [openAlert],
); );
const handleEstimateDrawer = useCallback(() => {
openDrawer('estimate-drawer', {});
}, [openDrawer]);
// Handle filter change to re-fetch data-table. // Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {}, []); const handleFilterChanged = useCallback(() => {}, []);
@@ -147,6 +151,7 @@ function EstimatesList({
onDeliverEstimate={handleDeliverEstimate} onDeliverEstimate={handleDeliverEstimate}
onApproveEstimate={handleApproveEstimate} onApproveEstimate={handleApproveEstimate}
onRejectEstimate={handleRejectEstimate} onRejectEstimate={handleRejectEstimate}
onDrawerEstimate={handleEstimateDrawer}
onSelectedRowsChange={handleSelectedRowsChange} onSelectedRowsChange={handleSelectedRowsChange}
/> />
</Route> </Route>
@@ -167,4 +172,5 @@ export default compose(
estimateViews, estimateViews,
})), })),
withAlertsActions, withAlertsActions,
withDrawerActions,
)(EstimatesList); )(EstimatesList);

41
client/src/containers/Sales/Invoice/InvoiceDrawer.js Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
function InvoiceDrawer({
name,
//#withDrawer
isOpen,
payload,
closeDrawer,
}) {
// handle close Drawer
const handleDrawerClose = () => {
closeDrawer(name);
};
const propLabels = {
labels: {
name: 'Invoice',
billedTo: 'Billed to',
date: 'Invoice date',
refNo: 'Invoice No.',
billedFrom: 'Billed from',
amount: 'Invoice amount',
dueDate: 'Due date',
},
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaperTemplate propLabels={propLabels} />
</DrawerTemplate>
);
}
export default compose(withDrawers(), withDrawerActions)(InvoiceDrawer);

5
client/src/containers/Sales/Invoice/InvoicesDataTable.js
View File

@@ -55,6 +55,7 @@ function InvoicesDataTable({
onEditInvoice, onEditInvoice,
onDeleteInvoice, onDeleteInvoice,
onDeliverInvoice, onDeliverInvoice,
onDrawerInvoice,
onSelectedRowsChange, onSelectedRowsChange,
}) { }) {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@@ -93,6 +94,10 @@ function InvoicesDataTable({
onClick={() => onDeliverInvoice(invoice)} onClick={() => onDeliverInvoice(invoice)}
/> />
</If> </If>
<MenuItem
text={formatMessage({ id: 'invoice_paper' })}
onClick={() => onDrawerInvoice()}
/>
<MenuItem <MenuItem
text={formatMessage({ id: 'delete_invoice' })} text={formatMessage({ id: 'delete_invoice' })}
intent={Intent.DANGER} intent={Intent.DANGER}

17
client/src/containers/Sales/Invoice/InvoicesList.js
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useCallback, useMemo, useState } from 'react'; import React, { useEffect, useCallback, useMemo, useState } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom'; import { Route, Switch, useHistory } from 'react-router-dom';
import { useQuery} from 'react-query'; import { useQuery } from 'react-query';
import 'style/pages/SaleInvoice/List.scss'; import 'style/pages/SaleInvoice/List.scss';
@@ -19,6 +19,7 @@ import withInvoices from './withInvoices';
import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions'; import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
import withViewsActions from 'containers/Views/withViewsActions'; import withViewsActions from 'containers/Views/withViewsActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -40,6 +41,9 @@ function InvoicesList({
// #withAlertsActions. // #withAlertsActions.
openAlert, openAlert,
// #withDrawerActions
openDrawer,
//#withInvoiceActions //#withInvoiceActions
requestFetchInvoiceTable, requestFetchInvoiceTable,
@@ -47,7 +51,7 @@ function InvoicesList({
}) { }) {
const history = useHistory(); const history = useHistory();
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [selectedRows, setSelectedRows] = useState([]); const [selectedRows, setSelectedRows] = useState([]);
useEffect(() => { useEffect(() => {
changePageTitle(formatMessage({ id: 'invoices_list' })); changePageTitle(formatMessage({ id: 'invoices_list' }));
@@ -77,17 +81,20 @@ function InvoicesList({
// Handle cancel/confirm invoice deliver. // Handle cancel/confirm invoice deliver.
const handleDeliverInvoice = useCallback( const handleDeliverInvoice = useCallback(
({id}) => { ({ id }) => {
openAlert('invoice-deliver', { invoiceId: id }); openAlert('invoice-deliver', { invoiceId: id });
}, },
[openAlert], [openAlert],
); );
const handleEditInvoice = useCallback((invoice) => { const handleEditInvoice = useCallback((invoice) => {
history.push(`/invoices/${invoice.id}/edit`); history.push(`/invoices/${invoice.id}/edit`);
}); });
const handleInvoiceDrawer = useCallback(() => {
openDrawer('invoice-drawer', {});
}, [openDrawer]);
// Handle filter change to re-fetch data-table. // Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {}, []); const handleFilterChanged = useCallback(() => {}, []);
@@ -118,6 +125,7 @@ function InvoicesList({
onDeleteInvoice={handleDeleteInvoice} onDeleteInvoice={handleDeleteInvoice}
onEditInvoice={handleEditInvoice} onEditInvoice={handleEditInvoice}
onDeliverInvoice={handleDeliverInvoice} onDeliverInvoice={handleDeliverInvoice}
onDrawerInvoice={handleInvoiceDrawer}
onSelectedRowsChange={handleSelectedRowsChange} onSelectedRowsChange={handleSelectedRowsChange}
/> />
</Route> </Route>
@@ -138,4 +146,5 @@ export default compose(
invoicesTableQuery, invoicesTableQuery,
})), })),
withAlertsActions, withAlertsActions,
withDrawerActions,
)(InvoicesList); )(InvoicesList);

6
client/src/containers/Subscriptions/BillingPlansForm.js
View File

@@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import { FormattedMessage as T } from 'react-intl'; import { FormattedMessage as T } from 'react-intl';
import 'style/pages/Subscription/BillingPlans.scss' import 'style/pages/Subscription/BillingPlans.scss';
import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput'; import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput';
import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput'; import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput';
import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod'; import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod';
/** /**
* Billing plans form. * Billing plans form.
@@ -26,5 +26,5 @@ export default function BillingPlansForm() {
description={<T id={'please_enter_your_preferred_payment_method'} />} description={<T id={'please_enter_your_preferred_payment_method'} />}
/> />
</div> </div>
) );
} }

5
client/src/lang/en/index.js
View File

@@ -967,5 +967,8 @@ export default {
view_all: 'View all', view_all: 'View all',
payment_via_voucher: 'Payment via voucher', payment_via_voucher: 'Payment via voucher',
voucher_number: 'Voucher number', voucher_number: 'Voucher number',
voucher: 'Voucher' voucher: 'Voucher',
view_paper: 'View Paper',
estimate_paper:'Estimate Paper',
invoice_paper:'Invoice Paper',
}; };

21
client/src/store/dashboard/dashboard.actions.js
View File

@@ -6,7 +6,7 @@ export function openDialog(name, payload) {
name: name, name: name,
payload: payload, payload: payload,
}; };
}; }
export function closeDialog(name, payload) { export function closeDialog(name, payload) {
return { return {
@@ -17,7 +17,7 @@ export function closeDialog(name, payload) {
} }
export function openAlert(name, payload) { export function openAlert(name, payload) {
return { return {
type: t.OPEN_ALERT, type: t.OPEN_ALERT,
name, name,
payload, payload,
@@ -25,9 +25,24 @@ export function openAlert(name, payload) {
} }
export function closeAlert(name, payload) { export function closeAlert(name, payload) {
return { return {
type: t.CLOSE_ALERT, type: t.CLOSE_ALERT,
name, name,
payload, payload,
}; };
} }
export function openDrawer(name, payload) {
return {
type: t.OPEN_DRAWER,
name,
payload,
};
}
export function closeDrawer(name, payload) {
return {
type: t.CLOSE_DRAWER,
name,
payload,
};
}

52
client/src/store/dashboard/dashboard.reducer.js
View File

@@ -1,7 +1,7 @@
import t from 'store/types'; import t from 'store/types';
import { createReducer } from '@reduxjs/toolkit'; import { createReducer } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist' import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
const initialState = { const initialState = {
pageTitle: '', pageTitle: '',
@@ -12,6 +12,7 @@ const initialState = {
previousSidebarExpended: null, previousSidebarExpended: null,
dialogs: {}, dialogs: {},
alerts: {}, alerts: {},
drawers: {},
topbarEditViewId: null, topbarEditViewId: null,
requestsLoading: 0, requestsLoading: 0,
backLink: false, backLink: false,
@@ -61,10 +62,19 @@ const reducerInstance = createReducer(initialState, {
isOpen: false, isOpen: false,
}; };
}, },
[t.OPEN_DRAWER]: (state, action) => {
[t.CLOSE_ALL_DIALOGS]: (state, action) => { state.drawers[action.name] = {
isOpen: true,
payload: action.payload || {},
};
}, },
[t.CLOSE_DRAWER]: (state, action) => {
state.drawers[action.name] = {
...state.drawers[action.name],
isOpen: false,
};
},
[t.CLOSE_ALL_DIALOGS]: (state, action) => {},
[t.SET_TOPBAR_EDIT_VIEW]: (state, action) => { [t.SET_TOPBAR_EDIT_VIEW]: (state, action) => {
state.topbarEditViewId = action.id; state.topbarEditViewId = action.id;
@@ -102,25 +112,29 @@ const reducerInstance = createReducer(initialState, {
[t.SET_DASHBOARD_BACK_LINK]: (state, action) => { [t.SET_DASHBOARD_BACK_LINK]: (state, action) => {
const { backLink } = action.payload; const { backLink } = action.payload;
state.backLink = backLink; state.backLink = backLink;
} },
}); });
export default persistReducer({ export default persistReducer(
key: 'bigcapital:dashboard', {
blacklist: [ key: 'bigcapital:dashboard',
'pageTitle', blacklist: [
'pageSubtitle', 'pageTitle',
'pageHint', 'pageSubtitle',
'preferencesPageTitle', 'pageHint',
'topbarEditViewId', 'preferencesPageTitle',
'backLink' 'topbarEditViewId',
], 'backLink',
storage, ],
}, reducerInstance); storage,
},
reducerInstance,
);
export const getDialogPayload = (state, dialogName) => { export const getDialogPayload = (state, dialogName) => {
return typeof state.dashboard.dialogs[dialogName] !== 'undefined' return typeof state.dashboard.dialogs[dialogName] !== 'undefined'
? state.dashboard.dialogs[dialogName].payload : {}; ? state.dashboard.dialogs[dialogName].payload
: {};
}; };
export const getDialogActiveStatus = (state, dialogName) => { export const getDialogActiveStatus = (state, dialogName) => {

53
client/src/store/dashboard/dashboard.selectors.js
View File

@@ -1,33 +1,40 @@
import { createSelector } from "@reduxjs/toolkit"; import { createSelector } from '@reduxjs/toolkit';
const dialogByNameSelector = (state, props) => state.dashboard.dialogs?.[props.dialogName]; const dialogByNameSelector = (state, props) =>
state.dashboard.dialogs?.[props.dialogName];
export const isDialogOpenFactory = () => createSelector( export const isDialogOpenFactory = () =>
dialogByNameSelector, createSelector(dialogByNameSelector, (dialog) => {
(dialog) => {
return dialog && dialog.isOpen; return dialog && dialog.isOpen;
}, });
);
export const getDialogPayloadFactory = () => createSelector( export const getDialogPayloadFactory = () =>
dialogByNameSelector, createSelector(dialogByNameSelector, (dialog) => {
(dialog) => {
return { ...dialog?.payload }; return { ...dialog?.payload };
}, });
);
const alertByNameSelector = (state, props) => state.dashboard.alerts?.[props.name]; const alertByNameSelector = (state, props) =>
state.dashboard.alerts?.[props.name];
export const isAlertOpenFactory = () => createSelector( export const isAlertOpenFactory = () =>
alertByNameSelector, createSelector(alertByNameSelector, (alert) => {
(alert) => {
return alert && alert.isOpen; return alert && alert.isOpen;
}, });
);
export const getAlertPayloadFactory = () => createSelector( export const getAlertPayloadFactory = () =>
alertByNameSelector, createSelector(alertByNameSelector, (alert) => {
(alert) => {
return { ...alert?.payload }; return { ...alert?.payload };
}, });
);
const drawerByNameSelector = (state, props) =>
state.dashboard.drawers?.[props.name];
export const isDrawerOpenFactory = () =>
createSelector(drawerByNameSelector, (drawer) => {
return drawer && drawer.isOpen;
});
export const getDrawerPayloadFactory = () =>
createSelector(drawerByNameSelector, (drawer) => {
return { ...drawer?.payload };
});

5
client/src/store/dashboard/dashboard.types.js
View File

@@ -1,4 +1,3 @@
export default { export default {
OPEN_DIALOG: 'OPEN_DIALOG', OPEN_DIALOG: 'OPEN_DIALOG',
CLOSE_DIALOG: 'CLOSE_DIALOG', CLOSE_DIALOG: 'CLOSE_DIALOG',
@@ -6,6 +5,8 @@ export default {
CLOSE_ALERT: 'CLOSE_ALERT', CLOSE_ALERT: 'CLOSE_ALERT',
CLOSE_ALL_DIALOGS: 'CLOSE_ALL_DIALOGS', CLOSE_ALL_DIALOGS: 'CLOSE_ALL_DIALOGS',
CLOSE_ALL_ALERTS: 'CLOSE_ALL_ALERTS', CLOSE_ALL_ALERTS: 'CLOSE_ALL_ALERTS',
OPEN_DRAWER: 'OPEN_DRAWER',
CLOSE_DRAWER: 'CLOSE_DRAWER',
CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE', CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE',
CHANGE_DASHBOARD_PAGE_HINT: 'CHANGE_DASHBOARD_PAGE_HINT', CHANGE_DASHBOARD_PAGE_HINT: 'CHANGE_DASHBOARD_PAGE_HINT',
CHANGE_PREFERENCES_PAGE_TITLE: 'CHANGE_PREFERENCES_PAGE_TITLE', CHANGE_PREFERENCES_PAGE_TITLE: 'CHANGE_PREFERENCES_PAGE_TITLE',
@@ -18,5 +19,5 @@ export default {
SIDEBAR_SHRINK: 'SIDEBAR_SHRINK', SIDEBAR_SHRINK: 'SIDEBAR_SHRINK',
RESET_SIDEBAR_PREVIOUS_EXPAND: 'RESET_SIDEBAR_PREVIOUS_EXPAND', RESET_SIDEBAR_PREVIOUS_EXPAND: 'RESET_SIDEBAR_PREVIOUS_EXPAND',
RECORD_SIDEBAR_PREVIOUS_EXPAND: 'RECORD_SIDEBAR_PREVIOUS_EXPAND', RECORD_SIDEBAR_PREVIOUS_EXPAND: 'RECORD_SIDEBAR_PREVIOUS_EXPAND',
SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK' SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK',
}; };

181
client/src/style/components/Drawer/DrawerTemplate.scss Normal file
View File

@@ -0,0 +1,181 @@
#page-size {
margin: 0 auto;
// background-color: #ffffff;
background-color: transparent;
width: 21cm;
height: 29.7cm;
padding-bottom: 20px;
}
.template {
background-color: transparent;
// margin: 30px;
margin: 20px;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px 40px 16px 0px;
&--title h1 {
color: #1c4587;
margin: 0;
}
&--title p {
color: #666666;
}
}
&__content {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid #1155cc;
// padding-bottom: 40px;
padding-bottom: 35px;
&__info {
flex: 0 1 25%;
padding-left: 5px;
color: #999999;
font-size: 16px;
font-weight: 400;
line-height: 1.6rem;
margin-bottom: 10px;
.info-paragraph-amount {
margin-top: 8px;
color: #123163;
font-size: 26px;
font-weight: 500;
}
.info-paragraph {
font-size: 15px;
color: #000;
}
}
// &__content {
// display: flex;
// flex-wrap: wrap;
// border-bottom: 2px solid #1155cc;
// padding-bottom: 45px;
// &--info {
// flex: 0 1 25%;
// padding-left: 5px;
// margin-bottom: 10px;
// }
// &--info > span {
// color: #999999;
// font-size: 16px;
// }
// &--info > p:not(.-info--amount) {
// color: #000;
// font-size: 14px;
// }
// // span {
// // color: #999999;
// // font-size: 16px;
// // }
// // p {
// // color: #000;
// // }
// .info--amount {
// color: #123163;
// }
// p {
// // font-size: 16px;
// // font-weight: 500;
// // margin: 5px 0px;
// color: #000;
// }
// &--amount {
// color: #123163;
// color: red;
// // margin-top: 8px;
// // font-size: 25px;
// // font-weight: 700;
// }
}
&__table {
display: flex;
flex-direction: column;
padding: 0px 5px;
margin: 5px 0px 20px 0px;
font-size: 16px;
&__rows {
display: flex;
margin-bottom: 15px;
color: #1155cc;
&--cell {
flex: 0 20%;
}
&--cell:first-child {
flex: 1 0 20%;
padding-left: 5px;
}
}
&__rows:not(:first-child) {
color: #000;
border-bottom: 1px solid #cecbcb;
padding-bottom: 15px;
}
}
&__terms {
padding: 0px 5px;
&__title h4 {
font-size: 16px;
font-weight: 400;
color: #666666;
margin-bottom: 5px;
// font-size: 18px;
// font-weight: 500;
}
ul {
list-style: none;
}
ul li {
color: #000;
font-size: 14px;
}
ul li::before {
content: '•';
color: #b7b7b7;
display: inline-block;
width: 1em;
margin-left: 0.7em;
}
}
}
.bp3-drawer.bp3-position-right {
bottom: 0;
right: 0;
top: 0;
overflow: auto;
height: 100%;
.bp3-drawer-header .bp3-heading {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
flex: 1 1 auto;
line-height: inherit;
margin: 0;
font-size: 18px;
font-weight: 600;
color: #0d244a;
}
}