@webbio/strapi-plugin-page-builder 0.0.1

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,115 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+
+import { getFetchClient } from '@strapi/helper-plugin';
+
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+import PageTypeFilter from './components/PageTypeFilter';
+import { EditView } from './components/EditView';
+import getRequestUrl from './utils/getRequestUrl';
+import { PAGE_UID } from '../../shared/utils/constants';
+
+const name = pluginPkg.strapi.name;
+
+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 {
+	register(app: any) {
+		app.addMiddlewares(middlewares);
+		app.addMenuLink({
+			to: `/plugins/${pluginId}`,
+			icon: PluginIcon,
+			intlLabel: {
+				id: `${pluginId}.plugin.name`,
+				defaultMessage: name
+			},
+			Component: async () => {
+				const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
+
+				return component;
+			},
+			permissions: [
+				// Uncomment to set the permissions of the plugin here
+				// {
+				//   action: '', // the action name should be plugin::plugin-name.actionType
+				//   subject: null,
+				// },
+			]
+		});
+		const plugin = {
+			id: pluginId,
+			initializer: Initializer,
+			isReady: false,
+			name
+		};
+
+		app.registerPlugin(plugin);
+	},
+
+	bootstrap(app: any) {
+		app.injectContentManagerComponent('editView', 'right-links', {
+			name: 'collectionType-picker',
+			Component: EditView
+		});
+		app.injectContentManagerComponent('listView', 'actions', {
+			name: 'collectionType-picker',
+			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/pages/App/index.tsx

@@ -0,0 +1,25 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { AnErrorOccurred } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import HomePage from '../HomePage';
+
+const App = () => {
+	return (
+		<div>
+			<Switch>
+				<Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+				<Route component={AnErrorOccurred} />
+			</Switch>
+		</div>
+	);
+};
+
+export default App;

package/admin/src/pages/HomePage/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../pluginId';
+
+const HomePage = () => {
+	return (
+		<div>
+			<h1>{pluginId}&apos;s HomePage</h1>
+			<p>Happy coding</p>
+		</div>
+	);
+};
+
+export default HomePage;

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/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@webbio/strapi-plugin-page-builder",
+	"version": "0.0.1",
+	"description": "This is the description of the plugin.",
+	"scripts": {
+		"develop": "tsc -p tsconfig.server.json -w",
+		"build": "tsc -p tsconfig.server.json",
+		"spu": "yarn upgrade-interactive --latest",
+		"prepublish": "tsc",
+		"format": "prettier --write ."
+	},
+	"strapi": {
+		"name": "page-builder",
+		"description": "Description of page-builder plugin",
+		"displayName": "Page Builder",
+		"kind": "plugin"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webbio/strapi-plugin-internal-links.git"
+	},
+	"dependencies": {
+		"@strapi/design-system": "^1.8.2",
+		"@strapi/helper-plugin": "^4.12.0",
+		"@strapi/icons": "^1.8.2",
+		"@strapi/typescript-utils": "^4.12.0",
+		"@strapi/utils": "^4.12.0",
+		"react-select": "^5.7.4"
+	},
+	"devDependencies": {
+		"@strapi/typescript-utils": "^4.12.0",
+		"@types/react": "^17.0.53",
+		"@types/react-dom": "^18.0.28",
+		"@types/react-router-dom": "^5.3.3",
+		"@types/styled-components": "^5.1.26",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^5.3.4",
+		"styled-components": "^5.3.6",
+		"typescript": "5.1.6"
+	},
+	"peerDependencies": {
+		"@strapi/strapi": "^4.12.0",
+		"@webbio/strapi-plugin-slug": "^0.1.0",
+		"react": "^17.0.0 || ^18.0.0",
+		"react-dom": "^17.0.0 || ^18.0.0",
+		"react-router-dom": "^5.3.4",
+		"styled-components": "^5.3.6"
+	},
+	"author": {
+		"name": "Webbio B.V.",
+		"email": "info@webbio.nl",
+		"url": "https://webbio.nl"
+	},
+	"maintainers": [
+		{
+			"name": "Webbio B.V.",
+			"email": "info@webbio.nl",
+			"url": "https://webbio.nl"
+		}
+	],
+	"engines": {
+		"node": ">=14.19.1 <=18.x.x",
+		"npm": ">=6.0.0"
+	},
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	}
+}

package/server/bootstrap.ts

@@ -0,0 +1,106 @@
+import { Strapi } from '@strapi/strapi';
+import { errors } from '@strapi/utils';
+
+import { PAGE_UID } from '../shared/utils/constants';
+
+export default async ({ strapi }: { strapi: Strapi }) => {
+	// TODO: refactor to own function
+	try {
+		const pageTypes = await strapi.entityService.findMany('api::page-type.page-type', {
+			limit: -1
+		});
+		const pagePermissions = pageTypes.map((pageType) => {
+			const name = `page-type-is-${pageType.uid}`;
+			const displayName = pageType.title;
+
+			return {
+				plugin: 'page-builder',
+				name,
+				displayName,
+				category: 'Page type',
+				handler: async () => {
+					return {
+						$or: [
+							{
+								'pageType.uid': {
+									$eq: pageType.uid
+								}
+							},
+							{
+								uid: {
+									$eq: pageType.uid
+								}
+							}
+						]
+					};
+				}
+			};
+		});
+		// @ts-ignore shitty types
+		await strapi.admin.services.permission.conditionProvider.registerMany(pagePermissions);
+	} catch {
+		console.log('Cannot set page permissions');
+	}
+
+	const updateCollectionTypeData = (data: any, collectionTypeId: number, uid: string) => {
+		data.collectionTypeData = {
+			id: collectionTypeId,
+			__type: uid,
+			__pivot: {
+				field: 'page'
+			}
+		};
+
+		return data;
+	};
+
+	strapi.db.lifecycles.subscribe({
+		// @ts-ignore
+		models: [PAGE_UID],
+		async beforeCreate(event) {
+			let { data } = event.params;
+			const collectionTypeId = data?.collectionTypeId;
+			const pageTypeId = data?.pageType.connect?.[0]?.id || data.initialPageType;
+
+			if (collectionTypeId && pageTypeId) {
+				const { uid } = await strapi.entityService.findOne('api::page-type.page-type', pageTypeId);
+				const collectionToConnect = await strapi.entityService.findOne(uid, collectionTypeId, {
+					populate: { page: true }
+				});
+
+				if (collectionToConnect.page && collectionToConnect.page.length > 0) {
+					throw new errors.ValidationError('You can only link one CollectionType to one page');
+				}
+
+				data = updateCollectionTypeData(data, collectionTypeId, uid);
+			}
+		},
+		async beforeUpdate(event) {
+			let data = event?.params?.data;
+			const collectionTypeId = data?.collectionTypeId;
+			const pageTypeId = data?.pageType?.connect?.[0]?.id || data?.initialPageType;
+			const removedPageType = data?.pageType?.disconnect?.[0]?.id;
+
+			if (removedPageType || collectionTypeId === null) {
+				data.collectionTypeData = undefined;
+			}
+
+			if (collectionTypeId && pageTypeId && !removedPageType) {
+				const { uid } = await strapi.entityService.findOne('api::page-type.page-type', pageTypeId);
+				const collectionToConnect = await strapi.entityService.findOne(uid, collectionTypeId, {
+					populate: { page: true }
+				});
+
+				if (
+					collectionToConnect.page &&
+					collectionToConnect.page.length > 0 &&
+					!collectionToConnect?.page.some((p) => p.id === data.id)
+				) {
+					throw new errors.ValidationError('You can only link one CollectionType to one page');
+				}
+
+				data = updateCollectionTypeData(data, collectionTypeId, uid);
+			}
+		}
+	});
+};

package/server/config/index.ts

@@ -0,0 +1,4 @@
+export default {
+	default: {},
+	validator() {}
+};

package/server/content-types/index.ts

@@ -0,0 +1 @@
+export default {};

package/server/controllers/collection-types.ts

@@ -0,0 +1,27 @@
+export default {
+	async hasPageRelation(ctx: any) {
+		const uid = ctx.params?.uid;
+
+		// @ts-ignore
+		return strapi.service('plugin::page-builder.collection-types').hasPageRelation(uid);
+	},
+	async getTranslationPageLinks(ctx: any): Promise<IGetTranslationPageLinks[] | undefined> {
+		const { uid, ids } = ctx.params || {};
+		const idsArr = (ids as string)
+			?.split(',')
+			.map(Number)
+			.filter((x) => !isNaN(x));
+
+		if (!uid || idsArr?.length === 0) {
+			return undefined;
+		}
+
+		// @ts-ignore
+		return strapi.service('plugin::page-builder.collection-types').getTranslationPageLinks(uid, idsArr);
+	}
+};
+
+export interface IGetTranslationPageLinks {
+	id: number;
+	locale: string;
+}

package/server/controllers/index.ts

@@ -0,0 +1,9 @@
+import page from './page';
+import pageType from './page-type';
+import collectionTypes from './collection-types';
+
+export default {
+	page,
+	'page-type': pageType,
+	'collection-types': collectionTypes
+};

package/server/controllers/page-type.ts

@@ -0,0 +1,12 @@
+export default {
+	async findOneByUid(ctx: any) {
+		const uid = ctx?.params?.uid;
+
+		if (!uid) {
+			return ctx.badRequest('uid is missing.');
+		}
+
+		// @ts-ignore strapi typings
+		return await strapi.service('plugin::page-builder.page-type').findOneByUid(uid);
+	}
+};

package/server/controllers/page.ts

@@ -0,0 +1,20 @@
+import { Strapi } from '@strapi/strapi';
+
+import { PAGE_UID } from '../../shared/utils/constants';
+
+export default {
+	async getPage(ctx) {
+		const id = ctx.params?.id;
+
+		return (strapi as Strapi).service('plugin::page-builder.page')?.getPage(id);
+	},
+
+	async findOneBySlug(ctx) {
+		const { slug = '' } = ctx.params;
+
+		const entity = await (strapi as Strapi).service(PAGE_UID)?.find({ filters: { slug } });
+		const sanitizedEntity = await this.sanitizeOutput(entity, ctx);
+
+		return this.transformResponse(sanitizedEntity);
+	}
+};

package/server/destroy.ts

@@ -0,0 +1,5 @@
+import { Strapi } from '@strapi/strapi';
+
+export default ({ strapi }: { strapi: Strapi }) => {
+	// destroy phase
+};