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

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

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