@webbio/strapi-plugin-page-builder 0.2.4 → 0.2.6

package/admin/src/index.tsx

@@ -1,59 +1,59 @@
-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 { EditView } from './components/EditView';
-import middlewares from './middlewares';
-
-const name = pluginPkg.strapi.name;
-
-export default {
-	register(app: any) {
-		app.addMiddlewares(middlewares);
-		const plugin = {
-			id: pluginId,
-			initializer: Initializer,
-			isReady: false,
-			name
-		};
-
-		app.registerPlugin(plugin);
-	},
-
-	bootstrap(app: any) {
-		app.injectContentManagerComponent('editView', 'right-links', {
-			name: 'collection-type-picker',
-			Component: EditView
-		});
-		app.injectContentManagerComponent('listView', 'actions', {
-			name: 'page-filters',
-			Component: PageTypeFilter
-		});
-	},
-
-	async registerTrads(app: any) {
-		const { locales } = app;
-
-		const importedTrads = await Promise.all(
-			(locales as string[]).map((locale) => {
-				return import(`./translations/${locale}.json`)
-					.then(({ default: data }) => {
-						return {
-							data: prefixPluginTranslations(data, pluginId),
-							locale
-						};
-					})
-					.catch(() => {
-						return {
-							data: {},
-							locale
-						};
-					});
-			})
-		);
-
-		return Promise.resolve(importedTrads);
-	}
-};
+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 { EditView } from './components/EditView';
+import middlewares from './middlewares';
+
+const name = pluginPkg.strapi.name;
+
+export default {
+	register(app: any) {
+		app.addMiddlewares(middlewares);
+		const plugin = {
+			id: pluginId,
+			initializer: Initializer,
+			isReady: false,
+			name
+		};
+
+		app.registerPlugin(plugin);
+	},
+
+	bootstrap(app: any) {
+		app.injectContentManagerComponent('editView', 'right-links', {
+			name: 'collection-type-picker',
+			Component: EditView
+		});
+		app.injectContentManagerComponent('listView', 'actions', {
+			name: 'page-filters',
+			Component: PageTypeFilter
+		});
+	},
+
+	async registerTrads(app: any) {
+		const { locales } = app;
+
+		const importedTrads = await Promise.all(
+			(locales as string[]).map((locale) => {
+				return import(`./translations/${locale}.json`)
+					.then(({ default: data }) => {
+						return {
+							data: prefixPluginTranslations(data, pluginId),
+							locale
+						};
+					})
+					.catch(() => {
+						return {
+							data: {},
+							locale
+						};
+					});
+			})
+		);
+
+		return Promise.resolve(importedTrads);
+	}
+};

package/admin/src/middlewares/index.tsx

@@ -1,37 +1,37 @@
-import { getFetchClient } from '@strapi/helper-plugin';
-
-import { PAGE_UID } from '../../../shared/utils/constants';
-import getRequestUrl from '../utils/getRequestUrl';
-
-const middleware =
-	() =>
-	({ getState }: any) =>
-	(next: any) =>
-	async (action: any) => {
-		// If data is being fetched or after a save
-		if (
-			action.type === 'ContentManager/CrudReducer/GET_DATA_SUCCEEDED' ||
-			action.type === 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED'
-		) {
-			const store = getState();
-			const layoutSlice = store['content-manager_editViewLayoutManager'];
-			const uid = layoutSlice.currentLayout.contentType.uid;
-
-			if (uid !== PAGE_UID) {
-				return next(action);
-			}
-
-			const { get } = await getFetchClient();
-			const { data: pageData } = await get(`${getRequestUrl('page')}/${action.data.id}`);
-
-			action.data.collectionTypeTitle = pageData?.collectionTypeData?.title;
-			action.data.collectionTypeId = pageData?.collectionTypeData?.id;
-			action.data.initialPageType = pageData?.pageType ? pageData.pageType : undefined;
-
-			return next(action);
-		}
-		return next(action);
-	};
-
-const middlewares = [middleware];
-export default middlewares;
+import { getFetchClient } from '@strapi/helper-plugin';
+
+import { PAGE_UID } from '../../../shared/utils/constants';
+import getRequestUrl from '../utils/getRequestUrl';
+
+const middleware =
+	() =>
+	({ getState }: any) =>
+	(next: any) =>
+	async (action: any) => {
+		// If data is being fetched or after a save
+		if (
+			action.type === 'ContentManager/CrudReducer/GET_DATA_SUCCEEDED' ||
+			action.type === 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED'
+		) {
+			const store = getState();
+			const layoutSlice = store['content-manager_editViewLayoutManager'];
+			const uid = layoutSlice.currentLayout.contentType.uid;
+
+			if (uid !== PAGE_UID) {
+				return next(action);
+			}
+
+			const { get } = await getFetchClient();
+			const { data: pageData } = await get(`${getRequestUrl('page')}/${action.data.id}`);
+
+			action.data.collectionTypeTitle = pageData?.collectionTypeData?.title;
+			action.data.collectionTypeId = pageData?.collectionTypeData?.id;
+			action.data.initialPageType = pageData?.pageType ? pageData.pageType : undefined;
+
+			return next(action);
+		}
+		return next(action);
+	};
+
+const middlewares = [middleware];
+export default middlewares;

package/admin/src/pluginId.ts

@@ -1,5 +1,5 @@
-import pluginPkg from '../../package.json';
-
-const pluginId = pluginPkg.strapi.name;
-
-export default pluginId;
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.strapi.name;
+
+export default pluginId;

package/admin/src/translations/en.json

@@ -1,6 +1,6 @@
-{
-	"template.confirmModal.title": "Replace all page modules",
-	"template.confirmModal.body": "You are about to replace all modules on this page. Are you sure you want to continue?",
-	"template.confirmModal.buttons.cancel": "No, cancel",
-	"template.confirmModal.buttons.submit": "Yes, replace all"
-}
+{
+	"template.confirmModal.title": "Replace all page modules",
+	"template.confirmModal.body": "You are about to replace all modules on this page. Are you sure you want to continue?",
+	"template.confirmModal.buttons.cancel": "No, cancel",
+	"template.confirmModal.buttons.submit": "Yes, replace all"
+}

package/admin/src/translations/nl.json

@@ -1,6 +1,6 @@
-{
-	"template.confirmModal.title": "Pagina modules vervangen",
-	"template.confirmModal.body": "Weet je zeker dat je alle modules op deze pagina wilt vervangen?",
-	"template.confirmModal.buttons.cancel": "Nee, annuleer",
-	"template.confirmModal.buttons.submit": "Ja, vervang modules"
-}
+{
+	"template.confirmModal.title": "Pagina modules vervangen",
+	"template.confirmModal.body": "Weet je zeker dat je alle modules op deze pagina wilt vervangen?",
+	"template.confirmModal.buttons.cancel": "Nee, annuleer",
+	"template.confirmModal.buttons.submit": "Ja, vervang modules"
+}

package/admin/src/utils/getRequestUrl.ts

@@ -1,11 +1,11 @@
-import pluginId from '../pluginId';
-
-const getRequestUrl = (path: string) => {
-	if (path.startsWith('/')) {
-		return `/${pluginId}${path}`;
-	}
-
-	return `/${pluginId}/${path}`;
-};
-
-export default getRequestUrl;
+import pluginId from '../pluginId';
+
+const getRequestUrl = (path: string) => {
+	if (path.startsWith('/')) {
+		return `/${pluginId}${path}`;
+	}
+
+	return `/${pluginId}/${path}`;
+};
+
+export default getRequestUrl;

package/admin/src/utils/getTrad.ts

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

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

@@ -1,17 +1,17 @@
-import React from 'react';
-
-export function useDebounce<T>(value: T, delay: number): T {
-	const [debouncedValue, setDebouncedValue] = React.useState(value);
-
-	React.useEffect(() => {
-		const handler = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-
-		return () => {
-			clearTimeout(handler);
-		};
-	}, [value, delay]);
-
-	return debouncedValue;
-}
+import React from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+	React.useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}

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

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

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

@@ -1,12 +1,12 @@
-import { useRef, useEffect } from 'react';
-
-// Hook
-export const usePrevious = <T>(value: T): T | null => {
-	const ref: React.MutableRefObject<T | null> = useRef(null);
-
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-
-	return ref.current;
-};
+import { useRef, useEffect } from 'react';
+
+// Hook
+export const usePrevious = <T>(value: T): T | null => {
+	const ref: React.MutableRefObject<T | null> = useRef(null);
+
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+
+	return ref.current;
+};

package/admin/src/utils/sanitizeModules.ts

@@ -1,43 +1,93 @@
-export const sanitizeModules = (modules: Record<string, any>[]) =>
-	modules?.map((module, idx) => {
-		try {
-			const sanitizedModule = sanitizeObject(module, idx);
-
-			const result = {
-				...sanitizedModule
-			};
-
-			return result;
-		} catch (e) {
-			console.log('ERROR IN SANITIZE MODULES', e);
-		}
-	});
-
-function sanitizeObject(obj: any, idx: number): any {
-	for (let key in obj) {
-		if (typeof obj[key] === 'object' && obj[key] !== null) {
-			sanitizeObject(obj[key], idx);
-		}
-	}
-
-	if (obj.hasOwnProperty('id') && !obj.hasOwnProperty('createdAt')) {
-		obj['__temp_key__'] = idx;
-		delete obj['id'];
-	}
-
-	if (obj.hasOwnProperty('defaultModuleOptions') && !obj.hasOwnProperty('createdAt')) {
-		delete obj['defaultModuleOptions'].id;
-		obj['defaultModuleOptions'] = {
-			...obj['defaultModuleOptions'],
-			spacing: JSON.stringify(obj['defaultModuleOptions'].spacing),
-			__temp_key__: idx
-		};
-	}
-
-	if (obj.hasOwnProperty('name') && !obj.hasOwnProperty('mainField') && !obj.hasOwnProperty('label')) {
-		obj['label'] = obj['name'];
-		obj['mainField'] = obj['name'];
-	}
-
-	return obj;
-}
+export const sanitizeModules = (modules: Record<string, any>[], convertToJSON = true) =>
+	modules?.map((module, idx) => {
+		try {
+			const sanitizedModule = sanitizeObject(module, idx, convertToJSON);
+
+			// go through top level properties in the module
+			for (let prop in sanitizedModule) {
+				// Strapi didn't give us the properties in an array when we used the Strapi API to get modules
+				// But it crashes when we try and have single relations not in an array, so we put them into an array.
+				if (
+					sanitizedModule[prop] &&
+					sanitizedModule[prop].hasOwnProperty('__is_array__') &&
+					!Array.isArray(sanitizedModule[prop])
+				) {
+					sanitizedModule[prop] = [{ ...sanitizedModule[prop] }];
+				}
+
+				// If a property is null, Strapi decides it should crash completely so we remove those.
+				if (sanitizedModule[prop] === null) {
+					delete sanitizedModule[prop];
+				}
+			}
+
+			const result = {
+				...sanitizedModule
+			};
+
+			return result;
+		} catch (error) {
+			console.error('ERROR IN SANITIZE MODULES', error);
+		}
+	});
+
+function sanitizeObject(obj: any, idx: number, convertToJSON = true): any {
+	try {
+		for (let key in obj) {
+			try {
+				if (typeof obj[key] === 'object' && obj[key] !== null && obj[key] !== undefined) {
+					sanitizeObject(obj[key], idx);
+				}
+			} catch (error) {
+				console.error('ERROR in loop', error);
+				return undefined;
+			}
+		}
+
+		// We have to remove the id for components, but not for relations to other collection items
+		// We use createdAt to check, only collection items have this property (hopefully)
+		if (obj.hasOwnProperty('id') && !obj.hasOwnProperty('createdAt')) {
+			obj['__temp_key__'] = idx;
+			delete obj['id'];
+		} else if (obj.hasOwnProperty('id') && obj.hasOwnProperty('createdAt')) {
+			// if it's a relation to a collection item, it has to be in an array because it crashes otherwise.
+			// We use this property at the top of this file, only for top level properties.
+			obj['__is_array__'] = true;
+		}
+
+		try {
+			if (obj.hasOwnProperty('defaultModuleOptions')) {
+				delete obj['defaultModuleOptions'].id;
+
+				let spacing = obj['defaultModuleOptions']?.spacing;
+
+				if (convertToJSON && spacing) {
+					spacing = JSON.stringify(spacing);
+				}
+
+				obj['defaultModuleOptions'] = {
+					...obj['defaultModuleOptions'],
+					spacing,
+					__temp_key__: idx
+				};
+			}
+		} catch (error) {
+			console.error('error in defaultmodule options', error);
+		}
+
+		// Strapi doesnt give us the mainfield and label properties when we get the data using the Strapi API
+		// So we add them here using other properties. This might be expanded with more if statements if required,
+		if (obj.hasOwnProperty('name') && !obj.hasOwnProperty('mainField') && !obj.hasOwnProperty('label')) {
+			obj['label'] = obj['name'];
+			obj['mainField'] = obj['name'];
+		}
+		if (obj.hasOwnProperty('title') && !obj.hasOwnProperty('mainField') && !obj.hasOwnProperty('label')) {
+			obj['label'] = obj['title'];
+			obj['mainField'] = obj['title'];
+		}
+
+		return obj;
+	} catch (error) {
+		console.error('error in root sanitize object', error);
+	}
+}

package/custom.d.ts

@@ -1,5 +1,5 @@
-declare module '@strapi/design-system/*';
-declare module '@strapi/design-system';
-declare module '@strapi/icons';
-declare module '@strapi/icons/*';
-declare module '@strapi/helper-plugin';
+declare module '@strapi/design-system/*';
+declare module '@strapi/design-system';
+declare module '@strapi/icons';
+declare module '@strapi/icons/*';
+declare module '@strapi/helper-plugin';

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.2.4",
+    "version": "0.2.6",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",

package/dist/server/controllers/platform.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    async findAll() {
+        return await strapi.service('plugin::page-builder.platform').findAll();
+    },
+    async findOneByUid(ctx) {
+        var _a;
+        const uid = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.params) === null || _a === void 0 ? void 0 : _a.uid;
+        if (!uid) {
+            return ctx.badRequest('uid is missing.');
+        }
+        return await strapi.service('plugin::page-builder.platform').findOneByUid(uid);
+    },
+    async findPageTypesByPlatform(ctx) {
+        var _a;
+        const platform = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.params) === null || _a === void 0 ? void 0 : _a.platform;
+        return await strapi.services['plugin::page-builder.platform'].findPageTypesByPlatform(platform);
+    }
+};

package/dist/server/graphql/page-by-path.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../shared/utils/constants");
+const getPageByPath = (strapi) => {
+    const typeDefs = () => {
+        return `
+				extend type Page {
+					collectionType: GenericMorph
+				}
+
+        type Query {
+          getPageByPath(path: String, domain: String, publicationState: PublicationState): PageEntity
+        }
+
+      `;
+    };
+    const resolvers = (strapi) => {
+        const { transformArgs } = strapi.plugin('graphql').service('builders').utils;
+        return {
+            Query: {
+                getPageByPath: {
+                    resolve: async (_parent, args, ctx) => {
+                        var _a;
+                        try {
+                            const filteredArgs = {
+                                filters: {
+                                    path: args.path,
+                                    platform: args.domain ? { domain: args.domain } : null
+                                },
+                                publicationState: args.publicationState,
+                                locale: args.locale
+                            };
+                            const { toEntityResponse } = strapi.plugin('graphql').service('format').returnTypes;
+                            const getPage = async () => {
+                                var _a, _b, _c;
+                                const transformedArgs = transformArgs(filteredArgs, {
+                                    contentType: strapi.contentTypes[constants_1.PAGE_UID],
+                                    usePagination: false
+                                });
+                                const results = await ((_a = strapi.entityService) === null || _a === void 0 ? void 0 : _a.findMany(constants_1.PAGE_UID, {
+                                    ...filteredArgs,
+                                    populate: '*'
+                                }));
+                                const entityResponse = toEntityResponse((results === null || results === void 0 ? void 0 : results[0]) || {}, {
+                                    args: transformedArgs,
+                                    resourceUID: constants_1.PAGE_UID
+                                });
+                                if (!(entityResponse === null || entityResponse === void 0 ? void 0 : entityResponse.value) || Object.keys(entityResponse.value).length === 0) {
+                                    throw new Error(ctx.koaContext.response.message);
+                                }
+                                const collectionTypeDataFilter = (_c = (_b = entityResponse === null || entityResponse === void 0 ? void 0 : entityResponse.value) === null || _b === void 0 ? void 0 : _b.collectionTypeData) === null || _c === void 0 ? void 0 : _c.filter(Boolean);
+                                const collectionType = collectionTypeDataFilter.length === 1 ? collectionTypeDataFilter === null || collectionTypeDataFilter === void 0 ? void 0 : collectionTypeDataFilter[0] : null;
+                                const addedAttributes = {
+                                    collectionType: collectionType
+                                };
+                                const result = {
+                                    ...entityResponse.value,
+                                    ...addedAttributes
+                                };
+                                return result;
+                            };
+                            const results = await getPage();
+                            if (((_a = Object.values(results)) === null || _a === void 0 ? void 0 : _a.filter(Boolean).length) > 0) {
+                                return results;
+                            }
+                            else {
+                                throw new Error(ctx.koaContext.response.message);
+                            }
+                        }
+                        catch (error) {
+                            console.log('Error in [getPageByPath], args:', args, 'ERROR:', error);
+                            throw new Error(ctx.koaContext.response.message);
+                        }
+                    }
+                }
+            }
+        };
+    };
+    const resolversConfig = {
+        'Query.getPageByPath': {
+            auth: false
+        }
+    };
+    return {
+        typeDefs: typeDefs(),
+        resolvers: resolvers(strapi),
+        resolversConfig
+    };
+};
+exports.default = getPageByPath;

package/dist/server/graphql/page-by-slug.js

@@ -4,15 +4,15 @@ const filter_underscore_arguments_1 = require("../utils/filter-underscore-argume
 const constants_1 = require("../../shared/utils/constants");
 const getPageBySlug = (strapi) => {
     const typeDefs = () => {
-        return `
-				extend type Page {
-					collectionType: GenericMorph
-				}
-
-        type Query {
-          getPageBySlug(path: String, _locale: String, _publicationState: PublicationState): PageEntity
-        }
-
+        return `
+				extend type Page {
+					collectionType: GenericMorph
+				}
+
+        type Query {
+          getPageBySlug(path: String, _locale: String, _publicationState: PublicationState): PageEntity
+        }
+
       `;
     };
     const resolvers = (strapi) => {