@webbio/strapi-plugin-page-builder 0.0.12 → 0.0.14

package/admin/src/components/PageTypeFilter/page-type-filter.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import set from 'lodash/set';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+import { useQueryParams } from '@strapi/helper-plugin';
+
+import { useGetPageTypes } from '../../api/page-type';
+import { PAGE_TYPE_NO_FILTER } from '../../constants';
+import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
+
+const PageTypeFilter = () => {
+	const [{ query }, setQuery] = useQueryParams();
+	const { data: pageTypes } = useGetPageTypes({});
+	const initialPageTypeUid = getInitialPageType(query, pageTypes);
+	const [selectedPageTypeUid, setSelectedPageTypeUid] = useState(initialPageTypeUid);
+
+	const removeFilters = () => {
+		const newAndFilters = query.filters?.$and?.filter(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] !== 'pageType'
+		);
+		const filters = { ...query.filters, $and: newAndFilters };
+
+		if (newAndFilters && newAndFilters.length === 0) {
+			delete filters.$and;
+		}
+
+		setQuery({
+			page: 1,
+			filters
+		});
+	};
+
+	const handleFilterChange = (filters: Record<string, any>) => {
+		const currentFilters = query.filters?.$and ? query.filters : { ...query.filters, $and: [] }; // Make sure $and exists.
+		const pageTypeFilterIndex = currentFilters.$and.findIndex(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] === 'pageType'
+		);
+
+		if (pageTypeFilterIndex > -1) {
+			set(currentFilters, `$and[${pageTypeFilterIndex}]`, filters); // If the pageType filter already exists, replace it
+		} else {
+			currentFilters.$and.push(filters);
+		}
+
+		setQuery({
+			page: 1,
+			filters: currentFilters
+		});
+	};
+
+	const handleSelect = (value: string) => {
+		setSelectedPageTypeUid(value);
+
+		if (value === 'all') {
+			removeFilters();
+			return;
+		}
+
+		if (value === PAGE_TYPE_PAGE) {
+			handleFilterChange(nullPageTypeQueryFilter);
+			return;
+		}
+
+		handleFilterChange(getPageTypeQueryFilter(value));
+	};
+
+	useEffect(() => {
+		setSelectedPageTypeUid(getInitialPageType(query, pageTypes));
+	}, [pageTypes]);
+
+	useEffect(() => {
+		if (!query?.filters) {
+			setSelectedPageTypeUid(null);
+		}
+	}, [query]);
+
+	return (
+		<SingleSelect placeholder="Select page type" onChange={handleSelect} size="S" value={selectedPageTypeUid}>
+			<SingleSelectOption key={PAGE_TYPE_NO_FILTER} value={PAGE_TYPE_NO_FILTER}>
+				All Pagetypes
+			</SingleSelectOption>
+			<SingleSelectOption key={PAGE_TYPE_PAGE} value={PAGE_TYPE_PAGE}>
+				Page
+			</SingleSelectOption>
+			{pageTypes?.map((pageType) => (
+				<SingleSelectOption key={pageType.uid} value={pageType.uid}>
+					{pageType.title || pageType.uid}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};
+
+export { PageTypeFilter };
+
+const getPageTypeQueryFilter = (pageType: string) => ({
+	pageType: {
+		uid: {
+			$eq: pageType
+		}
+	}
+});
+
+const nullPageTypeQueryFilter = {
+	pageType: {
+		uid: {
+			$null: true
+		}
+	}
+};
+
+const getInitialPageType = (query: any, pageTypes: any) => {
+	const pageTypeFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === 'pageType'
+	)?.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;
+};

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

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import { Puzzle } from '@strapi/icons';
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

package/admin/src/constants.ts

@@ -0,0 +1 @@
+export const PAGE_TYPE_NO_FILTER = 'all';

package/admin/src/index.tsx

@@ -0,0 +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-type-filter',
+			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

@@ -0,0 +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;

package/admin/src/pluginId.ts

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

package/admin/src/translations/en.json

@@ -0,0 +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"
+}

package/admin/src/translations/nl.json

@@ -0,0 +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"
+}

package/admin/src/utils/getRequestUrl.ts

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +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;
+}

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

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

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

@@ -0,0 +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;
+};

package/admin/src/utils/sanitizeModules.ts

@@ -0,0 +1,10 @@
+export const sanitizeModules = (modules: Record<string, any>[]) => {
+	return modules?.map((module, idx) => {
+		delete module.id;
+
+		return {
+			...module,
+			__temp_key__: idx
+		};
+	});
+};

package/custom.d.ts

@@ -0,0 +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';

package/dist/package.json

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

package/dist/server/services/builder.js

@@ -71,23 +71,32 @@ exports.default = {
     },
     getPageContentType(create) {
         const page = create ? page_start_json_1.default : page_end_json_1.default;
-        const contentType = this.addModulesToCollectionType(page);
+        const contentType = this.mergeCollectionTypeWithModules(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.addModulesToCollectionType(pageType);
+        const contentType = this.mergeCollectionTypeWithModules(pageType, constants_1.PAGE_TYPE_UID);
         return { uid: constants_1.PAGE_TYPE_UID, contentType };
     },
     getTemplateContentType() {
-        const contentType = this.addModulesToCollectionType(template_json_1.default);
+        const contentType = this.mergeCollectionTypeWithModules(template_json_1.default, constants_1.TEMPLATE_UID);
         return { uid: constants_1.TEMPLATE_UID, contentType };
     },
-    addModulesToCollectionType(collectionType) {
+    mergeCollectionTypeWithModules(collectionType, uid) {
+        const { pluginOptions: oldPluginOptions, __schema__: { attributes: oldAttributes } } = strapi.contentType(constants_1.PAGE_UID) || {};
         const components = this.getConfigModuleComponents();
         return {
             ...collectionType,
-            attributes: { ...collectionType.attributes, modules: { ...collectionType.attributes.modules, components } }
+            pluginOptions: {
+                ...oldPluginOptions,
+                ...collectionType === null || collectionType === void 0 ? void 0 : collectionType.pluginOptions
+            },
+            attributes: {
+                ...oldAttributes,
+                ...collectionType.attributes,
+                modules: { ...collectionType.attributes.modules, components }
+            }
         };
     },
     getConfigModuleComponents() {