mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
Merge remote-tracking branch 'origin/feature/exchange_rates'
This commit is contained in:
Ahmed Bouhuolia
@@ -1,6 +1,7 @@
|
||||
import React, {useState, useEffect, useCallback, useMemo} from 'react';
|
||||
import { useFormik } from "formik";
|
||||
import {useIntl} from 'react-intl';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import {
|
||||
InputGroup,
|
||||
@@ -13,19 +14,18 @@ import {
|
||||
Menu,
|
||||
H5,
|
||||
H6,
|
||||
} from "@blueprintjs/core";
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
} from '@blueprintjs/core';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import { ReactSortable } from 'react-sortablejs';
|
||||
import * as Yup from 'yup';
|
||||
import {pick, get} from 'lodash';
|
||||
import { pick, get } from 'lodash';
|
||||
import Icon from 'components/Icon';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { If } from 'components';
|
||||
import ViewFormContainer from 'containers/Views/ViewForm.container.js';
|
||||
|
||||
|
||||
function ViewForm({
|
||||
function ViewForm({
|
||||
requestSubmitView,
|
||||
requestEditView,
|
||||
onDelete,
|
||||
@@ -51,20 +51,30 @@ function ViewForm({
|
||||
}, []);
|
||||
|
||||
const [draggedColumns, setDraggedColumn] = useState([
|
||||
...(viewMeta && viewMeta.columns) ? viewMeta.columns : []
|
||||
...(viewMeta && viewMeta.columns ? viewMeta.columns : []),
|
||||
]);
|
||||
|
||||
const draggedColumnsIds = useMemo(() => draggedColumns.map((c) => c.id), [
|
||||
draggedColumns,
|
||||
]);
|
||||
|
||||
const draggedColumnsIds = useMemo(() => draggedColumns.map(c => c.id), [draggedColumns]);
|
||||
|
||||
const [availableColumns, setAvailableColumns] = useState([
|
||||
...(viewMeta && viewMeta.columns) ? resourceColumns.filter((column) =>
|
||||
draggedColumnsIds.indexOf(column.id) === -1
|
||||
) : resourceColumns,
|
||||
...(viewMeta && viewMeta.columns
|
||||
? resourceColumns.filter(
|
||||
(column) => draggedColumnsIds.indexOf(column.id) === -1
|
||||
)
|
||||
: resourceColumns),
|
||||
]);
|
||||
|
||||
const defaultViewRole = useMemo(() => ({
|
||||
field_key: '', comparator: '', value: '', index: 1,
|
||||
}), []);
|
||||
const defaultViewRole = useMemo(
|
||||
() => ({
|
||||
field_key: '',
|
||||
comparator: '',
|
||||
value: '',
|
||||
index: 1,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
resource_name: Yup.string().required(),
|
||||
@@ -82,27 +92,33 @@ function ViewForm({
|
||||
Yup.object().shape({
|
||||
key: Yup.string().required(),
|
||||
index: Yup.string().required(),
|
||||
}),
|
||||
})
|
||||
),
|
||||
});
|
||||
|
||||
const initialEmptyForm = useMemo(() => ({
|
||||
resource_name: resourceName || '',
|
||||
name: '',
|
||||
logic_expression: '',
|
||||
roles: [
|
||||
defaultViewRole,
|
||||
],
|
||||
columns: [],
|
||||
}), [defaultViewRole, resourceName]);
|
||||
const initialEmptyForm = useMemo(
|
||||
() => ({
|
||||
resource_name: resourceName || '',
|
||||
name: '',
|
||||
logic_expression: '',
|
||||
roles: [defaultViewRole],
|
||||
columns: [],
|
||||
}),
|
||||
[defaultViewRole, resourceName]
|
||||
);
|
||||
|
||||
const initialForm = useMemo(() => ({
|
||||
...initialEmptyForm,
|
||||
...viewMeta ? {
|
||||
...viewMeta,
|
||||
resource_name: viewMeta.resource?.name || resourceName,
|
||||
} : {},
|
||||
}), [initialEmptyForm, viewMeta, resourceName]);
|
||||
const initialForm = useMemo(
|
||||
() => ({
|
||||
...initialEmptyForm,
|
||||
...(viewMeta
|
||||
? {
|
||||
...viewMeta,
|
||||
resource_name: viewMeta.resource?.name || resourceName,
|
||||
}
|
||||
: {}),
|
||||
}),
|
||||
[initialEmptyForm, viewMeta, resourceName]
|
||||
);
|
||||
|
||||
const {
|
||||
values,
|
||||
@@ -135,7 +151,9 @@ function ViewForm({
|
||||
message: 'the_view_has_been_edited',
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
history.push(`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`);
|
||||
history.push(
|
||||
`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`
|
||||
);
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
@@ -144,7 +162,9 @@ function ViewForm({
|
||||
message: 'the_view_has_been_submit',
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
history.push(`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`);
|
||||
history.push(
|
||||
`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`
|
||||
);
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
@@ -152,39 +172,55 @@ function ViewForm({
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setFieldValue('columns',
|
||||
setFieldValue(
|
||||
'columns',
|
||||
draggedColumns.map((column, index) => ({
|
||||
index, key: column.key,
|
||||
})));
|
||||
index,
|
||||
key: column.key,
|
||||
}))
|
||||
);
|
||||
}, [setFieldValue, draggedColumns]);
|
||||
|
||||
const conditionalsItems = useMemo(() => ([
|
||||
{ value: 'and', label: 'AND' },
|
||||
{ value: 'or', label: 'OR' },
|
||||
]), []);
|
||||
const conditionalsItems = useMemo(
|
||||
() => [
|
||||
{ value: 'and', label: 'AND' },
|
||||
{ value: 'or', label: 'OR' },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const whenConditionalsItems = useMemo(() => ([
|
||||
{ value: '', label: 'When' },
|
||||
]), []);
|
||||
const whenConditionalsItems = useMemo(
|
||||
() => [{ value: '', label: 'When' }],
|
||||
[]
|
||||
);
|
||||
|
||||
// Compatotors items.
|
||||
const compatatorsItems = useMemo(() => ([
|
||||
{value: '', label: 'Compatator'},
|
||||
{value: 'equals', label: 'Equals'},
|
||||
{value: 'not_equal', label: 'Not Equal'},
|
||||
{value: 'contain', label: 'Contain'},
|
||||
{value: 'not_contain', label: 'Not Contain'},
|
||||
]), []);
|
||||
const compatatorsItems = useMemo(
|
||||
() => [
|
||||
{ value: '', label: 'Compatator' },
|
||||
{ value: 'equals', label: 'Equals' },
|
||||
{ value: 'not_equal', label: 'Not Equal' },
|
||||
{ value: 'contain', label: 'Contain' },
|
||||
{ value: 'not_contain', label: 'Not Contain' },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
// Resource fields.
|
||||
const resourceFieldsOptions = useMemo(() => ([
|
||||
{value: '', label: 'Select a field'},
|
||||
...resourceFields.map((field) => ({ value: field.key, label: field.label_name, })),
|
||||
]), [resourceFields]);
|
||||
const resourceFieldsOptions = useMemo(
|
||||
() => [
|
||||
{ value: '', label: 'Select a field' },
|
||||
...resourceFields.map((field) => ({
|
||||
value: field.key,
|
||||
label: field.label_name,
|
||||
})),
|
||||
],
|
||||
[resourceFields]
|
||||
);
|
||||
|
||||
// Account item of select accounts field.
|
||||
const selectItem = (item, { handleClick, modifiers, query }) => {
|
||||
return (<MenuItem text={item.label} key={item.key} onClick={handleClick} />)
|
||||
return <MenuItem text={item.label} key={item.key} onClick={handleClick} />;
|
||||
};
|
||||
// Handle click new condition button.
|
||||
const onClickNewRole = useCallback(() => {
|
||||
@@ -193,219 +229,273 @@ function ViewForm({
|
||||
{
|
||||
...defaultViewRole,
|
||||
index: values.roles.length + 1,
|
||||
}
|
||||
},
|
||||
]);
|
||||
}, [defaultViewRole, setFieldValue, values]);
|
||||
|
||||
// Handle click remove view role button.
|
||||
const onClickRemoveRole = useCallback((viewRole, index) => {
|
||||
let viewRoles = [...values.roles];
|
||||
const onClickRemoveRole = useCallback(
|
||||
(viewRole, index) => {
|
||||
let viewRoles = [...values.roles];
|
||||
|
||||
// Can't continue if view roles equals or less than 1.
|
||||
if (viewRoles.length > 1) {
|
||||
viewRoles.splice(index, 1);
|
||||
// Can't continue if view roles equals or less than 1.
|
||||
if (viewRoles.length > 1) {
|
||||
viewRoles.splice(index, 1);
|
||||
|
||||
setFieldValue(
|
||||
'roles',
|
||||
viewRoles.map((role) => {
|
||||
return role;
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
[values, setFieldValue]
|
||||
);
|
||||
|
||||
setFieldValue('roles', viewRoles.map((role) => {
|
||||
return role;
|
||||
}));
|
||||
}
|
||||
}, [values, setFieldValue]);
|
||||
|
||||
const onClickDeleteView = useCallback(() => {
|
||||
onDelete && onDelete(viewMeta);
|
||||
}, [onDelete, viewMeta]);
|
||||
|
||||
const hasError = (path) => get(errors, path) && get(touched, path);
|
||||
const hasError = (path) => get(errors, path) && get(touched, path);
|
||||
|
||||
const handleClickCancelBtn = () => {
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="view-form">
|
||||
<div class='view-form'>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div class="view-form--name-section">
|
||||
<div class='view-form--name-section'>
|
||||
<Row>
|
||||
<Col sm={8}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'View Name'})}
|
||||
label={<T id={'view_name'} />}
|
||||
className={'form-group--name'}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage {...{errors, touched}} name={'name'} />}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name={'name'} />
|
||||
}
|
||||
inline={true}
|
||||
fill={true}>
|
||||
|
||||
fill={true}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
fill={true}
|
||||
{...getFieldProps('name')} />
|
||||
{...getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<H5 className="mb2">Define the conditionals</H5>
|
||||
|
||||
<H5 className='mb2'>Define the conditionals</H5>
|
||||
|
||||
{values.roles.map((role, index) => (
|
||||
<Row class="view-form__role-conditional">
|
||||
<Col sm={2} class="flex">
|
||||
<div class="mr2 pt1 condition-number">{ index + 1 }</div>
|
||||
{(index === 0) ? (
|
||||
<HTMLSelect options={whenConditionalsItems} className={Classes.FILL} />
|
||||
<Row class='view-form__role-conditional'>
|
||||
<Col sm={2} class='flex'>
|
||||
<div class='mr2 pt1 condition-number'>{index + 1}</div>
|
||||
{index === 0 ? (
|
||||
<HTMLSelect
|
||||
options={whenConditionalsItems}
|
||||
className={Classes.FILL}
|
||||
/>
|
||||
) : (
|
||||
<HTMLSelect options={conditionalsItems} className={Classes.FILL} />
|
||||
<HTMLSelect
|
||||
options={conditionalsItems}
|
||||
className={Classes.FILL}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
|
||||
<Col sm={2}>
|
||||
<FormGroup
|
||||
intent={hasError(`roles[${index}].field_key`) && Intent.DANGER}>
|
||||
intent={hasError(`roles[${index}].field_key`) && Intent.DANGER}
|
||||
>
|
||||
<HTMLSelect
|
||||
options={resourceFieldsOptions}
|
||||
value={role.field_key}
|
||||
className={Classes.FILL}
|
||||
{...getFieldProps(`roles[${index}].field_key`)} />
|
||||
{...getFieldProps(`roles[${index}].field_key`)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={2}>
|
||||
<FormGroup
|
||||
intent={hasError(`roles[${index}].comparator`) && Intent.DANGER}>
|
||||
intent={hasError(`roles[${index}].comparator`) && Intent.DANGER}
|
||||
>
|
||||
<HTMLSelect
|
||||
options={compatatorsItems}
|
||||
value={role.comparator}
|
||||
className={Classes.FILL}
|
||||
{...getFieldProps(`roles[${index}].comparator`)} />
|
||||
{...getFieldProps(`roles[${index}].comparator`)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={5} class="flex">
|
||||
<Col sm={5} class='flex'>
|
||||
<FormGroup
|
||||
intent={hasError(`roles[${index}].value`) && Intent.DANGER}>
|
||||
intent={hasError(`roles[${index}].value`) && Intent.DANGER}
|
||||
>
|
||||
<InputGroup
|
||||
placeholder={intl.formatMessage({'id': 'value'})}
|
||||
{...getFieldProps(`roles[${index}].value`)} />
|
||||
placeholder={intl.formatMessage({ id: 'value' })}
|
||||
{...getFieldProps(`roles[${index}].value`)}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<Button
|
||||
icon={<Icon icon="times-circle" iconSize={14} />}
|
||||
|
||||
<Button
|
||||
icon={<Icon icon='times-circle' iconSize={14} />}
|
||||
iconSize={14}
|
||||
className="ml2"
|
||||
minimal={true}
|
||||
className='ml2'
|
||||
minimal={true}
|
||||
intent={Intent.DANGER}
|
||||
onClick={() => onClickRemoveRole(role, index)} />
|
||||
onClick={() => onClickRemoveRole(role, index)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
|
||||
<div className={'view-form__role-conditions-actions'}>
|
||||
<Button
|
||||
minimal={true}
|
||||
intent={Intent.PRIMARY}
|
||||
onClick={onClickNewRole}>
|
||||
New Conditional
|
||||
</Button>
|
||||
</div>
|
||||
<div className={'view-form__role-conditions-actions'}>
|
||||
<Button
|
||||
minimal={true}
|
||||
intent={Intent.PRIMARY}
|
||||
onClick={onClickNewRole}
|
||||
>
|
||||
<T id={'new_conditional'} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="view-form--logic-expression-section">
|
||||
<Row>
|
||||
<Col sm={8}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'Logic Expression'})}
|
||||
className={'form-group--logic-expression'}
|
||||
intent={(errors.logic_expression && touched.logic_expression) && Intent.DANGER}
|
||||
helperText={<ErrorMessage {...{errors, touched}} name='logic_expression' />}
|
||||
inline={true}
|
||||
fill={true}>
|
||||
<div class='view-form--logic-expression-section'>
|
||||
<Row>
|
||||
<Col sm={8}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({ id: 'Logic Expression' })}
|
||||
className={'form-group--logic-expression'}
|
||||
intent={
|
||||
errors.logic_expression &&
|
||||
touched.logic_expression &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage
|
||||
{...{ errors, touched }}
|
||||
name='logic_expression'
|
||||
/>
|
||||
}
|
||||
inline={true}
|
||||
fill={true}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.logic_expression &&
|
||||
touched.logic_expression &&
|
||||
Intent.DANGER
|
||||
}
|
||||
fill={true}
|
||||
{...getFieldProps('logic_expression')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<H5 className={'mb2'}>Columns Preferences</H5>
|
||||
|
||||
<div class='dragable-columns'>
|
||||
<Row gutterWidth={14}>
|
||||
<Col sm={4} className='dragable-columns__column'>
|
||||
<H6 className='dragable-columns__title'>Available Columns</H6>
|
||||
|
||||
<InputGroup
|
||||
intent={(errors.logic_expression && touched.logic_expression) && Intent.DANGER}
|
||||
fill={true}
|
||||
{...getFieldProps('logic_expression')} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
placeholder={intl.formatMessage({ id: 'search' })}
|
||||
leftIcon='search'
|
||||
/>
|
||||
|
||||
<H5 className={'mb2'}>Columns Preferences</H5>
|
||||
|
||||
<div class="dragable-columns">
|
||||
<Row gutterWidth={14}>
|
||||
<Col sm={4} className="dragable-columns__column">
|
||||
<H6 className="dragable-columns__title">Available Columns</H6>
|
||||
<div class='dragable-columns__items'>
|
||||
<Menu>
|
||||
<ReactSortable
|
||||
list={availableColumns}
|
||||
setList={setAvailableColumns}
|
||||
group='shared-group-name'
|
||||
>
|
||||
{availableColumns.map((field) => (
|
||||
<MenuItem key={field.id} text={field.label} />
|
||||
))}
|
||||
</ReactSortable>
|
||||
</Menu>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<InputGroup
|
||||
placeholder={intl.formatMessage({id: 'search'})}
|
||||
leftIcon="search" />
|
||||
<Col sm={1}>
|
||||
<div class='dragable-columns__arrows'>
|
||||
<div>
|
||||
<Icon
|
||||
icon='arrow-circle-left'
|
||||
iconSize={30}
|
||||
color='#cecece'
|
||||
/>
|
||||
</div>
|
||||
<div class='mt2'>
|
||||
<Icon
|
||||
icon='arrow-circle-right'
|
||||
iconSize={30}
|
||||
color='#cecece'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<div class="dragable-columns__items">
|
||||
<Menu>
|
||||
<ReactSortable
|
||||
list={availableColumns}
|
||||
setList={setAvailableColumns}
|
||||
group="shared-group-name">
|
||||
{availableColumns.map((field) => (
|
||||
<MenuItem key={field.id} text={field.label} />
|
||||
))}
|
||||
</ReactSortable>
|
||||
</Menu>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={4} className='dragable-columns__column'>
|
||||
<H6 className='dragable-columns__title'>Selected Columns</H6>
|
||||
<InputGroup
|
||||
placeholder={intl.formatMessage({ id: 'search' })}
|
||||
leftIcon='search'
|
||||
/>
|
||||
|
||||
<Col sm={1}>
|
||||
<div class="dragable-columns__arrows">
|
||||
<div><Icon icon="arrow-circle-left" iconSize={30} color="#cecece" /></div>
|
||||
<div class="mt2"><Icon icon="arrow-circle-right" iconSize={30} color="#cecece" /></div>
|
||||
</div>
|
||||
</Col>
|
||||
<div class='dragable-columns__items'>
|
||||
<Menu>
|
||||
<ReactSortable
|
||||
list={draggedColumns}
|
||||
setList={setDraggedColumn}
|
||||
group='shared-group-name'
|
||||
>
|
||||
{draggedColumns.map((field) => (
|
||||
<MenuItem key={field.id} text={field.label} />
|
||||
))}
|
||||
</ReactSortable>
|
||||
</Menu>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Col sm={4} className="dragable-columns__column">
|
||||
<H6 className="dragable-columns__title">Selected Columns</H6>
|
||||
<InputGroup placeholder={intl.formatMessage({id: 'search'})} leftIcon="search" />
|
||||
|
||||
<div class="dragable-columns__items">
|
||||
<Menu>
|
||||
<ReactSortable
|
||||
list={draggedColumns}
|
||||
setList={setDraggedColumn}
|
||||
group="shared-group-name">
|
||||
{draggedColumns.map((field) => (
|
||||
<MenuItem key={field.id} text={field.label} />
|
||||
))}
|
||||
</ReactSortable>
|
||||
</Menu>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div class="form__floating-footer">
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
intent={Intent.NONE}
|
||||
className="ml1"
|
||||
onClick={handleClickCancelBtn}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<If condition={viewMeta && viewMeta.id}>
|
||||
<Button
|
||||
intent={Intent.DANGER}
|
||||
onClick={onClickDeleteView}
|
||||
className={"right mr2"}>
|
||||
Delete
|
||||
<div class='form__floating-footer'>
|
||||
<Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
|
||||
<T id={'submit'} />
|
||||
</Button>
|
||||
</If>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
intent={Intent.NONE}
|
||||
className='ml1'
|
||||
onClick={handleClickCancelBtn}
|
||||
>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
|
||||
<If condition={viewMeta && viewMeta.id}>
|
||||
<Button
|
||||
intent={Intent.DANGER}
|
||||
onClick={onClickDeleteView}
|
||||
className={'right mr2'}
|
||||
>
|
||||
<T id={'delete'} />
|
||||
</Button>
|
||||
</If>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewFormContainer(ViewForm);
|
||||
export default ViewFormContainer(ViewForm);
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, {useEffect, useState, useMemo, useCallback} from 'react';
|
||||
import { useAsync } from 'react-use';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import { FormattedHTMLMessage, useIntl } from 'react-intl';
|
||||
import { FormattedMessage as T, FormattedHTMLMessage, useIntl } from 'react-intl';
|
||||
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
@@ -50,23 +50,27 @@ function ViewFormPage({
|
||||
|
||||
useEffect(() => {
|
||||
if (viewId) {
|
||||
changePageTitle('Edit Custom View');
|
||||
changePageTitle(formatMessage({id:'edit_custom_view'}));
|
||||
} else {
|
||||
changePageTitle('New Custom View');
|
||||
changePageTitle(formatMessage({id:'new_custom_view'}));
|
||||
}
|
||||
return () => {
|
||||
changePageTitle('');
|
||||
};
|
||||
}, [viewId, changePageTitle]);
|
||||
|
||||
|
||||
// Handle delete view button click.
|
||||
const handleDeleteView = useCallback((view) => {
|
||||
setStateDeleteView(view);
|
||||
}, []);
|
||||
|
||||
// Handle cancel delete button click.
|
||||
const handleCancelDeleteView = useCallback(() => {
|
||||
setStateDeleteView(null);
|
||||
}, []);
|
||||
|
||||
// Handle confirm delete custom view.
|
||||
const handleConfirmDeleteView = useCallback(() => {
|
||||
requestDeleteView(stateDeleteView.id).then((response) => {
|
||||
setStateDeleteView(null);
|
||||
@@ -92,8 +96,8 @@ function ViewFormPage({
|
||||
onDelete={handleDeleteView} />
|
||||
|
||||
<Alert
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Delete"
|
||||
cancelButtonText={<T id={'cancel'}/>}
|
||||
confirmButtonText={<T id={'delete'}/>}
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={stateDeleteView}
|
||||
@@ -107,7 +111,7 @@ function ViewFormPage({
|
||||
</If>
|
||||
|
||||
<If condition={fetchHook.error}>
|
||||
<h4>Something wrong</h4>
|
||||
<h4><T id={'something_wrong'}/></h4>
|
||||
</If>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
|
||||
Reference in New Issue
Block a user