Update design and fix yup validations

2025-12-27 07:03:38 +00:00 · 2019-08-21 17:35:13 +02:00 · 2019-08-21 17:35:13 +02:00 · 492ff5b3c1
commit 492ff5b3c1
parent fe0aa1e0c8
11 changed files with 290 additions and 56 deletions
--- a/examples/getstarted/api/article/models/Article.settings.json
+++ b/examples/getstarted/api/article/models/Article.settings.json
@ -77,7 +77,8 @@
    },
    "fb_cta": {
      "type": "group",
-      "group": "facebook_cta"
+      "group": "facebookcta_yrez",
+      "required": true
    },
    "mainIngredient": {
      "type": "group",
--- a/examples/getstarted/groups/facebookcta_yrez.json
+++ b/examples/getstarted/groups/facebookcta_yrez.json
@ -1,13 +1,14 @@
 {
  "info": {
-    "name": "Facebook CTA",
+    "name": "facebookcta_yrez",
    "description": "test"
  },
  "connection": "default",
  "collectionName": "cta_facebook_aa",
  "attributes": {
    "title": {
-      "type": "string"
+      "type": "string",
+      "default": "soupettefsfdsrazeraz"
    },
    "description": {
      "type": "text"
@ -21,4 +22,4 @@
      "type": "richtext"
    }
  }
-}
+}
--- a/examples/getstarted/groups/ingredients.json
+++ b/examples/getstarted/groups/ingredients.json
@ -8,7 +8,8 @@
  "attributes": {
    "name": {
      "type": "string",
-      "required": true
+      "required": true,
+      "default": ""
    },
    "quantity": {
      "type": "float",
--- a/packages/strapi-plugin-content-manager/admin/src/components/Group/NonRepeatableGroup.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Group/NonRepeatableGroup.js
@ -0,0 +1,66 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import pluginId from '../../pluginId';
+import Form from './Form';
+import { NonRepeatableWrapper, P } from './components';
+
+const NonRepeatableGroup = ({
+  addField,
+  isInitialized,
+  fields,
+  modifiedData,
+  name,
+  layout,
+  onChange,
+}) => {
+  if (!isInitialized) {
+    return (
+      <NonRepeatableWrapper isEmpty>
+        <div onClick={() => addField(name, false)} />
+        <FormattedMessage id={`${pluginId}.components.Group.empty.repeatable`}>
+          {msg => <P style={{ paddingTop: 75 }}>{msg}</P>}
+        </FormattedMessage>
+      </NonRepeatableWrapper>
+    );
+  }
+
+  return (
+    <NonRepeatableWrapper>
+      {fields.map((fieldRow, key) => {
+        return (
+          <div className="row" key={key}>
+            {fieldRow.map(field => {
+              const keys = `${name}.${field.name}`;
+
+              return (
+                <Form
+                  key={keys}
+                  modifiedData={modifiedData}
+                  keys={keys}
+                  fieldName={field.name}
+                  layout={layout}
+                  onChange={onChange}
+                />
+              );
+            })}
+          </div>
+        );
+      })}
+    </NonRepeatableWrapper>
+  );
+};
+
+NonRepeatableGroup.defaultProps = {};
+NonRepeatableGroup.propTypes = {
+  addField: PropTypes.func.isRequired,
+  isInitialized: PropTypes.bool,
+  fields: PropTypes.array,
+  modifiedData: PropTypes.object,
+  name: PropTypes.string.isRequired,
+  layout: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export default memo(NonRepeatableGroup);
--- a/packages/strapi-plugin-content-manager/admin/src/components/Group/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Group/components.js
@ -49,4 +49,113 @@ const FormWrapper = styled.div`
    }};
 `;

-export { Button, FormWrapper };
+const EmptyGroup = styled.div`
+  height: 72px;
+  border: 1px solid #e3e9f3;
+  border-radius: 2px;
+  border-bottom: 0;
+  line-height: 73px;
+  text-align: center;
+`;
+
+const P = styled.p`
+  color: #9ea7b8;
+  font-size: 13px;
+  font-weight: 500;
+`;
+
+const NonRepeatableWrapper = styled.div`
+  margin: 0 10px !important;
+  padding: 0 20px !important;
+
+  ${({ isEmpty }) => {
+    if (isEmpty) {
+      return css`
+        position: relative;
+        height: 108px;
+        margin-bottom: 21px !important;
+        background-color: #fafafb;
+        text-align: center;
+
+        > div {
+          position: absolute;
+          top: 30px;
+          left: calc(50% - 18px);
+          line-height: 36px;
+          height: 36px;
+          width: 36px;
+          border-radius: 50%;
+          background-color: #f3f4f4;
+          cursor: pointer;
+          &:before {
+            content: '\f067';
+            font-family: FontAwesome;
+            font-size: 15px;
+            color: #b4b6ba;
+          }
+        }
+
+        &:hover {
+          background-color: #e6f0fb;
+
+          > div {
+            background-color: #aed4fb;
+            &:before {
+              content: '\f067';
+              font-family: FontAwesome;
+              font-size: 15px;
+
+              color: #007eff;
+            }
+          }
+        }
+      `;
+    }
+
+    return css`
+      padding-top: 21px !important;
+      background-color: #f7f8f8;
+      margin-bottom: 18px !important;
+    `;
+  }}
+`;
+
+const ResetGroup = styled.div`
+  position: absolute;
+  top: 0;
+  right: 10px;
+  display: flex;
+
+  cursor: pointer;
+  color: #4b515a;
+
+  > span {
+    margin-right: 10px;
+    display: none;
+  }
+
+  &:hover {
+    > div {
+      background-color: #faa684;
+    }
+    color: #f64d0a;
+    > span {
+      display: initial;
+    }
+  }
+
+  > div {
+    width: 24px;
+    height: 24px;
+    background-color: #f3f4f4;
+    text-align: center;
+    border-radius: 2px;
+    &:after {
+      content: '\f1f8';
+      font-size: 14px;
+      font-family: FontAwesome;
+    }
+  }
+`;
+
+export { Button, EmptyGroup, FormWrapper, NonRepeatableWrapper, P, ResetGroup };
--- a/packages/strapi-plugin-content-manager/admin/src/components/Group/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Group/index.js
@ -5,11 +5,11 @@ import { get, size } from 'lodash';

 import pluginId from '../../pluginId';
 import { useEditView } from '../../contexts/EditView';
-import { Button } from './components';
-import Form from './Form';
+import { Button, EmptyGroup, P, ResetGroup } from './components';
 import GroupCollapse from './GroupCollapse';
 import init from './init';
 import reducer, { initialState } from './reducer';
+import NonRepeatableGroup from './NonRepeatableGroup';

 function Group({
  addField,
@ -26,7 +26,7 @@ function Group({
  onChange,
  removeField,
 }) {
-  const { didCheckErrors, errors, resetErrors } = useEditView();
+  const { didCheckErrors, errors, resetErrors, resetGroupData } = useEditView();
  const fields = get(layout, ['layouts', 'edit'], []);
  const [state, dispatch] = useReducer(reducer, initialState, () =>
    init(initialState, groupValue)
@ -73,6 +73,7 @@ function Group({
  }, [didCheckErrors]);

  const groupValueLength = size(groupValue);
+  const isInitialized = get(modifiedData, name, null) !== null;

  return (
    <>
@ -83,6 +84,7 @@ function Group({
            paddingTop: 0,
            marginTop: '-2px',
            paddingBottom: isRepeatable ? 7 : 14,
+            position: 'relative',
          }}
        >
          <span
@ -94,45 +96,46 @@ function Group({
            {label}&nbsp;
            {isRepeatable && `(${groupValueLength})`}
          </span>
+          {!isRepeatable && isInitialized && (
+            <ResetGroup
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                resetGroupData(name);
+              }}
+            >
+              <FormattedMessage id="reset" />
+              <div />
+            </ResetGroup>
+          )}
        </div>
      </div>
-      {!isRepeatable ? (
-        <div
-          style={{
-            margin: '0 10px',
-            padding: '0 20px',
-            paddingTop: 21,
-            backgroundColor: '#F7F8F8',
-            marginBottom: 18,
-          }}
-        >
-          {fields.map((fieldRow, key) => {
-            return (
-              <div className="row" key={key}>
-                {fieldRow.map(field => {
-                  const keys = `${name}.${field.name}`;

-                  return (
-                    <Form
-                      key={keys}
-                      modifiedData={modifiedData}
-                      keys={keys}
-                      fieldName={field.name}
-                      layout={layout}
-                      onChange={onChange}
-                    />
-                  );
-                })}
-              </div>
-            );
-          })}
-        </div>
+      {!isRepeatable ? (
+        <NonRepeatableGroup
+          addField={addField}
+          isInitialized={isInitialized}
+          fields={fields}
+          modifiedData={modifiedData}
+          layout={layout}
+          name={name}
+          onChange={onChange}
+        />
      ) : (
        <div
          style={{
            margin: '0 10px',
          }}
        >
+          {groupValue.length === 0 && (
+            <EmptyGroup>
+              <FormattedMessage
+                id={`${pluginId}.components.Group.empty.repeatable`}
+              >
+                {msg => <P>{msg}</P>}
+              </FormattedMessage>
+            </EmptyGroup>
+          )}
          {groupValue.map((field, index) => {
            const groupFieldName = `${name}.${index}`;
            const doesPreviousFieldContainErrorsAndIsOpen =
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
@ -128,7 +128,7 @@ function EditView({
            defaultRepeatable: defaultForm,
          };

-          if (current.repeatable === false) {
+          if (current.repeatable !== true) {
            acc[current.key] = {
              toSet: defaultForm,
              defaultRepeatable: defaultForm,
@ -346,6 +346,7 @@ function EditView({
        strapi.notification.error(error);
      }
    } catch (err) {
+      console.log({ formErrors: err });
      setIsSubmitting(false);
      const errors = get(err, 'inner', []).reduce((acc, curr) => {
        acc[
@ -408,6 +409,12 @@ function EditView({
          errors: {},
        });
      }}
+      resetGroupData={groupName => {
+        dispatch({
+          type: 'RESET_GROUP_DATA',
+          groupName,
+        });
+      }}
      search={search}
    >
      <BackHeader onClick={() => redirectToPreviousPage()} />
@ -489,10 +496,11 @@ function EditView({
                      <Group
                        {...group}
                        {...groupMetas}
-                        addField={keys => {
+                        addField={(keys, isRepeatable = true) => {
                          dispatch({
                            type: 'ADD_FIELD_TO_GROUP',
                            keys: keys.split('.'),
+                            isRepeatable,
                          });
                        }}
                        groupErrorKeys={groupErrorKeys}
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/reducer.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/reducer.js
@ -29,6 +29,11 @@ function reducer(state, action) {
          'defaultRepeatable',
        ]);

+        if (action.isRepeatable === false) {
+          console.log(defaultAttribute.toJS());
+          return fromJS(defaultAttribute);
+        }
+
        if (list) {
          const max = getMax(list);

@ -77,6 +82,7 @@ function reducer(state, action) {
                fromJS(defaultGroupValues[current].toSet)
              );
            }
+
            return acc;
          }, obj);
        } else {
@ -129,10 +135,9 @@ function reducer(state, action) {
        );
      }

-      return newState.updateIn(
-        ['modifiedData', ...action.keys],
-        () => action.value
-      );
+      return newState.updateIn(['modifiedData', ...action.keys], () => {
+        return action.value;
+      });
    }
    case 'ON_REMOVE_FIELD':
      return state
@ -154,7 +159,20 @@ function reducer(state, action) {
    case 'REMOVE_RELATION':
      return state.removeIn(['modifiedData', ...action.keys.split('.')]);
    case 'RESET_FORM':
-      return state.update('modifiedData', () => state.get('initialData'));
+      return state
+        .update('modifiedData', () => state.get('initialData'))
+        .update('errors', () => fromJS({}))
+        .update('didCheckErrors', v => !v);
+    case 'RESET_GROUP_DATA': {
+      const groupPath = ['modifiedData', action.groupName];
+
+      return state
+        .updateIn(groupPath, () =>
+          state.getIn(['initialData', action.groupName])
+        )
+        .update('errors', () => fromJS({}))
+        .update('didCheckErrors', v => !v);
+    }
    case 'SET_COLLAPSES_COMPONENTS_STATE':
      return state.update('collapses', () => fromJS(action.collapses));
    case 'SET_ERRORS':
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/utils/schema.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/utils/schema.js
@ -54,19 +54,44 @@ const createYupSchema = (model, { groups }) => {
      }

      if (attribute.type === 'group') {
-        let groupSchema = createYupSchema(groups[attribute.group], {
+        const groupFieldSchema = createYupSchema(groups[attribute.group], {
          groups,
        });
-        groupSchema =
-          attribute.repeatable === true
-            ? yup.array().of(groupSchema)
-            : groupSchema;
-        groupSchema =
-          attribute.required === true
-            ? groupSchema.defined()
-            : groupSchema.nullable();
-        acc[current] = groupSchema;
+
+        if (attribute.repeatable === true) {
+          const groupSchema =
+            attribute.required === true
+              ? yup
+                  .array()
+                  .of(groupFieldSchema)
+                  .defined()
+              : yup
+                  .array()
+                  .of(groupFieldSchema)
+                  .nullable();
+
+          acc[current] = groupSchema;
+
+          return acc;
+        } else {
+          const groupSchema = yup.lazy(obj => {
+            if (obj !== undefined) {
+              return attribute.required === true
+                ? groupFieldSchema.defined()
+                : groupFieldSchema.nullable();
+            }
+
+            return attribute.required === true
+              ? yup.object().defined()
+              : yup.object().nullable();
+          });
+
+          acc[current] = groupSchema;
+
+          return acc;
+        }
      }
+
      return acc;
    }, {})
  );
--- a/packages/strapi-plugin-content-manager/admin/src/translations/en.json
+++ b/packages/strapi-plugin-content-manager/admin/src/translations/en.json
@ -28,6 +28,7 @@
  "components.FiltersPickWrapper.hide": "Hide",
  "components.Group.notification.info.minimum-requirement": "A field has been added to your group to match the minimum requirement",
  "components.Group.notification.info.maximum-requirement": "You have already reached the maximum number of fields",
+  "components.Group.empty.repeatable": "No entry yet. Click on the button below to add one.",
  "components.LimitSelect.itemsPerPage": "Items per page",
  "components.Search.placeholder": "Search for an entry...",
  "components.TableDelete.delete": "Delete all",
--- a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json
+++ b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json
@ -26,6 +26,7 @@
  "components.FiltersPickWrapper.hide": "Fermer",
  "components.Group.notification.info.minimum-requirement": "Un champ a été rajouté pour remplir les conditions minimales",
  "components.Group.notification.info.maximum-requirement": "Le nombre maximal de champs est atteint",
+  "components.Group.empty.repeatable": "Il n'a pas encore d'entrée. Cliquez sur le bouton pour en ajouter une.",
  "components.LimitSelect.itemsPerPage": "Éléments par page",
  "components.Search.placeholder": "Rechercher une entrée...",
  "components.TableDelete.delete": "Tout supprimer",