@webbio/strapi-plugin-page-builder 0.0.1

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

@@ -0,0 +1,95 @@
+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();
+
+	const { post, get } = 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({
+				modules,
+				post,
+				locale,
+				pageTypeId: pageType.id,
+				collectionTypeId: initialData.id,
+				layoutUid: layout.uid,
+				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
+			});
+
+			if (newPage?.id) {
+				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 {
+	locale: string;
+	collectionTypeId: number;
+	layoutUid: string;
+	modules?: Record<string, any>[];
+	post: any;
+	pageTypeId: number;
+	relatedEntityId?: number;
+}
+
+const createNewPage = async ({
+	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, {
+		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

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

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

@@ -0,0 +1,53 @@
+import React 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 } = useCMEditViewDataManager();
+
+	const isUserCreatedContentType = layout.uid.startsWith('api::');
+	const linkedPage = initialData.page?.[0];
+
+	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
+	const url = generateLink(linkedPage?.id, initialData?.locale);
+
+	if (isCreatingEntry) {
+		return null;
+	}
+
+	return (
+		<Wrapper title="Settings">
+			<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}`;
+};

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

@@ -0,0 +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}`;
+};

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

@@ -0,0 +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;
+
+		> div {
+			display: flex;
+		}
+	`}
+`;
+
+const DetailsStyles = {
+	SubtleType,
+	EntityLink,
+	EntityLinkWrapper,
+	EditLink
+};
+
+export default DetailsStyles;

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

@@ -0,0 +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="Settings">
+			<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

@@ -0,0 +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;

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

@@ -0,0 +1,64 @@
+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';
+
+export const TemplateSelect = () => {
+	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.modules);
+		}
+	}, [selectedTemplate]);
+
+	return (
+		<>
+			<SingleSelect
+				label="Template"
+				placeholder="Choose a template"
+				value={selectedTemplate?.id || 0}
+				onChange={handleSelectChange}
+			>
+				<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;

package/admin/src/components/EditView/Template/TemplateSelect/use-template-modules.ts

@@ -0,0 +1,30 @@
+import { Template, useGetTemplates } from '../../../../api/template';
+
+import { sanitizeModules } from '../../../../utils/sanitizeModules';
+
+type OnChangeFormType = (props: { target: Record<string, any>; shouldSetInitialValue: boolean }) => void;
+
+export const useTemplateModules = (onChange: OnChangeFormType) => {
+	const { data: templates } = useGetTemplates({});
+
+	return {
+		findTemplate,
+		templates,
+		replaceContentTypeModules: (modules: Record<string, any>[]) => replaceContentTypeModules(onChange, modules)
+	};
+};
+
+const findTemplate = (templates?: Template[], selectedTemplateId?: string | number) =>
+	templates?.find((template) => template.id === Number(selectedTemplateId));
+
+const replaceContentTypeModules = (onChange: OnChangeFormType, modules: Record<string, any>[]) => {
+	const sanitizedModules = sanitizeModules(modules);
+
+	return onChange({
+		target: {
+			name: 'modules',
+			value: sanitizedModules
+		},
+		shouldSetInitialValue: true
+	});
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import { PAGE_UID } from '../../../../shared/utils/constants';
+import { PageSettings } from './PageSettings';
+import { CollectionTypeSettings } from './CollectionTypeSettings';
+import { useHasPageRelation } from '../../api/has-page-relation';
+
+export const EditView = () => {
+	const { layout } = useCMEditViewDataManager();
+
+	const isPageCollectionType = layout.uid === PAGE_UID;
+	const isCollectionType = layout.kind === 'collectionType';
+
+	const { data: hasPageRelation, isLoading } = useHasPageRelation({ uid: layout.uid });
+
+	if (isPageCollectionType) {
+		return <PageSettings />;
+	}
+
+	if (isCollectionType && !isLoading && hasPageRelation) {
+		return <CollectionTypeSettings />;
+	}
+
+	return null;
+};

package/admin/src/components/EditView/page-type-select.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+
+import { PageType } from '../../api/page-type';
+import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
+
+interface Props {
+	onChange: (pageTypeId: string) => void;
+	selectedPageType?: PageType | null;
+	pageTypes?: PageType[];
+}
+
+export const PageTypeSelect = ({ onChange, pageTypes, selectedPageType }: Props) => {
+	return (
+		<SingleSelect
+			label="Page type"
+			placeholder="Choose a page type"
+			value={selectedPageType?.id || PAGE_TYPE_PAGE}
+			onChange={onChange}
+		>
+			<SingleSelectOption value={PAGE_TYPE_PAGE}>Page</SingleSelectOption>
+			{pageTypes?.map((pageType: PageType) => (
+				<SingleSelectOption key={pageType?.uid} value={pageType?.id}>
+					{pageType?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};

package/admin/src/components/EditView/wrapper.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Flex, Box, Divider, Typography } from '@strapi/design-system';
+
+interface Props {
+	title: string;
+	children: React.ReactNode;
+}
+
+export const Wrapper = (props: Props) => {
+	return (
+		<Flex
+			as="aside"
+			direction="column"
+			background="neutral0"
+			borderColor="neutral150"
+			hasRadius={true}
+			paddingTop={6}
+			paddingBottom={4}
+			paddingRight={4}
+			paddingLeft={4}
+			shadow="tableShadow"
+			alignItems="left"
+		>
+			<Typography variant="sigma" textColor="neutral600" id="additional-information">
+				{props.title}
+			</Typography>
+
+			<Box paddingTop={2} paddingBottom={4}>
+				<Divider />
+			</Box>
+
+			{props.children}
+		</Flex>
+	);
+};

package/admin/src/components/Initializer/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import pluginId from '../../pluginId';
+
+type InitializerProps = {
+	setPlugin: (id: string) => void;
+};
+
+const Initializer = ({ setPlugin }: InitializerProps) => {
+	const ref = useRef(setPlugin);
+
+	useEffect(() => {
+		ref.current(pluginId);
+	}, []);
+
+	return null;
+};
+
+export default Initializer;

package/admin/src/components/PageTypeFilter/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { PageTypeFilter } from './page-type-filter';
+import { PAGE_UID } from '../../../../shared/utils/constants';
+
+const PageTypeFilterContainer = () => {
+	const { pathname } = useLocation();
+
+	if (pathname === `/content-manager/collectionType/${PAGE_UID}`) {
+		return <PageTypeFilter />;
+	}
+
+	return null;
+};
+
+export default PageTypeFilterContainer;