@webbio/strapi-plugin-page-builder 0.2.1 → 0.3.0

package/README.md

@@ -60,31 +60,19 @@ Om wijzigignen aan te brengen in een platform, moeten deze in de schema aangepas
 Voor elk collectiontype die je wil toevoegen aan het platform, moet deze relatie toegevoegd worden:
 
 ```
-    "collectiontype": {
-      "type": "relation",
-      "relation": "oneToMany",
-      "target": "UID van collection type",
-      "mappedBy": "platform"
-    }
-```
-
-bijvoorbeeld :
-
-```
-    "faqs": {
-      "type": "relation",
-      "relation": "oneToMany",
-      "target": "api::faq.faq",
-      "mappedBy": "platform"
-    }
+"platform": {
+  "type": "relation",
+  "relation": "oneToOne",
+  "target": "api::platform.platform"
+}
 ```
 
 Een platform zit altijd aan een pagina gekoppeld. Deze moet handmatig in de pagina toegevoegd worden.
 
 # Known bugs
 
-- Bij het opslaan van een collectietype wil de gekoppelde pagina of type in het ui wel eens verdwijnen.
 - Na het ontkoppelen en opslaan van een collectie item op een pagina, staat deze nog als "Geselecteerd" in de dropdown.
+- Sorteren op pages binnen een collectie type kan niet. Dus stel ik haal alle FAQ's op waarbij ik wil sorteren op een property op de page, kan dat niet.
 
 # Improvements
 

package/admin/src/api/collection-type.ts

@@ -26,6 +26,7 @@ type SearchEntitiesQueryParams = {
 	searchQuery?: string;
 	currentCollectionTypeId?: number;
 	currentPageId?: number;
+	platformTitle?: string;
 };
 
 const QUERY_KEY = ['entities'];
@@ -37,7 +38,8 @@ export const getSearchEntities = async ({
 	locale,
 	searchQuery,
 	currentCollectionTypeId,
-	currentPageId
+	currentPageId,
+	platformTitle
 }: SearchEntitiesQueryParams): Promise<SearchResult> => {
 	try {
 		const { get } = fetchClient;
@@ -53,6 +55,10 @@ export const getSearchEntities = async ({
 			searchParams.append('_q', searchQuery);
 		}
 
+		if (platformTitle) {
+			searchParams.append('filters[$and][0][platform][title][$contains]', String(platformTitle));
+		}
+
 		const { data } = await get(`/content-manager/collection-types/${uid}?${searchParams.toString()}`);
 
 		const filteredResults = data.results.filter((p: Record<string, any>) => {

package/admin/src/api/platform.ts

@@ -0,0 +1,34 @@
+import { useQuery } from 'react-query';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+
+import getRequestUrl from '../utils/getRequestUrl';
+import { PageType } from './page-type';
+
+export type Platform = {
+	id: number;
+	title?: string;
+	pageTypes?: PageType[];
+};
+
+const QUERY_KEY = 'platforms';
+
+const fetchPlatforms = async ({ fetchClient }: any): Promise<Platform[]> => {
+	const { get } = fetchClient;
+	const result = await get(getRequestUrl(`/platform`));
+
+	return result?.data?.map((entity: any) => ({
+		id: entity.id,
+		title: entity.title,
+		pageTypes: entity.pageTypes
+	}));
+};
+
+export const useGetPlatforms = (params: any) => {
+	const fetchClient = useFetchClient();
+	params = {
+		...params,
+		fetchClient
+	};
+	return useQuery<Platform[], Error>(QUERY_KEY, () => fetchPlatforms(params));
+};

package/admin/src/components/Combobox/react-select-custom-styles.tsx

@@ -3,13 +3,13 @@ import { useTheme } from 'styled-components';
 import { IReactSelectValue } from '.';
 
 export const useReactSelectCustomStyles = (): StylesConfig<IReactSelectValue, false> => {
-	const theme = useTheme() as any;
+	const theme = useTheme() as Record<string, any>;
 
 	return {
 		control: (provided, { isFocused, isDisabled }) => ({
 			...provided,
 			color: theme.colors.neutral800,
-			backgroundColor: provided.backgroundColor,
+			backgroundColor: theme.colors.neutral0,
 			minHeight: '40px',
 			lineHeight: 1.4,
 			borderRadius: theme.borderRadius,
@@ -21,6 +21,15 @@ export const useReactSelectCustomStyles = (): StylesConfig<IReactSelectValue, fa
 				borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200
 			}
 		}),
+
+		input: (provided, {}) => ({
+			...provided,
+			color: theme.colors.neutral800
+		}),
+		singleValue: (provided, {}) => ({
+			...provided,
+			color: theme.colors.neutral800
+		}),
 		placeholder: (provided) => ({
 			...provided,
 			color: theme.colors.neutral500
@@ -30,7 +39,7 @@ export const useReactSelectCustomStyles = (): StylesConfig<IReactSelectValue, fa
 			border: `1px solid ${theme.colors.neutral150}`,
 			boxShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
 			borderRadius: theme.borderRadius,
-			color: theme.colors.neutral800
+			backgroundColor: theme.colors.neutral0
 		}),
 		menuList: (provided) => ({
 			...provided,

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

@@ -14,16 +14,18 @@ const PAGE = 1;
 
 interface Props {
 	uid: string;
+	platformTitle?: string;
 }
 
-export const CollectionTypeSearch = ({ uid }: Props) => {
+export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	const fetchClient = useFetchClient();
-	const form = useCMEditViewDataManager();
+	const form = useCMEditViewDataManager() as any;
 	const { locales } = useSelector((state: any) => state.i18n_locales);
 	const urlLocale = useGetLocaleFromUrl();
 	const defaultLocale = locales.find((locale: any) => locale.isDefault);
 	const selectedLocale = form.initialData?.locale ?? urlLocale ?? defaultLocale.code;
 	const prevUid = usePrevious(uid);
+	const prevPlatformTitle = usePrevious(platformTitle);
 
 	const [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>(
 		getInitialSelectItem(form.initialData?.collectionTypeId, form.initialData?.collectionTypeTitle)
@@ -38,7 +40,7 @@ export const CollectionTypeSearch = ({ uid }: Props) => {
 		}
 	}, []);
 
-	const getItems = async (inputValue?: string): Promise<IReactSelectValue[]> => {
+	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
 		const searchEntities = await getSearchEntities({
 			fetchClient,
 			page: PAGE,
@@ -46,7 +48,8 @@ export const CollectionTypeSearch = ({ uid }: Props) => {
 			uid,
 			searchQuery: inputValue,
 			currentCollectionTypeId: form.initialData?.collectionTypeId,
-			currentPageId: form.initialData?.id
+			currentPageId: form.initialData?.id,
+			platformTitle
 		});
 
 		return searchEntities.results.map((x) => ({
@@ -73,28 +76,28 @@ export const CollectionTypeSearch = ({ uid }: Props) => {
 	};
 
 	useEffect(() => {
-		if (prevUid !== null && prevUid !== uid) {
+		if ((prevUid !== null && prevUid !== uid) || (prevPlatformTitle !== null && prevPlatformTitle !== platformTitle)) {
 			setSelected(null);
 		}
-	}, [uid]);
+	}, [uid, platformTitle]);
 
-	const debouncedFetch = debounce((searchTerm, callback) => {
-		promiseOptions(searchTerm).then((result) => {
+	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
+		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
 			return callback(result || []);
 		});
 	}, SEARCH_DEBOUNCE_MS);
 
-	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
+	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<IReactSelectValue[]> =>
 		new Promise<IReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue));
+			resolve(getItems(inputValue, selectedPlatformTitle));
 		});
 
 	return (
 		<Combobox
-			key={`rerenderOnUidChange-${uid}`}
+			key={`rerenderOnUidOrPlatformChange-${uid}-${platformTitle}`}
 			id="collectionTypeSearch"
 			label="Entity"
-			loadOptions={debouncedFetch}
+			loadOptions={(i, c) => debouncedFetch(i, c, platformTitle)}
 			cacheOptions
 			onChange={handleChange}
 			customOption={CustomOption}
@@ -108,8 +111,8 @@ const CustomOption = (props: OptionProps<IReactSelectValue, false>) => {
 	return (
 		<components.Option {...props}>
 			<span>{props.children}</span>
-			{props.isDisabled && <span>Entity is in use</span>}
-			{props.data.initialSelected && <span>Currently selected</span>}
+			{props.isDisabled && <span>Entiteit heeft al een pagina</span>}
+			{props.data.initialSelected && <span>Oorspronkelijk gekoppeld</span>}
 		</components.Option>
 	);
 };

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

@@ -13,7 +13,7 @@ import S from './styles';
 
 export const CreatePageButton = () => {
 	const history = useHistory();
-	const { layout, initialData } = useCMEditViewDataManager();
+	const { layout, initialData } = useCMEditViewDataManager() as any;
 
 	const { post, get, put } = useFetchClient();
 	const url = `/content-manager/collectionType/${PAGE_UID}/create`;
@@ -37,6 +37,7 @@ export const CreatePageButton = () => {
 				post,
 				locale,
 				pageTypeId: pageType.id,
+				platformId: initialData.platform[0]?.id,
 				collectionTypeId: initialData.id,
 				layoutUid: layout.uid,
 				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
@@ -67,6 +68,7 @@ interface ICreateNewPageProps {
 	modules?: Record<string, any>[];
 	post: any;
 	pageTypeId: number;
+	platformId: number;
 	relatedEntityId?: number;
 }
 
@@ -78,6 +80,7 @@ const createNewPage = async ({
 	layoutUid,
 	modules,
 	pageTypeId,
+	platformId,
 	relatedEntityId
 }: ICreateNewPageProps) => {
 	// Including locale in url is neccesary.
@@ -87,6 +90,7 @@ const createNewPage = async ({
 		title,
 		locale,
 		pageType: { connect: [{ id: pageTypeId }] },
+		platform: { connect: [{ id: platformId }] },
 		collectionTypeData: {
 			id: collectionTypeId,
 			__type: layoutUid,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Flex } from '@strapi/design-system';
@@ -10,24 +10,14 @@ import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants'
 import S from '../Details/styles';
 
 export const CollectionTypeSettings = () => {
-	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager();
+	const { layout, isCreatingEntry, initialData, onChange } = useCMEditViewDataManager() as any;
 
 	const isUserCreatedContentType = layout.uid.startsWith('api::');
-	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
+	const linkedPage = initialData.page?.[0];
 
 	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
 	const url = generateLink(linkedPage?.id, initialData?.locale);
 
-	useEffect(() => {
-		if (modifiedData.page?.[0]) {
-			setLinkedPage(modifiedData.page?.[0]);
-		}
-
-		if (modifiedData.page === null) {
-			setLinkedPage(undefined);
-		}
-	}, [modifiedData.page?.[0]]);
-
 	useEffect(() => {
 		if (isCreatingEntry) {
 			onChange({
@@ -54,9 +44,9 @@ export const CollectionTypeSettings = () => {
 							{PAGE_TYPE_PAGE}
 						</S.SubtleType>
 						<S.EntityLinkWrapper variant="pi" textColor="neutral800">
-							<S.EntityLink title={linkedPage?.title || '-'} to={url} variant="pi">
+							<S.EntityLink title={linkedPage.title || '-'} to={url} variant="pi">
 								<Link />
-								{linkedPage?.title || '-'}
+								{linkedPage.title || '-'}
 							</S.EntityLink>
 						</S.EntityLinkWrapper>
 					</Flex>

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

@@ -3,7 +3,7 @@ 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 { getFetchClient } from '@strapi/helper-plugin';
 import { TemplateSelect } from '../Template/TemplateSelect';
 import { PageTypeSelect } from '../page-type-select';
 import { CollectionTypeSearch } from '../CollectionTypeSearch';
@@ -11,11 +11,18 @@ import { Wrapper } from '../wrapper';
 import { PageType, useGetPageTypes } from '../../../api/page-type';
 import { Details } from '../Details';
 import S from '../Details/styles';
+import { Platform, useGetPlatforms } from '../../../api/platform';
+import { PlatformSelect } from '../Platform/platform-select';
+import getRequestUrl from '../../../utils/getRequestUrl';
 
 export const PageSettings = () => {
-	const { isCreatingEntry, initialData, onChange, modifiedData } = useCMEditViewDataManager();
-	const { data: pageTypes } = useGetPageTypes({});
+	const { isCreatingEntry, initialData, onChange, modifiedData, ...rest } = useCMEditViewDataManager() as any;
+	const { data: allPageTypes } = useGetPageTypes({});
+	const { data: platforms } = useGetPlatforms({});
+	const [pageTypes, setPageTypes] = useState(allPageTypes);
 	const [selectedPageType, setSelectedPageType] = useState<PageType | undefined | null>(initialData?.initialPageType);
+	const [selectedPlatform, setSelectedPlatform] = useState<Platform | undefined | null>(initialData?.platform?.[0]);
+	const noPlatformSelected = useMemo(() => !Boolean(selectedPlatform), [selectedPlatform]);
 	const [isEditting, setIsEditting] = useState(false);
 	const showEditFields = useMemo(
 		() => isCreatingEntry || !selectedPageType?.id || !initialData.collectionTypeTitle || isEditting,
@@ -35,15 +42,24 @@ export const PageSettings = () => {
 	useEffect(() => {
 		setSelectedPageType(initialData?.initialPageType);
 
+		setSelectedPlatform(initialData?.platform?.[0]);
 		setIsEditting(false);
 	}, [initialData]);
 
+	useEffect(() => {
+		if (selectedPlatform?.title) {
+			setPageTypesByPlatform(selectedPlatform.title);
+		}
+	}, [selectedPlatform, allPageTypes]);
+
 	const cancelEdit = () => {
 		setIsEditting(false);
 		setSelectedPageType(initialData?.initialPageType || []);
+		setSelectedPlatform(initialData?.platform?.[0]);
 		setFormValue('pageType', initialData?.initialPageType || []);
 		setFormValue('collectionTypeTitle', initialData?.collectionTypeTitle);
 		setFormValue('collectionTypeId', initialData?.collectionTypeId);
+		setFormValue('platform', initialData?.platform);
 	};
 
 	const removePageType = () => {
@@ -70,14 +86,49 @@ export const PageSettings = () => {
 		}
 	};
 
+	const handleSelectPlatform = async (platformId: string) => {
+		const platform = platforms?.find((platform) => platform.id === Number(platformId));
+
+		if (platform && platform.title) {
+			setSelectedPlatform(platform);
+			const formPlatform = {
+				...platform,
+				label: platform.title,
+				value: platform.id
+			};
+			setFormValue('platform', [formPlatform]);
+			setPageTypesByPlatform(platform.title);
+		} else {
+			setFormValue('platform', []);
+			setSelectedPlatform(null);
+			removePageType();
+		}
+	};
+
+	const setPageTypesByPlatform = async (platform: string) => {
+		const pageTypeUrl = getRequestUrl(`/platform/${platform}`);
+		const { get } = getFetchClient();
+		const { data: platFormData } = await get(pageTypeUrl);
+
+		setPageTypes(platFormData[0].pageTypes);
+	};
+
 	return (
 		<Wrapper title="Gekoppelde type">
 			<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} />}
+						<PlatformSelect platforms={platforms} selectedPlatform={selectedPlatform} onChange={handleSelectPlatform} />
+						<PageTypeSelect
+							pageTypes={pageTypes}
+							selectedPageType={selectedPageType}
+							onChange={handleSelectPageType}
+							disabled={noPlatformSelected}
+						/>
+						<TemplateSelect disabled={noPlatformSelected} />
+						{selectedPageType?.uid && (
+							<CollectionTypeSearch uid={selectedPageType.uid} platformTitle={selectedPlatform?.title} />
+						)}
 					</Stack>
 				) : (
 					<Details

package/admin/src/components/EditView/Platform/platform-select.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+
+import { Platform } from '../../../api/platform';
+import { PLATFORM } from '../../../../../shared/utils/constants';
+
+interface Props {
+	onChange: (platformId: string) => void;
+	selectedPlatform?: Platform | null;
+	platforms?: Platform[];
+}
+
+export const PlatformSelect = ({ onChange, platforms, selectedPlatform }: Props) => {
+	return (
+		<SingleSelect
+			label="Platform"
+			placeholder="Choose a platform"
+			value={selectedPlatform?.id || PLATFORM}
+			onChange={onChange}
+		>
+			<SingleSelectOption value={PLATFORM}>Platform</SingleSelectOption>
+			{platforms?.map((pageType: Platform) => (
+				<SingleSelectOption key={pageType?.id} value={pageType?.id}>
+					{pageType?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};

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

@@ -10,7 +10,7 @@ interface Props {
 }
 
 export const TemplateSelect = ({ disabled }: Props) => {
-	const { onChange, modifiedData } = useCMEditViewDataManager();
+	const { onChange, modifiedData } = useCMEditViewDataManager() as any;
 	const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
 	const { templates, replaceContentTypeModules } = useTemplateModules(onChange);
 	const [templateIdToSelect, setTemplateIdToSelect] = useState<string | undefined>();
@@ -48,7 +48,7 @@ export const TemplateSelect = ({ disabled }: Props) => {
 				placeholder="Choose a template"
 				value={selectedTemplate?.id || 0}
 				onChange={handleSelectChange}
-				disabled={disabled}
+				disabled={Boolean(disabled)}
 			>
 				<SingleSelectOption value={0}>None</SingleSelectOption>
 				{templates?.map((template) => (

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

@@ -8,7 +8,7 @@ import { CollectionTypeSettings } from './CollectionTypeSettings';
 import { useHasPageRelation } from '../../api/has-page-relation';
 
 export const EditView = () => {
-	const { layout } = useCMEditViewDataManager();
+	const { layout } = useCMEditViewDataManager() as any;
 
 	const isPageCollectionType = layout.uid === PAGE_UID;
 	const isCollectionType = layout.kind === 'collectionType';

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

@@ -19,7 +19,7 @@ export const PageTypeSelect = ({ onChange, pageTypes, selectedPageType, disabled
 			placeholder="Choose a page type"
 			value={selectedPageType?.id || PAGE_TYPE_PAGE}
 			onChange={onChange}
-			disabled={disabled}
+			disabled={Boolean(disabled)}
 		>
 			<SingleSelectOption value={PAGE_TYPE_PAGE}>Page</SingleSelectOption>
 			{pageTypes?.map((pageType: PageType) => (

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+
+import { PageType } from '../../../api/page-type';
+import { PAGE_TYPE_NO_FILTER } from '../../../constants';
+import { PAGE_TYPE_PAGE } from '../../../../../shared/utils/constants';
+
+interface Props {
+	onChange: (pageTypeUId: string) => void;
+	selectedPageTypeUid?: string;
+	pageTypes?: PageType[];
+}
+
+const PageTypeFilter = ({ onChange, pageTypes, selectedPageTypeUid }: Props) => {
+	return (
+		<SingleSelect
+			placeholder="Select page type"
+			onChange={onChange}
+			size="S"
+			value={selectedPageTypeUid}
+			disabled={(pageTypes?.length || 0) === 0}
+		>
+			<SingleSelectOption key={PAGE_TYPE_NO_FILTER} value={PAGE_TYPE_NO_FILTER}>
+				All Pagetypes
+			</SingleSelectOption>
+			<SingleSelectOption key={PAGE_TYPE_PAGE} value={PAGE_TYPE_PAGE}>
+				Page
+			</SingleSelectOption>
+			{pageTypes?.map((pageType) => (
+				<SingleSelectOption key={pageType.uid} value={pageType.uid}>
+					{pageType.title || pageType.uid}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};
+
+export default PageTypeFilter;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+import { Platform } from '../../../api/platform';
+import { PLATFORM_NO_FILTER } from '../../../constants';
+
+interface Props {
+	onChange?: (platformId: string) => void;
+	selectedPlatform?: string;
+	platforms?: Platform[];
+}
+
+const PlatformFilter = ({ onChange, platforms, selectedPlatform }: Props) => {
+	return (
+		<SingleSelect placeholder="Select platform" onChange={onChange} size="S" value={selectedPlatform}>
+			<SingleSelectOption key={PLATFORM_NO_FILTER} value={PLATFORM_NO_FILTER}>
+				All Platforms
+			</SingleSelectOption>
+			{platforms?.map((platform: Platform) => (
+				<SingleSelectOption key={platform?.id} value={platform?.title}>
+					{platform?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};
+
+export default PlatformFilter;