feat: application preferences.

This commit is contained in:
Ahmed Bouhuolia
2020-12-02 17:21:54 +02:00
parent 1da83ccaf3
commit 2feb4c2e88
45 changed files with 1321 additions and 1293 deletions

View File

@@ -7,8 +7,7 @@ import DashboardLoadingIndicator from './DashboardLoadingIndicator';
import Sidebar from 'components/Sidebar/Sidebar';
import DashboardContent from 'components/Dashboard/DashboardContent';
import DialogsContainer from 'components/DialogsContainer';
import PreferencesContent from 'components/Preferences/PreferencesContent';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
import PreferencesPage from 'components/Preferences/PreferencesPage';
import Search from 'containers/GeneralSearch/Search';
import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
@@ -28,9 +27,8 @@ function Dashboard({
<Route path="/preferences">
<DashboardSplitPane>
<Sidebar />
<PreferencesSidebar />
<PreferencesPage />
</DashboardSplitPane>
<PreferencesContent />
</Route>
<Route path="/">

View File

@@ -2,10 +2,9 @@ import React, { lazy } from 'react';
import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
import UserFormDialog from 'containers/Dialogs/UserFormDialog';
import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
// import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
// import BillNumberDialog from 'containers/Dialogs/BillNumberDialog';
@@ -13,6 +12,7 @@ import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberD
import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog';
export default function DialogsContainer() {
return (
<div>
@@ -24,9 +24,9 @@ export default function DialogsContainer() {
<ReceiptNumberDialog dialogName={'receipt-number-form'} />
<InvoiceNumberDialog dialogName={'invoice-number-form'} />
<CurrencyFormDialog dialogName={'currency-form'} />
<UserFormDialog dialogName={'user-form'} />
<InviteUserDialog dialogName={'invite-user'} />
<ExchangeRateFormDialog dialogName={'exchangeRate-form'} />
<ItemCategoryDialog dialogName={'item-category-form'} />
</div>
);
}
}

View File

@@ -2,6 +2,8 @@ import React, { useState, useMemo, useEffect } from 'react';
import { Button, MenuItem } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
export default function ListSelect({
buttonProps,
@@ -69,6 +71,10 @@ export default function ListSelect({
{...selectProps}
noResults={noResults}
disabled={disabled}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
selectProps.className,
)}
>
<Button
text={currentItem ? currentItem[labelProp] : defaultText}

View File

@@ -1,17 +0,0 @@
import React from 'react';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
export default function PreferencesContent() {
return (
<div className='dashboard-content dashboard-content--preferences'>
<PreferencesTopbar pageTitle={'asdad'} />
<div className='dashboard__preferences-content'>
<PreferencesContentRoute />
</div>
</div>
);
}

View File

@@ -1,11 +1,29 @@
import React from 'react';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
import { ErrorBoundary } from 'react-error-boundary';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
export default function PreferencesPage() {
return (
<div class="preferences-page">
<PreferencesSidebar />
</div>
<ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
<div className={classNames(
CLASSES.DASHBOARD_CONTENT,
CLASSES.DASHBOARD_CONTENT_PREFERENCES,
)}>
<div className={classNames(CLASSES.PREFERENCES_PAGE)}>
<PreferencesSidebar />
<div className={CLASSES.PREFERENCES_PAGE_CONTENT}>
<PreferencesTopbar pageTitle={'asdad'} />
<PreferencesContentRoute />
</div>
</div>
</div>
</ErrorBoundary>
);
}
}

View File

@@ -1,35 +1,36 @@
import React from 'react';
import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
import { useHistory, useLocation } from 'react-router-dom';
import preferencesMenu from 'config/preferencesMenu';
import PreferencesSidebarContainer from './PreferencesSidebarContainer';
export default function PreferencesSidebar() {
const history = useHistory();
const location = useLocation();
const items = preferencesMenu.map((item) => (
(item.divider) ?
<MenuDivider
title={item.title} /> :
const items = preferencesMenu.map((item) =>
item.divider ? (
<MenuDivider title={item.title} />
) : (
<MenuItem
active={(item.href && item.href === location.pathname)}
active={item.href && item.href === location.pathname}
text={item.text}
label={item.label}
disabled={item.disabled}
onClick={() => { history.push(item.href); }} />
));
onClick={() => {
history.push(item.href);
}}
/>
),
);
return (
<div class="preferences__sidebar">
<div class="preferences__sidebar-wrapper">
<div class="preferences__sidebar-head">
<h2>Preferences</h2>
</div>
<Menu className="preferences__sidebar-menu">
{ items }
</Menu>
<PreferencesSidebarContainer>
<div class="preferences-sidebar__head">
<h2>Preferences</h2>
</div>
</div>
<Menu className="preferences-sidebar__menu">{items}</Menu>
</PreferencesSidebarContainer>
);
}
}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import classNames from 'classnames';
import { Scrollbar } from 'react-scrollbars-custom';
import { CLASSES } from 'common/classes';
export default function PreferencesSidebarContainer({ children }) {
return (
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_SIDEBAR,
CLASSES.PREFERENCES_SIDEBAR,
)}
>
<div class="preferences-sidebar__wrapper">
<Scrollbar noDefaultStyles={true}>
<div class="preferences-sidebar__inner">{children}</div>
</Scrollbar>
</div>
</div>
);
}

View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import UsersActions from 'containers/Preferences/Users/UsersActions';
@@ -11,15 +12,19 @@ import { compose } from 'utils';
function PreferencesTopbar({ preferencesPageTitle }) {
return (
<div class="dashboard__preferences-topbar">
<div class="dashboard__title">
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_TOPBAR,
CLASSES.PREFERENCES_TOPBAR,
)}
>
<div class="preferences-topbar__title">
<h2>{preferencesPageTitle}</h2>
</div>
<div class="preferences__topbar-actions">
<div class="preferences-topbar__actions">
<Route pathname="/preferences">
<Switch>
<Route exact path={'/preferences/users'} component={UsersActions} />
<Route
exact
path={'/preferences/currencies'}
@@ -29,7 +34,7 @@ function PreferencesTopbar({ preferencesPageTitle }) {
</Route>
</div>
<div class="dashboard__topbar-user">
<div class="preferences-topbar__user">
<DashboardTopbarUser />
</div>
</div>