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

package/admin/src/api/{page.ts → search-filtered-entity.ts}

@@ -2,9 +2,8 @@ import { useQuery, UseQueryOptions } from 'react-query';
 import orderBy from 'lodash/orderBy';
 
 import { useFetchClient } from '@strapi/helper-plugin';
-import { PAGE_UID } from '../../../shared/utils/constants';
 
-export type PageSearchResult = {
+export type SearchFilteredEntitiesResult = {
 	pagination: {
 		page: number;
 		pageCount: number;
@@ -14,29 +13,33 @@ export type PageSearchResult = {
 	results: {
 		id: number;
 		title: string;
-		isCurrentSelected?: boolean;
+		href: string;
+		publicationState?: string;
+		publishedAt?: string;
 	}[];
 };
 
-type SearchPageQueryParams = {
+type SearchFilteredEntitiesQueryParams = {
 	fetchClient?: any;
+	uid: string;
 	page: number;
 	locale: string;
 	searchQuery?: string;
-	currentCollectionTypeId?: number;
 	platformTitle?: string;
+	notIds?: number[];
 };
 
-const QUERY_KEY = ['pages'];
+const QUERY_KEY = ['filteredEntities'];
 
-export const getSearchPages = async ({
+export const getSearchFilteredEntities = async ({
 	fetchClient,
+	uid,
 	page,
 	locale,
 	searchQuery,
-	currentCollectionTypeId,
-	platformTitle
-}: SearchPageQueryParams): Promise<PageSearchResult> => {
+	platformTitle,
+	notIds
+}: SearchFilteredEntitiesQueryParams): Promise<SearchFilteredEntitiesResult> => {
 	try {
 		const { get } = fetchClient;
 		const searchParams = new URLSearchParams();
@@ -54,13 +57,24 @@ export const getSearchPages = async ({
 			searchParams.append('filters[$and][0][platform][title][$contains]', String(platformTitle));
 		}
 
-		const { data } = await get(`/content-manager/collection-types/${PAGE_UID}?${searchParams.toString()}`);
+		if (notIds && notIds.length > 0) {
+			for (let index = 0; index < notIds.length; index++) {
+				const id = notIds[index];
+				searchParams.append(`filters[$and][${index + 1}][id][$ne]`, String(id));
+			}
+		}
+
+		const { data } = await get(`/content-manager/collection-types/${uid}?${searchParams.toString()}`);
 
-		const mapResults = data.results.map((result: Record<string, any>) => ({
-			id: result.id,
-			title: result.title,
-			isCurrentSelected: result?.id === currentCollectionTypeId
-		}));
+		const mapResults = data.results.map(
+			(result: Record<string, any>): SearchFilteredEntitiesResult['results'][number] => ({
+				id: result.id,
+				title: result.title,
+				publicationState: result?.publishedAt ? 'published' : 'draft',
+				publishedAt: result?.publishedAt,
+				href: `/content-manager/collectionType/${uid}/${result.id}`
+			})
+		);
 
 		return {
 			pagination: data.pagination,
@@ -74,18 +88,21 @@ export const getSearchPages = async ({
 	}
 };
 
-export const useSearchPages = (params: SearchPageQueryParams, options?: UseQueryOptions<PageSearchResult, Error>) => {
+export const useSearchFilteredEntities = (
+	params: SearchFilteredEntitiesQueryParams,
+	options?: UseQueryOptions<SearchFilteredEntitiesResult, Error>
+) => {
 	const fetchClient = useFetchClient();
 
-	return useQuery<PageSearchResult, Error>(
+	return useQuery<SearchFilteredEntitiesResult, Error>(
 		[
-			QUERY_KEY,
+			[QUERY_KEY, params.uid],
 			{
 				...params
 			}
 		],
 		() =>
-			getSearchPages({
+			getSearchFilteredEntities({
 				...params,
 				fetchClient
 			}),

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

@@ -3,7 +3,7 @@ import { ClearIndicatorProps, DropdownIndicatorProps, GroupBase, components } fr
 import AsyncSelect, { AsyncProps } from 'react-select/async';
 
 import { CarretDown, Cross } from '@strapi/icons';
-import { Typography } from '@strapi/design-system';
+import { FieldLabel } from '@strapi/design-system';
 
 import S from './styles';
 import { useReactSelectCustomStyles } from './react-select-custom-styles';
@@ -12,6 +12,8 @@ export interface IComboboxProps extends AsyncProps<IReactSelectValue, false, Gro
 	customOption?: typeof components.Option<IReactSelectValue, false, GroupBase<IReactSelectValue>>;
 	label?: string;
 	id: string;
+	extraLabelElement?: React.ReactNode;
+	labelAction?: React.ReactNode;
 }
 
 export interface IReactSelectValue {
@@ -21,7 +23,7 @@ export interface IReactSelectValue {
 }
 
 const Combobox = (props: IComboboxProps) => {
-	const { label, customOption, id, ...selectProps } = props;
+	const { label, customOption, extraLabelElement, labelAction, id, ...selectProps } = props;
 	const styles = useReactSelectCustomStyles();
 	const [inputValue, setInputValue] = useState<string | undefined>(props.inputValue);
 
@@ -32,9 +34,10 @@ const Combobox = (props: IComboboxProps) => {
 	return (
 		<S.Wrapper>
 			{props.label && (
-				<Typography as="label" htmlFor={id} variant="pi" fontWeight="bold" textColor="neutral800">
-					{props.label}
-				</Typography>
+				<S.LabelWrapper>
+					<FieldLabel action={labelAction}>{props.label}</FieldLabel>
+					{extraLabelElement}
+				</S.LabelWrapper>
 			)}
 			<AsyncSelect
 				{...selectProps}
@@ -44,7 +47,6 @@ const Combobox = (props: IComboboxProps) => {
 					props.onInputChange?.(value, actionMeta);
 					setInputValue(value);
 				}}
-				// @ts-ignore
 				styles={styles}
 				inputValue={inputValue}
 				components={{

package/admin/src/components/Combobox/styles.ts

@@ -14,9 +14,21 @@ const Option = styled.span`
 	flex-direction: column;
 `;
 
+const LabelWrapper = styled.div`
+	${({ theme }) => css`
+		width: 100%;
+		display: flex;
+		gap: 4px;
+		justify-content: space-between;
+		color: ${theme.colors.neutral800};
+		font-size: ${theme.fontSizes[1]};
+	`}
+`;
+
 const ComboboxStyles = {
 	Wrapper,
-	Option
+	Option,
+	LabelWrapper
 };
 
 export default ComboboxStyles;

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import debounce from 'lodash/debounce';
-import { OptionProps, SingleValue, components } from 'react-select';
+import { SingleValue } from 'react-select';
 import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
 import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
 import { IReactSelectValue, Combobox } from '../../Combobox';
-import { getSearchPages } from '../../../api/page';
+import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
+import { PAGE_UID } from '../../../../../shared/utils/constants';
 
 const SEARCH_DEBOUNCE_MS = 150;
 const PAGE = 1;
@@ -61,19 +62,18 @@ export const PageByPlatformSearch = () => {
 	};
 
 	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
-		const pages = await getSearchPages({
+		const pages = await getSearchFilteredEntities({
 			fetchClient,
 			page: PAGE,
+			uid: PAGE_UID,
 			locale: selectedLocale,
 			searchQuery: inputValue,
-			currentCollectionTypeId: initialData?.collectionTypeId,
 			platformTitle
 		});
 
 		return pages?.results.map((x) => ({
 			value: String(x.id),
-			label: x.title,
-			initialSelected: x.isCurrentSelected
+			label: x.title
 		}));
 	};
 
@@ -90,7 +90,7 @@ export const PageByPlatformSearch = () => {
 
 	return (
 		<Combobox
-			key={`rerenderOnUidOrPlatformChange-${initialData?.platform?.[0]?.id}`}
+			key={`rerenderOnPlatformChange-${initialData?.platform?.[0]?.id}`}
 			id="pagesSearch"
 			label="Standaard overzichtspagina"
 			loadOptions={(i, c) => debouncedFetch(i, c, initialData?.platform?.[0]?.title)}

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;