strapi-plugin-navigation 1.1.1 → 2.0.0-beta.3

package/admin/src/pages/View/index.js

@@ -0,0 +1,209 @@
+/*
+ *
+ * Navigation View
+ *
+ */
+
+import React, { memo, useMemo, useState } from 'react';
+import { useIntl } from "react-intl";
+import { isEmpty, get } from "lodash";
+
+// Design System
+import { Main } from '@strapi/design-system/Main';
+import { ContentLayout } from '@strapi/design-system/Layout';
+import { Button } from '@strapi/design-system/Button';
+import { LoadingIndicatorPage } from "@strapi/helper-plugin";
+import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
+import { IconButton } from '@strapi/design-system/IconButton';
+import EmptyDocumentsIcon from '@strapi/icons/EmptyDocuments';
+import PlusIcon from "@strapi/icons/Plus";
+import SearchIcon from "@strapi/icons/Search";
+
+// Components 
+import List from '../../components/NavigationItemList';
+import NavigationContentHeader from './components/NavigationContentHeader';
+import NavigationHeader from './components/NavigationHeader';
+import NavigationItemPopUp from "./components/NavigationItemPopup";
+import useDataManager from "../../hooks/useDataManager";
+import { getTrad } from '../../translations';
+import {
+  transformItemToViewPayload,
+  transformToRESTPayload,
+  usedContentTypes,
+  validateNavigationStructure,
+} from './utils/parsers';
+
+const View = () => {
+  const {
+    items: availableNavigations,
+    activeItem: activeNavigation,
+    changedActiveItem: changedActiveNavigation,
+    config,
+    navigationItemPopupOpened,
+    isLoading,
+    isLoadingForAdditionalDataToBeSet,
+    isLoadingForSubmit,
+    handleChangeNavigationItemPopupVisibility,
+    handleChangeSelection,
+    handleChangeNavigationData,
+    handleResetNavigationData,
+    handleSubmitNavigation,
+    getContentTypeItems,
+    error
+  } = useDataManager();
+
+  const [activeNavigationItem, setActiveNavigationItemState] = useState({});
+  const { formatMessage } = useIntl();
+
+  const structureHasErrors = !validateNavigationStructure((changedActiveNavigation || {}).items);
+  const navigationSelectValue = get(activeNavigation, "id", null);
+  const handleSave = () => isLoadingForSubmit || structureHasErrors
+    ? null
+    : handleSubmitNavigation(formatMessage, transformToRESTPayload(changedActiveNavigation, config));
+
+  const changeNavigationItemPopupState = (visible, editedItem = {}) => {
+    setActiveNavigationItemState(editedItem);
+    handleChangeNavigationItemPopupVisibility(visible);
+  };
+
+  const addNewNavigationItem = (
+    e,
+    viewId = null,
+    isMenuAllowedLevel = true,
+    levelPath = '',
+    parentAttachedToMenu = true,
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    changeNavigationItemPopupState(true, {
+      viewParentId: viewId,
+      isMenuAllowedLevel,
+      levelPath,
+      parentAttachedToMenu,
+    });
+  };
+
+  const usedContentTypesData = useMemo(
+    () => changedActiveNavigation ? usedContentTypes(changedActiveNavigation.items) : [],
+    [changedActiveNavigation],
+  );
+
+  const pullUsedContentTypeItem = (items = []) =>
+    items.reduce((prev, curr) =>
+      [...prev, curr.relatedRef ? {
+        __collectionUid: curr.relatedRef.__collectionUid,
+        id: curr.relatedRef.id
+      } : undefined, ...pullUsedContentTypeItem(curr.items)].filter(item => item)
+      , []);
+  const usedContentTypeItems = pullUsedContentTypeItem((changedActiveNavigation || {}).items);
+  const handleSubmitNavigationItem = (payload) => {
+    const changedStructure = {
+      ...changedActiveNavigation,
+      items: transformItemToViewPayload(payload, changedActiveNavigation.items, config),
+    };
+    handleChangeNavigationData(changedStructure, true);
+  };
+
+  const handleItemRemove = (item) => {
+    handleSubmitNavigationItem({
+      ...item,
+      removed: true,
+    });
+  }
+
+  const handleItemRestore = (item) => {
+    handleSubmitNavigationItem({
+      ...item,
+      removed: false,
+    });
+  };
+
+  const handleItemEdit = (
+    item,
+    levelPath = '',
+    parentAttachedToMenu = true,
+  ) => {
+    changeNavigationItemPopupState(true, {
+      ...item,
+      levelPath,
+      parentAttachedToMenu,
+    });
+  };
+
+  const onPopUpClose = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    changeNavigationItemPopupState(false);
+  };
+
+  return (
+    <Main labelledBy="title" aria-busy={isLoadingForSubmit}>
+      <NavigationHeader
+        structureHasErrors={structureHasErrors}
+        handleSave={handleSave}
+      />
+      <ContentLayout>
+        {isLoading && <LoadingIndicatorPage />}
+        {changedActiveNavigation && (
+          <>
+            <NavigationContentHeader
+              startActions={<IconButton icon={<SearchIcon />} />}
+              endActions={<Button
+                onClick={addNewNavigationItem}
+                startIcon={<PlusIcon />}
+                disabled={isLoadingForSubmit}
+                type="submit"
+              >
+                {formatMessage(getTrad('header.action.newItem'))}
+              </Button>}
+            />
+            {isEmpty(changedActiveNavigation.items || []) && (
+              <EmptyStateLayout
+                action={
+                  <Button
+                    variant='secondary'
+                    startIcon={<PlusIcon />}
+                    label={formatMessage(getTrad('empty.cta'))}
+                    onClick={addNewNavigationItem}
+                  >
+                    {formatMessage(getTrad('empty.cta'))}
+                  </Button>
+                }
+                icon={<EmptyDocumentsIcon width='10rem' />}
+                content={formatMessage(getTrad('empty'))}
+              />
+            )}
+            {
+              !isEmpty(changedActiveNavigation.items || [])
+              && <List
+                items={changedActiveNavigation.items || []}
+                onItemLevelAdd={addNewNavigationItem}
+                onItemRemove={handleItemRemove}
+                onItemEdit={handleItemEdit}
+                onItemRestore={handleItemRestore}
+                root
+                error={error}
+                allowedLevels={config.allowedLevels}
+                contentTypes={config.contentTypes}
+                isParentAttachedToMenu={true}
+                contentTypesNameFields={config.contentTypesNameFields}
+              />
+            }
+          </>
+        )}
+      </ContentLayout>
+      {navigationItemPopupOpened && <NavigationItemPopUp
+        isLoading={isLoadingForAdditionalDataToBeSet}
+        data={activeNavigationItem}
+        config={config}
+        usedContentTypesData={usedContentTypesData}
+        usedContentTypeItems={usedContentTypeItems}
+        getContentTypeItems={getContentTypeItems}
+        onSubmit={handleSubmitNavigationItem}
+        onClose={onPopUpClose}
+      />}
+    </Main>
+  );
+};
+
+export default memo(View);

package/admin/src/{containers → pages}/View/utils/form.js

@@ -1,4 +1,4 @@
-import { getYupInnerErrors } from 'strapi-helper-plugin';
+import { getYupInnerErrors } from '@strapi/helper-plugin';
 
 export const checkFormValidity = async (data, schema) => {
   let errors = null;

package/admin/src/{containers → pages}/View/utils/parsers.js

@@ -1,4 +1,4 @@
-import { isUuid, uuid } from 'uuidv4';
+import { v4 as uuid, validate as isUuid } from 'uuid'
 import { find, get, isArray, isEmpty, isNil, isNumber, isObject, isString, last, omit, orderBy } from 'lodash';
 import { navigationItemType } from './enums';
 
@@ -28,7 +28,7 @@ export const transformItemToRESTPayload = (
   const { contentTypes = [] } = config;
 
   const parsedRelated = Number(related);
-  const relatedId = isExternal || isNaN(parsedRelated) ? related : parsedRelated;
+  const relatedId = isExternal || isNaN(parsedRelated) ? related.value || related : parsedRelated;
 
   const relatedContentType = relatedType ?
     find(contentTypes,
@@ -46,7 +46,8 @@ export const transformItemToRESTPayload = (
     order,
     uiRouterKey,
     menuAttached,
-    audience: audience.map((audienceItem) => isObject(audienceItem) ? audienceItem.value || audienceItem.id : audienceItem,
+    audience: audience.map((audienceItem) =>
+      isObject(audienceItem) ? audienceItem.value : audienceItem,
     ),
     path: isExternal ? undefined : path,
     externalPath: isExternal ? externalPath : undefined,
@@ -64,7 +65,7 @@ export const transformItemToRESTPayload = (
 };
 
 export const transformToRESTPayload = (payload, config = {}) => {
-	const { id, name, visible, items } = payload;
+  const { id, name, visible, items } = payload;
   return {
     id,
     name,
@@ -90,7 +91,7 @@ const linkRelations = (item, config) => {
       relatedRef: {
         ...omit(relatedContentType, 'collectionName'),
         isSingle,
-        __collectionName: relatedContentType.uid,
+        __collectionUid: relatedContentType.uid,
       },
     };
   }
@@ -125,7 +126,7 @@ const linkRelations = (item, config) => {
       related: relatedItem.id,
       relatedRef: {
         ...relatedItem,
-        __collectionName: uid,
+        __collectionUid: uid,
         isSingle,
         labelSingular,
       },
@@ -138,7 +139,7 @@ const linkRelations = (item, config) => {
     relation = {
       relatedRef: {
         ...relatedRef,
-        __collectionName: uid,
+        __collectionUid: uid,
         __contentType: contentTypeName,
         isSingle,
         labelSingular,
@@ -233,7 +234,7 @@ export const transformItemToViewPayload = (payload, items = [], config) => {
 };
 
 export const prepareItemToViewPayload = (items = [], viewParentId = null, config = {}) =>
-  items.map((item, n) => {
+  reOrderItems(items.map((item, n) => {
     const viewId = uuid();
     return {
       ...linkRelations({
@@ -245,12 +246,12 @@ export const prepareItemToViewPayload = (items = [], viewParentId = null, config
       }, config),
       items: prepareItemToViewPayload(item.items, viewId, config),
     };
-  });
+  }));
 
 export const extractRelatedItemLabel = (item = {}, fields = {}, config = {}) => {
   const { contentTypes = [] } = config;
-  const { __collectionName } = item;
-  const contentType = contentTypes.find(_ => _.uid === __collectionName)
+  const { __collectionUid } = item;
+  const contentType = contentTypes.find(_ => _.uid === __collectionUid)
   const { default: defaultFields = [] } = fields;
   return get(fields, `${contentType ? contentType.collectionName : ''}`, defaultFields).map((_) => item[_]).filter((_) => _)[0] || '';
 };
@@ -275,7 +276,7 @@ export const isRelationPublished = ({ relatedRef, relatedType = {}, type, isColl
     return relatedType.available || relatedRef.available;
   }
   if ((type === navigationItemType.INTERNAL)) {
-    const isHandledByPublshFlow =  relatedRef ? 'published_at' in relatedRef : false;
+    const isHandledByPublshFlow = relatedRef ? 'published_at' in relatedRef : false;
     if (isHandledByPublshFlow) {
       return get(relatedRef, 'published_at', true);
     }

package/admin/src/pluginId.js

@@ -1,4 +1,5 @@
-const pluginPkg = require("../../package.json");
-const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, "");
+const pluginPkg = require('../../package.json');
+
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
 
 module.exports = pluginId;

package/admin/src/translations/en.json

@@ -1,39 +1,48 @@
 {
-  "plugin.name": "UI Navigation",
-  "header.title": "Navigation",
-  "header.description": "Define your portal navigation",
-  "submit.cta.cancel": "Cancel",
-  "submit.cta.save": "Save",
-  "empty": "Navigation container is empty",
-  "empty.cta": "Create first item",
-  "popup.item.header": "Manage navigation item",
-  "popup.item.form.title.label": "Title",
-  "popup.item.form.title.placeholder": "Enter the item title or leave blank to pull from related entity",
-  "popup.item.form.uiRouterKey.label": "UI router key",
-  "popup.item.form.uiRouterKey.placeholder": "If empty, auto generated by \"Title\"",
-  "popup.item.form.path.label": "URL",
-  "popup.item.form.path.placeholder": "Unique url part identifies this item",
-  "popup.item.form.path.preview": "Preview:",
-  "popup.item.form.externalPath.label": "External URL",
-  "popup.item.form.externalPath.placeholder": "Link to the external source",
-  "popup.item.form.externalPath.validation.type": "This value is not a proper url." ,
-  "popup.item.form.menuAttached.label": "Attach to menu",
-  "popup.item.form.type.label": "Type",
-  "popup.item.form.type.internal.label": "Internal source",
-  "popup.item.form.type.external.label": "External source",
-  "popup.item.form.audience.label": "Audience",
-  "popup.item.form.audience.placeholder": "Type to start searching...",
-  "popup.item.form.relatedSection.label": "Relation to",
-  "popup.item.form.relatedType.label": "Content Type",
-  "popup.item.form.related.label": "Entity",
-  "popup.item.form.related.empty": "There are no more entities of \"{ contentTypeName }\", you're elligible to select",
-  "popup.item.form.button.create": "Create item",
-  "popup.item.form.button.update": "Update item",
-  "popup.item.form.button.restore": "Restore item",
-  "popup.item.form.button.remove": "Remove",
-  "notification.navigation.submit": "Navigation changes has been saved",
-  "notification.navigation.error": "Duplicate path: { path } in parent: { parentTitle } for { errorTitles } items",
-  "notification.navigation.item.relation": "Entity relation does not exist!",
-  "notification.navigation.item.relation.status.draft": "draft",
-  "notification.navigation.item.relation.status.published": "published"
-}
+	"plugin.name": "UI Navigation",
+	"header.title": "Navigation",
+	"header.description": "Define your portal navigation",
+	"header.action.newItem": "New Item",
+	"submit.cta.cancel": "Cancel",
+	"submit.cta.save": "Save",
+	"empty": "Navigation container is empty",
+	"empty.cta": "Create first item",
+	"popup.item.header": "Manage navigation item",
+	"popup.item.form.title.label": "Title",
+	"popup.item.form.title.placeholder": "Enter the item title or leave blank to pull from related entity",
+	"popup.item.form.uiRouterKey.label": "UI router key",
+	"popup.item.form.uiRouterKey.placeholder": "If empty, auto generated by \"Title\"",
+	"popup.item.form.path.label": "URL",
+	"popup.item.form.path.placeholder": "Unique url part identifies this item",
+	"popup.item.form.path.preview": "Preview:",
+	"popup.item.form.externalPath.label": "External URL",
+	"popup.item.form.externalPath.placeholder": "Link to the external source",
+	"popup.item.form.externalPath.validation.type": "This value is not a proper url." ,
+	"popup.item.form.menuAttached.label": "Attach to menu",
+	"popup.item.form.type.label": "Internal link",
+	"popup.item.form.type.internal.label": "Internal source",
+	"popup.item.form.type.external.label": "External source",
+	"popup.item.form.audience.label": "Audience",
+	"popup.item.form.audience.placeholder": "Type to start searching...",
+	"popup.item.form.relatedSection.label": "Relation to",
+	"popup.item.form.relatedType.label": "Content Type",
+	"popup.item.form.relatedType.placeholder": "Select content type...",
+	"popup.item.form.related.label": "Entity",
+	"popup.item.form.related.empty": "There are no more entities of \"{ contentTypeName }\" to select",
+	"popup.item.form.button.create": "Create item",
+	"popup.item.form.button.update": "Update item",
+	"popup.item.form.button.restore": "Restore item",
+	"popup.item.form.button.remove": "Remove",
+	"popup.item.form.button.save": "Save",
+	"popup.item.form.button.cancel": "Cancel",
+	"notification.navigation.submit": "Navigation changes has been saved",
+	"notification.navigation.error": "Duplicate path: { path } in parent: { parentTitle } for { errorTitles } items",
+	"notification.navigation.item.relation": "Entity relation does not exist!",
+	"notification.navigation.item.relation.status.draft": "draft",
+	"notification.navigation.item.relation.status.published": "published",
+	"navigation.item.action.newItem": "New nested item",
+	"navigation.item.badge.removed": "Removed",
+	"navigation.item.badge.draft": "Draft",
+	"navigation.item.badge.published": "Published"
+  }
+  

package/admin/src/translations/fr.json

@@ -31,9 +31,15 @@
   "popup.item.form.button.update": "Modifier l'élément",
   "popup.item.form.button.restore": "Restaurer l'élément",
   "popup.item.form.button.remove": "Supprimer",
+  "popup.item.form.button.save": "Sauvegarder",
+  "popup.item.form.button.cancel": "Annuler",
   "notification.navigation.submit": "Les modifications de navigation ont été enregistrées",
   "notification.navigation.error": "Chemin indisponible: { path } dans le parent: { parentTitle } pour l'élément { errorTitles }",
   "notification.navigation.item.relation": "L'entitée n'a pas de relations!",
   "notification.navigation.item.relation.status.draft": "brouillon",
-  "notification.navigation.item.relation.status.published": "publié"
+  "notification.navigation.item.relation.status.published": "publié",
+  "navigation.item.action.newItem": "Nouvel élément imbriqué",
+	"navigation.item.badge.removed": "Supprimé",
+	"navigation.item.badge.draft": "Brouillon",
+	"navigation.item.badge.published": "Publié"
 }

package/admin/src/utils/getTrad.js

@@ -1,5 +1,5 @@
-import pluginId from "../pluginId";
+import pluginId from '../pluginId';
 
-const getTrad = (id) => `${pluginId}.${id}`;
+const getTrad = id => `${pluginId}.${id}`;
 
 export default getTrad;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "1.1.1",
+  "version": "2.0.0-beta.3",
   "description": "Strapi - Navigation plugin",
   "strapi": {
-    "name": "Navigation",
+    "name": "navigation",
     "icon": "hamburger",
-    "description": "UI navigation management"
+    "description": "UI navigation management",
+    "kind": "plugin"
   },
   "repository": {
     "type": "git",
@@ -27,9 +28,6 @@
     "reactstrap": "8.4.1",
     "redux-saga": "^0.16.0",
     "request": "^2.83.0",
-    "strapi-helper-plugin": "3.6.5",
-    "strapi-utils": "3.6.5",
-    "uuidv4": "^6.2.6",
     "slugify": "^1.4.5",
     "pluralize": "^8.0.0"
   },
@@ -50,6 +48,16 @@
       "name": "VirtusLab // Mateusz Ziarko",
       "email": "mziarko@virtuslab.com",
       "url": "https://virtuslab.com"
+    },
+    {
+      "name": "VirtusLab // Maksymilian Pamuła",
+      "email": "mpamula@virtuslab.com",
+      "url": "https://virtuslab.com"
+    },
+    {
+      "name": "VirtusLab // Maciej Witkowski",
+      "email": "mwitkowski@virtuslab.com",
+      "url": "https://virtuslab.com"
     }
   ],
   "engines": {

package/server/bootstrap.js

@@ -0,0 +1,41 @@
+const { isEmpty } = require("lodash");
+
+module.exports = async ({ strapi }) => {
+  // Check if the plugin users-permissions is installed because the navigation needs it
+  if (Object.keys(strapi.plugins).indexOf("users-permissions") === -1) {
+    throw new Error(
+      "In order to make the navigation plugin work the users-permissions plugin is required",
+    );
+  }
+  // Add permissions
+  const actions = [
+    {
+      section: "plugins",
+      displayName: "Access the Navigation",
+      uid: "read",
+      pluginName: "navigation",
+    },
+    {
+      section: "plugins",
+      displayName: "Ability to change the Navigation",
+      uid: "update",
+      pluginName: "navigation",
+    },
+  ];
+
+  const navigations = await strapi
+    .query("plugin::navigation.navigation")
+    .findMany();
+  if (isEmpty(navigations)) {
+    await strapi
+      .query("plugin::navigation.navigation")
+      .create({
+        data: {
+          name: 'Main navigation',
+          slug: 'main-navigation',
+          visible: true,
+        }
+      });
+  }
+  await strapi.admin.services.permission.actionProvider.registerMany(actions);
+};

package/server/config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	default: {
+		additionalFields: [],
+		contentTypes: [],
+		contentTypesNameFields: {},
+		allowedLevels: 2
+	}
+}

package/server/content-types/audience/index.js

@@ -0,0 +1,9 @@
+"use strict"
+
+const schema = require("./schema");
+const lifecycle = require("./lifecycle");
+
+module.exports = {
+  lifecycle,
+  schema
+};

package/{models/audience.settings.json → server/content-types/audience/schema.json}

@@ -1,8 +1,10 @@
 {
   "collectionName": "audience",
   "info": {
-    "name": "audience",
-    "description": ""
+    "singularName": "audience",
+    "pluralName": "audiences",
+    "displayName": "Audience",
+    "name": "audience"
   },
   "options": {
     "increments": true,

package/server/content-types/index.js

@@ -0,0 +1,13 @@
+"use strict"
+
+const navigationsItemsRelated = require("./navigations-items-related");
+const navigationItem = require("./navigation-item");
+const navigation = require("./navigation");
+const audience = require("./audience");
+
+module.exports = {
+  audience,
+  navigation,
+  "navigation-item": navigationItem,
+  "navigations-items-related": navigationsItemsRelated
+};

package/server/content-types/navigation/index.js

@@ -0,0 +1,9 @@
+"use strict"
+
+const schema = require("./schema");
+const lifecycle = require("./lifecycle");
+
+module.exports = {
+  lifecycle,
+  schema
+};

package/server/content-types/navigation/schema.js

@@ -0,0 +1,45 @@
+module.exports = {
+  collectionName: "navigations",
+  info: {
+    singularName: "navigation",
+    pluralName: "navigations",
+    displayName: "Navigation",
+    name: "navigation"
+  },
+  options: {
+    increments: true,
+    comment: ""
+  },
+  pluginOptions: {
+    "content-manager": {
+      visible: true
+    },
+    "content-type-builder": {
+      visible: false
+    }
+  },
+  attributes: {
+    name: {
+      type: "text",
+      configurable: false,
+      required: true
+    },
+    slug: {
+      type: "uid",
+      target: "name",
+      configurable: false,
+      required: true
+    },
+    visible: {
+      type: "boolean",
+      default: false,
+      configurable: false
+    },
+    items: {
+      type: "relation",
+      relation: "oneToMany",
+      target: "plugin::navigation.navigation-item",
+      configurable: false
+    }
+  }
+}

package/server/content-types/navigation-item/index.js

@@ -0,0 +1,9 @@
+"use strict"
+
+const schema = require("./schema");
+const lifecycle = require("./lifecycle");
+
+module.exports = {
+  lifecycle,
+  schema
+};