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

package/admin/src/api/has-page-relation.ts

@@ -23,7 +23,7 @@ export const useHasPageRelation = (params: HasPageRelationQueryParams, options?:
 
 	return useQuery<boolean, Error>(
 		[
-			QUERY_KEY,
+			[QUERY_KEY, params?.uid],
 			{
 				...params
 			}

package/admin/src/api/has-platform-relation.ts

@@ -26,7 +26,7 @@ export const useHasPlatformRelation = (
 
 	return useQuery<boolean, Error>(
 		[
-			QUERY_KEY,
+			[QUERY_KEY, params?.uid],
 			{
 				...params
 			}

package/admin/src/api/platform-page-types.ts

@@ -2,31 +2,29 @@ import { useQuery } from 'react-query';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 
-import { PageType } from './page-type';
-
 const QUERY_KEY = 'pageTypesForPlatform';
 
+export type PageType = {
+	id: number;
+	uid: string;
+	title?: string;
+};
+
 const fetchPageTypesForPlatform = async ({ fetchClient, id }: Record<string, any>): Promise<PageType[]> => {
 	if (!id) return [];
 
 	const { get } = fetchClient;
-	const pageTypesByPlatformResult = await get(
-		`/content-manager/relations/api::platform.platform/${id}/pageTypes?page=1&pageSize=100`
-	);
-	const pageTypesResult = await get(`/content-manager/collection-types/api::page-type.page-type?page=1&pageSize=100`);
-
-	return pageTypesByPlatformResult?.data?.results?.map((entity: Record<string, any>) => {
-		const fullPageType = pageTypesResult?.data?.results?.find(
-			(pageType: Record<string, any>) => pageType.id === entity.id
-		);
-
-		return {
-			id: entity.id,
-			uid: fullPageType.uid,
-			title: fullPageType.title,
-			templateId: fullPageType?.template?.id
-		};
-	});
+
+	const pageTypesResult = await get(`/content-manager/collection-types/api::page-type.page-type?page=1&pageSize=999`);
+
+	return pageTypesResult?.data?.results
+		?.filter((x) => x?.platform?.id === id)
+		?.map((pageType: Record<string, any>) => ({
+			id: pageType.id,
+			uid: pageType.uid,
+			title: pageType.title,
+			templateId: pageType?.template?.id
+		}));
 };
 
 export const useGetPageTypesForPlatform = (params: Record<string, any>) => {

package/admin/src/api/platform.ts

@@ -2,7 +2,7 @@ import { useQuery } from 'react-query';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 
-import { PageType } from './page-type';
+import { PageType } from './platform-page-types';
 
 export type Platform = {
 	id: number;
@@ -14,7 +14,7 @@ const QUERY_KEY = 'platforms';
 
 const fetchPlatforms = async ({ fetchClient }: Record<string, any>): Promise<Platform[]> => {
 	const { get } = fetchClient;
-	const result = await get('/content-manager/collection-types/api::platform.platform?page=1&pageSize=100');
+	const result = await get('/content-manager/collection-types/api::platform.platform?page=1&pageSize=999');
 
 	return result?.data?.results.map((entity: Record<string, any>) => ({
 		id: entity.id,

package/admin/src/api/search-filtered-entity.ts

@@ -0,0 +1,111 @@
+import { useQuery, UseQueryOptions } from 'react-query';
+import orderBy from 'lodash/orderBy';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+
+export type SearchFilteredEntitiesResult = {
+	pagination: {
+		page: number;
+		pageCount: number;
+		pageSize: number;
+		total: number;
+	};
+	results: {
+		id: number;
+		title: string;
+		href: string;
+		publicationState?: string;
+		publishedAt?: string;
+	}[];
+};
+
+type SearchFilteredEntitiesQueryParams = {
+	fetchClient?: any;
+	uid: string;
+	page: number;
+	locale: string;
+	searchQuery?: string;
+	platformTitle?: string;
+	notIds?: number[];
+};
+
+const QUERY_KEY = ['filteredEntities'];
+
+export const getSearchFilteredEntities = async ({
+	fetchClient,
+	uid,
+	page,
+	locale,
+	searchQuery,
+	platformTitle,
+	notIds
+}: SearchFilteredEntitiesQueryParams): Promise<SearchFilteredEntitiesResult> => {
+	try {
+		const { get } = fetchClient;
+		const searchParams = new URLSearchParams();
+		searchParams.append('page', String(page));
+		searchParams.append('pageSize', '20');
+		searchParams.append('locale', locale);
+
+		if (searchQuery) {
+			searchParams.delete('sort');
+			searchParams.append('sort', 'title:ASC');
+			searchParams.append('_q', searchQuery);
+		}
+
+		if (platformTitle) {
+			searchParams.append('filters[$and][0][platform][title][$contains]', String(platformTitle));
+		}
+
+		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>): 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,
+			results: orderBy(mapResults, ['title'], ['asc'])
+		};
+	} catch (e) {
+		return {
+			pagination: { page: 1, pageCount: 0, pageSize: 0, total: 0 },
+			results: []
+		};
+	}
+};
+
+export const useSearchFilteredEntities = (
+	params: SearchFilteredEntitiesQueryParams,
+	options?: UseQueryOptions<SearchFilteredEntitiesResult, Error>
+) => {
+	const fetchClient = useFetchClient();
+
+	return useQuery<SearchFilteredEntitiesResult, Error>(
+		[
+			[QUERY_KEY, params.uid],
+			{
+				...params
+			}
+		],
+		() =>
+			getSearchFilteredEntities({
+				...params,
+				fetchClient
+			}),
+		options
+	);
+};

package/admin/src/api/template.ts

@@ -1,27 +1,30 @@
 import { useQuery } from 'react-query';
+
 import { useFetchClient } from '@strapi/helper-plugin';
-import getRequestUrl from '../utils/getRequestUrl';
 
 export type Template = {
 	id: number;
 	title: string;
-	modules: any[];
+	modules: Record<string, any>[];
 };
 
 const QUERY_KEY = ['templates'];
 
-const fetchTemplates = async ({ fetchClient }: any): Promise<Template[]> => {
+const fetchTemplates = async ({ fetchClient, id }: Record<string, any>): Promise<Template[]> => {
 	const { get } = fetchClient;
-	const result = await get(getRequestUrl('/template'));
+	const result = await get(`/content-manager/collection-types/api::template.template?page=1&pageSize=999`);
 
-	return result?.data;
+	return result?.data?.results
+		?.filter((x?: Record<string, any>) => x?.platform?.id === id)
+		?.map((template: Record<string, any>) => ({ id: template.id, title: template.title, modules: template.modules }));
 };
 
-export const useGetTemplates = (params: any) => {
+export const useGetTemplates = (params: Record<string, any>) => {
 	const fetchClient = useFetchClient();
 	params = {
 		...params,
 		fetchClient
 	};
-	return useQuery<Template[], Error>(QUERY_KEY, () => fetchTemplates(params));
+
+	return useQuery<Template[], Error>([QUERY_KEY, params?.id], () => fetchTemplates(params));
 };

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/EditView/CollectionTypeSettings/CreatePageButton/index.tsx

@@ -24,7 +24,7 @@ export const CreatePageButton = () => {
 	const handleCreatePage = async (e: React.MouseEvent<HTMLAnchorElement>) => {
 		e.preventDefault();
 		try {
-			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}`);
+			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}/${initialData.platform[0]?.id}`);
 			const { data: pageType } = await get(pageTypeUrl);
 			const mappedLocalizations = (initialData?.localizations || []).map((x: any) => x?.id).join(',');
 			const linkedPages: { data: IGetTranslationPageLinks[] } = await get(
@@ -50,6 +50,7 @@ export const CreatePageButton = () => {
 				locale,
 				pageTypeId: pageType.id,
 				platformId: initialData.platform[0]?.id,
+				parentId: pageType?.defaultParent?.id,
 				collectionTypeId: initialData.id,
 				layoutUid: layout.uid,
 				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
@@ -82,6 +83,7 @@ interface ICreateNewPageProps {
 	pageTypeId: number;
 	platformId: number;
 	relatedEntityId?: number;
+	parentId?: number;
 }
 
 const createNewPage = async ({
@@ -93,7 +95,8 @@ const createNewPage = async ({
 	modules,
 	pageTypeId,
 	platformId,
-	relatedEntityId
+	relatedEntityId,
+	parentId
 }: ICreateNewPageProps) => {
 	// Including locale in url is neccesary.
 	const relatedEntityIdQuery = relatedEntityId ? `&plugins[i18n][relatedEntityId]=${relatedEntityId}` : '';
@@ -113,6 +116,7 @@ const createNewPage = async ({
 		locale,
 		pageType: { connect: [{ id: pageTypeId }] },
 		platform: { connect: [{ id: platformId }] },
+		...(parentId && { parent: { connect: [{ id: parentId }] } }),
 		collectionTypeData: {
 			id: collectionTypeId,
 			__type: layoutUid,

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Flex } from '@strapi/design-system';
 import { Link } from '@strapi/icons';
 
-import { PageType } from '../../../api/page-type';
+import { PageType } from '../../../api/platform-page-types';
 import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
 import S from './styles';
 

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

@@ -7,7 +7,7 @@ import { TemplateSelect } from '../Template/TemplateSelect';
 import { PageTypeSelect } from '../page-type-select';
 import { CollectionTypeSearch } from '../CollectionTypeSearch';
 import { Wrapper } from '../wrapper';
-import { PageType } from '../../../api/page-type';
+import { PageType } from '../../../api/platform-page-types';
 import { Details } from '../Details';
 import { Platform } from '../../../api/platform';
 import { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';

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

@@ -21,7 +21,8 @@ export const TemplateSelect = ({ disabled }: Props) => {
 
 	const handleSelectTemplate = (templateId?: string) => {
 		const template = templates?.find((template) => template.id === Number(templateId));
-		template == null ? setSelectedTemplate(null) : setSelectedTemplate(template);
+
+		setSelectedTemplate(template || null);
 
 		setTemplateIdToSelect(undefined);
 	};
@@ -50,7 +51,7 @@ export const TemplateSelect = ({ disabled }: Props) => {
 				onChange={handleSelectChange}
 				disabled={Boolean(disabled)}
 			>
-				<SingleSelectOption value={0}>None</SingleSelectOption>
+				<SingleSelectOption value={0}>Kies een template om in te laden</SingleSelectOption>
 				{templates?.map((template) => (
 					<SingleSelectOption key={template.id} value={template.id}>
 						{template.title}

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

@@ -1,12 +1,15 @@
+import { useFetchClient } from '@strapi/helper-plugin';
+
 import { Template, useGetTemplates } from '../../../../api/template';
 import { sanitizeModules } from '../../../../utils/sanitizeModules';
-import { useFetchClient } from '@strapi/helper-plugin';
 import getRequestUrl from '../../../../utils/getRequestUrl';
+import { useDefaultPlatformFromLocalStorage } from '../../../../utils/hooks/useDefaultPlatformFromLocalStorage';
 
 type OnChangeFormType = (props: { target: Record<string, any>; shouldSetInitialValue: boolean }) => void;
 
 export const useTemplateModules = (onChange: OnChangeFormType) => {
-	const { data: templates } = useGetTemplates({});
+	const { selectedPlatform } = useDefaultPlatformFromLocalStorage();
+	const { data: templates } = useGetTemplates({ id: selectedPlatform?.id });
 	const fetchClient = useFetchClient();
 
 	return {

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
 
-import { PageType } from '../../api/page-type';
+import { PageType } from '../../api/platform-page-types';
 import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
 
 interface Props {

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { Flex, Box, Divider, Typography } from '@strapi/design-system';
 
 interface Props {
-	title: string;
+	title?: string;
 	children: React.ReactNode;
+	flexProps?: Record<string, any>;
 }
 
 export const Wrapper = (props: Props) => {
@@ -20,14 +21,19 @@ export const Wrapper = (props: Props) => {
 			paddingLeft={4}
 			shadow="tableShadow"
 			alignItems="left"
+			{...props.flexProps}
 		>
-			<Typography variant="sigma" textColor="neutral600" id="additional-information">
-				{props.title}
-			</Typography>
+			{props.title && (
+				<>
+					<Typography variant="sigma" textColor="neutral600" id="additional-information">
+						{props.title}
+					</Typography>
 
-			<Box paddingTop={2} paddingBottom={4}>
-				<Divider />
-			</Box>
+					<Box paddingTop={2} paddingBottom={4}>
+						<Divider />
+					</Box>
+				</>
+			)}
 
 			{props.children}
 		</Flex>

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

@@ -19,7 +19,6 @@ const GlobalPlatformSelect = ({ small }: IGlobalPlatformSelectProps) => {
 	const { selectedPlatform, setSelectedPlatform } = useDefaultPlatformFromLocalStorage();
 
 	const handlePlatformChange = (platform: Platform) => {
-		console.log('handlePlatformChange', platform);
 		setSelectedPlatform(platform);
 
 		if (typeof window !== 'undefined' && pathname.split('/').filter(Boolean).length > 3) {

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
 
-import { PageType } from '../../../api/page-type';
+import { PageType } from '../../../api/platform-page-types';
 import { PAGE_TYPE_NO_FILTER } from '../../../constants';
 import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
 

package/admin/src/components/PageFilters/filters.tsx

@@ -8,7 +8,7 @@ import PageTypeFilter from './PageTypeFilter';
 import { PAGE_TYPE_PAGE, PLATFORM } from '../../../../shared/utils/constants';
 import { Platform, useGetPlatforms } from '../../api/platform';
 import { PAGE_TYPE, PAGE_TYPE_NO_FILTER, PLATFORM_NO_FILTER } from '../../constants';
-import { PageType } from '../../api/page-type';
+import { PageType } from '../../api/platform-page-types';
 import { useGetPageTypesForPlatform } from '../../api/platform-page-types';
 import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
 import { useHideOverviewFilterTags } from '../../utils/hooks/useHideOverviewFilterTags';

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

@@ -6,6 +6,7 @@ import { PAGE_UID } from '../../../../shared/utils/constants';
 
 import PageFilters from './filters';
 import { useHasPageRelation } from '../../api/has-page-relation';
+import { useHasPlatformRelation } from '../../api/has-platform-relation';
 
 const PageFiltersContainer = () => {
 	const { pathname } = useLocation();
@@ -16,11 +17,15 @@ const PageFiltersContainer = () => {
 		uid
 	});
 
+	const { data: hasPlatformRelation, isLoading: isLoadingPlatformRelation } = useHasPlatformRelation({
+		uid
+	});
+
 	if (isPageCollectionType) {
 		return <PageFilters />;
 	}
 
-	if (!isPageCollectionType && hasPageRelation && !isLoading) {
+	if (!isPageCollectionType && !isLoading && !isLoadingPlatformRelation && (hasPageRelation || hasPlatformRelation)) {
 		return <PageFilters hidePageType />;
 	}
 

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

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import debounce from 'lodash/debounce';
+import { SingleValue } from 'react-select';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
+import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
+import { IReactSelectValue, Combobox } from '../../Combobox';
+import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
+import { PAGE_UID } from '../../../../../shared/utils/constants';
+
+const SEARCH_DEBOUNCE_MS = 150;
+const PAGE = 1;
+
+export const PageByPlatformSearch = () => {
+	const fetchClient = useFetchClient();
+	const { onChange, initialData, modifiedData, 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 [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>();
+
+	useEffect(() => {
+		const initialSelect = getInitialSelectItem(
+			modifiedData?.defaultParent?.[0]?.id,
+			modifiedData?.defaultParent?.[0]?.title
+		);
+
+		setSelected(initialSelect);
+	}, [modifiedData?.defaultParent]);
+
+	useEffect(() => {
+		if (isCreatingEntry) {
+			setSelected(null);
+		}
+	}, []);
+
+	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
+		onChange({
+			target: {
+				name,
+				value
+			},
+			shouldSetInitialValue: true
+		});
+	};
+
+	const handleSelectDefaultParent = (value?: SingleValue<IReactSelectValue>) => {
+		if (value) {
+			const defaultParent = {
+				id: value.value,
+				title: value.label,
+				mainField: value.label,
+				label: value.label,
+				value: value.value
+			};
+			setFormValue('defaultParent', [defaultParent]);
+		} else {
+			setFormValue('defaultParent', []);
+		}
+	};
+
+	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
+		const pages = await getSearchFilteredEntities({
+			fetchClient,
+			page: PAGE,
+			uid: PAGE_UID,
+			locale: selectedLocale,
+			searchQuery: inputValue,
+			platformTitle
+		});
+
+		return pages?.results.map((x) => ({
+			value: String(x.id),
+			label: x.title
+		}));
+	};
+
+	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<IReactSelectValue[]> =>
+		new Promise<IReactSelectValue[]>((resolve) => {
+			resolve(getItems(inputValue, selectedPlatformTitle));
+		});
+
+	return (
+		<Combobox
+			key={`rerenderOnPlatformChange-${initialData?.platform?.[0]?.id}`}
+			id="pagesSearch"
+			label="Standaard overzichtspagina"
+			loadOptions={(i, c) => debouncedFetch(i, c, initialData?.platform?.[0]?.title)}
+			cacheOptions
+			onChange={handleSelectDefaultParent}
+			value={selected}
+			defaultOptions
+		/>
+	);
+};
+
+const getInitialSelectItem = (id?: string, title?: string): SingleValue<IReactSelectValue | null> =>
+	id
+		? {
+				value: String(id),
+				label: title ?? '',
+				initialSelected: true
+		  }
+		: null;