@webbio/strapi-plugin-page-builder 0.2.2 → 0.3.0

package/admin/src/components/PageFilters/filters.tsx

@@ -0,0 +1,180 @@
+import React, { useMemo } from 'react';
+import set from 'lodash/set';
+
+import { Stack } from '@strapi/design-system';
+import { useQueryParams } from '@strapi/helper-plugin';
+
+import PageTypeFilter from './PageTypeFilter';
+import { PAGE_TYPE_PAGE, PLATFORM } from '../../../../shared/utils/constants';
+import PlatformFilter from './PlatformFilter';
+import { Platform, useGetPlatforms } from '../../api/platform';
+import { PAGE_TYPE, PAGE_TYPE_NO_FILTER, PLATFORM_NO_FILTER } from '../../constants';
+import { PageType } from '../../api/page-type';
+
+interface PageFiltersProps {
+	hidePageType?: boolean;
+}
+
+const PageFilters = ({ hidePageType }: PageFiltersProps) => {
+	const [{ query }, setQuery] = useQueryParams() as any;
+
+	const { data: platforms } = useGetPlatforms({});
+
+	const selectedPlatformTitle = useMemo(() => getPlatformFromQuery(query, platforms), [query, platforms]);
+	const selectedPageTypeUid = useMemo(
+		() => getPageTypeFromQuery(query, getPageTypesFromPlatformTitle(selectedPlatformTitle, platforms)),
+		[query, platforms, selectedPlatformTitle]
+	);
+
+	const handleFilterChange = (
+		filters: Record<string, any>,
+		filterCategory: string,
+		filterCategoryToRemove?: string
+	) => {
+		const currentFilters = query.filters?.$and ? query.filters : { ...query.filters, $and: [] };
+		const filterIndex = currentFilters.$and.findIndex(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] === filterCategory
+		);
+
+		if (filterIndex > -1) {
+			set(currentFilters, `$and[${filterIndex}]`, filters); // If the filter in this category already exists, replace it
+		} else {
+			currentFilters.$and.push(filters);
+		}
+
+		const removedFilters = removeFiltersFromQuery({ filters: currentFilters }, filterCategoryToRemove);
+
+		setQuery({
+			page: 1,
+			filters: removedFilters
+		});
+	};
+
+	const removeFilters = (filterCategory: string) => {
+		const filters = removeFiltersFromQuery(query, filterCategory);
+
+		setQuery({
+			page: 1,
+			filters
+		});
+	};
+
+	const handlePlatformSelect = (platformId: string) => {
+		if (platformId === PLATFORM_NO_FILTER) {
+			removeFilters(PLATFORM);
+			return;
+		}
+
+		handleFilterChange(getPlatformQueryFilter(platformId), PLATFORM, PAGE_TYPE);
+	};
+
+	const handlePageTypeSelect = (pageType: string) => {
+		if (pageType === PAGE_TYPE_NO_FILTER) {
+			removeFilters(PAGE_TYPE);
+			return;
+		}
+
+		if (pageType === PAGE_TYPE_PAGE) {
+			handleFilterChange(nullPageTypeQueryFilter, PAGE_TYPE);
+			return;
+		}
+
+		handleFilterChange(getPageTypeQueryFilter(pageType), PAGE_TYPE);
+	};
+
+	return (
+		<Stack horizontal spacing={2}>
+			<PlatformFilter onChange={handlePlatformSelect} platforms={platforms} selectedPlatform={selectedPlatformTitle} />
+			{!hidePageType && (
+				<PageTypeFilter
+					onChange={handlePageTypeSelect}
+					pageTypes={getPageTypesFromPlatformTitle(selectedPlatformTitle, platforms)}
+					selectedPageTypeUid={selectedPageTypeUid}
+				/>
+			)}
+		</Stack>
+	);
+};
+
+export default PageFilters;
+
+const getPageTypesFromPlatformTitle = (selectedPlatformTitle?: string, platforms?: Platform[]) =>
+	platforms?.find((p) => p.title === selectedPlatformTitle)?.pageTypes;
+
+const getPageTypeFromQuery = (query: Record<string, any>, pageTypes?: PageType[]) => {
+	const pageTypeFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === PAGE_TYPE
+	)?.pageType;
+
+	if (pageTypeFromQuery?.uid?.$null === 'true') {
+		return PAGE_TYPE_PAGE;
+	}
+
+	if (pageTypeFromQuery?.uid?.$eq) {
+		const matchingPageType = pageTypes?.find((pageType: any) => pageType?.uid === pageTypeFromQuery.uid.$eq);
+
+		if (matchingPageType) {
+			return matchingPageType.uid;
+		}
+	}
+
+	return PAGE_TYPE_NO_FILTER;
+};
+
+const getPlatformFromQuery = (query: Record<string, any>, platforms?: Platform[]): string | undefined => {
+	const platformFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === PLATFORM
+	)?.platform;
+
+	if (platformFromQuery?.title?.$null === 'true') {
+		return PLATFORM_NO_FILTER;
+	}
+
+	if (platformFromQuery?.title?.$eq) {
+		const matchingPageType = platforms?.find((platforms: Platform) => platforms?.title === platformFromQuery.title.$eq);
+
+		if (matchingPageType) {
+			return matchingPageType.title;
+		}
+	}
+
+	return PLATFORM_NO_FILTER;
+};
+
+const getPlatformQueryFilter = (platform: string) => ({
+	platform: {
+		title: {
+			$eq: platform
+		}
+	}
+});
+
+const getPageTypeQueryFilter = (pageType: string) => ({
+	pageType: {
+		uid: {
+			$eq: pageType
+		}
+	}
+});
+
+const nullPageTypeQueryFilter = {
+	pageType: {
+		uid: {
+			$null: true
+		}
+	}
+};
+
+const removeFiltersFromQuery = (query: Record<string, any>, filterCategory?: string) => {
+	const newAndFilters = query.filters?.$and?.filter(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] !== filterCategory
+	);
+
+	const filters = { ...query.filters, $and: newAndFilters };
+
+	if (newAndFilters && newAndFilters.length === 0) {
+		delete filters.$and;
+	}
+
+	return filters;
+};

package/admin/src/components/PageFilters/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+import { PAGE_UID } from '../../../../shared/utils/constants';
+
+import PageFilters from './filters';
+import { useHasPageRelation } from '../../api/has-page-relation';
+
+const PageFiltersContainer = () => {
+	const { pathname } = useLocation();
+	const uid = pathname.split('/').find((x) => x.startsWith('api::')) || '';
+	const isPageCollectionType = uid === PAGE_UID;
+
+	const { data: hasPageRelation, isLoading } = useHasPageRelation({
+		uid
+	});
+
+	if (isPageCollectionType) {
+		return <PageFilters />;
+	}
+
+	if (!isPageCollectionType && hasPageRelation && !isLoading) {
+		return <PageFilters hidePageType />;
+	}
+
+	return null;
+};
+
+export default PageFiltersContainer;

package/admin/src/index.tsx

@@ -3,7 +3,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import Initializer from './components/Initializer';
-import PageTypeFilter from './components/PageTypeFilter';
+import PageFiltersContainer from './components/PageFilters';
 import { EditView } from './components/EditView';
 import middlewares from './middlewares';
 
@@ -29,7 +29,7 @@ export default {
 		});
 		app.injectContentManagerComponent('listView', 'actions', {
 			name: 'page-filters',
-			Component: PageTypeFilter
+			Component: PageFiltersContainer
 		});
 	},
 

package/admin/src/utils/hooks/useGetLocaleFromUrl.ts

@@ -1,7 +1,7 @@
 import { useQueryParams } from '@strapi/helper-plugin';
 
 const useGetLocaleFromUrl = () => {
-	const [{ query }] = useQueryParams();
+	const [{ query }] = useQueryParams() as any;
 
 	return query?.plugins?.i18n?.locale;
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.2.2",
+    "version": "0.3.0",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",
@@ -21,14 +21,13 @@
     },
     "dependencies": {
         "@strapi/design-system": "^1.11.0",
-        "@strapi/helper-plugin": "^4.13.6",
+        "@strapi/helper-plugin": "^4.15.0",
         "@strapi/icons": "^1.11.0",
-        "@strapi/typescript-utils": "^4.13.6",
-        "@strapi/utils": "^4.13.6",
+        "@strapi/typescript-utils": "^4.15.0",
+        "@strapi/utils": "^4.15.0",
         "react-select": "^5.7.4"
     },
     "devDependencies": {
-        "@strapi/typescript-utils": "^4.13.6",
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
         "@types/react-router-dom": "^5.3.3",
@@ -40,7 +39,7 @@
         "typescript": "5.1.6"
     },
     "peerDependencies": {
-        "@strapi/strapi": "^4.13.6",
+        "@strapi/strapi": "^4.15.0",
         "@webbio/strapi-plugin-slug": "^2.0.2",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",

package/dist/server/bootstrap.js

@@ -25,19 +25,31 @@ exports.default = async ({ strapi }) => {
         // @ts-ignore
         models: [constants_1.PAGE_UID],
         async beforeCreate(event) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g;
             let { data } = event.params;
             const collectionTypeId = data === null || data === void 0 ? void 0 : data.collectionTypeId;
             const pageTypeId = ((_b = (_a = data === null || data === void 0 ? void 0 : data.pageType.connect) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || data.initialPageType;
+            const platformId = (_d = (_c = data === null || data === void 0 ? void 0 : data.platform.connect) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.id;
             if (collectionTypeId && pageTypeId) {
-                const pageType = await ((_c = strapi.entityService) === null || _c === void 0 ? void 0 : _c.findOne(constants_1.PAGE_TYPE_UID, pageTypeId));
-                const collectionToConnect = await ((_d = strapi.entityService) === null || _d === void 0 ? void 0 : _d.findOne(pageType === null || pageType === void 0 ? void 0 : pageType.uid, collectionTypeId, {
+                const pageType = await ((_e = strapi.entityService) === null || _e === void 0 ? void 0 : _e.findOne(constants_1.PAGE_TYPE_UID, pageTypeId));
+                const collectionToConnect = await ((_f = strapi.entityService) === null || _f === void 0 ? void 0 : _f.findOne(pageType === null || pageType === void 0 ? void 0 : pageType.uid, collectionTypeId, {
                     populate: { page: true }
                 }));
                 const page = collectionToConnect === null || collectionToConnect === void 0 ? void 0 : collectionToConnect.page;
+                const foundPlatforms = await ((_g = strapi.entityService) === null || _g === void 0 ? void 0 : _g.findMany(constants_1.PLATFORM_UID, {
+                    populate: '*',
+                    filters: {
+                        pagetype: {
+                            uid: pageType === null || pageType === void 0 ? void 0 : pageType.uid
+                        }
+                    }
+                }));
                 if (page && page.length > 0) {
                     throw new utils_1.errors.ValidationError('You can only link one CollectionType to one page');
                 }
+                if (platformId && !(foundPlatforms === null || foundPlatforms === void 0 ? void 0 : foundPlatforms.some((platform) => platform.id === platformId))) {
+                    throw new utils_1.errors.ValidationError('Platform not found');
+                }
                 data = updateCollectionTypeData(data, collectionTypeId, pageType === null || pageType === void 0 ? void 0 : pageType.uid);
             }
         },
@@ -74,8 +86,6 @@ exports.default = async ({ strapi }) => {
                 }
                 data = updateCollectionTypeData(data, collectionTypeId, pageType === null || pageType === void 0 ? void 0 : pageType.uid);
             }
-            // needs to check if the collectionTypeData is already connected to another page
-            // if so, remove the hasPage for filtering
             if (data.collectionTypeData &&
                 ((_r = (_q = originalEntity === null || originalEntity === void 0 ? void 0 : originalEntity.collectionTypeData) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.__type) &&
                 ((_t = (_s = originalEntity === null || originalEntity === void 0 ? void 0 : originalEntity.collectionTypeData) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.id) &&

package/dist/server/controllers/index.js

@@ -7,9 +7,11 @@ const page_1 = __importDefault(require("./page"));
 const page_type_1 = __importDefault(require("./page-type"));
 const collection_types_1 = __importDefault(require("./collection-types"));
 const template_1 = __importDefault(require("./template"));
+const platform_1 = __importDefault(require("./platform"));
 exports.default = {
     page: page_1.default,
     'page-type': page_type_1.default,
     'collection-types': collection_types_1.default,
-    template: template_1.default
+    template: template_1.default,
+    platform: platform_1.default
 };

package/dist/server/graphql/pages-by-uid.js

@@ -20,7 +20,7 @@ const getPageInfoFromUID = (strapi) => {
 				}
 
         type Query {
-					get${collectionType.type}Pages(filters: ${collectionType.type}FiltersInput,pagination: PaginationArg, sort:[String], pageFilters: PageFiltersInput): ${collectionType.type}EntityResponseCollection
+					get${collectionType.type}Pages(filters: ${collectionType.type}FiltersInput,pagination: PaginationArg, pageFilters: PageFiltersInput): ${collectionType.type}EntityResponseCollection
         }
 
       `;
@@ -60,7 +60,6 @@ const getPageInfoFromUID = (strapi) => {
                                     hasPage: { $eq: true },
                                     page: { ...transformedpageArgs.filters }
                                 },
-                                sort: transformedArgs.sort,
                                 start: start,
                                 limit: limit
                             }));

package/dist/server/routes/index.js

@@ -54,6 +54,27 @@ const routes = {
                 handler: 'template.findOneById'
             }
         ]
+    },
+    platform: {
+        type: 'admin',
+        prefix: undefined,
+        routes: [
+            {
+                method: 'GET',
+                path: '/platform',
+                handler: 'platform.findAll'
+            },
+            {
+                method: 'GET',
+                path: '/platform/:uid',
+                handler: 'platform.findOneByUid'
+            },
+            {
+                method: 'GET',
+                path: '/platform/:platform/page-types',
+                handler: 'platform.findPageTypesByPlatform'
+            }
+        ]
     }
 };
 exports.default = routes;

package/dist/server/schema/page-end.json

@@ -86,6 +86,11 @@
             "type": "relation",
             "relation": "oneToOne",
             "target": "api::page-type.page-type"
+        },
+        "platform": {
+            "type": "relation",
+            "relation": "oneToOne",
+            "target": "api::platform.platform"
         }
     }
 }

package/dist/server/services/builder.js

@@ -12,7 +12,8 @@ const reload_strapi_on_load_1 = require("../utils/reload-strapi-on-load");
 const page_type_start_json_1 = __importDefault(require("../schema/page-type-start.json"));
 const page_type_end_json_1 = __importDefault(require("../schema/page-type-end.json"));
 const template_start_json_1 = __importDefault(require("../schema/template-start.json"));
-const UIDS = [constants_1.TEMPLATE_UID, constants_1.PAGE_TYPE_UID, constants_1.PAGE_UID];
+const platform_start_json_1 = __importDefault(require("../schema/platform-start.json"));
+const UIDS = [constants_1.TEMPLATE_UID, constants_1.PAGE_TYPE_UID, constants_1.PLATFORM_UID, constants_1.PAGE_UID];
 exports.default = {
     async buildContentTypes() {
         this.listenToCreatedContentTypes();
@@ -72,29 +73,38 @@ exports.default = {
             [constants_1.TEMPLATE_UID]: {
                 create: this.getTemplateContentType(),
                 update: this.getTemplateContentType()
+            },
+            [constants_1.PLATFORM_UID]: {
+                create: this.getPlatformContentType(),
+                update: this.getPlatformContentType()
             }
         };
         return contentTypes === null || contentTypes === void 0 ? void 0 : contentTypes[uid];
     },
     getPageContentType(create) {
         const page = create ? page_start_json_1.default : page_end_json_1.default;
-        const contentType = this.mergeCollectionTypeWithModules(page, constants_1.PAGE_UID);
+        const contentType = this.mergeCollectionTypeWithOld(page, constants_1.PAGE_UID);
         return { uid: constants_1.PAGE_UID, contentType };
     },
     getPageTypeContentType(create) {
         const pageType = create ? page_type_start_json_1.default : page_type_end_json_1.default;
-        const contentType = this.mergeCollectionTypeWithModules(pageType, constants_1.PAGE_TYPE_UID);
+        const contentType = this.mergeCollectionTypeWithOld(pageType, constants_1.PAGE_TYPE_UID);
         return { uid: constants_1.PAGE_TYPE_UID, contentType };
     },
     getTemplateContentType() {
         const template = template_start_json_1.default;
-        const contentType = this.mergeCollectionTypeWithModules(template, constants_1.TEMPLATE_UID);
+        const contentType = this.mergeCollectionTypeWithOld(template, constants_1.TEMPLATE_UID);
         return { uid: constants_1.TEMPLATE_UID, contentType };
     },
-    mergeCollectionTypeWithModules(collectionType, uid) {
+    getPlatformContentType() {
+        const platform = platform_start_json_1.default;
+        const contentType = this.mergeCollectionTypeWithOld(platform, constants_1.PLATFORM_UID);
+        return { uid: constants_1.PLATFORM_UID, contentType };
+    },
+    mergeCollectionTypeWithOld(collectionType, uid) {
         var _a;
         const { pluginOptions: oldPluginOptions, __schema__: oldSchema } = strapi.contentType(uid) || {};
-        const components = this.getConfigModuleComponents();
+        const modulesFromConfig = oldSchema.attributes.modules ? this.getConfigModuleComponents() : undefined;
         return {
             ...collectionType,
             displayName: ((_a = oldSchema === null || oldSchema === void 0 ? void 0 : oldSchema.info) === null || _a === void 0 ? void 0 : _a.displayName) || (collectionType === null || collectionType === void 0 ? void 0 : collectionType.displayName),
@@ -105,7 +115,10 @@ exports.default = {
             attributes: {
                 ...oldSchema === null || oldSchema === void 0 ? void 0 : oldSchema.attributes,
                 ...collectionType.attributes,
-                modules: { ...collectionType.attributes.modules, components }
+                ...(((collectionType.attributes.modules && collectionType.attributes.modules.length > 0) ||
+                    modulesFromConfig) && {
+                    modules: { ...collectionType.attributes.modules, components: modulesFromConfig }
+                })
             }
         };
     },

package/dist/server/services/index.js

@@ -8,10 +8,12 @@ const builder_1 = __importDefault(require("./builder"));
 const page_type_1 = __importDefault(require("./page-type"));
 const collection_types_1 = __importDefault(require("./collection-types"));
 const template_1 = __importDefault(require("./template"));
+const platform_1 = __importDefault(require("./platform"));
 exports.default = {
     page: page_1.default,
     builder: builder_1.default,
     'page-type': page_type_1.default,
     'collection-types': collection_types_1.default,
-    template: template_1.default
+    template: template_1.default,
+    platform: platform_1.default
 };

package/dist/shared/utils/constants.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PAGE_TYPE_PAGE = exports.PAGE_TYPE_UID = exports.TEMPLATE_UID = exports.PAGE_UID = void 0;
+exports.PLATFORM = exports.PAGE_TYPE_PAGE = exports.PLATFORM_UID = exports.PAGE_TYPE_UID = exports.TEMPLATE_UID = exports.PAGE_UID = void 0;
 exports.PAGE_UID = 'api::page.page';
 exports.TEMPLATE_UID = 'api::template.template';
 exports.PAGE_TYPE_UID = 'api::page-type.page-type';
+exports.PLATFORM_UID = 'api::platform.platform';
 exports.PAGE_TYPE_PAGE = 'page';
+exports.PLATFORM = 'platform';