WIP / Fix_ExchangeRate / localize

2026-02-16 04:40:32 +00:00 · 2020-05-11 04:12:23 +02:00
parent cceb4786c2
commit 98edc66dd2
20 changed files with 636 additions and 413 deletions
--- a/client/src/containers/Views/ViewForm.js
+++ b/client/src/containers/Views/ViewForm.js
@@ -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,26 +14,24 @@ 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,

  viewId,
  viewMeta,
-  viewItem,

  resourceName,
  resourceColumns,
@@ -52,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(),
@@ -83,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,
@@ -136,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 {
@@ -145,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);
        });
      }
@@ -153,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(() => {
@@ -194,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);
--- a/client/src/containers/Views/ViewFormPage.js
+++ b/client/src/containers/Views/ViewFormPage.js
@@ -5,14 +5,17 @@ import { Intent, Alert } from '@blueprintjs/core';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import ViewForm from 'containers/Views/ViewForm';
-import withResourcesActions from 'containers/Resources/withResourcesActions';
-import withViewsActions from 'containers/Views/withViewsActions';
-import withDashboard from 'containers/Dashboard/withDashboard';
+
 import AppToaster from 'components/AppToaster';
 import {compose} from 'utils';
 import { If } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';

+import withResourcesActions from 'containers/Resources/withResourcesActions';
+import withViewsActions from 'containers/Views/withViewsActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
+
 // @flow
 function ViewFormPage({
  changePageTitle,
@@ -27,6 +30,7 @@ function ViewFormPage({
 }) {
  const { resource_slug: resourceSlug, view_id: viewId } = useParams();
  const [stateDeleteView, setStateDeleteView] = useState(null);
+  const {formatMessage} =useIntl()

  const fetchHook = useAsync(async () => {
    return Promise.all([
@@ -44,9 +48,9 @@ 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('');