@webbio/strapi-plugin-page-builder 0.6.0-platform → 0.8.0-platform

package/admin/src/components/PageTypeEditView/TemplatePlatformSelect/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+
+import { useGetTemplates } from '../../../api/template';
+
+export const TemplatePlatformSelect = () => {
+	const { onChange, modifiedData } = (useCMEditViewDataManager() || {}) as Record<string, any>;
+	const { data: templates } = useGetTemplates({ id: modifiedData?.platform?.[0]?.id });
+
+	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
+		onChange({
+			target: {
+				name,
+				value
+			},
+			shouldSetInitialValue: true
+		});
+	};
+
+	const handleSelectTemplate = (templateId: string) => {
+		const template = templates?.find((pageType) => pageType.id === Number(templateId));
+
+		if (template) {
+			const formTemplate = {
+				...template,
+				mainField: template.title,
+				label: template.title,
+				value: template.id
+			};
+			setFormValue('template', [formTemplate]);
+		} else {
+			setFormValue('template', []);
+		}
+	};
+
+	return (
+		<SingleSelect
+			width="100%"
+			label="Template"
+			placeholder="Kies een template"
+			value={modifiedData?.template?.[0]?.id || 0}
+			onChange={handleSelectTemplate}
+			disabled={Boolean(!modifiedData?.platform?.[0]?.id)}
+		>
+			<SingleSelectOption value={0}>Geen template geselecteerd</SingleSelectOption>
+			{templates?.map((template) => (
+				<SingleSelectOption key={template.id} value={template.id}>
+					{template.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Stack } from '@strapi/design-system';
+
+import { PAGE_TYPE_UID } from '../../../../shared/utils/constants';
+import { TemplatePlatformSelect } from './TemplatePlatformSelect';
+import { Wrapper } from '../EditView/wrapper';
+import { PageByPlatformSearch } from './PageByPlatformSelect';
+
+export const PageTypeEditView = () => {
+	const { layout } = useCMEditViewDataManager() as any;
+
+	const isPageTypeCollectionType = layout.uid === PAGE_TYPE_UID;
+
+	if (isPageTypeCollectionType) {
+		return (
+			<Wrapper title="Instellingen">
+				<Stack spacing={4} width="100%">
+					<TemplatePlatformSelect />
+					<PageByPlatformSearch />
+				</Stack>
+			</Wrapper>
+		);
+	}
+
+	return null;
+};

package/admin/src/components/PlatformFilteredSelectField/InputIcon/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '@strapi/design-system';
+import { Text } from '@strapi/icons';
+
+const IconBox = styled.div`
+	svg > rect {
+		fill: #0e4dff;
+		stroke: #0e4dff;
+	}
+
+	svg > path {
+		fill: #fff;
+	}
+`;
+
+const FieldIcon = () => (
+	<IconBox>
+		<Icon width={7} height={6} as={Text} />
+	</IconBox>
+);
+
+export default FieldIcon;

package/admin/src/components/PlatformFilteredSelectField/Multi/index.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+import { useFetchClient } from '@strapi/helper-plugin';
+import pick from 'lodash/pick';
+
+import RelationInput from '@strapi/admin/admin/src/content-manager/components/RelationInput/RelationInput';
+
+import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
+import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { getTranslation } from '../utils/get-translations';
+
+const PAGE = 1;
+
+// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
+
+export interface IMultiPlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {
+	relations?: any;
+	isCloningEntry?: boolean;
+	totalRelations: number;
+	relationsFromModifiedData?: Record<string, any>[];
+}
+
+const MultiPlatformFilteredSelectField = ({
+	attribute,
+	description,
+	labelAction,
+	error,
+	required,
+	placeholder,
+	intlLabel,
+	name,
+	relations,
+	isCloningEntry,
+	totalRelations,
+	relationsFromModifiedData
+}: IMultiPlatformFilteredSelectFieldProps) => {
+	const fetchClient = useFetchClient();
+	const {
+		initialData,
+		modifiedData,
+		layout,
+		allLayoutData,
+		relationReorder,
+		relationDisconnect,
+		relationConnect,
+		isCreatingEntry
+	} = useCMEditViewDataManager() as any;
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+	const urlLocale = useGetLocaleFromUrl();
+	const defaultLocale = locales.find((locale: any) => locale.isDefault);
+	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
+
+	const [searchResults, setSearchResults] = useState<Record<string, any>>({ data: [] });
+	const [selectedResults, setSelectedResults] = useState<Record<string, any>>({ data: [] });
+
+	const { formatMessage } = useIntl();
+
+	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
+		name,
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData
+	);
+
+	const label = intlLabel?.id
+		? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel?.defaultMessage }, { ...intlLabel.values })
+		: name;
+
+	const hint = description?.id
+		? formatMessage({ id: description.id, defaultMessage: description.defaultMessage }, { ...description.values })
+		: '';
+
+	useEffect(() => {
+		setSelectedResults({ data: targetFieldValue });
+	}, [targetFieldValue]);
+
+	const getItems = async (inputValue?: string) => {
+		const entities = await getSearchFilteredEntities({
+			fetchClient,
+			page: PAGE,
+			uid: targetAttributes?.target || '',
+			locale: selectedLocale,
+			searchQuery: inputValue,
+			platformTitle: initialData?.platform?.[0]?.title,
+			notIds: selectedResults?.data?.map((x) => x.id)
+		});
+
+		const mapped = entities?.results.map((x) => ({
+			id: x.id,
+			mainField: x.title,
+			href: x?.href,
+			publicationState: x.publicationState,
+			publishedAt: x.publishedAt
+		}));
+
+		setSearchResults({ data: mapped || [] });
+	};
+
+	const handleRelationReorder = (oldIndex: number, newIndex: number) => {
+		relationReorder?.({
+			name: targetField,
+			newIndex,
+			oldIndex
+		});
+	};
+
+	const handleRelationLoadMore = () => {
+		relations.fetchNextPage();
+	};
+
+	const handleRelationConnect = (relation: Record<string, any>) => {
+		relationConnect?.({ name: targetField, value: relation, toOneRelation: false });
+	};
+
+	const handleRelationDisconnect = (relation: Record<string, any>) => {
+		relationDisconnect?.({ name: targetField, id: relation.id });
+	};
+
+	return (
+		<RelationInput
+			id={name}
+			name={name}
+			error={error}
+			canReorder
+			description={hint}
+			iconButtonAriaLabel="Drag"
+			label={`${label} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
+			labelLoadMore={
+				!isCreatingEntry || isCloningEntry
+					? formatMessage({
+							id: getTranslation('relation.loadMore'),
+							defaultMessage: 'Load More'
+					  })
+					: undefined
+			}
+			liveText=""
+			listAriaDescription={formatMessage({
+				id: getTranslation('dnd.instructions'),
+				defaultMessage: `Press spacebar to grab and re-order`
+			})}
+			loadingMessage={formatMessage({
+				id: getTranslation('relation.isLoading'),
+				defaultMessage: 'Relations are loading'
+			})}
+			labelDisconnectRelation={formatMessage({
+				id: getTranslation('relation.disconnect'),
+				defaultMessage: 'Remove'
+			})}
+			numberOfRelationsToDisplay={5}
+			noRelationsMessage={formatMessage({
+				id: getTranslation('relation.notAvailable'),
+				defaultMessage: 'No relations available'
+			})}
+			onRelationConnect={handleRelationConnect}
+			onRelationDisconnect={handleRelationDisconnect}
+			onRelationLoadMore={handleRelationLoadMore}
+			onRelationReorder={handleRelationReorder}
+			onSearch={(e) => getItems(e)}
+			// onSearchNextPage={(e) => console.log(e)}
+			placeholder={formatMessage(
+				placeholder || {
+					id: getTranslation('relation.add'),
+					defaultMessage: 'Add relation'
+				}
+			)}
+			publicationStateTranslations={{
+				draft: 'Draft',
+				published: 'Published'
+			}}
+			relations={pick(
+				{ ...relations, data: relationsFromModifiedData },
+				'data',
+				'hasNextPage',
+				'isFetchingNextPage',
+				'isLoading',
+				'isSuccess'
+			)}
+			searchResults={searchResults}
+			size={8}
+			hint={hint}
+			labelAction={labelAction}
+			required={required}
+		/>
+	);
+};
+
+export default MultiPlatformFilteredSelectField;

package/admin/src/components/PlatformFilteredSelectField/Single/index.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import debounce from 'lodash/debounce';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+import { Field } from '@strapi/design-system';
+import { useFetchClient } from '@strapi/helper-plugin';
+import { Link } from '@strapi/icons';
+
+import { Combobox, IReactSelectValue } from '../../Combobox';
+import { OptionProps, SingleValue, components } from 'react-select';
+import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
+import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
+import S from './../styles';
+import getTrad from '../../../utils/getTrad';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+
+interface CustomReactSelectValue extends Omit<IReactSelectValue, 'initialSelected'> {
+	href?: string;
+	publicationState?: string;
+	publishedAt?: string;
+}
+
+const SEARCH_DEBOUNCE_MS = 150;
+const PAGE = 1;
+
+const SinglePlatformFilteredSelectField = ({
+	attribute,
+	description,
+	labelAction,
+	error,
+	intlLabel,
+	name
+}: IPlatformFilteredSelectFieldProps) => {
+	const fetchClient = useFetchClient();
+	const { onChange, initialData, modifiedData, isCreatingEntry, layout, allLayoutData } =
+		useCMEditViewDataManager() as any;
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+	const urlLocale = useGetLocaleFromUrl();
+	const defaultLocale = locales.find((locale: any) => locale.isDefault);
+	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
+
+	const [selected, setSelected] = useState<SingleValue<CustomReactSelectValue | null>>();
+
+	const { formatMessage } = useIntl();
+
+	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
+		name,
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData
+	);
+
+	const label = intlLabel?.id
+		? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel?.defaultMessage }, { ...intlLabel.values })
+		: name;
+
+	const hint = description?.id
+		? formatMessage({ id: description.id, defaultMessage: description.defaultMessage }, { ...description.values })
+		: '';
+
+	useEffect(() => {
+		const initialSelect = getInitialSelectItem(targetFieldValue?.[0]);
+
+		setSelected(initialSelect);
+	}, [targetFieldValue]);
+
+	useEffect(() => {
+		if (isCreatingEntry) {
+			setSelected(null);
+		}
+	}, []);
+
+	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
+		onChange({
+			target: {
+				name,
+				value
+			},
+			shouldSetInitialValue: true
+		});
+	};
+
+	const handleChange = (value?: SingleValue<CustomReactSelectValue>) => {
+		if (value) {
+			const newFormValue = {
+				...value,
+				id: value.value,
+				title: value.label,
+				mainField: value.label,
+				label: value.label,
+				value: value.value
+			};
+			setFormValue(targetField, [newFormValue]);
+		} else {
+			setFormValue(targetField, []);
+		}
+	};
+
+	const getItems = async (inputValue?: string, platformTitle?: string): Promise<CustomReactSelectValue[]> => {
+		const pages = await getSearchFilteredEntities({
+			fetchClient,
+			page: PAGE,
+			uid: targetAttributes?.target || '',
+			locale: selectedLocale,
+			searchQuery: inputValue,
+			platformTitle
+		});
+
+		return pages?.results.map((x) => ({
+			value: String(x.id),
+			label: x.title,
+			href: x?.href,
+			publicationState: x.publicationState,
+			publishedAt: x.publishedAt
+		}));
+	};
+
+	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
+		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
+			return callback(result || []);
+		});
+	}, SEARCH_DEBOUNCE_MS);
+
+	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<CustomReactSelectValue[]> =>
+		new Promise<CustomReactSelectValue[]>((resolve) => {
+			resolve(getItems(inputValue, selectedPlatformTitle));
+		});
+
+	return (
+		<Field name={name} id={name} error={error} hint={hint}>
+			{targetAttributes?.type === 'relation' && (
+				<S.FieldWrapper>
+					<Combobox
+						key={`rerenderOnPlatformChange-${initialData?.platform?.[0]?.id}`}
+						id="pagesSearch"
+						label={label}
+						loadOptions={(i, c) => debouncedFetch(i, c, initialData?.platform?.[0]?.title)}
+						cacheOptions
+						customOption={CustomOption}
+						onChange={handleChange}
+						value={selected}
+						defaultOptions
+						hideSelectedOptions
+						labelAction={labelAction}
+					/>
+
+					<S.LinkToPage
+						title={formatMessage({ id: getTrad('platformFilteredSelect.linkToEntity.label') })}
+						to={selected?.href}
+						disabled={!selected?.href}
+					>
+						<Link />
+					</S.LinkToPage>
+				</S.FieldWrapper>
+			)}
+		</Field>
+	);
+};
+
+const CustomOption = (props: OptionProps<CustomReactSelectValue, false>) => {
+	return (
+		<components.Option {...props}>
+			<S.CustomOption>
+				<S.CustomOptionStatus publicationState={props.data?.publicationState} />
+				{props.children}
+			</S.CustomOption>
+		</components.Option>
+	);
+};
+
+const getInitialSelectItem = (initialValue?: Record<string, any>): SingleValue<CustomReactSelectValue | null> =>
+	initialValue?.id
+		? {
+				value: String(initialValue?.id),
+				label: initialValue?.title ?? '',
+				href: initialValue?.href,
+				publicationState: initialValue.publicationState,
+				publishedAt: initialValue.publishedAt
+		  }
+		: null;
+
+export default SinglePlatformFilteredSelectField;

package/admin/src/components/PlatformFilteredSelectField/hooks/useRelationLoad.tsx

@@ -0,0 +1,124 @@
+import get from 'lodash/get';
+import React from 'react';
+import { useRelation } from '@strapi/admin/admin/src/content-manager/hooks/useRelation/index';
+import { getInitialDataPathUsingTempKeys } from '@strapi/admin/admin/src/content-manager/utils/paths';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useRouteMatch } from 'react-router-dom';
+
+const RELATIONS_TO_DISPLAY = 5;
+const SEARCH_RESULTS_TO_DISPLAY = 10;
+
+// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
+
+const useRelationLoad = ({ name, attribute }: IPlatformFilteredSelectFieldProps) => {
+	const fieldName = name || '';
+	const { modifiedData, initialData, slug, layout, allLayoutData, isCreatingEntry, relationLoad } =
+		useCMEditViewDataManager() as any;
+	const { params } =
+		useRouteMatch<{ origin?: string }>('/content-manager/collectionType/:collectionType/create/clone/:origin') ?? {};
+	const { origin } = params ?? {};
+	const isCloningEntry = Boolean(origin);
+	const entityId = origin || modifiedData.id;
+
+	const { componentUid, componentId, relationMainFieldName, targetAttributes, targetField } =
+		RelationHelper.getTargetAttributes(fieldName, attribute, modifiedData, layout, allLayoutData);
+
+	const nameSplit = targetField.split('.');
+	const isComponentRelation = Boolean(componentUid);
+	const initialDataPath = getInitialDataPathUsingTempKeys(initialData, modifiedData)(targetField);
+
+	const currentLastPage = Math.ceil((get(initialData, targetField, []) || []).length / RELATIONS_TO_DISPLAY);
+
+	// /content-manager/relations/[model]/[id]/[field-name]
+	const relationFetchEndpoint = React.useMemo(() => {
+		if (isCreatingEntry && !origin) {
+			return null;
+		}
+
+		if (componentUid) {
+			// repeatable components and dz are dynamically created
+			// if no componentId exists in modifiedData it means that the user just created it
+			// there then are no relations to request
+			return componentId ? `/content-manager/relations/${componentUid}/${componentId}/${nameSplit.at(-1)}` : null;
+		}
+
+		return `/content-manager/relations/${slug}/${entityId}/${targetField.split('.').at(-1)}`;
+	}, [isCreatingEntry, origin, componentUid, slug, entityId, targetField, componentId, nameSplit]);
+
+	// /content-manager/relations/[model]/[field-name]
+	const relationSearchEndpoint = React.useMemo(() => {
+		if (componentUid) {
+			return `/content-manager/relations/${componentUid}/${targetField.split('.').at(-1)}`;
+		}
+
+		return `/content-manager/relations/${slug}/${targetField.split('.').at(-1)}`;
+	}, [componentUid, slug, targetField]);
+
+	const { relations, search, searchFor } = useRelation([slug, initialDataPath.join('.'), modifiedData.id], {
+		relation: {
+			enabled: !!relationFetchEndpoint,
+			endpoint: relationFetchEndpoint!,
+			pageGoal: currentLastPage,
+			pageParams: {
+				pageSize: RELATIONS_TO_DISPLAY
+			},
+			onLoad(value) {
+				relationLoad?.({
+					target: {
+						initialDataPath: ['initialData', ...initialDataPath],
+						modifiedDataPath: ['modifiedData', ...nameSplit],
+						value
+					}
+				});
+			},
+			normalizeArguments: {
+				mainFieldName: relationMainFieldName,
+				shouldAddLink: true,
+				targetModel: targetAttributes?.targetModel
+			}
+		},
+		search: {
+			endpoint: relationSearchEndpoint,
+			pageParams: {
+				// eslint-disable-next-line no-nested-ternary
+				entityId: isCreatingEntry || isCloningEntry ? undefined : isComponentRelation ? componentId : entityId,
+				pageSize: SEARCH_RESULTS_TO_DISPLAY
+			}
+		}
+	});
+
+	/**
+	 * How to calculate the total number of relations even if you don't
+	 * have them all loaded in the browser.
+	 *
+	 * 1. The `infiniteQuery` gives you the total number of relations in the pagination result.
+	 * 2. You can diff the length of the browserState vs the fetchedServerState to determine if you've
+	 * either added or removed relations.
+	 * 3. Add them together, if you've removed relations you'll get a negative number and it'll
+	 * actually subtract from the total number on the server (regardless of how many you fetched).
+	 */
+	const relationsFromModifiedData = get(modifiedData, targetField, []);
+	const browserRelationsCount = (relationsFromModifiedData || [])?.length;
+	const serverRelationsCount = (get(initialData, initialDataPath) ?? []).length;
+	const realServerRelationsCount = relations.data?.pages[0]?.pagination?.total ?? 0;
+	/**
+	 * _IF_ theres no relations data and the browserCount is the same as serverCount you can therefore assume
+	 * that the browser count is correct because we've just _made_ this entry and the in-component hook is now fetching.
+	 */
+	const totalRelations =
+		!relations.data && browserRelationsCount === serverRelationsCount
+			? browserRelationsCount
+			: browserRelationsCount - serverRelationsCount + realServerRelationsCount;
+
+	return {
+		relations,
+		search,
+		searchFor,
+		isCloningEntry,
+		relationsFromModifiedData,
+		totalRelations: totalRelations || 0
+	};
+};
+
+export { useRelationLoad };

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from './utils/relation-helper';
+import MultiPlatformFilteredSelectField from './Multi';
+import SinglePlatformFilteredSelectField from './Single';
+import { useRelationLoad } from './hooks/useRelationLoad';
+
+const PlatformFilteredSelectField = (props: IPlatformFilteredSelectFieldProps) => {
+	const { name, attribute } = props;
+	const { modifiedData, layout, allLayoutData } = useCMEditViewDataManager() as any;
+	const { relations, isCloningEntry, totalRelations, relationsFromModifiedData } = useRelationLoad(props);
+	const { targetAttributes } = RelationHelper.getTargetAttributes(name, attribute, modifiedData, layout, allLayoutData);
+	const toOneRelation = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
+		targetAttributes?.relation || ''
+	);
+
+	if (toOneRelation) {
+		return <SinglePlatformFilteredSelectField {...props} />;
+	}
+
+	return (
+		<MultiPlatformFilteredSelectField
+			relations={relations}
+			isCloningEntry={isCloningEntry}
+			totalRelations={totalRelations}
+			relationsFromModifiedData={relationsFromModifiedData}
+			{...props}
+		/>
+	);
+};
+
+PlatformFilteredSelectField.defaultProps = {
+	description: undefined,
+	disabled: false,
+	error: undefined,
+	labelAction: undefined,
+	placeholder: undefined,
+	value: '',
+	required: false
+};
+
+export default PlatformFilteredSelectField;