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

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

@@ -0,0 +1,220 @@
+/**
+ *
+ * LeftMenu
+ *
+ */
+
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { sortBy, camelCase, upperFirst } from 'lodash';
+import { useHistory } from 'react-router-dom';
+import { LeftMenuList, useGlobalContext } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
+import CustomLink from '../../components/CustomLink';
+import useDataManager from '../../hooks/useDataManager';
+import makeSearch from '../../utils/makeSearch';
+import Wrapper from './Wrapper';
+
+/* eslint-disable indent */
+
+const displayNotificationCTNotSaved = () => {
+  strapi.notification.toggle({
+    type: 'info',
+    message: { id: `${pluginId}.notification.info.creating.notSaved` },
+  });
+};
+
+function LeftMenu({ wait }) {
+  const {
+    components,
+    componentsGroupedByCategory,
+    contentTypes,
+    isInDevelopmentMode,
+    sortedContentTypesList,
+  } = useDataManager();
+  const { emitEvent, formatMessage } = useGlobalContext();
+  const { push } = useHistory();
+  const componentsData = sortBy(
+    Object.keys(componentsGroupedByCategory).map(category => ({
+      name: category,
+      title: category,
+      isEditable: isInDevelopmentMode,
+      onClickEdit: (e, data) => {
+        e.stopPropagation();
+
+        const search = makeSearch({
+          actionType: 'edit',
+          modalType: 'editCategory',
+          categoryName: data.name,
+          header_label_1: formatMessage({
+            id: getTrad('modalForm.header.categories'),
+          }),
+          header_icon_name_1: 'component',
+          header_icon_isCustom_1: false,
+          header_info_category_1: null,
+          header_info_name_1: null,
+          header_label_2: data.name,
+          header_icon_name_2: null,
+          header_icon_isCustom_2: false,
+          header_info_category_2: null,
+          header_info_name_2: null,
+
+          settingType: 'base',
+        });
+
+        push({ search });
+      },
+      links: sortBy(
+        componentsGroupedByCategory[category].map(compo => ({
+          name: compo.uid,
+          to: `/plugins/${pluginId}/component-categories/${category}/${compo.uid}`,
+          title: compo.schema.name,
+        })),
+        obj => obj.title
+      ),
+    })),
+    obj => obj.title
+  );
+
+  const canOpenModalCreateCTorComponent = () => {
+    return (
+      !Object.keys(contentTypes).some(ct => contentTypes[ct].isTemporary === true) &&
+      !Object.keys(components).some(component => components[component].isTemporary === true)
+    );
+  };
+
+  const handleClickOpenModal = async (modalType, kind = '') => {
+    const type = kind === 'singleType' ? kind : modalType;
+
+    if (canOpenModalCreateCTorComponent()) {
+      emitEvent(`willCreate${upperFirst(camelCase(type))}`);
+
+      await wait();
+      const search = makeSearch({
+        modalType,
+        kind,
+        actionType: 'create',
+        settingType: 'base',
+        forTarget: modalType,
+        headerId: getTrad(`modalForm.${type}.header-create`),
+        header_icon_isCustom_1: 'false',
+        header_icon_name_1: type,
+        header_label_1: 'null',
+      });
+      push({
+        search,
+      });
+    } else {
+      displayNotificationCTNotSaved();
+    }
+  };
+
+  const displayedContentTypes = useMemo(() => {
+    return sortedContentTypesList
+      .filter(obj => obj.visible)
+      .map(obj => {
+        if (obj.plugin) {
+          return {
+            ...obj,
+            CustomComponent: () => (
+              <p style={{ justifyContent: 'normal' }}>
+                {obj.title}&nbsp;
+                <Text
+                  as="span"
+                  ellipsis
+                  // This is needed here
+                  style={{ fontStyle: 'italic' }}
+                  fontWeight="inherit"
+                  lineHeight="inherit"
+                >
+                  ({formatMessage({ id: getTrad('from') })}: {obj.plugin})&nbsp;
+                </Text>
+              </p>
+            ),
+          };
+        }
+
+        return obj;
+      });
+  }, [sortedContentTypesList, formatMessage]);
+
+  const data = [
+    {
+      name: 'models',
+      title: {
+        id: `${pluginId}.menu.section.models.name.`,
+      },
+      searchable: true,
+      customLink: isInDevelopmentMode
+        ? {
+            Component: CustomLink,
+            componentProps: {
+              id: `${pluginId}.button.model.create`,
+              onClick: () => {
+                handleClickOpenModal('contentType', 'collectionType');
+              },
+            },
+          }
+        : null,
+      links: displayedContentTypes.filter(contentType => contentType.kind === 'collectionType'),
+    },
+    {
+      name: 'singleTypes',
+      title: {
+        id: `${pluginId}.menu.section.single-types.name.`,
+      },
+      searchable: true,
+      customLink: isInDevelopmentMode
+        ? {
+            Component: CustomLink,
+            componentProps: {
+              id: `${pluginId}.button.single-types.create`,
+              onClick: () => {
+                handleClickOpenModal('contentType', 'singleType');
+              },
+            },
+          }
+        : null,
+      links: displayedContentTypes.filter(singleType => singleType.kind === 'singleType'),
+    },
+    {
+      name: 'components',
+      title: {
+        id: `${pluginId}.menu.section.components.name.`,
+      },
+      searchable: true,
+      customLink: isInDevelopmentMode
+        ? {
+            Component: CustomLink,
+            componentProps: {
+              id: `${pluginId}.button.component.create`,
+              onClick: () => {
+                handleClickOpenModal('component');
+              },
+            },
+          }
+        : null,
+      links: componentsData,
+    },
+  ];
+
+  return (
+    <Wrapper className="col-md-3">
+      {data.map(list => {
+        return <LeftMenuList {...list} key={list.name} />;
+      })}
+    </Wrapper>
+  );
+}
+
+LeftMenu.defaultProps = {
+  wait: () => {},
+};
+
+LeftMenu.propTypes = {
+  wait: PropTypes.func,
+};
+
+export default LeftMenu;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { ViewContainer } from 'strapi-helper-plugin';
+
+const Wrapper = styled(ViewContainer)`
+  .button-secondary {
+    &:hover {
+      background-color: #ffffff !important;
+      box-shadow: 0 0 0 #fff;
+    }
+  }
+  .button-submit {
+    min-width: 140px;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,322 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Prompt, useHistory, useLocation } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { get, has, isEqual } from 'lodash';
+import { BackHeader, ListWrapper, useGlobalContext } from 'strapi-helper-plugin';
+import { Header } from '@buffetjs/custom';
+import ListViewContext from '../../contexts/ListViewContext';
+import convertAttrObjToArray from '../../utils/convertAttrObjToArray';
+import getAttributeDisplayedType from '../../utils/getAttributeDisplayedType';
+import pluginId from '../../pluginId';
+import getComponents from '../../utils/getComponents';
+import getTrad from '../../utils/getTrad';
+import makeSearch from '../../utils/makeSearch';
+import ListRow from '../../components/ListRow';
+import List from '../../components/List';
+import ListButton from '../../components/ListButton';
+import useDataManager from '../../hooks/useDataManager';
+import ListHeader from '../../components/ListHeader';
+import LeftMenu from '../LeftMenu';
+import Wrapper from './Wrapper';
+
+/* eslint-disable indent */
+
+const ListView = () => {
+  const {
+    initialData,
+    modifiedData,
+    isInDevelopmentMode,
+    isInContentTypeView,
+    submitData,
+    toggleModalCancel,
+  } = useDataManager();
+
+  const { emitEvent, formatMessage, plugins } = useGlobalContext();
+  const { push, goBack } = useHistory();
+  const { search } = useLocation();
+  const [enablePrompt, togglePrompt] = useState(true);
+
+  useEffect(() => {
+    if (search === '') {
+      togglePrompt(true);
+    }
+  }, [search]);
+
+  // Disabling the prompt on the first render if one of the modal is open
+  useEffect(() => {
+    if (search !== '') {
+      togglePrompt(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const firstMainDataPath = isInContentTypeView ? 'contentType' : 'component';
+  const mainDataTypeAttributesPath = [firstMainDataPath, 'schema', 'attributes'];
+  const targetUid = get(modifiedData, [firstMainDataPath, 'uid']);
+  const isTemporary = get(modifiedData, [firstMainDataPath, 'isTemporary'], false);
+  const contentTypeKind = get(modifiedData, [firstMainDataPath, 'schema', 'kind'], null);
+
+  const attributes = get(modifiedData, mainDataTypeAttributesPath, {});
+  const attributesLength = Object.keys(attributes).length;
+  const currentDataName = get(initialData, [firstMainDataPath, 'schema', 'name'], '');
+  const isFromPlugin = has(initialData, [firstMainDataPath, 'plugin']);
+  const hasModelBeenModified = !isEqual(modifiedData, initialData);
+  const forTarget = isInContentTypeView ? 'contentType' : 'component';
+
+  const handleClickAddField = async (
+    forTarget,
+    targetUid,
+    firstHeaderObj,
+    secondHeaderObj,
+    thirdHeaderObj,
+    fourthHeaderObj
+  ) => {
+    // disable the prompt
+    await wait();
+
+    const searchObj = {
+      modalType: 'chooseAttribute',
+      forTarget,
+      targetUid,
+      ...firstHeaderObj,
+      ...secondHeaderObj,
+      ...thirdHeaderObj,
+      ...fourthHeaderObj,
+    };
+
+    push({ search: makeSearch(searchObj) });
+  };
+
+  const handleClickAddComponentToDZ = async dzName => {
+    const firstHeaderObject = {
+      header_label_1: currentDataName,
+      header_icon_name_1: 'dynamiczone',
+      header_icon_isCustom_1: false,
+    };
+    const secondHeaderObj = {
+      header_label_2: dzName,
+    };
+    const search = {
+      modalType: 'addComponentToDynamicZone',
+      forTarget: 'contentType',
+      targetUid,
+      dynamicZoneTarget: dzName,
+      settingType: 'base',
+      step: '1',
+      actionType: 'edit',
+      ...firstHeaderObject,
+      ...secondHeaderObj,
+    };
+
+    await wait();
+
+    push({ search: makeSearch(search, true) });
+  };
+
+  const handleClickEditField = async (
+    forTarget,
+    targetUid,
+    attributeName,
+    type,
+    firstHeaderObj,
+    secondHeaderObj,
+    thirdHeaderObj,
+    fourthHeaderObj,
+    fifthHeaderObj
+  ) => {
+    const attributeType = getAttributeDisplayedType(type);
+
+    await wait();
+
+    const search = {
+      modalType: 'attribute',
+      actionType: 'edit',
+      settingType: 'base',
+      forTarget,
+      targetUid,
+      attributeName,
+      attributeType,
+      step: type === 'component' ? '2' : null,
+      ...firstHeaderObj,
+      ...secondHeaderObj,
+      ...thirdHeaderObj,
+      ...fourthHeaderObj,
+      ...fifthHeaderObj,
+    };
+
+    await wait();
+
+    push({ search: makeSearch(search, true) });
+  };
+
+  const getDescription = () => {
+    const description = get(modifiedData, [firstMainDataPath, 'schema', 'description'], null);
+
+    return (
+      description ||
+      formatMessage({
+        id: `${pluginId}.modelPage.contentHeader.emptyDescription.description`,
+      })
+    );
+  };
+
+  const wait = async () => {
+    togglePrompt(false);
+
+    return new Promise(resolve => setTimeout(resolve, 100));
+  };
+  const label = get(modifiedData, [firstMainDataPath, 'schema', 'name'], '');
+  const kind = get(modifiedData, [firstMainDataPath, 'schema', 'kind'], '');
+
+  const headerProps = {
+    actions: isInDevelopmentMode
+      ? [
+          {
+            color: 'cancel',
+            onClick: () => {
+              toggleModalCancel();
+            },
+            label: formatMessage({
+              id: `${pluginId}.form.button.cancel`,
+            }),
+            type: 'button',
+            disabled: isEqual(modifiedData, initialData),
+          },
+          {
+            className: 'button-submit',
+            color: 'success',
+            onClick: () => submitData(),
+            label: formatMessage({
+              id: `${pluginId}.form.button.save`,
+            }),
+            type: 'submit',
+            disabled: isEqual(modifiedData, initialData),
+          },
+        ]
+      : [],
+    title: {
+      label,
+      cta:
+        isInDevelopmentMode && !isFromPlugin
+          ? {
+              icon: 'pencil-alt',
+              onClick: async () => {
+                await wait();
+
+                const contentType = kind || firstMainDataPath;
+
+                if (contentType === 'collectionType') {
+                  emitEvent('willEditNameOfContentType');
+                }
+                if (contentType === 'singleType') {
+                  emitEvent('willEditNameOfSingleType');
+                }
+
+                push({
+                  search: makeSearch({
+                    modalType: firstMainDataPath,
+                    actionType: 'edit',
+                    settingType: 'base',
+                    forTarget: firstMainDataPath,
+                    targetUid,
+                    header_label_1: label,
+                    header_icon_isCustom_1: false,
+                    header_icon_name_1:
+                      contentType === 'singleType' ? contentType : firstMainDataPath,
+                    headerId: getTrad('modalForm.header-edit'),
+                  }),
+                });
+              },
+            }
+          : null,
+    },
+    content: getDescription(),
+  };
+
+  const listTitle = [
+    formatMessage(
+      {
+        id: `${pluginId}.table.attributes.title.${attributesLength > 1 ? 'plural' : 'singular'}`,
+      },
+      { number: attributesLength }
+    ),
+  ];
+
+  const addButtonProps = {
+    icon: true,
+    color: 'primary',
+    label: formatMessage({ id: `${pluginId}.button.attributes.add.another` }),
+    onClick: () => {
+      const headerDisplayObject = {
+        header_label_1: currentDataName,
+        header_icon_name_1: forTarget === 'contentType' ? contentTypeKind : forTarget,
+        header_icon_isCustom_1: false,
+      };
+      handleClickAddField(forTarget, targetUid, headerDisplayObject);
+    },
+  };
+
+  const listInjectedComponents = useMemo(() => {
+    return getComponents('listView', 'list.link', plugins, {
+      targetUid,
+      isTemporary,
+      isInContentTypeView,
+      contentTypeKind,
+    });
+  }, [plugins, isTemporary, targetUid, isInContentTypeView, contentTypeKind]);
+
+  const listActions = isInDevelopmentMode
+    ? [...listInjectedComponents, <ListButton {...addButtonProps} key="add-button" />]
+    : listInjectedComponents;
+
+  const CustomRow = props => {
+    const { name } = props;
+
+    return <ListRow {...props} attributeName={name} name={name} onClick={handleClickEditField} />;
+  };
+
+  CustomRow.defaultProps = {
+    name: null,
+  };
+
+  CustomRow.propTypes = {
+    name: PropTypes.string,
+  };
+
+  return (
+    <ListViewContext.Provider value={{ openModalAddField: handleClickAddField }}>
+      <Wrapper>
+        <BackHeader onClick={goBack} />
+        <Prompt
+          message={formatMessage({ id: getTrad('prompt.unsaved') })}
+          when={hasModelBeenModified && enablePrompt}
+        />
+        <div className="container-fluid">
+          <div className="row">
+            <LeftMenu wait={wait} />
+            <div className="col-md-9 content" style={{ paddingLeft: '30px', paddingRight: '30px' }}>
+              <Header {...headerProps} />
+
+              <ListWrapper style={{ marginBottom: 80 }}>
+                <ListHeader actions={listActions} title={listTitle} />
+                <List
+                  items={convertAttrObjToArray(attributes)}
+                  customRowComponent={props => <CustomRow {...props} />}
+                  addComponentToDZ={handleClickAddComponentToDZ}
+                  targetUid={targetUid}
+                  dataType={forTarget}
+                  dataTypeName={currentDataName}
+                  mainTypeName={currentDataName}
+                  editTarget={forTarget}
+                  isMain
+                />
+              </ListWrapper>
+            </div>
+          </div>
+        </div>
+      </Wrapper>
+    </ListViewContext.Provider>
+  );
+};
+
+export default ListView;

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

@@ -0,0 +1,20 @@
+/**
+ * NotFoundPage
+ *
+ * This is the page we show when the user visits a url that doesn't have a route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a neccessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React from 'react';
+
+import { NotFound } from 'strapi-helper-plugin';
+
+function NotFoundPage(props) {
+  return <NotFound {...props} />;
+}
+
+export default NotFoundPage;

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

@@ -0,0 +1,22 @@
+import React, { Suspense, lazy } from 'react';
+import { Switch, Route, useRouteMatch, useParams } from 'react-router-dom';
+import { LoadingIndicatorPage } from 'strapi-helper-plugin';
+
+const ListView = lazy(() => import('../ListView'));
+
+const RecursivePath = () => {
+  const { url } = useRouteMatch();
+  const { categoryUid } = useParams();
+
+  return (
+    <Suspense fallback={<LoadingIndicatorPage />}>
+      <Switch>
+        <Route path={`${url}/:componentUid`}>
+          <ListView categoryId={categoryUid} />
+        </Route>
+      </Switch>
+    </Suspense>
+  );
+};
+
+export default RecursivePath;

package/admin/src/contexts/DataManagerContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DataManagerContext = createContext();
+
+export default DataManagerContext;

package/admin/src/contexts/ListViewContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ListViewContext = createContext();
+
+export default ListViewContext;

package/admin/src/hooks/useDataManager.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import DataManagerContext from '../contexts/DataManagerContext';
+
+const useDataManager = () => useContext(DataManagerContext);
+
+export default useDataManager;

package/admin/src/hooks/useListView.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import ListViewContext from '../contexts/ListViewContext';
+
+const useListView = () => useContext(ListViewContext);
+
+export default useListView;

package/admin/src/icons/Curve.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Curve = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.08 21" {...props}>
+    <g>
+      <path
+        d="M2.58 2.5q-1.2 16 16 16"
+        fill="none"
+        stroke={props.fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="5"
+      />
+    </g>
+  </svg>
+);
+
+Curve.defaultProps = {
+  fill: '#f3f4f4',
+};
+Curve.propTypes = {
+  fill: PropTypes.string,
+};
+
+export default Curve;