mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 05:10:31 +00:00
WIP Version 0.0.1
This commit is contained in:
Ahmed Bouhuolia
9
client/src/containers/Preferences/Accountant.js
Normal file
9
client/src/containers/Preferences/Accountant.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function AccountantPreferences() {
|
||||
return (
|
||||
<div class="preferences__inside-content--accountant">
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
client/src/containers/Preferences/Accounts.js
Normal file
32
client/src/containers/Preferences/Accounts.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import {Tabs, Tab} from '@blueprintjs/core';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
|
||||
|
||||
export default function AccountsPreferences() {
|
||||
const history = useHistory();
|
||||
const onChangeTabs = (currentTabId) => {
|
||||
switch(currentTabId) {
|
||||
default:
|
||||
history.push('/dashboard/preferences/accounts/general');
|
||||
break;
|
||||
case 'custom_fields':
|
||||
history.push('/dashboard/preferences/accounts/custom_fields');
|
||||
break;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div class="preferences__inside-content preferences__inside-content--accounts">
|
||||
<Tabs
|
||||
animate={true}
|
||||
large={true}
|
||||
onChange={onChangeTabs}>
|
||||
<Tab id="general" title="General" />
|
||||
<Tab id="custom_fields" title="Custom Fields" />
|
||||
</Tabs>
|
||||
|
||||
<PreferencesSubContent preferenceTab="accounts" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
81
client/src/containers/Preferences/AccountsCustomFields.js
Normal file
81
client/src/containers/Preferences/AccountsCustomFields.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
Popover,
|
||||
Button,
|
||||
Menu,
|
||||
MenuDivider,
|
||||
MenuItem,
|
||||
Position,
|
||||
Icon
|
||||
} from '@blueprintjs/core';
|
||||
import {
|
||||
GridComponent,
|
||||
ColumnsDirective,
|
||||
ColumnDirective,
|
||||
} from '@syncfusion/ej2-react-grids';
|
||||
import useAsync from 'hooks/async';
|
||||
import {connect} from 'react-redux';
|
||||
import {
|
||||
fetchResourceFields,
|
||||
} from 'store/customFields/customFields.actions';
|
||||
|
||||
function AccountsCustomFields({ fetchResourceFields, fields }) {
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
// fetchResourceFields('accounts'),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
useEffect(() => { fetchHook.execute(); }, []);
|
||||
|
||||
const actionMenuList = (column) => (
|
||||
<Menu>
|
||||
<MenuItem text="View Details" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Edit Account" />
|
||||
<MenuItem text="New Account" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Inactivate Account" />
|
||||
<MenuItem text="Delete Account" />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const statusRowTemplate = (column) => {
|
||||
return ('Active');
|
||||
};
|
||||
const actionsRowTemplate = (column) => (
|
||||
<Popover content={actionMenuList(column)} position={Position.RIGHT_BOTTOM}>
|
||||
<Button icon={<Icon icon="ellipsis-h" />} />
|
||||
</Popover>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{field: 'label_name', headerText: 'Field Label'},
|
||||
{field: 'data_type', headerText: 'Type'},
|
||||
{template: statusRowTemplate, headerText: 'Status'},
|
||||
{template: actionsRowTemplate, headerText: ''},
|
||||
];
|
||||
return (
|
||||
<div class="preferences__inside-content-tab preferences__inside-content-tab--custom-fields">
|
||||
<GridComponent dataSource={fields}>
|
||||
<ColumnsDirective>
|
||||
{columns.map((column) => {
|
||||
return (<ColumnDirective
|
||||
field={column.field}
|
||||
headerText={column.headerText}
|
||||
template={column.template} />);
|
||||
})}
|
||||
</ColumnsDirective>
|
||||
</GridComponent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
fields: state.fields.custom_fields['accounts'] || [],
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AccountsCustomFields);
|
||||
9
client/src/containers/Preferences/AccountsGeneral.js
Normal file
9
client/src/containers/Preferences/AccountsGeneral.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function AccountsGeneralPreferences() {
|
||||
return (
|
||||
<div class="preferences__inside-content preferences__inside-content--general">
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
client/src/containers/Preferences/Currencies.js
Normal file
20
client/src/containers/Preferences/Currencies.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import { compose } from 'utils';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
|
||||
function Currencies({ openDialog }) {
|
||||
const onClickNewCurrency = () => {
|
||||
openDialog('currency-form',{});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'preferences__inside-content'}>
|
||||
<div className={'preferences__tabs'}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(DialogConnect, CurrencyFromDialogConnect)(Currencies);
|
||||
31
client/src/containers/Preferences/CurrenciesActions.js
Normal file
31
client/src/containers/Preferences/CurrenciesActions.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import {compose} from 'utils';
|
||||
|
||||
function CurrenciesActions({
|
||||
openDialog,
|
||||
}) {
|
||||
const handleClickNewCurrency = useCallback(() => {
|
||||
openDialog('currency-form');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class="users-actions">
|
||||
<Button
|
||||
icon={<Icon icon='plus' iconSize={12} />}
|
||||
onClick={handleClickNewCurrency}
|
||||
intent={Intent.PRIMARY}>
|
||||
New Currency
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
)(CurrenciesActions);
|
||||
142
client/src/containers/Preferences/CurrenciesList.js
Normal file
142
client/src/containers/Preferences/CurrenciesList.js
Normal file
@@ -0,0 +1,142 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Classes,
|
||||
Tooltip,
|
||||
Alert,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import { snakeCase } from 'lodash';
|
||||
import { compose } from 'utils';
|
||||
import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import DataTable from 'components/DataTable';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
function CurrenciesList({
|
||||
currencies,
|
||||
openDialog,
|
||||
onFetchData,
|
||||
requestDeleteCurrency,
|
||||
}) {
|
||||
const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
|
||||
|
||||
const handleEditCurrency = (currency) => () => {
|
||||
openDialog('currency-form', {
|
||||
action: 'edit',
|
||||
currency_code: currency.currency_code,
|
||||
});
|
||||
};
|
||||
|
||||
const onDeleteCurrency = (currency) => {
|
||||
setDeleteCurrencyState(currency);
|
||||
};
|
||||
const handleCancelCurrencyDelete = () => {
|
||||
setDeleteCurrencyState(false);
|
||||
};
|
||||
|
||||
const handleConfirmCurrencyDelete = useCallback(() => {
|
||||
requestDeleteCurrency(deleteCurrencyState.currency_code).then(
|
||||
(response) => {
|
||||
setDeleteCurrencyState(false);
|
||||
AppToaster.show({
|
||||
message: 'the_Currency_has_been_deleted',
|
||||
});
|
||||
}
|
||||
);
|
||||
}, [deleteCurrencyState]);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(currency) => (
|
||||
<Menu>
|
||||
<MenuItem text='Edit Currency' onClick={handleEditCurrency(currency)} />
|
||||
|
||||
<MenuItem
|
||||
text='Delete Currency'
|
||||
onClick={() => onDeleteCurrency(currency)}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'currency_name',
|
||||
Header: 'Currency Name',
|
||||
accessor: 'currency_name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
id: 'currency_code',
|
||||
Header: 'Currency Code',
|
||||
accessor: 'currency_code',
|
||||
className: 'currency_code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
Header: 'Currency sign',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_TOP}
|
||||
>
|
||||
<Button icon={<Icon icon='ellipsis-h' />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
},
|
||||
],
|
||||
[actionMenuList]
|
||||
);
|
||||
const handleDatatableFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LoadingIndicator>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={Object.values(currencies)}
|
||||
onFetchData={handleDatatableFetchData()}
|
||||
selectionColumn={true}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteCurrencyState}
|
||||
onCancel={handleCancelCurrencyDelete}
|
||||
onConfirm={handleConfirmCurrencyDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
CurrencyFromDialogConnect,
|
||||
DialogConnect,
|
||||
DashboardConnect
|
||||
)(CurrenciesList);
|
||||
377
client/src/containers/Preferences/General.js
Normal file
377
client/src/containers/Preferences/General.js
Normal file
@@ -0,0 +1,377 @@
|
||||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
Button,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
MenuItem,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import { optionsMapToArray, momentFormatter, optionsArrayToMap } from 'utils';
|
||||
import { TimezonePicker } from '@blueprintjs/timezone';
|
||||
import { Select } from '@blueprintjs/select';
|
||||
import classNames from 'classnames';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import Icon from 'components/Icon';
|
||||
import { compose } from 'utils';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { useIntl } from 'react-intl';
|
||||
import useAsync from 'hooks/async';
|
||||
|
||||
function GeneralPreferences({
|
||||
organizationSettings,
|
||||
requestSubmitOptions,
|
||||
requestFetchOptions,
|
||||
}) {
|
||||
const [selectedItems, setSelectedItems] = useState({});
|
||||
const [timeZone, setTimeZone] = useState('');
|
||||
|
||||
const businessLocation = [
|
||||
{ id: 218, name: 'LIBYA', code: 'LY' },
|
||||
{ id: 380, name: 'UKRAINE', code: 'UA' },
|
||||
{ id: 212, name: 'Morocco', code: 'MA' },
|
||||
];
|
||||
const languagesDisplay = [
|
||||
{ id: 0, name: 'EN', label: 'English' },
|
||||
{ id: 1, name: 'Arb', label: 'Arabic' },
|
||||
];
|
||||
const currencies = [
|
||||
{ id: 0, name: 'US Dollar', code: 'USD' },
|
||||
{ id: 1, name: 'Euro', code: 'EUR' },
|
||||
{ id: 2, name: 'Libyan Dinar ', code: 'LYD' },
|
||||
];
|
||||
const fiscalYear = [
|
||||
{ id: 0, name: 'January-July', label: 'January-July' },
|
||||
{ id: 1, name: 'August-December', label: 'August-December' },
|
||||
];
|
||||
const dateFormat = [
|
||||
{ id: 1, name: '04/11/2020', format: 'MM-DD-YY' },
|
||||
{ id: 3, name: '2020/03/21', format: 'YY/MM/DD' },
|
||||
{ id: 4, name: 'Apr 11, 2020', format: 'MMMM yyyy' },
|
||||
{ id: 6, name: 'Saturday, Apr 11, 2020', format: 'EEEE, MMM d, yyyy' },
|
||||
];
|
||||
|
||||
const intl = useIntl();
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
industry: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
location: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
base_currency: Yup.string().required(
|
||||
intl.formatMessage({ id: 'required' })
|
||||
),
|
||||
fiscal_year: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
language: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
// time_zone: Yup.object().required(intl.formatMessage({ id: 'required' })),
|
||||
date_format: Yup.date().required(intl.formatMessage({ id: 'required' })),
|
||||
});
|
||||
console.log(organizationSettings.name);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...organizationSettings,
|
||||
},
|
||||
validationSchema: validationSchema,
|
||||
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
const options = optionsMapToArray(values).map((option) => {
|
||||
return { key: option.key, ...option, group: 'organization' };
|
||||
});
|
||||
|
||||
requestSubmitOptions({ options })
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'The_Options_has_been_Submit',
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { errors, values, touched } = useMemo(() => formik, [formik]);
|
||||
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([requestFetchOptions()]);
|
||||
});
|
||||
|
||||
const businessLocationItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
label={item.code}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const currencyItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
label={item.code}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
const fiscalYearItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const languageItem = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
label={item.label}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const date_format = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
className={'preferences-menu'}
|
||||
key={item.id}
|
||||
text={item.format}
|
||||
label={item.name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const onItemsSelect = (filedName) => {
|
||||
return (filed) => {
|
||||
setSelectedItems({
|
||||
...selectedItems,
|
||||
[filedName]: filed,
|
||||
});
|
||||
formik.setFieldValue(filedName, filed.name);
|
||||
};
|
||||
};
|
||||
|
||||
const getSelectedItemLabel = (filedName, defaultLabel) => {
|
||||
return typeof selectedItems[filedName] !== 'undefined'
|
||||
? selectedItems[filedName].name
|
||||
: defaultLabel;
|
||||
};
|
||||
|
||||
const handleTimezoneChange = (timezone) => setTimeZone(timezone);
|
||||
|
||||
return (
|
||||
<div className='preferences__inside-content--general'>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<FormGroup
|
||||
label={'Organization Name'}
|
||||
inline={true}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='name' {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
medium={'true'}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
{...formik.getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Organization Industry'}
|
||||
inline={true}
|
||||
intent={errors.industry && touched.industry && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='industry' {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
medium={'true'}
|
||||
intent={errors.industry && touched.industry && Intent.DANGER}
|
||||
{...formik.getFieldProps('industry')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Business Location'}
|
||||
className={classNames(
|
||||
'form-group--business-location',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name='location' {...formik} />}
|
||||
intent={errors.location && touched.location && Intent.DANGER}
|
||||
>
|
||||
<Select
|
||||
items={businessLocation}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={businessLocationItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('location')}
|
||||
>
|
||||
<Button
|
||||
fill={true}
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'location',
|
||||
organizationSettings.location
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Base Currency'}
|
||||
className={classNames(
|
||||
'form-group--base-currency',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name='base_currency' {...formik} />}
|
||||
intent={
|
||||
errors.base_currency && touched.base_currency && Intent.DANGER
|
||||
}
|
||||
>
|
||||
<Select
|
||||
items={currencies}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={currencyItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('base_currency')}
|
||||
>
|
||||
<Button
|
||||
fill={true}
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'base_currency',
|
||||
organizationSettings.base_currency
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Fiscal Year'}
|
||||
className={classNames(
|
||||
'form-group--fiscal-year',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name='fiscal_year' {...formik} />}
|
||||
intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
|
||||
>
|
||||
<Select
|
||||
items={fiscalYear}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={fiscalYearItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('fiscal_year')}
|
||||
>
|
||||
<Button
|
||||
fill={true}
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'fiscal_year',
|
||||
organizationSettings.fiscal_year
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Language'}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--language',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
intent={errors.language && touched.language && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='language' {...formik} />}
|
||||
>
|
||||
<Select
|
||||
items={languagesDisplay}
|
||||
noResults={<MenuItem disabled={true} text='No results.' />}
|
||||
itemRenderer={languageItem}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('language')}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'language',
|
||||
organizationSettings.language
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={'Time Zone'}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--time-zone',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
intent={errors.time_zone && touched.time_zone && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='time_zone' {...formik} />}
|
||||
>
|
||||
<TimezonePicker
|
||||
value={timeZone}
|
||||
onChange={handleTimezoneChange}
|
||||
showLocalTimezone={true}
|
||||
valueDisplayFormat='composite'
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={'Date Format'}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
'form-group--language',
|
||||
'form-group--select-list',
|
||||
Classes.FILL
|
||||
)}
|
||||
intent={errors.date_format && touched.date_format && Intent.DANGER}
|
||||
helperText={<ErrorMessage name='date_format' {...formik} />}
|
||||
>
|
||||
<Select
|
||||
items={dateFormat}
|
||||
noResults={<MenuItem disabled={true} text='No result.' />}
|
||||
itemRenderer={date_format}
|
||||
popoverProp={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('date_format')}
|
||||
>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={getSelectedItemLabel(
|
||||
'date_format',
|
||||
organizationSettings.date_format
|
||||
)}
|
||||
/>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
|
||||
<div className={'preferences__floating-footer '}>
|
||||
<Button
|
||||
className={'preferences-button'}
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
>
|
||||
{'Save'}
|
||||
</Button>
|
||||
<Button onClick={'handleClose'}>Close</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(SettingsConnect)(GeneralPreferences);
|
||||
0
client/src/containers/Preferences/RolesList.js
Normal file
0
client/src/containers/Preferences/RolesList.js
Normal file
22
client/src/containers/Preferences/Users.js
Normal file
22
client/src/containers/Preferences/Users.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
|
||||
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
|
||||
import connector from 'connectors/UsersPreferences.connector';
|
||||
|
||||
function UsersPreferences({ openDialog }) {
|
||||
const onChangeTabs = (currentTabId) => {};
|
||||
|
||||
return (
|
||||
<div class='preferences__inside-content preferences__inside-content--users-roles'>
|
||||
<div class='preferences__tabs'>
|
||||
<Tabs animate={true} onChange={onChangeTabs}>
|
||||
<Tab id='users' title='Users' />
|
||||
<Tab id='roles' title='Roles' />
|
||||
</Tabs>
|
||||
</div>
|
||||
<PreferencesSubContent preferenceTab='users' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(UsersPreferences);
|
||||
38
client/src/containers/Preferences/UsersActions.js
Normal file
38
client/src/containers/Preferences/UsersActions.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import {compose} from 'utils';
|
||||
|
||||
function UsersActions({
|
||||
openDialog,
|
||||
closeDialog,
|
||||
}) {
|
||||
const onClickNewUser = useCallback(() => {
|
||||
openDialog('user-form');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div claass="preferences-actions">
|
||||
<Button
|
||||
icon={<Icon icon='plus' iconSize={12} />}
|
||||
onClick={onClickNewUser}
|
||||
intent={Intent.PRIMARY}>
|
||||
Invite User
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={<Icon icon='plus' iconSize={12} />}
|
||||
onClick={onClickNewUser}>
|
||||
New Role
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
)(UsersActions);
|
||||
204
client/src/containers/Preferences/UsersList.js
Normal file
204
client/src/containers/Preferences/UsersList.js
Normal file
@@ -0,0 +1,204 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { useAsync } from 'react-use';
|
||||
import DataTable from 'components/DataTable';
|
||||
import {
|
||||
Alert,
|
||||
Popover,
|
||||
Button,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { snakeCase } from 'lodash';
|
||||
import UserListConnect from 'connectors/UsersList.connector';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose } from 'utils';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
|
||||
function UsersListPreferences({
|
||||
requestFetchUsers,
|
||||
usersList,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
requestDeleteUser,
|
||||
requestInactiveUser,
|
||||
onFetchData,
|
||||
}) {
|
||||
const [deleteUserState, setDeleteUserState] = useState(false);
|
||||
const [inactiveUserState, setInactiveUserState] = useState(false);
|
||||
|
||||
const asyncHook = useAsync(async () => {
|
||||
await Promise.all([requestFetchUsers()]);
|
||||
}, []);
|
||||
|
||||
const onInactiveUser = (user) => {
|
||||
setInactiveUserState(user);
|
||||
};
|
||||
|
||||
// Handle cancel inactive user alert
|
||||
const handleCancelInactiveUser = useCallback(() => {
|
||||
setInactiveUserState(false);
|
||||
}, []);
|
||||
|
||||
// handel confirm user activation
|
||||
const handleConfirmUserActive = useCallback(() => {
|
||||
requestInactiveUser(inactiveUserState.id).then(() => {
|
||||
setInactiveUserState(false);
|
||||
requestFetchUsers();
|
||||
AppToaster.show({ message: 'the_user_has_been_inactivated' });
|
||||
});
|
||||
}, [inactiveUserState, requestInactiveUser, requestFetchUsers]);
|
||||
|
||||
const onDeleteUser = (user) => {
|
||||
setDeleteUserState(user);
|
||||
};
|
||||
|
||||
const handleCancelUserDelete = () => {
|
||||
setDeleteUserState(false);
|
||||
};
|
||||
|
||||
const onEditInviteUser = (user) => () => {
|
||||
const form = Object.keys(user).reduce((obj, key) => {
|
||||
const camelKey = snakeCase(key);
|
||||
obj[camelKey] = user[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
openDialog('user-form', { action: 'edit', user: form });
|
||||
};
|
||||
|
||||
const onEditUser = (user) => () => {
|
||||
const form = Object.keys(user).reduce((obj, key) => {
|
||||
const camelKey = snakeCase(key);
|
||||
obj[camelKey] = user[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
openDialog('userList-form', { action: 'edit', user: form });
|
||||
};
|
||||
|
||||
const handleConfirmUserDelete = () => {
|
||||
if (!deleteUserState) { return; }
|
||||
requestDeleteUser(deleteUserState.id).then((response) => {
|
||||
setDeleteUserState(false);
|
||||
AppToaster.show({
|
||||
message: 'the_user_has_been_deleted',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(user) => (
|
||||
<Menu>
|
||||
<MenuItem text='Edit User' onClick={onEditUser(user)} />
|
||||
<MenuDivider />
|
||||
<MenuItem text='Edit Invite ' onClick={onEditInviteUser(user)} />
|
||||
<MenuItem text='Inactivate User' onClick={() => onInactiveUser(user)} />
|
||||
<MenuItem text='Delete User' onClick={() => onDeleteUser(user)} />
|
||||
</Menu>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'full_name',
|
||||
Header: 'Full Name',
|
||||
accessor: 'full_name',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
id: 'email',
|
||||
Header: 'Email',
|
||||
accessor: 'email',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'phone_number',
|
||||
Header: 'Phone Number',
|
||||
accessor: 'phone_number',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'active',
|
||||
Header: 'Status',
|
||||
accessor: (user) =>
|
||||
user.active ? <span>Active</span> : <span>Inactivate</span>,
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_TOP}
|
||||
>
|
||||
<Button icon={<Icon icon='ellipsis-h' />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
},
|
||||
],
|
||||
[actionMenuList]
|
||||
);
|
||||
|
||||
const handelDataTableFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LoadingIndicator>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={usersList}
|
||||
onFetchData={handelDataTableFetchData()}
|
||||
manualSortBy={true}
|
||||
expandable={false}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Move to Trash'
|
||||
icon='trash'
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteUserState}
|
||||
onCancel={handleCancelUserDelete}
|
||||
onConfirm={handleConfirmUserDelete}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText='Cancel'
|
||||
confirmButtonText='Inactivate'
|
||||
icon='trash'
|
||||
intent={Intent.WARNING}
|
||||
isOpen={inactiveUserState}
|
||||
onCancel={handleCancelInactiveUser}
|
||||
onConfirm={handleConfirmUserActive}
|
||||
>
|
||||
<p>
|
||||
Are you sure you want to move <b>filename</b> to Trash? You will be
|
||||
able to restore it later, but it will become private to you.
|
||||
</p>
|
||||
</Alert>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
UserListConnect,
|
||||
DialogConnect,
|
||||
DashboardConnect
|
||||
)(UsersListPreferences);
|
||||
9
client/src/containers/Preferences/withUsers.js
Normal file
9
client/src/containers/Preferences/withUsers.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
return {
|
||||
usersList: state.users.list.results,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps);
|
||||
18
client/src/containers/Preferences/withUsersActions.js
Normal file
18
client/src/containers/Preferences/withUsersActions.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
fetchUsers,
|
||||
fetchUser,
|
||||
deleteUser,
|
||||
inactiveUser,
|
||||
editUser,
|
||||
} from 'store/users/users.actions';
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
requestFetchUsers: () => dispatch(fetchUsers({})),
|
||||
requestFetchUser: (id) => dispatch(fetchUser({ id })),
|
||||
requestDeleteUser: (id) => dispatch(deleteUser({ id })),
|
||||
requestInactiveUser: (id) => dispatch(inactiveUser({ id })),
|
||||
requestEditUser: (id, form) => dispatch(editUser({ form, id })),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
Reference in New Issue
Block a user