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

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

@@ -1,124 +1,124 @@
-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;
-}
-
-export const CollectionTypeSearch = ({ uid }: Props) => {
-	const fetchClient = useFetchClient();
-	const form = useCMEditViewDataManager();
-	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 [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): Promise<IReactSelectValue[]> => {
-		const searchEntities = await getSearchEntities({
-			fetchClient,
-			page: PAGE,
-			locale: selectedLocale,
-			uid,
-			searchQuery: inputValue,
-			currentCollectionTypeId: form.initialData?.collectionTypeId,
-			currentPageId: form.initialData?.id
-		});
-
-		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) {
-			setSelected(null);
-		}
-	}, [uid]);
-
-	const debouncedFetch = debounce((searchTerm, callback) => {
-		promiseOptions(searchTerm).then((result) => {
-			return callback(result || []);
-		});
-	}, SEARCH_DEBOUNCE_MS);
-
-	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
-		new Promise<IReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue));
-		});
-
-	return (
-		<Combobox
-			key={`rerenderOnUidChange-${uid}`}
-			id="collectionTypeSearch"
-			label="Entity"
-			loadOptions={debouncedFetch}
-			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>Entity is in use</span>}
-			{props.data.initialSelected && <span>Currently selected</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;
+}
+
+export const CollectionTypeSearch = ({ uid }: 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 [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): Promise<IReactSelectValue[]> => {
+		const searchEntities = await getSearchEntities({
+			fetchClient,
+			page: PAGE,
+			locale: selectedLocale,
+			uid,
+			searchQuery: inputValue,
+			currentCollectionTypeId: form.initialData?.collectionTypeId,
+			currentPageId: form.initialData?.id
+		});
+
+		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) {
+			setSelected(null);
+		}
+	}, [uid]);
+
+	const debouncedFetch = debounce((searchTerm, callback) => {
+		promiseOptions(searchTerm).then((result) => {
+			return callback(result || []);
+		});
+	}, SEARCH_DEBOUNCE_MS);
+
+	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
+		new Promise<IReactSelectValue[]>((resolve) => {
+			resolve(getItems(inputValue));
+		});
+
+	return (
+		<Combobox
+			key={`rerenderOnUidChange-${uid}`}
+			id="collectionTypeSearch"
+			label="Entity"
+			loadOptions={debouncedFetch}
+			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,101 +1,104 @@
-import React, { useEffect } from 'react';
-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 S from './styles';
-
-export const CreatePageButton = () => {
-	const history = useHistory();
-	const { layout, initialData } = useCMEditViewDataManager();
-
-	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}`);
-			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 locale = initialData?.locale;
-			const modules = sanitizeModules(pageType?.template?.modules || []);
-
-			const newPage = await createNewPage({
-				title: initialData?.title,
-				modules,
-				post,
-				locale,
-				pageTypeId: pageType.id,
-				collectionTypeId: initialData.id,
-				layoutUid: layout.uid,
-				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
-			});
-			if (newPage?.id) {
-				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
-					hasPage: true
-				});
-				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%">
-			Create new page
-		</S.CreateButton>
-	);
-};
-
-interface ICreateNewPageProps {
-	title?: string;
-	locale: string;
-	collectionTypeId: number;
-	layoutUid: string;
-	modules?: Record<string, any>[];
-	post: any;
-	pageTypeId: number;
-	relatedEntityId?: number;
-}
-
-const createNewPage = async ({
-	title,
-	post,
-	locale,
-	collectionTypeId,
-	layoutUid,
-	modules,
-	pageTypeId,
-	relatedEntityId
-}: 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 { data: page } = await post(url, {
-		title,
-		locale,
-		pageType: { connect: [{ id: pageTypeId }] },
-		collectionTypeData: {
-			id: collectionTypeId,
-			__type: layoutUid,
-			__pivot: {
-				field: 'page'
-			}
-		},
-		modules
-	});
-
-	return page;
-};
+import React from 'react';
+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 S from './styles';
+
+export const CreatePageButton = () => {
+	const history = useHistory();
+	const { layout, initialData } = useCMEditViewDataManager() as any;
+
+	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}`);
+			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 locale = initialData?.locale;
+
+			// Get data inside template
+			const templateData = await get(getRequestUrl(`/template/${pageType?.template?.id}`));
+			const modules = sanitizeModules(templateData?.data?.modules || []);
+
+			const newPage = await createNewPage({
+				title: initialData?.title,
+				modules,
+				post,
+				locale,
+				pageTypeId: pageType.id,
+				collectionTypeId: initialData.id,
+				layoutUid: layout.uid,
+				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
+			});
+			if (newPage?.id) {
+				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
+					hasPage: true
+				});
+				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%">
+			Create new page
+		</S.CreateButton>
+	);
+};
+
+interface ICreateNewPageProps {
+	title?: string;
+	locale: string;
+	collectionTypeId: number;
+	layoutUid: string;
+	modules?: Record<string, any>[];
+	post: any;
+	pageTypeId: number;
+	relatedEntityId?: number;
+}
+
+const createNewPage = async ({
+	title,
+	post,
+	locale,
+	collectionTypeId,
+	layoutUid,
+	modules,
+	pageTypeId,
+	relatedEntityId
+}: 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 { data: page } = await post(url, {
+		title,
+		locale,
+		pageType: { connect: [{ id: pageTypeId }] },
+		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;

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

@@ -1,74 +1,74 @@
-import React, { useEffect, useState } from 'react';
-
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Flex } from '@strapi/design-system';
-import { Link } from '@strapi/icons';
-
-import { Wrapper } from '../wrapper';
-import { CreatePageButton } from './CreatePageButton';
-import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants';
-import S from '../Details/styles';
-
-export const CollectionTypeSettings = () => {
-	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager();
-
-	const isUserCreatedContentType = layout.uid.startsWith('api::');
-	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
-
-	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
-	const url = generateLink(linkedPage?.id, initialData?.locale);
-
-	useEffect(() => {
-		if (modifiedData.page?.[0]) {
-			setLinkedPage(modifiedData.page?.[0]);
-		}
-
-		if (modifiedData.page === null) {
-			setLinkedPage(undefined);
-		}
-	}, [modifiedData.page?.[0]]);
-
-	useEffect(() => {
-		if (isCreatingEntry) {
-			onChange({
-				target: {
-					name: 'page',
-					value: null
-				}
-			});
-		}
-	}, []);
-
-	if (isCreatingEntry) {
-		return null;
-	}
-
-	return (
-		<Wrapper title="Gekoppelde pagina">
-			<Flex direction="column" gap={4} width="100%" alignItems="start">
-				{showCreatePageButton && <CreatePageButton />}
-
-				{url && (
-					<Flex direction="column" alignItems="start" width="100%" gap={1}>
-						<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
-							{PAGE_TYPE_PAGE}
-						</S.SubtleType>
-						<S.EntityLinkWrapper variant="pi" textColor="neutral800">
-							<S.EntityLink title={linkedPage?.title || '-'} to={url} variant="pi">
-								<Link />
-								{linkedPage?.title || '-'}
-							</S.EntityLink>
-						</S.EntityLinkWrapper>
-					</Flex>
-				)}
-			</Flex>
-		</Wrapper>
-	);
-};
-
-const generateLink = (entityId?: string, locale?: string) => {
-	if (!entityId) {
-		return '';
-	}
-	return `/content-manager/collectionType/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
-};
+import React, { useEffect, useState } from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Flex } from '@strapi/design-system';
+import { Link } from '@strapi/icons';
+
+import { Wrapper } from '../wrapper';
+import { CreatePageButton } from './CreatePageButton';
+import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants';
+import S from '../Details/styles';
+
+export const CollectionTypeSettings = () => {
+	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager() as any;
+
+	const isUserCreatedContentType = layout.uid.startsWith('api::');
+	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
+
+	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
+	const url = generateLink(linkedPage?.id, initialData?.locale);
+
+	useEffect(() => {
+		if (modifiedData.page?.[0]) {
+			setLinkedPage(modifiedData.page?.[0]);
+		}
+
+		if (modifiedData.page === null) {
+			setLinkedPage(undefined);
+		}
+	}, [modifiedData.page?.[0]]);
+
+	useEffect(() => {
+		if (isCreatingEntry) {
+			onChange({
+				target: {
+					name: 'page',
+					value: null
+				}
+			});
+		}
+	}, []);
+
+	if (isCreatingEntry) {
+		return null;
+	}
+
+	return (
+		<Wrapper title="Gekoppelde pagina">
+			<Flex direction="column" gap={4} width="100%" alignItems="start">
+				{showCreatePageButton && <CreatePageButton />}
+
+				{url && (
+					<Flex direction="column" alignItems="start" width="100%" gap={1}>
+						<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
+							{PAGE_TYPE_PAGE}
+						</S.SubtleType>
+						<S.EntityLinkWrapper variant="pi" textColor="neutral800">
+							<S.EntityLink title={linkedPage?.title || '-'} to={url} variant="pi">
+								<Link />
+								{linkedPage?.title || '-'}
+							</S.EntityLink>
+						</S.EntityLinkWrapper>
+					</Flex>
+				)}
+			</Flex>
+		</Wrapper>
+	);
+};
+
+const generateLink = (entityId?: string, locale?: string) => {
+	if (!entityId) {
+		return '';
+	}
+	return `/content-manager/collectionType/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
+};