@webbio/strapi-plugin-page-builder 0.0.10 → 0.0.12

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-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,64 +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';
-
-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

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

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

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

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

@@ -1,24 +0,0 @@
-/**
- *
- * 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

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