strapi-plugin-navigation 2.0.0-beta.1 → 2.0.0-beta.5

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

@@ -14,10 +14,8 @@ 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';
@@ -32,6 +30,7 @@ import {
   usedContentTypes,
   validateNavigationStructure,
 } from './utils/parsers';
+import Search from '../../components/Search';
 
 const View = () => {
   const {
@@ -55,6 +54,9 @@ const View = () => {
   const [activeNavigationItem, setActiveNavigationItemState] = useState({});
   const { formatMessage } = useIntl();
 
+  const [searchValue, setSearchValue] = useState('');
+  const isSearchEmpty = isEmpty(searchValue);
+
   const structureHasErrors = !validateNavigationStructure((changedActiveNavigation || {}).items);
   const navigationSelectValue = get(activeNavigation, "id", null);
   const handleSave = () => isLoadingForSubmit || structureHasErrors
@@ -104,6 +106,15 @@ const View = () => {
     handleChangeNavigationData(changedStructure, true);
   };
 
+  const filteredListFactory = (items, filterFunction) => items.reduce((acc, item) => {
+    const subItems = !isEmpty(item.items) ? filteredListFactory(item.items, filterFunction) : [];
+    if (filterFunction(item))
+      return [item, ...subItems, ...acc];
+    else
+      return [...subItems, ...acc];
+  }, []);
+  const filteredList = !isSearchEmpty ? filteredListFactory(changedActiveNavigation.items, (item) => item?.title.includes(searchValue)) : [];
+
   const handleItemRemove = (item) => {
     handleSubmitNavigationItem({
       ...item,
@@ -147,7 +158,7 @@ const View = () => {
         {changedActiveNavigation && (
           <>
             <NavigationContentHeader
-              startActions={<IconButton icon={<SearchIcon />} />}
+              startActions={<Search value={searchValue} setValue={setSearchValue}/>}
               endActions={<Button
                 onClick={addNewNavigationItem}
                 startIcon={<PlusIcon />}
@@ -176,11 +187,12 @@ const View = () => {
             {
               !isEmpty(changedActiveNavigation.items || [])
               && <List
-                items={changedActiveNavigation.items || []}
+                items={isSearchEmpty ? changedActiveNavigation.items || [] : filteredList}
                 onItemLevelAdd={addNewNavigationItem}
                 onItemRemove={handleItemRemove}
                 onItemEdit={handleItemEdit}
                 onItemRestore={handleItemRestore}
+                displayFlat={!isSearchEmpty}
                 root
                 error={error}
                 allowedLevels={config.allowedLevels}

package/admin/src/pages/View/utils/parsers.js

@@ -28,7 +28,7 @@ export const transformItemToRESTPayload = (
   const { contentTypes = [] } = config;
 
   const parsedRelated = Number(related);
-  const relatedId = isExternal || isNaN(parsedRelated) ? related.value || related : parsedRelated;
+  const relatedId = isExternal || isNaN(parsedRelated) ? related?.value || related : parsedRelated;
 
   const relatedContentType = relatedType ?
     find(contentTypes,

package/admin/src/pluginId.js

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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.5",
   "description": "Strapi - Navigation plugin",
   "strapi": {
-    "name": "Navigation",
+    "name": "navigation",
     "icon": "hamburger",
     "description": "UI navigation management",
     "kind": "plugin"
@@ -16,7 +16,8 @@
     "test:unit": "jest --verbose --coverage"
   },
   "dependencies": {
-    "@types/uuid": "^8.3.0",
+    "@strapi/utils": "^4.0.5",
+    "uuid": "^8.3.0",
     "bad-words": "^3.0.3",
     "lodash": "^4.17.11",
     "react": "^16.9.0",
@@ -38,6 +39,9 @@
     "jest-styled-components": "^7.0.2",
     "codecov": "^3.7.2"
   },
+  "peerDependencies": {
+    "@strapi/strapi": "4.x"
+  },
   "author": {
     "name": "VirtusLab // Mateusz Ziarko",
     "email": "mziarko@virtuslab.com",

package/server/config/index.js

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

package/server/controllers/navigation.js

@@ -48,4 +48,25 @@ module.exports = {
     return getService().put(id, body, auditLog)
       .catch(errorHandler(ctx));
   },
+  async render(ctx) {
+    const { params, query = {} } = ctx;
+    const { type, menu: menuOnly } = query;
+    const { idOrSlug } = parseParams(params);
+    return getService().render(
+      idOrSlug,
+      type,
+      menuOnly,
+    );
+  },
+  async renderChild(ctx) {
+    const { params, query = {} } = ctx;
+    const { type, menu: menuOnly } = query;
+    const { idOrSlug, childUIKey } = parseParams(params);
+    return getService().renderChildren(
+      idOrSlug,
+      childUIKey,
+      type,
+      menuOnly
+    );
+  },
 };

package/server/graphql/index.js

@@ -0,0 +1,23 @@
+const getTypes = require('./types');
+const getQueries = require('./queries');
+const getResolversConfig = require('./resolvers-config');
+
+module.exports = () => {
+	const extensionService = strapi.plugin('graphql').service('extension');
+
+	extensionService.shadowCRUD('plugin::navigation.audience').disable();
+	extensionService.shadowCRUD('plugin::navigation.navigation').disable();
+	extensionService.shadowCRUD('plugin::navigation.navigation-item').disable();
+	extensionService.shadowCRUD('plugin::navigation.navigations-items-related').disable();
+
+	extensionService.use(({ nexus }) => {
+		const types = getTypes({ strapi, nexus });
+		const queries = getQueries({ strapi, nexus });
+		const resolversConfig = getResolversConfig({ strapi });
+
+		return {
+			types: [types, queries],
+			resolversConfig,
+		}
+	});
+}

package/server/graphql/queries/index.js

@@ -0,0 +1,17 @@
+module.exports = (context) => {
+	const queries = {
+		renderNavigationChild: require('./render-navigation-child'),
+		renderNavigation: require('./render-navigation'),
+	}
+
+  return context.nexus.extendType({
+    type: 'Query',
+		definition(t) {
+			for (const [name, configFactory] of Object.entries(queries)) {
+				const config = configFactory(context);
+
+				t.field(name, config);
+			}
+    },
+  });
+};

package/server/graphql/queries/render-navigation-child.js

@@ -0,0 +1,16 @@
+module.exports = ({ strapi, nexus }) => {
+	const { nonNull, list, stringArg, booleanArg } = nexus;
+	return {
+		type: nonNull(list('NavigationItem')),
+		args: {
+			id: nonNull(stringArg()),
+			childUiKey: nonNull(stringArg()),
+			type: 'NavigationRenderType',
+			menuOnly: booleanArg()
+		},
+		resolve(obj, args) {
+			const { id, childUIKey, type, menuOnly } = args;
+			return strapi.plugin('navigation').service('navigation').renderChildren(id, childUIKey, type, menuOnly);
+		},
+	};
+}

package/server/graphql/queries/render-navigation.js

@@ -0,0 +1,15 @@
+module.exports = ({ strapi, nexus }) => {
+	const { nonNull, list, stringArg, booleanArg } = nexus;
+	return {
+		type: nonNull(list('NavigationItem')),
+		args: {
+			navigationIdOrSlug: nonNull(stringArg()),
+			type: 'NavigationRenderType',
+			menuOnly: booleanArg()
+		},
+		resolve(obj, args) {
+			const { navigationIdOrSlug, type, menuOnly } = args;
+			return strapi.plugin('navigation').service('navigation').render(navigationIdOrSlug, type, menuOnly);
+		},
+	};
+}

package/server/graphql/resolvers-config.js

@@ -0,0 +1,4 @@
+module.exports = ({ }) => ({
+	'Query.renderNavigationChild': { auth: false },
+	'Query.renderNavigation': { auth: false },
+});

package/server/graphql/types/content-types-name-fields.js

@@ -0,0 +1,8 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "ContentTypesNameFields",
+  definition(t) {
+		t.nonNull.list.nonNull.string("default")
+		const contentTypesNameFields = strapi.plugin('navigation').config('contentTypesNameFields')
+		Object.keys(contentTypesNameFields || {}).forEach(key => t.nonNull.list.string(key))
+  }
+})

package/server/graphql/types/content-types.js

@@ -0,0 +1,16 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "ContentTypes",
+  definition(t) {
+    t.nonNull.string("uid")
+    t.nonNull.string("name")
+    t.nonNull.boolean("isSingle")
+    t.nonNull.string("collectionName")
+    t.nonNull.string("contentTypeName")
+    t.nonNull.string("label")
+    t.nonNull.string("relatedField")
+    t.nonNull.string("labelSingular")
+    t.nonNull.string("endpoint")
+    t.nonNull.boolean("available")
+    t.nonNull.boolean("visible")
+  }
+})

package/server/graphql/types/create-navigation-item.js

@@ -0,0 +1,17 @@
+module.exports = ({ nexus }) => nexus.inputObjectType({
+  name: "CreateNavigationItem",
+  definition(t) {
+    t.nonNull.string("title")
+    t.nonNull.string("type")
+    t.string("path")
+    t.string("externalPath")
+    t.nonNull.string("uiRouterKey")
+    t.nonNull.boolean("menuAttached")
+    t.nonNull.int("order")
+    t.int("parent")
+    t.int("master")
+    t.list.field("items", { type: 'CreateNavigationItem' })
+    t.list.string("audience")
+    t.field("related", { type: 'CreateNavigationRelated' })
+  }
+});

package/server/graphql/types/create-navigation-related.js

@@ -0,0 +1,8 @@
+module.exports = ({ nexus }) => nexus.inputObjectType({
+  name: "CreateNavigationRelated",
+  definition(t) {
+    t.nonNull.string("ref")
+    t.nonNull.string("field")
+    t.nonNull.string("refId")
+  }
+});

package/server/graphql/types/create-navigation.js

@@ -0,0 +1,7 @@
+module.exports = ({ nexus }) => nexus.inputObjectType({
+  name: "CreateNavigation",
+  definition(t) {
+    t.nonNull.string("name")
+    t.nonNull.list.field("items", { type: 'CreateNavigationItem' })
+  }
+});

package/server/graphql/types/index.js

@@ -0,0 +1,15 @@
+const typesFactories = [
+	require('./navigation-item'),
+	require('./navigation-related'),
+	require('./navigation-render-type'),
+	require('./navigation'),
+	require('./navigation-details'),
+	require('./content-types-name-fields'),
+	require('./content-types'),
+	require('./navigation-config'),
+	require('./create-navigation-related'),
+	require('./create-navigation-item'),
+	require('./create-navigation'),
+];
+
+module.exports = context => typesFactories.map(factory => factory(context));

package/server/graphql/types/navigation-config.js

@@ -0,0 +1,9 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "NavigationConfig",
+  definition(t) {
+    t.int("allowedLevels");
+    t.nonNull.list.string("additionalFields");
+    t.field("contentTypesNameFields", { type: 'ContentTypesNameFields' });
+    t.list.field("contentTypes", { type: 'ContentTypes' });
+  }
+})

package/server/graphql/types/navigation-details.js

@@ -0,0 +1,10 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "NavigationDetails",
+  definition(t) {
+    t.nonNull.string("id")
+    t.nonNull.string("name")
+    t.nonNull.string("slug")
+    t.nonNull.boolean("visible")
+    t.nonNull.list.field("items", { type: 'NavigationItem' })
+  }
+})

package/server/graphql/types/navigation-item.js

@@ -0,0 +1,29 @@
+module.exports = ({ nexus }) =>
+	nexus.objectType({
+		name: "NavigationItem",
+		definition(t) {
+			t.nonNull.int("id")
+			t.nonNull.string("title")
+			t.nonNull.string("type")
+			t.string("path")
+			t.string("externalPath")
+			t.nonNull.string("uiRouterKey")
+			t.nonNull.boolean("menuAttached")
+			t.nonNull.int("order")
+			t.int("parent")
+			t.int("master")
+			t.list.field("items", { type: 'NavigationItem' })
+			t.list.field("related", { type: 'NavigationRelated' })
+			t.list.string("audience")
+			// SQL
+			t.string("created_at")
+			t.string("updated_at")
+			t.string("created_by")
+			t.string("updated_by")
+			// MONGO
+			t.string("createdAt")
+			t.string("updatedAt")
+			t.string("createdBy")
+			t.string("updatedBy")
+		}
+	});

package/server/graphql/types/navigation-related.js

@@ -0,0 +1,23 @@
+module.exports = ({ strapi, nexus }) => {
+	const related = strapi.plugin('navigation').config('gql').navigationItemRelated;
+	const name = "NavigationRelated";
+
+	if (related?.length) {
+		return nexus.unionType({
+			name,
+			definition(t) {
+				t.members(...related)
+			},
+			resolveType: (item) => strapi.contentTypes[item.__contentType]?.globalId
+		});
+	}
+	
+	return nexus.objectType({
+		name,
+		definition(t) {
+			t.int("id")
+			t.string("title")
+			t.string("name")
+		}
+	})
+}

package/server/graphql/types/navigation-render-type.js

@@ -0,0 +1,4 @@
+module.exports = ({nexus}) => nexus.enumType({
+  name: "NavigationRenderType",
+  members: ['FLAT','TREE','RFR'],
+});

package/server/graphql/types/navigation.js

@@ -0,0 +1,9 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "Navigation",
+  definition(t) {
+    t.nonNull.string("id")
+    t.nonNull.string("name")
+    t.nonNull.string("slug")
+    t.nonNull.boolean("visible")
+  }
+})

package/server/register.js

@@ -0,0 +1,5 @@
+module.exports = ({ strapi }) => {
+  if (strapi.plugin('graphql')) {
+    require('./graphql')({ strapi });
+  }
+};

package/server/routes/client.js

@@ -0,0 +1,21 @@
+module.exports = {
+  type: 'content-api',
+  routes: [
+		 {
+      method: "GET",
+      path: "/render/:idOrSlug",
+      handler: "navigation.render",
+      config: {
+        policies: []
+      }
+    },
+    {
+      method: "GET",
+      path: "/render/:idOrSlug/:childUIKey",
+      handler: "navigation.renderChild",
+      config: {
+        policies: []
+      }
+    }
+  ]
+}

package/server/routes/index.js

@@ -1,3 +1,4 @@
 module.exports = {
-	'admin': require('./admin')
+	'admin': require('./admin'),
+	'content-api': require('./client'),
 };