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

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

@@ -1,82 +1,82 @@
-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 { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
-import S from '../Details/styles';
-
-interface CollectionTypeSettingsProps {
-	onlyPlatform?: boolean;
-}
-
-export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsProps) => {
-	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
-	const { selectedPlatform, isLoadingPlatform } = usePlatformFormData(form);
-	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = form;
-	const isUserCreatedContentType = layout.uid.startsWith('api::');
-	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
-
-	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage && !isLoadingPlatform;
-	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
-				}
-			});
-		}
-	}, []);
-
-	return (
-		<>
-			{!isCreatingEntry && !onlyPlatform && (
-				<Wrapper title="Gekoppelde pagina">
-					<Flex direction="column" gap={4} width="100%" alignItems="start">
-						{showCreatePageButton && selectedPlatform && (
-							<CreatePageButton onCreatedPage={(page) => setLinkedPage(page)} selectedPlatform={selectedPlatform} />
-						)}
-
-						{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 { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
+import S from '../Details/styles';
+
+interface CollectionTypeSettingsProps {
+	onlyPlatform?: boolean;
+}
+
+export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsProps) => {
+	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
+	const { selectedPlatform, isLoadingPlatform } = usePlatformFormData(form);
+	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = form;
+	const isUserCreatedContentType = layout.uid.startsWith('api::');
+	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
+
+	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage && !isLoadingPlatform;
+	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
+				}
+			});
+		}
+	}, []);
+
+	return (
+		<>
+			{!isCreatingEntry && !onlyPlatform && (
+				<Wrapper title="Gekoppelde pagina">
+					<Flex direction="column" gap={4} width="100%" alignItems="start">
+						{showCreatePageButton && selectedPlatform && (
+							<CreatePageButton onCreatedPage={(page) => setLinkedPage(page)} selectedPlatform={selectedPlatform} />
+						)}
+
+						{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}`;
+};

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

@@ -1,48 +1,48 @@
-import React from 'react';
-
-import { Flex } from '@strapi/design-system';
-import { Link } from '@strapi/icons';
-
-import { PageType } from '../../../api/platform-page-types';
-import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
-import S from './styles';
-
-interface Props {
-	pageType?: PageType | null;
-	entityId?: number;
-	entityTitle?: string;
-	locale?: string;
-	platformTitle?: string;
-}
-
-const Details = (props: Props) => {
-	const { entityTitle, pageType } = props;
-
-	const url = generateLink(props);
-
-	return (
-		<Flex gap={4} width="100%" direction="column">
-			<Flex direction="column" alignItems="start" width="100%" gap={1}>
-				<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
-					{pageType?.title || PAGE_TYPE_PAGE}
-				</S.SubtleType>
-				<S.EntityLinkWrapper variant="pi" textColor="neutral800">
-					<S.EntityLink title={entityTitle} to={url} variant="pi">
-						<Link />
-						{entityTitle}
-					</S.EntityLink>
-				</S.EntityLinkWrapper>
-			</Flex>
-		</Flex>
-	);
-};
-
-export { Details };
-
-const generateLink = ({ locale, pageType, entityId }: Props) => {
-	if (!pageType?.uid || !entityId) {
-		return '';
-	}
-
-	return `/content-manager/collectionType/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
-};
+import React from 'react';
+
+import { Flex } from '@strapi/design-system';
+import { Link } from '@strapi/icons';
+
+import { PageType } from '../../../api/platform-page-types';
+import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
+import S from './styles';
+
+interface Props {
+	pageType?: PageType | null;
+	entityId?: number;
+	entityTitle?: string;
+	locale?: string;
+	platformTitle?: string;
+}
+
+const Details = (props: Props) => {
+	const { entityTitle, pageType } = props;
+
+	const url = generateLink(props);
+
+	return (
+		<Flex gap={4} width="100%" direction="column">
+			<Flex direction="column" alignItems="start" width="100%" gap={1}>
+				<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
+					{pageType?.title || PAGE_TYPE_PAGE}
+				</S.SubtleType>
+				<S.EntityLinkWrapper variant="pi" textColor="neutral800">
+					<S.EntityLink title={entityTitle} to={url} variant="pi">
+						<Link />
+						{entityTitle}
+					</S.EntityLink>
+				</S.EntityLinkWrapper>
+			</Flex>
+		</Flex>
+	);
+};
+
+export { Details };
+
+const generateLink = ({ locale, pageType, entityId }: Props) => {
+	if (!pageType?.uid || !entityId) {
+		return '';
+	}
+
+	return `/content-manager/collectionType/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
+};

package/admin/src/components/EditView/Details/styles.ts

@@ -1,51 +1,51 @@
-import styled, { css } from 'styled-components';
-
-import { Typography, Link, Button } from '@strapi/design-system';
-
-const SubtleType = styled(Typography)`
-	${({ _theme }) => css`
-		text-transform: capitalize;
-	`}
-`;
-
-const EntityLinkWrapper = styled(Typography)`
-	${({ _theme }) => css`
-		display: flex;
-	`}
-`;
-
-const EntityLink = styled(Link)`
-	${({ _theme }) => css`
-		span {
-			line-height: 1.2;
-			font-size: inherit;
-			display: flex;
-			gap: 4px;
-			align-items: center;
-		}
-
-		svg {
-			width: 0.7rem;
-			height: 0.7rem;
-		}
-	`}
-`;
-
-const EditLink = styled(Button)`
-	${({ _theme }) => css`
-		text-decoration: none;
-
-		svg {
-			flex-shrink: 0;
-		}
-	`}
-`;
-
-const DetailsStyles = {
-	SubtleType,
-	EntityLink,
-	EntityLinkWrapper,
-	EditLink
-};
-
-export default DetailsStyles;
+import styled, { css } from 'styled-components';
+
+import { Typography, Link, Button } from '@strapi/design-system';
+
+const SubtleType = styled(Typography)`
+	${({ _theme }) => css`
+		text-transform: capitalize;
+	`}
+`;
+
+const EntityLinkWrapper = styled(Typography)`
+	${({ _theme }) => css`
+		display: flex;
+	`}
+`;
+
+const EntityLink = styled(Link)`
+	${({ _theme }) => css`
+		span {
+			line-height: 1.2;
+			font-size: inherit;
+			display: flex;
+			gap: 4px;
+			align-items: center;
+		}
+
+		svg {
+			width: 0.7rem;
+			height: 0.7rem;
+		}
+	`}
+`;
+
+const EditLink = styled(Button)`
+	${({ _theme }) => css`
+		text-decoration: none;
+
+		svg {
+			flex-shrink: 0;
+		}
+	`}
+`;
+
+const DetailsStyles = {
+	SubtleType,
+	EntityLink,
+	EntityLinkWrapper,
+	EditLink
+};
+
+export default DetailsStyles;

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

@@ -1,124 +1,124 @@
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Stack, Flex } from '@strapi/design-system';
-import { Cog, Cross } from '@strapi/icons';
-import { TemplateSelect } from '../Template/TemplateSelect';
-import { PageTypeSelect } from '../page-type-select';
-import { CollectionTypeSearch } from '../CollectionTypeSearch';
-import { Wrapper } from '../wrapper';
-import { Details } from '../Details';
-import { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
-import { useGetPageTypesForPlatform } from '../../../api/platform-page-types';
-import S from '../Details/styles';
-import { useGetPageTypeRelation } from '../../../api/page-type-relation';
-
-export const PageSettings = () => {
-	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
-	const { isCreatingEntry, initialData, onChange, modifiedData, layout } = form;
-	const { selectedPlatform, isLoadingPlatform } = usePlatformFormData(form);
-	const { data: pageTypeRelation } = useGetPageTypeRelation({
-		id: initialData?.id,
-		uid: layout.uid
-	});
-
-	const { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
-		id: selectedPlatform?.id
-	});
-	const selectedPageType = pageTypesForPlatform?.find(
-		(pageType) => pageType.id === Number(modifiedData?.pageType?.[0]?.id || pageTypeRelation?.id)
-	);
-
-	const noPlatformSelected = useMemo(() => !Boolean(selectedPlatform), [selectedPlatform]);
-	const [isEditting, setIsEditting] = useState(false);
-	const showEditFields = useMemo(
-		() => isCreatingEntry || !initialData?.initialPageType?.id || !initialData.collectionTypeTitle || isEditting,
-		[isCreatingEntry, isEditting, initialData?.initialPageType, initialData]
-	);
-
-	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
-		onChange({
-			target: {
-				name,
-				value
-			},
-			shouldSetInitialValue: true
-		});
-	};
-
-	useEffect(() => {
-		if (!isLoadingPlatform) {
-			setIsEditting(false);
-		}
-	}, [isLoadingPlatform]);
-
-	const cancelEdit = () => {
-		setIsEditting(false);
-		setFormValue('pageType', initialData?.initialPageType || []);
-		setFormValue('collectionTypeTitle', initialData?.collectionTypeTitle);
-		setFormValue('collectionTypeId', initialData?.collectionTypeId);
-		setFormValue('platform', modifiedData?.platform);
-	};
-
-	const removePageType = () => {
-		setFormValue('pageType', []);
-		setFormValue('collectionTypeTitle', undefined);
-		setFormValue('collectionTypeId', undefined);
-	};
-
-	const handleSelectPageType = (pageTypeId: string) => {
-		const pageType = pageTypesForPlatform?.find((pageType) => pageType.id === Number(pageTypeId));
-
-		if (pageType) {
-			const formPageType = {
-				...pageType,
-				mainField: pageType.uid,
-				label: pageType.uid,
-				value: pageType.id
-			};
-			setFormValue('pageType', [formPageType]);
-		} else {
-			removePageType();
-		}
-	};
-
-	return (
-		<Wrapper title="Gekoppelde type">
-			<Flex direction="column" gap={4} width="100%">
-				{showEditFields ? (
-					<Stack spacing={4} width="100%">
-						<PageTypeSelect
-							pageTypes={pageTypesForPlatform}
-							selectedPageType={selectedPageType}
-							onChange={handleSelectPageType}
-							disabled={noPlatformSelected}
-						/>
-						<TemplateSelect disabled={noPlatformSelected} />
-						{selectedPageType?.uid && (
-							<CollectionTypeSearch uid={selectedPageType.uid} platformTitle={selectedPlatform?.title} />
-						)}
-					</Stack>
-				) : (
-					<Details
-						locale={initialData?.locale}
-						pageType={selectedPageType}
-						entityId={modifiedData.collectionTypeId}
-						entityTitle={modifiedData.collectionTypeTitle}
-						platformTitle={selectedPlatform?.title}
-					/>
-				)}
-				{(!showEditFields || isEditting) && (
-					<S.EditLink
-						onClick={() => (isEditting ? cancelEdit() : setIsEditting(true))}
-						size="S"
-						variant={isEditting ? 'danger-light' : 'secondary'}
-						startIcon={isEditting ? <Cross /> : <Cog />}
-						width="100%"
-					>
-						{isEditting ? 'Annuleer bewerking' : 'Bewerk koppeling'}
-					</S.EditLink>
-				)}
-			</Flex>
-		</Wrapper>
-	);
-};
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Stack, Flex } from '@strapi/design-system';
+import { Cog, Cross } from '@strapi/icons';
+import { TemplateSelect } from '../Template/TemplateSelect';
+import { PageTypeSelect } from '../page-type-select';
+import { CollectionTypeSearch } from '../CollectionTypeSearch';
+import { Wrapper } from '../wrapper';
+import { Details } from '../Details';
+import { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
+import { useGetPageTypesForPlatform } from '../../../api/platform-page-types';
+import S from '../Details/styles';
+import { useGetPageTypeRelation } from '../../../api/page-type-relation';
+
+export const PageSettings = () => {
+	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
+	const { isCreatingEntry, initialData, onChange, modifiedData, layout } = form;
+	const { selectedPlatform, isLoadingPlatform } = usePlatformFormData(form);
+	const { data: pageTypeRelation } = useGetPageTypeRelation({
+		id: initialData?.id,
+		uid: layout.uid
+	});
+
+	const { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
+		id: selectedPlatform?.id
+	});
+	const selectedPageType = pageTypesForPlatform?.find(
+		(pageType) => pageType.id === Number(modifiedData?.pageType?.[0]?.id || pageTypeRelation?.id)
+	);
+
+	const noPlatformSelected = useMemo(() => !Boolean(selectedPlatform), [selectedPlatform]);
+	const [isEditting, setIsEditting] = useState(false);
+	const showEditFields = useMemo(
+		() => isCreatingEntry || !initialData?.initialPageType?.id || !initialData.collectionTypeTitle || isEditting,
+		[isCreatingEntry, isEditting, initialData?.initialPageType, initialData]
+	);
+
+	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
+		onChange({
+			target: {
+				name,
+				value
+			},
+			shouldSetInitialValue: true
+		});
+	};
+
+	useEffect(() => {
+		if (!isLoadingPlatform) {
+			setIsEditting(false);
+		}
+	}, [isLoadingPlatform]);
+
+	const cancelEdit = () => {
+		setIsEditting(false);
+		setFormValue('pageType', initialData?.initialPageType || []);
+		setFormValue('collectionTypeTitle', initialData?.collectionTypeTitle);
+		setFormValue('collectionTypeId', initialData?.collectionTypeId);
+		setFormValue('platform', modifiedData?.platform);
+	};
+
+	const removePageType = () => {
+		setFormValue('pageType', []);
+		setFormValue('collectionTypeTitle', undefined);
+		setFormValue('collectionTypeId', undefined);
+	};
+
+	const handleSelectPageType = (pageTypeId: string) => {
+		const pageType = pageTypesForPlatform?.find((pageType) => pageType.id === Number(pageTypeId));
+
+		if (pageType) {
+			const formPageType = {
+				...pageType,
+				mainField: pageType.uid,
+				label: pageType.uid,
+				value: pageType.id
+			};
+			setFormValue('pageType', [formPageType]);
+		} else {
+			removePageType();
+		}
+	};
+
+	return (
+		<Wrapper title="Gekoppelde type">
+			<Flex direction="column" gap={4} width="100%">
+				{showEditFields ? (
+					<Stack spacing={4} width="100%">
+						<PageTypeSelect
+							pageTypes={pageTypesForPlatform}
+							selectedPageType={selectedPageType}
+							onChange={handleSelectPageType}
+							disabled={noPlatformSelected}
+						/>
+						<TemplateSelect disabled={noPlatformSelected} />
+						{selectedPageType?.uid && (
+							<CollectionTypeSearch uid={selectedPageType.uid} platformTitle={selectedPlatform?.title} />
+						)}
+					</Stack>
+				) : (
+					<Details
+						locale={initialData?.locale}
+						pageType={selectedPageType}
+						entityId={modifiedData.collectionTypeId}
+						entityTitle={modifiedData.collectionTypeTitle}
+						platformTitle={selectedPlatform?.title}
+					/>
+				)}
+				{(!showEditFields || isEditting) && (
+					<S.EditLink
+						onClick={() => (isEditting ? cancelEdit() : setIsEditting(true))}
+						size="S"
+						variant={isEditting ? 'danger-light' : 'secondary'}
+						startIcon={isEditting ? <Cross /> : <Cog />}
+						width="100%"
+					>
+						{isEditting ? 'Annuleer bewerking' : 'Bewerk koppeling'}
+					</S.EditLink>
+				)}
+			</Flex>
+		</Wrapper>
+	);
+};