@akemona-org/strapi-plugin-content-type-builder 3.7.0

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

@@ -0,0 +1,293 @@
+import { fromJS, List } from 'immutable';
+import pluralize from 'pluralize';
+import { snakeCase } from 'lodash';
+import makeUnique from '../../utils/makeUnique';
+import { createComponentUid } from './utils/createUid';
+import { shouldPluralizeName, shouldPluralizeTargetAttribute } from './utils/relations';
+import * as actions from './constants';
+
+const initialState = fromJS({
+  formErrors: {},
+  modifiedData: {},
+  initialData: {},
+  componentToCreate: {},
+  isCreatingComponentWhileAddingAField: false,
+});
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case actions.ADD_COMPONENTS_TO_DYNAMIC_ZONE: {
+      const { name, components, shouldAddComponents } = action;
+
+      return state.updateIn(['modifiedData', name], list => {
+        let updatedList = list;
+
+        if (shouldAddComponents) {
+          updatedList = list.concat(components);
+        } else {
+          updatedList = list.filter(comp => {
+            return components.indexOf(comp) === -1;
+          });
+        }
+
+        return List(makeUnique(updatedList.toJS()));
+      });
+    }
+    case actions.ON_CHANGE:
+      return state.update('modifiedData', obj => {
+        const {
+          selectedContentTypeFriendlyName,
+          keys,
+          value,
+          oneThatIsCreatingARelationWithAnother,
+        } = action;
+        const hasDefaultValue = Boolean(obj.getIn(['default']));
+
+        // There is no need to remove the default key if the default value isn't defined
+        if (hasDefaultValue && keys.length === 1 && keys.includes('type')) {
+          const previousType = obj.getIn(['type']);
+
+          if (previousType && ['date', 'datetime', 'time'].includes(previousType)) {
+            return obj.updateIn(keys, () => value).remove('default');
+          }
+        }
+
+        if (keys.length === 1 && keys.includes('nature')) {
+          return obj
+            .update('nature', () => value)
+            .update('dominant', () => {
+              if (value === 'manyToMany') {
+                return true;
+              }
+
+              return null;
+            })
+            .update('name', oldValue => {
+              return pluralize(snakeCase(oldValue), shouldPluralizeName(value));
+            })
+            .update('targetAttribute', oldValue => {
+              if (['oneWay', 'manyWay'].includes(value)) {
+                return '-';
+              }
+
+              return pluralize(
+                oldValue === '-' ? snakeCase(oneThatIsCreatingARelationWithAnother) : oldValue,
+                shouldPluralizeTargetAttribute(value)
+              );
+            })
+            .update('targetColumnName', oldValue => {
+              if (['oneWay', 'manyWay'].includes(value)) {
+                return null;
+              }
+
+              return oldValue;
+            });
+        }
+
+        if (keys.length === 1 && keys.includes('target')) {
+          const { targetContentTypeAllowedRelations } = action;
+          let didChangeNatureBecauseOfRestrictedRelation = false;
+
+          return obj
+            .update('target', () => value)
+            .update('nature', currentNature => {
+              if (targetContentTypeAllowedRelations === null) {
+                return currentNature;
+              }
+
+              if (!targetContentTypeAllowedRelations.includes(currentNature)) {
+                didChangeNatureBecauseOfRestrictedRelation = true;
+
+                return targetContentTypeAllowedRelations[0];
+              }
+
+              return currentNature;
+            })
+            .update('name', () => {
+              if (didChangeNatureBecauseOfRestrictedRelation) {
+                return pluralize(
+                  snakeCase(selectedContentTypeFriendlyName),
+                  shouldPluralizeName(targetContentTypeAllowedRelations[0])
+                );
+              }
+
+              return pluralize(
+                snakeCase(selectedContentTypeFriendlyName),
+
+                shouldPluralizeName(obj.get('nature'))
+              );
+            })
+            .update('targetAttribute', () => {
+              if (['oneWay', 'manyWay'].includes(obj.get('nature'))) {
+                return '-';
+              }
+
+              if (
+                didChangeNatureBecauseOfRestrictedRelation &&
+                ['oneWay', 'manyWay'].includes(targetContentTypeAllowedRelations[0])
+              ) {
+                return '-';
+              }
+
+              return pluralize(
+                snakeCase(oneThatIsCreatingARelationWithAnother),
+                shouldPluralizeTargetAttribute(obj.get('nature'))
+              );
+            });
+        }
+
+        return obj.updateIn(keys, () => value);
+      });
+    case actions.ON_CHANGE_ALLOWED_TYPE: {
+      if (action.name === 'all') {
+        return state.updateIn(['modifiedData', 'allowedTypes'], () => {
+          if (action.value) {
+            return fromJS(['images', 'videos', 'files']);
+          }
+
+          return null;
+        });
+      }
+
+      return state.updateIn(['modifiedData', 'allowedTypes'], currentList => {
+        let list = currentList || fromJS([]);
+
+        if (list.includes(action.name)) {
+          list = list.filter(v => v !== action.name);
+
+          if (list.size === 0) {
+            return null;
+          }
+
+          return list;
+        }
+
+        return list.push(action.name);
+      });
+    }
+    case actions.RESET_PROPS:
+      return initialState;
+    case actions.RESET_PROPS_AND_SET_FORM_FOR_ADDING_AN_EXISTING_COMPO: {
+      // This is run when the user doesn't want to create a new component
+      return initialState.update('modifiedData', () =>
+        fromJS({ type: 'component', repeatable: true, ...action.options })
+      );
+    }
+    case actions.RESET_PROPS_AND_SAVE_CURRENT_DATA: {
+      // This is run when the user has created a new component
+      const componentToCreate = state.getIn(['modifiedData', 'componentToCreate']);
+      const modifiedData = fromJS({
+        name: componentToCreate.get('name'),
+        type: 'component',
+        repeatable: false,
+        ...action.options,
+        component: createComponentUid(
+          componentToCreate.get('name'),
+          componentToCreate.get('category')
+        ),
+      });
+
+      return initialState
+        .update('componentToCreate', () => componentToCreate)
+        .update('modifiedData', () => modifiedData)
+        .update('isCreatingComponentWhileAddingAField', () =>
+          state.getIn(['modifiedData', 'createComponent'])
+        );
+    }
+    case actions.RESET_PROPS_AND_SET_THE_FORM_FOR_ADDING_A_COMPO_TO_A_DZ: {
+      const createdDZ = state.get('modifiedData');
+      const dataToSet = createdDZ
+        .set('createComponent', true)
+        .set('componentToCreate', fromJS({ type: 'component' }));
+
+      return initialState.update('modifiedData', () => dataToSet);
+    }
+    case actions.SET_DATA_TO_EDIT: {
+      return state
+        .updateIn(['modifiedData'], () => fromJS(action.data))
+        .updateIn(['initialData'], () => fromJS(action.data));
+    }
+    case actions.SET_ATTRIBUTE_DATA_SCHEMA: {
+      const {
+        attributeType,
+        isEditing,
+        modifiedDataToSetForEditing,
+        nameToSetForRelation,
+        targetUid,
+        step,
+        options = {},
+      } = action;
+
+      if (isEditing) {
+        return state
+          .update('modifiedData', () => fromJS(modifiedDataToSetForEditing))
+          .update('initialData', () => fromJS(modifiedDataToSetForEditing));
+      }
+
+      let dataToSet;
+
+      if (attributeType === 'component') {
+        if (step === '1') {
+          dataToSet = {
+            type: 'component',
+            createComponent: true,
+            componentToCreate: { type: 'component' },
+          };
+        } else {
+          dataToSet = {
+            ...options,
+            type: 'component',
+            repeatable: true,
+          };
+        }
+      } else if (attributeType === 'dynamiczone') {
+        dataToSet = {
+          ...options,
+          type: 'dynamiczone',
+          components: [],
+        };
+      } else if (attributeType === 'text') {
+        dataToSet = { ...options, type: 'string' };
+      } else if (attributeType === 'number' || attributeType === 'date') {
+        dataToSet = options;
+      } else if (attributeType === 'media') {
+        dataToSet = {
+          allowedTypes: ['images', 'files', 'videos'],
+          type: 'media',
+          multiple: true,
+          ...options,
+        };
+      } else if (attributeType === 'enumeration') {
+        dataToSet = { ...options, type: 'enumeration', enum: [] };
+      } else if (attributeType === 'relation') {
+        dataToSet = {
+          name: snakeCase(nameToSetForRelation),
+          nature: 'oneWay',
+          targetAttribute: '-',
+          target: targetUid,
+          unique: false,
+          dominant: null,
+          columnName: null,
+          targetColumnName: null,
+        };
+      } else {
+        dataToSet = { ...options, type: attributeType, default: null };
+      }
+
+      return state.update('modifiedData', () => fromJS(dataToSet));
+    }
+    case actions.SET_DYNAMIC_ZONE_DATA_SCHEMA: {
+      return state
+        .update('modifiedData', () => fromJS(action.attributeToEdit))
+        .update('initialData', () => fromJS(action.attributeToEdit));
+    }
+
+    case actions.SET_ERRORS:
+      return state.update('formErrors', () => fromJS(action.errors));
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/FormModal/selectors.js

@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect';
+import pluginId from '../../pluginId';
+import { initialState } from './reducer';
+
+/**
+ * Direct selector to the formModal state domain
+ */
+const formModalDomain = () => state => state.get(`${pluginId}_formModal`) || initialState;
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by formModal
+ */
+
+const makeSelectFormModal = () =>
+  createSelector(formModalDomain(), substate => {
+    return substate;
+  });
+
+export default makeSelectFormModal;
+export { formModalDomain };

package/admin/src/containers/FormModal/utils/canEditContentType.js

@@ -0,0 +1,19 @@
+import { get } from 'lodash';
+
+const canEditContentType = (data, modifiedData) => {
+  const kind = get(data, ['contentType', 'schema', 'kind'], '');
+
+  // if kind isn't modified or content type is a single type, there is no need to check attributes.
+  if (kind === 'singleType' || kind === modifiedData.kind) {
+    return true;
+  }
+
+  const contentTypeAttributes = get(data, ['contentType', 'schema', 'attributes'], '');
+  const relationAttributes = Object.values(contentTypeAttributes).filter(
+    ({ nature }) => nature && !['oneWay', 'manyWay'].includes(nature)
+  );
+
+  return relationAttributes.length === 0;
+};
+
+export default canEditContentType;

package/admin/src/containers/FormModal/utils/createHeadersArray.js

@@ -0,0 +1,37 @@
+import { set } from 'lodash';
+
+const ALLOWED_KEYS = [
+  'header_label',
+  'header_icon_name',
+  'header_icon_isCustom',
+  'header_info_category',
+  'header_info_name',
+];
+const createHeadersArray = obj => {
+  const array = Object.keys(obj).reduce((acc, current) => {
+    const splitted = current.split('_');
+    const currentKeys = splitted.filter((_, i) => i !== splitted.length - 1);
+
+    if (ALLOWED_KEYS.includes(currentKeys.join('_'))) {
+      const currentKeysIndex = parseInt(splitted[splitted.length - 1] - 1, 10);
+      const path = [
+        currentKeysIndex,
+        ...currentKeys.filter(key => key !== 'header'),
+      ];
+
+      let value = obj[current];
+
+      if (current.includes('isCustom')) {
+        value = obj[current] === 'true';
+      }
+
+      set(acc, path, value);
+    }
+
+    return acc;
+  }, []);
+
+  return array.filter(obj => obj.label !== null);
+};
+
+export default createHeadersArray;

package/admin/src/containers/FormModal/utils/createHeadersObjectFromArray.js

@@ -0,0 +1,27 @@
+import { isObject } from 'lodash';
+
+const createHeadersObjectFromArray = array => {
+  return array.reduce((acc, current, index) => {
+    const createHeaderObject = (obj, i, middle = '') =>
+      Object.keys(obj).reduce((acc1, current1) => {
+        if (isObject(obj[current1])) {
+          return {
+            ...acc1,
+            ...createHeaderObject(obj[current1], i, `_${current1}`),
+          };
+        }
+
+        const name = `header${middle}_${current1}_${i}`;
+
+        acc1[name] = obj[current1];
+
+        return acc1;
+      }, {});
+
+    const headerObject = createHeaderObject(current, index + 1);
+
+    return { ...acc, ...headerObject };
+  }, {});
+};
+
+export default createHeadersObjectFromArray;

package/admin/src/containers/FormModal/utils/createUid.js

@@ -0,0 +1,17 @@
+import slugify from '@sindresorhus/slugify';
+
+const nameToSlug = name => slugify(name, { separator: '-' });
+
+const createUid = name => {
+  const modelName = nameToSlug(name);
+  const uid = `application::${modelName}.${modelName}`;
+
+  return uid;
+};
+
+// From `content-type-builder/services/Components/createComponentUid`
+const createComponentUid = (name, category) => {
+  return `${nameToSlug(category)}.${nameToSlug(name)}`;
+};
+
+export { createComponentUid, createUid, nameToSlug };

package/admin/src/containers/FormModal/utils/getAttributesToDisplay.js

@@ -0,0 +1,35 @@
+const getAttributes = (dataTarget = '', targetUid, nestedComponents) => {
+  const defaultAttributes = [
+    'text',
+    'email',
+    'richtext',
+    'password',
+    'number',
+    'enumeration',
+    'date',
+    'media',
+    'boolean',
+    'json',
+    'relation',
+  ];
+
+  const isPickingAttributeForAContentType = dataTarget === 'contentType';
+  const isNestedInAnotherComponent = nestedComponents.includes(targetUid);
+  const canAddComponentInAnotherComponent =
+    !isPickingAttributeForAContentType && !isNestedInAnotherComponent;
+
+  if (isPickingAttributeForAContentType) {
+    return [
+      [...defaultAttributes, 'uid'],
+      ['component', 'dynamiczone'],
+    ];
+  }
+
+  if (canAddComponentInAnotherComponent) {
+    return [defaultAttributes, ['component']];
+  }
+
+  return [defaultAttributes];
+};
+
+export default getAttributes;

package/admin/src/containers/FormModal/utils/getModalTitleSubHeader.js

@@ -0,0 +1,25 @@
+import getTrad from '../../../utils/getTrad';
+
+const getModalTitleSubHeader = state => {
+  switch (state.modalType) {
+    case 'chooseAttribute':
+      return getTrad(
+        `modalForm.sub-header.chooseAttribute.${
+          state.forTarget.includes('component') ? 'component' : state.kind
+        }`
+      );
+    case 'attribute': {
+      return getTrad(
+        `modalForm.sub-header.attribute.${state.actionType}${
+          state.step !== 'null' && state.step !== null && state.actionType !== 'edit' ? '.step' : ''
+        }`
+      );
+    }
+    case 'addComponentToDynamicZone':
+      return getTrad('modalForm.sub-header.addComponentToDynamicZone');
+    default:
+      return getTrad('configurations');
+  }
+};
+
+export default getModalTitleSubHeader;

package/admin/src/containers/FormModal/utils/getNextSearch.js

@@ -0,0 +1,17 @@
+const getNextSearch = (nextTab, state) => {
+  const newSearch = Object.keys(state).reduce((acc, current, index) => {
+    if (state[current] !== null && current !== 'pathToSchema') {
+      if (current !== 'settingType') {
+        acc = `${acc}${index === 0 ? '' : '&'}${current}=${state[current]}`;
+      } else {
+        acc = `${acc}${index === 0 ? '' : '&'}${current}=${nextTab}`;
+      }
+    }
+
+    return acc;
+  }, '');
+
+  return newSearch;
+};
+
+export default getNextSearch;

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

@@ -0,0 +1,6 @@
+export { default as canEditContentType } from './canEditContentType';
+export { default as createHeadersArray } from './createHeadersArray';
+export { default as createHeadersObjectFromArray } from './createHeadersObjectFromArray';
+export { default as getAttributesToDisplay } from './getAttributesToDisplay';
+export { default as getModalTitleSubHeader } from './getModalTitleSubHeader';
+export { default as getNextSearch } from './getNextSearch';

package/admin/src/containers/FormModal/utils/relations.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-confusing-arrow */
+
+const shouldPluralizeName = nature =>
+  ['manyToMany', 'oneToMany', 'manyWay'].includes(nature) ? 2 : 1;
+
+const shouldPluralizeTargetAttribute = nature =>
+  ['manyToMany', 'manyToOne'].includes(nature) ? 2 : 1;
+
+export { shouldPluralizeName, shouldPluralizeTargetAttribute };

package/admin/src/containers/FormModal/utils/staticData.js

@@ -0,0 +1,43 @@
+const NAVLINKS = [{ id: 'base' }, { id: 'advanced' }];
+
+const INITIAL_STATE_DATA = {
+  actionType: null,
+  attributeName: null,
+  attributeType: null,
+  dynamicZoneTarget: null,
+  forTarget: null,
+  modalType: null,
+  kind: null,
+  pathToSchema: [],
+  settingType: null,
+  step: null,
+  targetUid: null,
+  headerId: null,
+  header_label_1: null,
+  header_icon_name_1: null,
+  header_icon_isCustom_1: null,
+  header_info_category_1: null,
+  header_info_name_1: null,
+  header_label_2: null,
+  header_icon_name_2: null,
+  header_icon_isCustom_2: null,
+  header_info_category_2: null,
+  header_info_name_2: null,
+  header_label_3: null,
+  header_icon_name_3: null,
+  header_icon_isCustom_3: null,
+  header_info_category_3: null,
+  header_info_name_3: null,
+  header_label_4: null,
+  header_icon_name_4: null,
+  header_icon_isCustom_4: null,
+  header_info_category_4: null,
+  header_info_name_4: null,
+  header_label_5: null,
+  header_icon_name_5: null,
+  header_icon_isCustom_5: null,
+  header_info_category_5: null,
+  header_info_name_5: null,
+};
+
+export { NAVLINKS, INITIAL_STATE_DATA };

package/admin/src/containers/Initializer/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ updatePlugin }) => {
+  const ref = useRef();
+  ref.current = updatePlugin;
+
+  useEffect(() => {
+    ref.current(pluginId, 'isReady', true);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  updatePlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

package/admin/src/containers/LeftMenu/Wrapper.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import { colors, sizes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  width: 100%;
+  min-height: calc(100vh - ${sizes.header.height});
+  background-color: ${colors.leftMenu.mediumGrey};
+  padding-top: 3.1rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+`;
+
+export default Wrapper;