@webbio/strapi-plugin-page-builder 0.12.2-platform → 0.12.3-platform

package/admin/src/components/EditView/CollectionTypeSearch/index.tsx

@@ -1,127 +1,127 @@
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import debounce from 'lodash/debounce';
-import { OptionProps, SingleValue, components } from 'react-select';
-import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
-
-import { Combobox, IReactSelectValue } from '../../Combobox';
-import { getSearchEntities } from '../../../api/collection-type';
-import { usePrevious } from '../../../utils/hooks/usePrevious';
-import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
-
-const SEARCH_DEBOUNCE_MS = 150;
-const PAGE = 1;
-
-interface Props {
-	uid: string;
-	platformTitle?: string;
-}
-
-export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
-	const fetchClient = useFetchClient();
-	const form = useCMEditViewDataManager() as any;
-	const { locales } = useSelector((state: any) => state.i18n_locales);
-	const urlLocale = useGetLocaleFromUrl();
-	const defaultLocale = locales.find((locale: any) => locale.isDefault);
-	const selectedLocale = form.initialData?.locale ?? urlLocale ?? defaultLocale.code;
-	const prevUid = usePrevious(uid);
-	const prevPlatformTitle = usePrevious(platformTitle);
-
-	const [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>(
-		getInitialSelectItem(form.initialData?.collectionTypeId, form.initialData?.collectionTypeTitle)
-	);
-
-	const isPagePageType = !uid;
-	const searchEntitiesIsEnabled = !isPagePageType;
-
-	useEffect(() => {
-		if (form.isCreatingEntry) {
-			setSelected(null);
-		}
-	}, []);
-
-	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
-		const searchEntities = await getSearchEntities({
-			fetchClient,
-			page: PAGE,
-			locale: selectedLocale,
-			uid,
-			searchQuery: inputValue,
-			currentCollectionTypeId: form.initialData?.collectionTypeId,
-			currentPageId: form.initialData?.id,
-			platformTitle
-		});
-
-		return searchEntities.results.map((x) => ({
-			value: String(x.id),
-			label: x.title,
-			isDisabled: x.hasPages && !x.isCurrentSelected,
-			initialSelected: x.isCurrentSelected
-		}));
-	};
-
-	const setCollectionTypeId = (item?: SingleValue<IReactSelectValue>) => {
-		form.onChange({
-			target: {
-				name: 'collectionTypeId',
-				value: item?.value || null
-			},
-			shouldSetInitialValue: true
-		});
-		setSelected(item || null);
-	};
-
-	const handleChange = (item?: SingleValue<IReactSelectValue>) => {
-		setCollectionTypeId(item);
-	};
-
-	useEffect(() => {
-		if ((prevUid !== null && prevUid !== uid) || (prevPlatformTitle !== null && prevPlatformTitle !== platformTitle)) {
-			setSelected(null);
-		}
-	}, [uid, platformTitle]);
-
-	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
-		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
-			return callback(result || []);
-		});
-	}, SEARCH_DEBOUNCE_MS);
-
-	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<IReactSelectValue[]> =>
-		new Promise<IReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue, selectedPlatformTitle));
-		});
-
-	return (
-		<Combobox
-			key={`rerenderOnUidOrPlatformChange-${uid}-${platformTitle}`}
-			id="collectionTypeSearch"
-			label="Link"
-			loadOptions={(i, c) => debouncedFetch(i, c, platformTitle)}
-			cacheOptions
-			onChange={handleChange}
-			customOption={CustomOption}
-			value={selected}
-			defaultOptions={searchEntitiesIsEnabled}
-		/>
-	);
-};
-
-const CustomOption = (props: OptionProps<IReactSelectValue, false>) => {
-	return (
-		<components.Option {...props}>
-			<span>{props.children}</span>
-			{props.isDisabled && <span>Entiteit heeft al een pagina</span>}
-			{props.data.initialSelected && <span>Oorspronkelijk gekoppeld</span>}
-		</components.Option>
-	);
-};
-
-const getInitialSelectItem = (id?: string, title?: string): SingleValue<IReactSelectValue | null> =>
-	id
-		? {
-				value: String(id),
-				label: title ?? '',
-				initialSelected: true
-			}
-		: null;
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import debounce from 'lodash/debounce';
+import { OptionProps, SingleValue, components } from 'react-select';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
+
+import { Combobox, IReactSelectValue } from '../../Combobox';
+import { getSearchEntities } from '../../../api/collection-type';
+import { usePrevious } from '../../../utils/hooks/usePrevious';
+import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
+
+const SEARCH_DEBOUNCE_MS = 150;
+const PAGE = 1;
+
+interface Props {
+	uid: string;
+	platformTitle?: string;
+}
+
+export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
+	const fetchClient = useFetchClient();
+	const form = useCMEditViewDataManager() as any;
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+	const urlLocale = useGetLocaleFromUrl();
+	const defaultLocale = locales.find((locale: any) => locale.isDefault);
+	const selectedLocale = form.initialData?.locale ?? urlLocale ?? defaultLocale.code;
+	const prevUid = usePrevious(uid);
+	const prevPlatformTitle = usePrevious(platformTitle);
+
+	const [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>(
+		getInitialSelectItem(form.initialData?.collectionTypeId, form.initialData?.collectionTypeTitle)
+	);
+
+	const isPagePageType = !uid;
+	const searchEntitiesIsEnabled = !isPagePageType;
+
+	useEffect(() => {
+		if (form.isCreatingEntry) {
+			setSelected(null);
+		}
+	}, []);
+
+	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
+		const searchEntities = await getSearchEntities({
+			fetchClient,
+			page: PAGE,
+			locale: selectedLocale,
+			uid,
+			searchQuery: inputValue,
+			currentCollectionTypeId: form.initialData?.collectionTypeId,
+			currentPageId: form.initialData?.id,
+			platformTitle
+		});
+
+		return searchEntities.results.map((x) => ({
+			value: String(x.id),
+			label: x.title,
+			isDisabled: x.hasPages && !x.isCurrentSelected,
+			initialSelected: x.isCurrentSelected
+		}));
+	};
+
+	const setCollectionTypeId = (item?: SingleValue<IReactSelectValue>) => {
+		form.onChange({
+			target: {
+				name: 'collectionTypeId',
+				value: item?.value || null
+			},
+			shouldSetInitialValue: true
+		});
+		setSelected(item || null);
+	};
+
+	const handleChange = (item?: SingleValue<IReactSelectValue>) => {
+		setCollectionTypeId(item);
+	};
+
+	useEffect(() => {
+		if ((prevUid !== null && prevUid !== uid) || (prevPlatformTitle !== null && prevPlatformTitle !== platformTitle)) {
+			setSelected(null);
+		}
+	}, [uid, platformTitle]);
+
+	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
+		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
+			return callback(result || []);
+		});
+	}, SEARCH_DEBOUNCE_MS);
+
+	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<IReactSelectValue[]> =>
+		new Promise<IReactSelectValue[]>((resolve) => {
+			resolve(getItems(inputValue, selectedPlatformTitle));
+		});
+
+	return (
+		<Combobox
+			key={`rerenderOnUidOrPlatformChange-${uid}-${platformTitle}`}
+			id="collectionTypeSearch"
+			label="Link"
+			loadOptions={(i, c) => debouncedFetch(i, c, platformTitle)}
+			cacheOptions
+			onChange={handleChange}
+			customOption={CustomOption}
+			value={selected}
+			defaultOptions={searchEntitiesIsEnabled}
+		/>
+	);
+};
+
+const CustomOption = (props: OptionProps<IReactSelectValue, false>) => {
+	return (
+		<components.Option {...props}>
+			<span>{props.children}</span>
+			{props.isDisabled && <span>Entiteit heeft al een pagina</span>}
+			{props.data.initialSelected && <span>Oorspronkelijk gekoppeld</span>}
+		</components.Option>
+	);
+};
+
+const getInitialSelectItem = (id?: string, title?: string): SingleValue<IReactSelectValue | null> =>
+	id
+		? {
+				value: String(id),
+				label: title ?? '',
+				initialSelected: true
+			}
+		: null;

package/admin/src/components/EditView/CollectionTypeSettings/CreatePageButton/index.tsx

@@ -1,149 +1,149 @@
-import React, { useState } from 'react';
-import slugify from 'slugify';
-import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-
-import { Plus } from '@strapi/icons';
-import { useFetchClient, useCMEditViewDataManager } from '@strapi/helper-plugin';
-
-import getRequestUrl from '../../../../utils/getRequestUrl';
-import { sanitizeModules } from '../../../../utils/sanitizeModules';
-import { PAGE_UID } from '../../../../../../shared/utils/constants';
-import { IGetTranslationPageLinks } from '../../../../../../server/controllers/collection-types';
-import { usePlatformFormData } from '../../../../utils/hooks/usePlatformFormData';
-
-import S from './styles';
-import { Platform } from '../../../../api/platform';
-
-interface ICreatePageButtonProps {
-	selectedPlatform: Platform;
-	onCreatedPage?: (page: Record<string, any>) => void;
-}
-
-export const CreatePageButton = ({ selectedPlatform, onCreatedPage }: ICreatePageButtonProps) => {
-	const history = useHistory();
-	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
-
-	const { layout, initialData } = form;
-
-	const { locales } = useSelector((state: any) => state.i18n_locales);
-
-	const { post, get, put } = useFetchClient();
-	const url = `/content-manager/collectionType/${PAGE_UID}/create`;
-
-	const handleCreatePage = async (e: React.MouseEvent<HTMLAnchorElement>) => {
-		e.preventDefault();
-
-		try {
-			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}/${selectedPlatform.id}`);
-			const { data: pageType } = await get(pageTypeUrl);
-			const mappedLocalizations = (initialData?.localizations || []).map((x: any) => x?.id).join(',');
-			const linkedPages: { data: IGetTranslationPageLinks[] } = await get(
-				getRequestUrl(`/collection-types-page-links/${layout.uid}/${mappedLocalizations}`)
-			);
-			const createLocalizedPage = !linkedPages?.data?.find((x) => x.locale === initialData?.locale);
-			const defaultLocale = locales.find((locale: any) => locale.isDefault);
-			const locale = initialData?.locale || defaultLocale?.code;
-
-			if (!locale) {
-				throw new Error('No locale found');
-			}
-
-			// Get data inside template
-			let templateData: Record<string, any> | undefined;
-
-			if (pageType?.template?.id) {
-				templateData = await get(getRequestUrl(`/template/${pageType.template.id}`));
-			}
-
-			const modules = sanitizeModules(templateData?.data?.modules || [], false);
-
-			const newPage = await createNewPage({
-				title: initialData?.title,
-				modules,
-				post,
-				locale,
-				pageTypeId: pageType.id,
-				platformId: selectedPlatform.id,
-				parentId: pageType?.defaultParent?.id,
-				collectionTypeId: initialData.id,
-				layoutUid: layout.uid,
-				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
-			});
-
-			if (newPage?.id) {
-				onCreatedPage?.(newPage);
-				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
-					hasPage: false
-				});
-
-				history.push(`/content-manager/collectionType/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
-			}
-		} catch (error) {
-			console.error(error);
-		}
-	};
-
-	return (
-		<S.CreateButton to={url} onClick={handleCreatePage} size="S" variant="secondary" startIcon={<Plus />} width="100%">
-			Maak een pagina aan
-		</S.CreateButton>
-	);
-};
-
-interface ICreateNewPageProps {
-	title?: string;
-	locale: string;
-	collectionTypeId: number;
-	layoutUid: string;
-	modules?: Record<string, any>[];
-	post: any;
-	pageTypeId: number;
-	platformId: number;
-	relatedEntityId?: number;
-	parentId?: number;
-}
-
-const createNewPage = async ({
-	title,
-	post,
-	locale,
-	collectionTypeId,
-	layoutUid,
-	modules,
-	pageTypeId,
-	platformId,
-	relatedEntityId,
-	parentId
-}: ICreateNewPageProps) => {
-	// Including locale in url is neccesary.
-	const relatedEntityIdQuery = relatedEntityId ? `&plugins[i18n][relatedEntityId]=${relatedEntityId}` : '';
-	const url = `/content-manager/collection-types/${PAGE_UID}?plugins[i18n][locale]=${locale}${relatedEntityIdQuery}`;
-	const slugData = title
-		? {
-				slug: slugify(title, {
-					lower: true,
-					trim: true
-				})
-			}
-		: {};
-
-	const { data: page } = await post(url, {
-		...slugData,
-		title,
-		locale,
-		pageType: { connect: [{ id: pageTypeId }] },
-		platform: { connect: [{ id: platformId }] },
-		...(parentId && { parent: { connect: [{ id: parentId }] } }),
-		collectionTypeData: {
-			id: collectionTypeId,
-			__type: layoutUid,
-			__pivot: {
-				field: 'page'
-			}
-		},
-		modules
-	});
-
-	return page;
-};
+import React, { useState } from 'react';
+import slugify from 'slugify';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+
+import { Plus } from '@strapi/icons';
+import { useFetchClient, useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import getRequestUrl from '../../../../utils/getRequestUrl';
+import { sanitizeModules } from '../../../../utils/sanitizeModules';
+import { PAGE_UID } from '../../../../../../shared/utils/constants';
+import { IGetTranslationPageLinks } from '../../../../../../server/controllers/collection-types';
+import { usePlatformFormData } from '../../../../utils/hooks/usePlatformFormData';
+
+import S from './styles';
+import { Platform } from '../../../../api/platform';
+
+interface ICreatePageButtonProps {
+	selectedPlatform: Platform;
+	onCreatedPage?: (page: Record<string, any>) => void;
+}
+
+export const CreatePageButton = ({ selectedPlatform, onCreatedPage }: ICreatePageButtonProps) => {
+	const history = useHistory();
+	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
+
+	const { layout, initialData } = form;
+
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+
+	const { post, get, put } = useFetchClient();
+	const url = `/content-manager/collectionType/${PAGE_UID}/create`;
+
+	const handleCreatePage = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+		e.preventDefault();
+
+		try {
+			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}/${selectedPlatform.id}`);
+			const { data: pageType } = await get(pageTypeUrl);
+			const mappedLocalizations = (initialData?.localizations || []).map((x: any) => x?.id).join(',');
+			const linkedPages: { data: IGetTranslationPageLinks[] } = await get(
+				getRequestUrl(`/collection-types-page-links/${layout.uid}/${mappedLocalizations}`)
+			);
+			const createLocalizedPage = !linkedPages?.data?.find((x) => x.locale === initialData?.locale);
+			const defaultLocale = locales.find((locale: any) => locale.isDefault);
+			const locale = initialData?.locale || defaultLocale?.code;
+
+			if (!locale) {
+				throw new Error('No locale found');
+			}
+
+			// Get data inside template
+			let templateData: Record<string, any> | undefined;
+
+			if (pageType?.template?.id) {
+				templateData = await get(getRequestUrl(`/template/${pageType.template.id}`));
+			}
+
+			const modules = sanitizeModules(templateData?.data?.modules || [], false);
+
+			const newPage = await createNewPage({
+				title: initialData?.title,
+				modules,
+				post,
+				locale,
+				pageTypeId: pageType.id,
+				platformId: selectedPlatform.id,
+				parentId: pageType?.defaultParent?.id,
+				collectionTypeId: initialData.id,
+				layoutUid: layout.uid,
+				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
+			});
+
+			if (newPage?.id) {
+				onCreatedPage?.(newPage);
+				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
+					hasPage: false
+				});
+
+				history.push(`/content-manager/collectionType/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
+	return (
+		<S.CreateButton to={url} onClick={handleCreatePage} size="S" variant="secondary" startIcon={<Plus />} width="100%">
+			Maak een pagina aan
+		</S.CreateButton>
+	);
+};
+
+interface ICreateNewPageProps {
+	title?: string;
+	locale: string;
+	collectionTypeId: number;
+	layoutUid: string;
+	modules?: Record<string, any>[];
+	post: any;
+	pageTypeId: number;
+	platformId: number;
+	relatedEntityId?: number;
+	parentId?: number;
+}
+
+const createNewPage = async ({
+	title,
+	post,
+	locale,
+	collectionTypeId,
+	layoutUid,
+	modules,
+	pageTypeId,
+	platformId,
+	relatedEntityId,
+	parentId
+}: ICreateNewPageProps) => {
+	// Including locale in url is neccesary.
+	const relatedEntityIdQuery = relatedEntityId ? `&plugins[i18n][relatedEntityId]=${relatedEntityId}` : '';
+	const url = `/content-manager/collection-types/${PAGE_UID}?plugins[i18n][locale]=${locale}${relatedEntityIdQuery}`;
+	const slugData = title
+		? {
+				slug: slugify(title, {
+					lower: true,
+					trim: true
+				})
+			}
+		: {};
+
+	const { data: page } = await post(url, {
+		...slugData,
+		title,
+		locale,
+		pageType: { connect: [{ id: pageTypeId }] },
+		platform: { connect: [{ id: platformId }] },
+		...(parentId && { parent: { connect: [{ id: parentId }] } }),
+		collectionTypeData: {
+			id: collectionTypeId,
+			__type: layoutUid,
+			__pivot: {
+				field: 'page'
+			}
+		},
+		modules
+	});
+
+	return page;
+};

package/admin/src/components/EditView/CollectionTypeSettings/CreatePageButton/styles.ts

@@ -1,19 +1,19 @@
-import styled, { css } from 'styled-components';
-
-import { Button } from '@strapi/design-system';
-
-const CreateButton = styled(Button)`
-	${({ _theme }) => css`
-		text-decoration: none;
-
-		> div {
-			display: flex;
-		}
-	`}
-`;
-
-const CreatePageButtonStyles = {
-	CreateButton
-};
-
-export default CreatePageButtonStyles;
+import styled, { css } from 'styled-components';
+
+import { Button } from '@strapi/design-system';
+
+const CreateButton = styled(Button)`
+	${({ _theme }) => css`
+		text-decoration: none;
+
+		> div {
+			display: flex;
+		}
+	`}
+`;
+
+const CreatePageButtonStyles = {
+	CreateButton
+};
+
+export default CreatePageButtonStyles;