@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/containers/EditViewDataManagerProvider/reducer.js

@@ -0,0 +1,218 @@
+import { fromJS } from 'immutable';
+import { getMaxTempKey } from '../../utils';
+
+const initialState = fromJS({
+  componentsDataStructure: {},
+  contentTypeDataStructure: {},
+  formErrors: {},
+  initialData: {},
+  modifiedData: {},
+  shouldCheckErrors: false,
+  modifiedDZName: null,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_NON_REPEATABLE_COMPONENT_TO_FIELD':
+      return state.updateIn(['modifiedData', ...action.keys], () => {
+        const defaultDataStructure = state.getIn(['componentsDataStructure', action.componentUid]);
+
+        return fromJS(defaultDataStructure);
+      });
+    case 'ADD_REPEATABLE_COMPONENT_TO_FIELD': {
+      return state
+        .updateIn(['modifiedData', ...action.keys], list => {
+          const defaultDataStructure = state
+            .getIn(['componentsDataStructure', action.componentUid])
+            .set('__temp_key__', getMaxTempKey(list ? list.toJS() : []) + 1);
+
+          if (list) {
+            return list.push(defaultDataStructure);
+          }
+
+          return fromJS([defaultDataStructure]);
+        })
+        .update('shouldCheckErrors', v => {
+          if (action.shouldCheckErrors === true) {
+            return !v;
+          }
+
+          return v;
+        });
+    }
+    case 'ADD_COMPONENT_TO_DYNAMIC_ZONE':
+      return state
+        .updateIn(['modifiedData', ...action.keys], list => {
+          const defaultDataStructure = state
+            .getIn(['componentsDataStructure', action.componentUid])
+            .set('__component', action.componentUid);
+
+          if (list) {
+            return list.push(defaultDataStructure);
+          }
+
+          return fromJS([defaultDataStructure]);
+        })
+        .update('modifiedDZName', () => action.keys[0])
+        .update('shouldCheckErrors', v => {
+          if (action.shouldCheckErrors === true) {
+            return !v;
+          }
+
+          return v;
+        });
+    case 'ADD_RELATION':
+      return state.updateIn(['modifiedData', ...action.keys], list => {
+        if (!Array.isArray(action.value) || !action.value.length) {
+          return list;
+        }
+
+        const el = action.value[0].value;
+
+        if (list) {
+          return list.push(fromJS(el));
+        }
+
+        return fromJS([el]);
+      });
+    case 'INIT_FORM': {
+      return state
+        .update('formErrors', () => fromJS({}))
+        .update('initialData', () => fromJS(action.initialValues))
+        .update('modifiedData', () => fromJS(action.initialValues))
+        .update('modifiedDZName', () => null)
+        .update('shouldCheckErrors', () => false);
+    }
+    case 'MOVE_COMPONENT_FIELD':
+      return state.updateIn(['modifiedData', ...action.pathToComponent], list => {
+        return list
+          .delete(action.dragIndex)
+          .insert(
+            action.hoverIndex,
+            state.getIn(['modifiedData', ...action.pathToComponent, action.dragIndex])
+          );
+      });
+    case 'MOVE_COMPONENT_UP':
+      return state
+        .update('shouldCheckErrors', v => {
+          if (action.shouldCheckErrors) {
+            return !v;
+          }
+
+          return v;
+        })
+        .updateIn(['modifiedData', action.dynamicZoneName], list => {
+          return list
+            .delete(action.currentIndex)
+            .insert(
+              action.currentIndex - 1,
+              state.getIn(['modifiedData', action.dynamicZoneName, action.currentIndex])
+            );
+        });
+    case 'MOVE_COMPONENT_DOWN':
+      return state
+        .update('shouldCheckErrors', v => {
+          if (action.shouldCheckErrors) {
+            return !v;
+          }
+
+          return v;
+        })
+        .updateIn(['modifiedData', action.dynamicZoneName], list => {
+          return list
+            .delete(action.currentIndex)
+            .insert(
+              action.currentIndex + 1,
+              state.getIn(['modifiedData', action.dynamicZoneName, action.currentIndex])
+            );
+        });
+    case 'MOVE_FIELD':
+      return state.updateIn(['modifiedData', ...action.keys], list => {
+        return list.delete(action.dragIndex).insert(action.overIndex, list.get(action.dragIndex));
+      });
+    case 'ON_CHANGE': {
+      let newState = state;
+      const [nonRepeatableComponentKey] = action.keys;
+
+      // This is used to set the initialData for inputs
+      // that needs an asynchronous initial value like the UID field
+      // This is just a temporary patch.
+      // TODO : Refactor the default form creation (workflow) to accept async default values.
+      if (action.shouldSetInitialValue) {
+        newState = state.updateIn(['initialData', ...action.keys], () => {
+          return action.value;
+        });
+      }
+
+      if (
+        action.keys.length === 2 &&
+        state.getIn(['modifiedData', nonRepeatableComponentKey]) === null
+      ) {
+        newState = newState.updateIn(['modifiedData', nonRepeatableComponentKey], () => fromJS({}));
+      }
+
+      return newState.updateIn(['modifiedData', ...action.keys], () => {
+        return action.value;
+      });
+    }
+    case 'REMOVE_COMPONENT_FROM_DYNAMIC_ZONE':
+      return state
+        .update('shouldCheckErrors', v => {
+          if (action.shouldCheckErrors) {
+            return !v;
+          }
+
+          return v;
+        })
+        .deleteIn(['modifiedData', action.dynamicZoneName, action.index]);
+    case 'REMOVE_COMPONENT_FROM_FIELD': {
+      const componentPathToRemove = ['modifiedData', ...action.keys];
+
+      return state.updateIn(componentPathToRemove, () => null);
+    }
+    case 'REMOVE_PASSWORD_FIELD': {
+      return state.removeIn(['modifiedData', ...action.keys]);
+    }
+    case 'REMOVE_REPEATABLE_FIELD': {
+      const componentPathToRemove = ['modifiedData', ...action.keys];
+
+      return state
+        .update('shouldCheckErrors', v => {
+          const hasErrors = state.get('formErrors').keySeq().size > 0;
+
+          if (hasErrors) {
+            return !v;
+          }
+
+          return v;
+        })
+        .deleteIn(componentPathToRemove);
+    }
+    case 'REMOVE_RELATION':
+      return state.removeIn(['modifiedData', ...action.keys.split('.')]);
+    case 'SET_DEFAULT_DATA_STRUCTURES':
+      return state
+        .update('componentsDataStructure', () => fromJS(action.componentsDataStructure))
+        .update('contentTypeDataStructure', () => fromJS(action.contentTypeDataStructure));
+    case 'SET_FORM_ERRORS': {
+      return state
+        .update('modifiedDZName', () => null)
+        .update('formErrors', () => fromJS(action.errors));
+    }
+    case 'TRIGGER_FORM_VALIDATION':
+      return state.update('shouldCheckErrors', v => {
+        const hasErrors = state.get('formErrors').keySeq().size > 0;
+
+        if (hasErrors) {
+          return !v;
+        }
+
+        return v;
+      });
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/EditViewDataManagerProvider/utils/cleanData.js

@@ -0,0 +1,88 @@
+import { get, isArray, isObject } from 'lodash';
+
+/* eslint-disable indent */
+
+const cleanData = (retrievedData, currentSchema, componentsSchema) => {
+  const getType = (schema, attrName) => get(schema, ['attributes', attrName, 'type'], '');
+  const getOtherInfos = (schema, arr) => get(schema, ['attributes', ...arr], '');
+
+  const recursiveCleanData = (data, schema) => {
+    return Object.keys(data).reduce((acc, current) => {
+      const attrType = getType(schema, current);
+      const value = get(data, current);
+      const component = getOtherInfos(schema, [current, 'component']);
+      const isRepeatable = getOtherInfos(schema, [current, 'repeatable']);
+      let cleanedData;
+
+      switch (attrType) {
+        case 'json':
+          try {
+            cleanedData = JSON.parse(value);
+          } catch (err) {
+            cleanedData = value;
+          }
+
+          break;
+        case 'date':
+          cleanedData =
+            value && value._isAMomentObject === true ? value.format('YYYY-MM-DD') : value;
+          break;
+        case 'datetime':
+          cleanedData = value && value._isAMomentObject === true ? value.toISOString() : value;
+          break;
+        case 'media':
+          if (getOtherInfos(schema, [current, 'multiple']) === true) {
+            cleanedData = value ? value.filter(file => !(file instanceof File)) : null;
+          } else {
+            cleanedData = get(value, 0) instanceof File ? null : get(value, 'id', null);
+          }
+          break;
+        case 'component':
+          if (isRepeatable) {
+            cleanedData = value
+              ? value.map(data => {
+                  const subCleanedData = recursiveCleanData(data, componentsSchema[component]);
+
+                  return subCleanedData;
+                })
+              : value;
+          } else {
+            cleanedData = value ? recursiveCleanData(value, componentsSchema[component]) : value;
+          }
+          break;
+        case 'dynamiczone':
+          cleanedData = value.map(componentData => {
+            const subCleanedData = recursiveCleanData(
+              componentData,
+              componentsSchema[componentData.__component]
+            );
+
+            return subCleanedData;
+          });
+          break;
+        default:
+          // The helper is mainly used for the relations in order to just send the id
+          cleanedData = helperCleanData(value, 'id');
+      }
+
+      acc[current] = cleanedData;
+
+      return acc;
+    }, {});
+  };
+
+  return recursiveCleanData(retrievedData, currentSchema);
+};
+
+export const helperCleanData = (value, key) => {
+  if (isArray(value)) {
+    return value.map(obj => (obj[key] ? obj[key] : obj));
+  }
+  if (isObject(value)) {
+    return value[key];
+  }
+
+  return value;
+};
+
+export default cleanData;

package/admin/src/containers/EditViewDataManagerProvider/utils/getYupInnerErrors.js

@@ -0,0 +1,17 @@
+import { get } from 'lodash';
+
+const getYupInnerErrors = error => {
+  return get(error, 'inner', []).reduce((acc, curr) => {
+    acc[
+      curr.path
+        .split('[')
+        .join('.')
+        .split(']')
+        .join('')
+    ] = { id: curr.message };
+
+    return acc;
+  }, {});
+};
+
+export default getYupInnerErrors;

package/admin/src/containers/EditViewDataManagerProvider/utils/index.js

@@ -0,0 +1,3 @@
+export { default as cleanData } from './cleanData';
+export { default as getYupInnerErrors } from './getYupInnerErrors';
+export { default as createYupSchema } from './schema';

package/admin/src/containers/EditViewDataManagerProvider/utils/schema.js

@@ -0,0 +1,368 @@
+import {
+  get,
+  isBoolean,
+  isNumber,
+  isNull,
+  isObject,
+  isArray,
+  isEmpty,
+  isNaN,
+  toNumber,
+} from 'lodash';
+import moment from 'moment';
+import * as yup from 'yup';
+import { translatedErrors as errorsTrads } from 'strapi-helper-plugin';
+
+yup.addMethod(yup.mixed, 'defined', function() {
+  return this.test('defined', errorsTrads.required, value => value !== undefined);
+});
+
+yup.addMethod(yup.array, 'notEmptyMin', function(min) {
+  return this.test('notEmptyMin', errorsTrads.min, value => {
+    if (isEmpty(value)) {
+      return true;
+    }
+
+    return value.length >= min;
+  });
+});
+
+yup.addMethod(yup.string, 'isInferior', function(message, max) {
+  return this.test('isInferior', message, function(value) {
+    if (!value) {
+      return true;
+    }
+
+    if (Number.isNaN(toNumber(value))) {
+      return true;
+    }
+
+    return toNumber(max) >= toNumber(value);
+  });
+});
+
+yup.addMethod(yup.string, 'isSuperior', function(message, min) {
+  return this.test('isSuperior', message, function(value) {
+    if (!value) {
+      return true;
+    }
+
+    if (Number.isNaN(toNumber(value))) {
+      return true;
+    }
+
+    return toNumber(value) >= toNumber(min);
+  });
+});
+
+const getAttributes = data => get(data, ['attributes'], {});
+
+const createYupSchema = (
+  model,
+  { components },
+  options = { isCreatingEntry: true, isDraft: true, isFromComponent: false }
+) => {
+  const attributes = getAttributes(model);
+
+  return yup.object().shape(
+    Object.keys(attributes).reduce((acc, current) => {
+      const attribute = attributes[current];
+
+      if (
+        attribute.type !== 'relation' &&
+        attribute.type !== 'component' &&
+        attribute.type !== 'dynamiczone'
+      ) {
+        const formatted = createYupSchemaAttribute(attribute.type, attribute, options);
+        acc[current] = formatted;
+      }
+
+      if (attribute.type === 'relation') {
+        acc[current] = [
+          'oneWay',
+          'oneToOne',
+          'manyToOne',
+          'oneToManyMorph',
+          'oneToOneMorph',
+        ].includes(attribute.relationType)
+          ? yup.object().nullable()
+          : yup.array().nullable();
+      }
+
+      if (attribute.type === 'component') {
+        const componentFieldSchema = createYupSchema(
+          components[attribute.component],
+          {
+            components,
+          },
+          { ...options, isFromComponent: true }
+        );
+
+        if (attribute.repeatable === true) {
+          const { min, max, required } = attribute;
+          let componentSchema = yup.lazy(value => {
+            let baseSchema = yup.array().of(componentFieldSchema);
+
+            if (min && !options.isDraft) {
+              if (required) {
+                baseSchema = baseSchema.min(min, errorsTrads.min);
+              } else if (required !== true && isEmpty(value)) {
+                baseSchema = baseSchema.nullable();
+              } else {
+                baseSchema = baseSchema.min(min, errorsTrads.min);
+              }
+            }
+
+            if (max) {
+              baseSchema = baseSchema.max(max, errorsTrads.max);
+            }
+
+            return baseSchema;
+          });
+
+          acc[current] = componentSchema;
+
+          return acc;
+        }
+        const componentSchema = yup.lazy(obj => {
+          if (obj !== undefined) {
+            return attribute.required === true && !options.isDraft
+              ? componentFieldSchema.defined()
+              : componentFieldSchema.nullable();
+          }
+
+          return attribute.required === true ? yup.object().defined() : yup.object().nullable();
+        });
+
+        acc[current] = componentSchema;
+
+        return acc;
+      }
+
+      if (attribute.type === 'dynamiczone') {
+        let dynamicZoneSchema = yup.array().of(
+          yup.lazy(({ __component }) => {
+            return createYupSchema(
+              components[__component],
+              { components },
+              { ...options, isFromComponent: true }
+            );
+          })
+        );
+
+        const { max, min } = attribute;
+
+        if (attribute.required && !options.isDraft) {
+          dynamicZoneSchema = dynamicZoneSchema.test('required', errorsTrads.required, value => {
+            if (options.isCreatingEntry) {
+              return value !== null || value !== undefined;
+            }
+
+            if (value === undefined) {
+              return true;
+            }
+
+            return value !== null;
+          });
+
+          if (min) {
+            dynamicZoneSchema = dynamicZoneSchema
+              .test('min', errorsTrads.min, value => {
+                if (options.isCreatingEntry) {
+                  return value && value.length > 0;
+                }
+
+                if (value === undefined) {
+                  return true;
+                }
+
+                return value !== null && value.length > 0;
+              })
+              .test('required', errorsTrads.required, value => {
+                if (options.isCreatingEntry) {
+                  return value !== null || value !== undefined;
+                }
+
+                if (value === undefined) {
+                  return true;
+                }
+
+                return value !== null;
+              });
+          }
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (min) {
+            dynamicZoneSchema = dynamicZoneSchema.notEmptyMin(min);
+          }
+        }
+
+        if (max) {
+          dynamicZoneSchema = dynamicZoneSchema.max(max, errorsTrads.max);
+        }
+
+        acc[current] = dynamicZoneSchema;
+      }
+
+      return acc;
+    }, {})
+  );
+};
+
+const createYupSchemaAttribute = (type, validations, options) => {
+  let schema = yup.mixed();
+
+  if (['string', 'uid', 'text', 'richtext', 'email', 'password', 'enumeration'].includes(type)) {
+    schema = yup.string();
+  }
+
+  if (type === 'json') {
+    schema = yup
+      .mixed(errorsTrads.json)
+      .test('isJSON', errorsTrads.json, value => {
+        if (value === undefined) {
+          return true;
+        }
+
+        if (isNumber(value) || isNull(value) || isObject(value) || isArray(value)) {
+          return true;
+        }
+
+        try {
+          JSON.parse(value);
+
+          return true;
+        } catch (err) {
+          return false;
+        }
+      })
+      .nullable();
+  }
+
+  if (type === 'email') {
+    schema = schema.email(errorsTrads.email);
+  }
+
+  if (['number', 'integer', 'biginteger', 'float', 'decimal'].includes(type)) {
+    schema = yup
+      .number()
+      .transform(cv => (isNaN(cv) ? undefined : cv))
+      .typeError();
+  }
+
+  if (['date', 'datetime'].includes(type)) {
+    schema = yup.date();
+  }
+
+  if (type === 'biginteger') {
+    schema = yup.string().matches(/^\d*$/);
+  }
+
+  Object.keys(validations).forEach(validation => {
+    const validationValue = validations[validation];
+
+    if (
+      !!validationValue ||
+      (!isBoolean(validationValue) && Number.isInteger(Math.floor(validationValue))) ||
+      validationValue === 0
+    ) {
+      switch (validation) {
+        case 'required': {
+          if (!options.isDraft) {
+            if (type === 'password' && options.isCreatingEntry) {
+              schema = schema.required(errorsTrads.required);
+            }
+
+            if (type !== 'password') {
+              if (options.isCreatingEntry) {
+                schema = schema.required(errorsTrads.required);
+              } else {
+                schema = schema.test('required', errorsTrads.required, value => {
+                  // Field is not touched and the user is editing the entry
+                  if (value === undefined && !options.isFromComponent) {
+                    return true;
+                  }
+
+                  if (['number', 'integer', 'biginteger', 'float', 'decimal'].includes(type)) {
+                    if (value === 0) {
+                      return true;
+                    }
+
+                    return !!value;
+                  }
+
+                  if (['date', 'datetime'].includes(type)) {
+                    return moment(value)._isValid === true;
+                  }
+
+                  if (type === 'boolean') {
+                    return value !== null;
+                  }
+
+                  return !isEmpty(value);
+                });
+              }
+            }
+          }
+
+          break;
+        }
+
+        case 'max': {
+          if (type === 'biginteger') {
+            schema = schema.isInferior(errorsTrads.max, validationValue);
+          } else {
+            schema = schema.max(validationValue, errorsTrads.max);
+          }
+          break;
+        }
+        case 'maxLength':
+          schema = schema.max(validationValue, errorsTrads.maxLength);
+          break;
+        case 'min': {
+          if (type === 'biginteger') {
+            schema = schema.isSuperior(errorsTrads.min, validationValue);
+          } else {
+            schema = schema.min(validationValue, errorsTrads.min);
+          }
+          break;
+        }
+        case 'minLength': {
+          if (!options.isDraft) {
+            schema = schema.min(validationValue, errorsTrads.minLength);
+          }
+          break;
+        }
+        case 'regex':
+          schema = schema.matches(new RegExp(validationValue), errorsTrads.regex);
+          break;
+        case 'lowercase':
+          if (['text', 'textarea', 'email', 'string'].includes(type)) {
+            schema = schema.strict().lowercase();
+          }
+          break;
+        case 'uppercase':
+          if (['text', 'textarea', 'email', 'string'].includes(type)) {
+            schema = schema.strict().uppercase();
+          }
+          break;
+        case 'positive':
+          if (['number', 'integer', 'bigint', 'float', 'decimal'].includes(type)) {
+            schema = schema.positive();
+          }
+          break;
+        case 'negative':
+          if (['number', 'integer', 'bigint', 'float', 'decimal'].includes(type)) {
+            schema = schema.negative();
+          }
+          break;
+        default:
+          schema = schema.nullable();
+      }
+    }
+  });
+
+  return schema;
+};
+
+export default createYupSchema;