mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: application preferences.
This commit is contained in:
@@ -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="/">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user