mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
WIP Version 0.0.1
This commit is contained in:
Ahmed Bouhuolia
412
client/src/containers/Views/ViewForm.js
Normal file
412
client/src/containers/Views/ViewForm.js
Normal file
@@ -0,0 +1,412 @@
|
||||
import React, {useState, useEffect, useCallback, useMemo} from 'react';
|
||||
import { useFormik } from "formik";
|
||||
import {useIntl} from 'react-intl';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import {
|
||||
InputGroup,
|
||||
FormGroup,
|
||||
Intent,
|
||||
Button,
|
||||
MenuItem,
|
||||
Classes,
|
||||
HTMLSelect,
|
||||
Menu,
|
||||
H5,
|
||||
H6,
|
||||
} 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 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({
|
||||
requestSubmitView,
|
||||
requestEditView,
|
||||
onDelete,
|
||||
|
||||
viewId,
|
||||
viewMeta,
|
||||
viewItem,
|
||||
|
||||
resourceName,
|
||||
resourceColumns,
|
||||
resourceFields,
|
||||
resourceMetadata,
|
||||
|
||||
changePageSubtitle,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
changePageSubtitle(resourceMetadata.label);
|
||||
return () => {
|
||||
changePageSubtitle('');
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [draggedColumns, setDraggedColumn] = useState([
|
||||
...(viewMeta && viewMeta.columns) ? viewMeta.columns : []
|
||||
]);
|
||||
|
||||
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,
|
||||
]);
|
||||
|
||||
const defaultViewRole = useMemo(() => ({
|
||||
field_key: '', comparator: '', value: '', index: 1,
|
||||
}), []);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
resource_name: Yup.string().required(),
|
||||
name: Yup.string().required(),
|
||||
logic_expression: Yup.string().required(),
|
||||
roles: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
comparator: Yup.string().required(),
|
||||
value: Yup.string().required(),
|
||||
field_key: Yup.string().required(),
|
||||
index: Yup.number().required(),
|
||||
})
|
||||
),
|
||||
columns: Yup.array().of(
|
||||
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 initialForm = useMemo(() => ({
|
||||
...initialEmptyForm,
|
||||
...viewMeta ? {
|
||||
...viewMeta,
|
||||
resource_name: viewMeta.resource?.name || resourceName,
|
||||
} : {},
|
||||
}), [initialEmptyForm, viewMeta, resourceName]);
|
||||
|
||||
const {
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: validationSchema,
|
||||
initialValues: {
|
||||
roles: [],
|
||||
...pick(initialForm, Object.keys(initialEmptyForm)),
|
||||
logic_expression: initialForm.roles_logic_expression || '',
|
||||
roles: [
|
||||
...initialForm.roles.map((role) => {
|
||||
return {
|
||||
...pick(role, Object.keys(defaultViewRole)),
|
||||
field_key: role.field ? role.field.key : '',
|
||||
};
|
||||
}),
|
||||
],
|
||||
},
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
if (viewMeta && viewMeta.id) {
|
||||
requestEditView(viewMeta.id, values).then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'the_view_has_been_edited',
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
history.push(`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`);
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitView(values).then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'the_view_has_been_submit',
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
history.push(`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`);
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setFieldValue('columns',
|
||||
draggedColumns.map((column, index) => ({
|
||||
index, key: column.key,
|
||||
})));
|
||||
}, [setFieldValue, draggedColumns]);
|
||||
|
||||
const conditionalsItems = useMemo(() => ([
|
||||
{ value: 'and', label: 'AND' },
|
||||
{ value: 'or', label: 'OR' },
|
||||
]), []);
|
||||
|
||||
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'},
|
||||
]), []);
|
||||
|
||||
// Resource fields.
|
||||
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} />)
|
||||
};
|
||||
// Handle click new condition button.
|
||||
const onClickNewRole = useCallback(() => {
|
||||
setFieldValue('roles', [
|
||||
...values.roles,
|
||||
{
|
||||
...defaultViewRole,
|
||||
index: values.roles.length + 1,
|
||||
}
|
||||
]);
|
||||
}, [defaultViewRole, setFieldValue, values]);
|
||||
|
||||
// Handle click remove view role button.
|
||||
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);
|
||||
|
||||
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 handleClickCancelBtn = () => {
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="view-form">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div class="view-form--name-section">
|
||||
<Row>
|
||||
<Col sm={8}>
|
||||
<FormGroup
|
||||
label={intl.formatMessage({'id': 'View Name'})}
|
||||
className={'form-group--name'}
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage {...{errors, touched}} name={'name'} />}
|
||||
inline={true}
|
||||
fill={true}>
|
||||
|
||||
<InputGroup
|
||||
intent={(errors.name && touched.name) && Intent.DANGER}
|
||||
fill={true}
|
||||
{...getFieldProps('name')} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<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} />
|
||||
) : (
|
||||
<HTMLSelect options={conditionalsItems} className={Classes.FILL} />
|
||||
)}
|
||||
</Col>
|
||||
|
||||
<Col sm={2}>
|
||||
<FormGroup
|
||||
intent={hasError(`roles[${index}].field_key`) && Intent.DANGER}>
|
||||
<HTMLSelect
|
||||
options={resourceFieldsOptions}
|
||||
value={role.field_key}
|
||||
className={Classes.FILL}
|
||||
{...getFieldProps(`roles[${index}].field_key`)} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={2}>
|
||||
<FormGroup
|
||||
intent={hasError(`roles[${index}].comparator`) && Intent.DANGER}>
|
||||
<HTMLSelect
|
||||
options={compatatorsItems}
|
||||
value={role.comparator}
|
||||
className={Classes.FILL}
|
||||
{...getFieldProps(`roles[${index}].comparator`)} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col sm={5} class="flex">
|
||||
<FormGroup
|
||||
intent={hasError(`roles[${index}].value`) && Intent.DANGER}>
|
||||
<InputGroup
|
||||
placeholder={intl.formatMessage({'id': 'value'})}
|
||||
{...getFieldProps(`roles[${index}].value`)} />
|
||||
</FormGroup>
|
||||
|
||||
<Button
|
||||
icon={<Icon icon="times-circle" iconSize={14} />}
|
||||
iconSize={14}
|
||||
className="ml2"
|
||||
minimal={true}
|
||||
intent={Intent.DANGER}
|
||||
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 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
|
||||
placeholder={intl.formatMessage({id: 'search'})}
|
||||
leftIcon="search" />
|
||||
|
||||
<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={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>
|
||||
|
||||
<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
|
||||
</Button>
|
||||
</If>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewFormContainer(ViewForm);
|
||||
Reference in New Issue
Block a user