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

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

@@ -1,47 +1,47 @@
-import React from 'react';
-
-import { Flex } from '@strapi/design-system';
-import { Link } from '@strapi/icons';
-
-import { PageType } from '../../../api/page-type';
-import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
-import S from './styles';
-
-interface Props {
-	pageType?: PageType | null;
-	entityId?: number;
-	entityTitle?: string;
-	locale?: 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/page-type';
+import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
+import S from './styles';
+
+interface Props {
+	pageType?: PageType | null;
+	entityId?: number;
+	entityTitle?: string;
+	locale?: 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,104 +1,104 @@
-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 { PageType, useGetPageTypes } from '../../../api/page-type';
-import { Details } from '../Details';
-import S from '../Details/styles';
-
-export const PageSettings = () => {
-	const { isCreatingEntry, initialData, onChange, modifiedData } = useCMEditViewDataManager();
-	const { data: pageTypes } = useGetPageTypes({});
-	const [selectedPageType, setSelectedPageType] = useState<PageType | undefined | null>(initialData?.initialPageType);
-	const [isEditting, setIsEditting] = useState(false);
-	const showEditFields = useMemo(
-		() => isCreatingEntry || !selectedPageType?.id || !initialData.collectionTypeTitle || isEditting,
-		[isCreatingEntry, isEditting, selectedPageType, initialData]
-	);
-
-	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
-		onChange({
-			target: {
-				name,
-				value
-			},
-			shouldSetInitialValue: true
-		});
-	};
-
-	useEffect(() => {
-		setSelectedPageType(initialData?.initialPageType);
-
-		setIsEditting(false);
-	}, [initialData]);
-
-	const cancelEdit = () => {
-		setIsEditting(false);
-		setSelectedPageType(initialData?.initialPageType || []);
-		setFormValue('pageType', initialData?.initialPageType || []);
-		setFormValue('collectionTypeTitle', initialData?.collectionTypeTitle);
-		setFormValue('collectionTypeId', initialData?.collectionTypeId);
-	};
-
-	const removePageType = () => {
-		setSelectedPageType(undefined);
-		setFormValue('pageType', []);
-		setFormValue('collectionTypeTitle', undefined);
-		setFormValue('collectionTypeId', undefined);
-	};
-
-	const handleSelectPageType = (pageTypeId: string) => {
-		const pageType = pageTypes?.find((pageType) => pageType.id === Number(pageTypeId));
-
-		if (pageType) {
-			setSelectedPageType(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={pageTypes} selectedPageType={selectedPageType} onChange={handleSelectPageType} />
-						<TemplateSelect />
-						{selectedPageType?.uid && <CollectionTypeSearch uid={selectedPageType.uid} />}
-					</Stack>
-				) : (
-					<Details
-						locale={initialData?.locale}
-						pageType={selectedPageType}
-						entityId={modifiedData.collectionTypeId}
-						entityTitle={modifiedData.collectionTypeTitle}
-					/>
-				)}
-				{(!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 { PageType, useGetPageTypes } from '../../../api/page-type';
+import { Details } from '../Details';
+import S from '../Details/styles';
+
+export const PageSettings = () => {
+	const { isCreatingEntry, initialData, onChange, modifiedData } = useCMEditViewDataManager() as any;
+	const { data: pageTypes } = useGetPageTypes({});
+	const [selectedPageType, setSelectedPageType] = useState<PageType | undefined | null>(initialData?.initialPageType);
+	const [isEditting, setIsEditting] = useState(false);
+	const showEditFields = useMemo(
+		() => isCreatingEntry || !selectedPageType?.id || !initialData.collectionTypeTitle || isEditting,
+		[isCreatingEntry, isEditting, selectedPageType, initialData]
+	);
+
+	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
+		onChange({
+			target: {
+				name,
+				value
+			},
+			shouldSetInitialValue: true
+		});
+	};
+
+	useEffect(() => {
+		setSelectedPageType(initialData?.initialPageType);
+
+		setIsEditting(false);
+	}, [initialData]);
+
+	const cancelEdit = () => {
+		setIsEditting(false);
+		setSelectedPageType(initialData?.initialPageType || []);
+		setFormValue('pageType', initialData?.initialPageType || []);
+		setFormValue('collectionTypeTitle', initialData?.collectionTypeTitle);
+		setFormValue('collectionTypeId', initialData?.collectionTypeId);
+	};
+
+	const removePageType = () => {
+		setSelectedPageType(undefined);
+		setFormValue('pageType', []);
+		setFormValue('collectionTypeTitle', undefined);
+		setFormValue('collectionTypeId', undefined);
+	};
+
+	const handleSelectPageType = (pageTypeId: string) => {
+		const pageType = pageTypes?.find((pageType) => pageType.id === Number(pageTypeId));
+
+		if (pageType) {
+			setSelectedPageType(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={pageTypes} selectedPageType={selectedPageType} onChange={handleSelectPageType} />
+						<TemplateSelect />
+						{selectedPageType?.uid && <CollectionTypeSearch uid={selectedPageType.uid} />}
+					</Stack>
+				) : (
+					<Details
+						locale={initialData?.locale}
+						pageType={selectedPageType}
+						entityId={modifiedData.collectionTypeId}
+						entityTitle={modifiedData.collectionTypeTitle}
+					/>
+				)}
+				{(!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>
+	);
+};

package/admin/src/components/EditView/Template/TemplateConfirmModal/index.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-
-import { Icon, Flex } from '@strapi/design-system';
-import { Rotate } from '@strapi/icons';
-
-import getTrad from '../../../../utils/getTrad';
-import ConfirmModal, { IConfirmModalProps } from '../../../ConfirmModal';
-
-interface ITemplateConfirmModalProps extends IConfirmModalProps {}
-
-const TemplateConfirmModal = (props: ITemplateConfirmModalProps): JSX.Element => {
-	const { formatMessage } = useIntl();
-
-	return (
-		<ConfirmModal
-			{...props}
-			title={
-				<Flex gap={4}>
-					<Icon as={Rotate} color="neutral900" width={4} height={4} />
-					{formatMessage({
-						id: getTrad('template.confirmModal.title')
-					})}
-				</Flex>
-			}
-			body={formatMessage({
-				id: getTrad('template.confirmModal.body')
-			})}
-			submitText={formatMessage({
-				id: getTrad('template.confirmModal.buttons.submit')
-			})}
-		/>
-	);
-};
-
-export default TemplateConfirmModal;
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { Icon, Flex } from '@strapi/design-system';
+import { Rotate } from '@strapi/icons';
+
+import getTrad from '../../../../utils/getTrad';
+import ConfirmModal, { IConfirmModalProps } from '../../../ConfirmModal';
+
+interface ITemplateConfirmModalProps extends IConfirmModalProps {}
+
+const TemplateConfirmModal = (props: ITemplateConfirmModalProps): JSX.Element => {
+	const { formatMessage } = useIntl();
+
+	return (
+		<ConfirmModal
+			{...props}
+			title={
+				<Flex gap={4}>
+					<Icon as={Rotate} color="neutral900" width={4} height={4} />
+					{formatMessage({
+						id: getTrad('template.confirmModal.title')
+					})}
+				</Flex>
+			}
+			body={formatMessage({
+				id: getTrad('template.confirmModal.body')
+			})}
+			submitText={formatMessage({
+				id: getTrad('template.confirmModal.buttons.submit')
+			})}
+		/>
+	);
+};
+
+export default TemplateConfirmModal;

package/admin/src/components/EditView/Template/TemplateSelect/index.tsx

@@ -1,69 +1,69 @@
-import React, { useEffect, useState } from 'react';
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Template } from '../../../../api/template';
-import TemplateConfirmModal from '../TemplateConfirmModal';
-import { useTemplateModules } from './use-template-modules';
-
-interface Props {
-	disabled?: boolean;
-}
-
-export const TemplateSelect = ({ disabled }: Props) => {
-	const { onChange, modifiedData } = useCMEditViewDataManager();
-	const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
-	const { templates, replaceContentTypeModules } = useTemplateModules(onChange);
-	const [templateIdToSelect, setTemplateIdToSelect] = useState<string | undefined>();
-
-	const handleSelectChange = (templateId?: string) => {
-		setTemplateIdToSelect(templateId);
-	};
-
-	const handleSelectTemplate = (templateId?: string) => {
-		const template = templates?.find((template) => template.id === Number(templateId));
-		template == null ? setSelectedTemplate(null) : setSelectedTemplate(template);
-
-		setTemplateIdToSelect(undefined);
-	};
-
-	useEffect(() => {
-		const noModules = getHasModules(modifiedData?.modules);
-
-		const template = templates?.find((template) => template.id === Number(modifiedData?.pageType?.[0]?.templateId));
-		if (template && noModules) {
-			setSelectedTemplate(template);
-		}
-	}, [modifiedData?.pageType]);
-
-	useEffect(() => {
-		if (selectedTemplate !== null) {
-			replaceContentTypeModules(selectedTemplate.id);
-		}
-	}, [selectedTemplate]);
-
-	return (
-		<>
-			<SingleSelect
-				label="Template"
-				placeholder="Choose a template"
-				value={selectedTemplate?.id || 0}
-				onChange={handleSelectChange}
-				disabled={disabled}
-			>
-				<SingleSelectOption value={0}>None</SingleSelectOption>
-				{templates?.map((template) => (
-					<SingleSelectOption key={template.id} value={template.id}>
-						{template.title}
-					</SingleSelectOption>
-				))}
-			</SingleSelect>
-			<TemplateConfirmModal
-				isOpen={Boolean(templateIdToSelect)}
-				onSubmit={() => handleSelectTemplate(templateIdToSelect)}
-				closeModal={() => setTemplateIdToSelect(undefined)}
-			/>
-		</>
-	);
-};
-
-const getHasModules = (modules: any[]): boolean => (modules?.length || 0) === 0;
+import React, { useEffect, useState } from 'react';
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Template } from '../../../../api/template';
+import TemplateConfirmModal from '../TemplateConfirmModal';
+import { useTemplateModules } from './use-template-modules';
+
+interface Props {
+	disabled?: boolean;
+}
+
+export const TemplateSelect = ({ disabled }: Props) => {
+	const { onChange, modifiedData } = useCMEditViewDataManager() as any;
+	const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+	const { templates, replaceContentTypeModules } = useTemplateModules(onChange);
+	const [templateIdToSelect, setTemplateIdToSelect] = useState<string | undefined>();
+
+	const handleSelectChange = (templateId?: string) => {
+		setTemplateIdToSelect(templateId);
+	};
+
+	const handleSelectTemplate = (templateId?: string) => {
+		const template = templates?.find((template) => template.id === Number(templateId));
+		template == null ? setSelectedTemplate(null) : setSelectedTemplate(template);
+
+		setTemplateIdToSelect(undefined);
+	};
+
+	useEffect(() => {
+		const noModules = getHasModules(modifiedData?.modules);
+
+		const template = templates?.find((template) => template.id === Number(modifiedData?.pageType?.[0]?.templateId));
+		if (template && noModules) {
+			setSelectedTemplate(template);
+		}
+	}, [modifiedData?.pageType]);
+
+	useEffect(() => {
+		if (selectedTemplate !== null) {
+			replaceContentTypeModules(selectedTemplate.id);
+		}
+	}, [selectedTemplate]);
+
+	return (
+		<>
+			<SingleSelect
+				label="Template"
+				placeholder="Choose a template"
+				value={selectedTemplate?.id || 0}
+				onChange={handleSelectChange}
+				disabled={Boolean(disabled)}
+			>
+				<SingleSelectOption value={0}>None</SingleSelectOption>
+				{templates?.map((template) => (
+					<SingleSelectOption key={template.id} value={template.id}>
+						{template.title}
+					</SingleSelectOption>
+				))}
+			</SingleSelect>
+			<TemplateConfirmModal
+				isOpen={Boolean(templateIdToSelect)}
+				onSubmit={() => handleSelectTemplate(templateIdToSelect)}
+				closeModal={() => setTemplateIdToSelect(undefined)}
+			/>
+		</>
+	);
+};
+
+const getHasModules = (modules: any[]): boolean => (modules?.length || 0) === 0;