@webbio/strapi-plugin-page-builder 0.3.5-platform → 0.3.6-legacy

package/README.md

@@ -38,11 +38,6 @@ Voor elk collection type die een page type is, moet deze properties toegevoegd w
   "morphBy": "collectionTypeData"
 },
 "hasPage": {
-  "pluginOptions": {
-    "i18n": {
-      "localized": true
-    }
-  }
   "type": "boolean",
   "default": false
 }
@@ -50,6 +45,9 @@ Voor elk collection type die een page type is, moet deze properties toegevoegd w
 
 Zodra dit goed is ingesteld, kan je via deze collectie types direct een pagina aanmaken.
 
+> **Notitie:**
+> `hasPage` wordt gebruikt om aan te tonen dan een collection type item een `published` pagina heeft.
+
 ## Page
 
 Op een page kan je in de Edit View een page type selecteren. Op basis daarvan wordt er een template geselecteerd (indien gekozen in een page type) en kan je zoeken in verschillende entiteiten binnen die page type. Deze kan je koppelen aan een pagina.
@@ -65,19 +63,31 @@ 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:
 
 ```
-"platform": {
-  "type": "relation",
-  "relation": "oneToOne",
-  "target": "api::platform.platform"
-}
+    "collectiontype": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "UID van collection type",
+      "mappedBy": "platform"
+    }
+```
+
+bijvoorbeeld :
+
+```
+    "faqs": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "api::faq.faq",
+      "mappedBy": "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,7 +26,6 @@ type SearchEntitiesQueryParams = {
 	searchQuery?: string;
 	currentCollectionTypeId?: number;
 	currentPageId?: number;
-	platformTitle?: string;
 };
 
 const QUERY_KEY = ['entities'];
@@ -38,8 +37,7 @@ export const getSearchEntities = async ({
 	locale,
 	searchQuery,
 	currentCollectionTypeId,
-	currentPageId,
-	platformTitle
+	currentPageId
 }: SearchEntitiesQueryParams): Promise<SearchResult> => {
 	try {
 		const { get } = fetchClient;
@@ -55,10 +53,6 @@ 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/page-type.ts

@@ -9,11 +9,11 @@ export type PageType = {
 
 const QUERY_KEY = 'page-types';
 
-const fetchPageTypes = async ({ fetchClient }: Record<string, any>): Promise<PageType[]> => {
+const fetchPageTypes = async ({ fetchClient }: any): Promise<PageType[]> => {
 	const { get } = fetchClient;
-	const result = await get(`/content-manager/collection-types/api::page-type.page-type?page=1&pageSize=100`);
+	const result = await get(`/content-manager/collection-types/api::page-type.page-type`);
 
-	return result?.data?.results?.map((entity: Record<string, any>) => ({
+	return result?.data?.results?.map((entity: any) => ({
 		id: entity.id,
 		uid: entity.uid,
 		title: entity.title,
@@ -21,12 +21,11 @@ const fetchPageTypes = async ({ fetchClient }: Record<string, any>): Promise<Pag
 	}));
 };
 
-export const useGetPageTypes = (params: Record<string, any>) => {
+export const useGetPageTypes = (params: any) => {
 	const fetchClient = useFetchClient();
 	params = {
 		...params,
 		fetchClient
 	};
-
 	return useQuery<PageType[], Error>(QUERY_KEY, () => fetchPageTypes(params));
 };

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

@@ -14,10 +14,9 @@ const PAGE = 1;
 
 interface Props {
 	uid: string;
-	platformTitle?: string;
 }
 
-export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
+export const CollectionTypeSearch = ({ uid }: Props) => {
 	const fetchClient = useFetchClient();
 	const form = useCMEditViewDataManager() as any;
 	const { locales } = useSelector((state: any) => state.i18n_locales);
@@ -25,7 +24,6 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	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)
@@ -40,7 +38,7 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 		}
 	}, []);
 
-	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
+	const getItems = async (inputValue?: string): Promise<IReactSelectValue[]> => {
 		const searchEntities = await getSearchEntities({
 			fetchClient,
 			page: PAGE,
@@ -48,8 +46,7 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 			uid,
 			searchQuery: inputValue,
 			currentCollectionTypeId: form.initialData?.collectionTypeId,
-			currentPageId: form.initialData?.id,
-			platformTitle
+			currentPageId: form.initialData?.id
 		});
 
 		return searchEntities.results.map((x) => ({
@@ -76,28 +73,28 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	};
 
 	useEffect(() => {
-		if ((prevUid !== null && prevUid !== uid) || (prevPlatformTitle !== null && prevPlatformTitle !== platformTitle)) {
+		if (prevUid !== null && prevUid !== uid) {
 			setSelected(null);
 		}
-	}, [uid, platformTitle]);
+	}, [uid]);
 
-	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
-		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
+	const debouncedFetch = debounce((searchTerm, callback) => {
+		promiseOptions(searchTerm).then((result) => {
 			return callback(result || []);
 		});
 	}, SEARCH_DEBOUNCE_MS);
 
-	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<IReactSelectValue[]> =>
+	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
 		new Promise<IReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue, selectedPlatformTitle));
+			resolve(getItems(inputValue));
 		});
 
 	return (
 		<Combobox
-			key={`rerenderOnUidOrPlatformChange-${uid}-${platformTitle}`}
+			key={`rerenderOnUidChange-${uid}`}
 			id="collectionTypeSearch"
-			label="Entity"
-			loadOptions={(i, c) => debouncedFetch(i, c, platformTitle)}
+			label="Link"
+			loadOptions={debouncedFetch}
 			cacheOptions
 			onChange={handleChange}
 			customOption={CustomOption}

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

@@ -1,4 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import slugify from 'slugify';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { Plus } from '@strapi/icons';
@@ -14,9 +16,10 @@ import S from './styles';
 export const CreatePageButton = () => {
 	const history = useHistory();
 	const { layout, initialData } = useCMEditViewDataManager() as any;
+	const { locales } = useSelector((state: any) => state.i18n_locales);
 
 	const { post, get, put } = useFetchClient();
-	const url = `/content-manager/collectionType/${PAGE_UID}/create`;
+	const url = `/content-manager/collection-types/${PAGE_UID}/create`;
 
 	const handleCreatePage = async (e: React.MouseEvent<HTMLAnchorElement>) => {
 		e.preventDefault();
@@ -28,8 +31,17 @@ export const CreatePageButton = () => {
 				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 defaultLocale = locales.find((locale: any) => locale.isDefault);
+			const locale = initialData?.locale || defaultLocale?.code;
+
+			// Get data inside template
+			let templateData;
+
+			if (pageType?.template?.id) {
+				templateData = await get(getRequestUrl(`/template/${pageType.template.id}`));
+			}
+
+			const modules = sanitizeModules(templateData?.data?.modules || [], false);
 
 			const newPage = await createNewPage({
 				title: initialData?.title,
@@ -37,16 +49,15 @@ 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
 			});
 			if (newPage?.id) {
 				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
-					hasPage: true
+					hasPage: false
 				});
-				history.push(`/content-manager/collectionType/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
+				history.push(`/content-manager/collection-types/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
 			}
 		} catch (error) {
 			console.error(error);
@@ -68,7 +79,6 @@ interface ICreateNewPageProps {
 	modules?: Record<string, any>[];
 	post: any;
 	pageTypeId: number;
-	platformId: number;
 	relatedEntityId?: number;
 }
 
@@ -80,17 +90,25 @@ const createNewPage = async ({
 	layoutUid,
 	modules,
 	pageTypeId,
-	platformId,
 	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 slugData = title
+		? {
+				slug: slugify(title, {
+					lower: true,
+					trim: true
+				})
+		  }
+		: {};
+
 	const { data: page } = await post(url, {
+		...slugData,
 		title,
 		locale,
 		pageType: { connect: [{ id: pageTypeId }] },
-		platform: { connect: [{ id: platformId }] },
 		collectionTypeData: {
 			id: collectionTypeId,
 			__type: layoutUid,

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

@@ -8,19 +8,26 @@ import { Wrapper } from '../wrapper';
 import { CreatePageButton } from './CreatePageButton';
 import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants';
 import S from '../Details/styles';
-import { PlatformSelect } from '../Platform/platform-select';
-import { Platform, useGetPlatforms } from '../../../api/platform';
 
 export const CollectionTypeSettings = () => {
-	const { layout, isCreatingEntry, initialData, onChange } = useCMEditViewDataManager() as any;
-	const { data: platforms } = useGetPlatforms({});
-	const [selectedPlatform, setSelectedPlatform] = useState<Platform | undefined | null>(initialData?.platform?.[0]);
+	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager() as any;
+
 	const isUserCreatedContentType = layout.uid.startsWith('api::');
-	const linkedPage = initialData.page?.[0];
+	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(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({
@@ -36,62 +43,26 @@ export const CollectionTypeSettings = () => {
 		return null;
 	}
 
-	useEffect(() => {
-		setSelectedPlatform(initialData?.platform?.[0]);
-	}, [initialData]);
-
-	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
-		onChange({
-			target: {
-				name,
-				value
-			},
-			shouldSetInitialValue: true
-		});
-	};
-
-	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]);
-		} else {
-			setFormValue('platform', []);
-			setSelectedPlatform(null);
-		}
-	};
-
 	return (
-		<>
-			<Wrapper title="Platform">
-				<PlatformSelect platforms={platforms} selectedPlatform={selectedPlatform} onChange={handleSelectPlatform} />
-			</Wrapper>
-			<Wrapper title="Gekoppelde pagina">
-				<Flex direction="column" gap={4} width="100%" alignItems="start">
-					{showCreatePageButton && <CreatePageButton />}
+		<Wrapper title="Gekoppelde pagina">
+			<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>
-		</>
+				{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>
 	);
 };
 
@@ -99,5 +70,5 @@ const generateLink = (entityId?: string, locale?: string) => {
 	if (!entityId) {
 		return '';
 	}
-	return `/content-manager/collectionType/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
+	return `/content-manager/collection-types/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
 };

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

@@ -43,5 +43,5 @@ const generateLink = ({ locale, pageType, entityId }: Props) => {
 		return '';
 	}
 
-	return `/content-manager/collectionType/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
+	return `/content-manager/collection-types/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
 };

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,18 +11,11 @@ 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() as any;
-	const { data: allPageTypes } = useGetPageTypes({});
-	const { data: platforms } = useGetPlatforms({});
-	const [pageTypes, setPageTypes] = useState(allPageTypes);
+	const { data: pageTypes } = useGetPageTypes({});
 	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,
@@ -42,24 +35,15 @@ 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 = () => {
@@ -86,53 +70,14 @@ 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);
-
-		const filterPageTypeByPlatform = platFormData[0].pageTypes.filter(
-			(data) => allPageTypes?.find((pageData) => pageData.uid === data.uid)
-		);
-
-		setPageTypes(filterPageTypeByPlatform);
-	};
-
 	return (
 		<Wrapper title="Gekoppelde type">
 			<Flex direction="column" gap={4} width="100%">
 				{showEditFields ? (
 					<Stack spacing={4} width="100%">
-						<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} />
-						)}
+						<PageTypeSelect pageTypes={pageTypes} selectedPageType={selectedPageType} onChange={handleSelectPageType} />
+						<TemplateSelect />
+						{selectedPageType?.uid && <CollectionTypeSearch uid={selectedPageType.uid} />}
 					</Stack>
 				) : (
 					<Details

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

@@ -0,0 +1,17 @@
+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/collection-type/${PAGE_UID}`) {
+		return <PageTypeFilter />;
+	}
+
+	return null;
+};
+
+export default PageTypeFilterContainer;

package/admin/src/components/PageTypeFilter/page-type-filter.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import set from 'lodash/set';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+import { useQueryParams } from '@strapi/helper-plugin';
+
+import { useGetPageTypes } from '../../api/page-type';
+import { PAGE_TYPE_NO_FILTER } from '../../constants';
+import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
+
+const PageTypeFilter = () => {
+	const [{ query }, setQuery] = useQueryParams() as any;
+	const { data: pageTypes } = useGetPageTypes({});
+	const initialPageTypeUid = getInitialPageType(query, pageTypes);
+	const [selectedPageTypeUid, setSelectedPageTypeUid] = useState(initialPageTypeUid);
+
+	const removeFilters = () => {
+		const newAndFilters = query.filters?.$and?.filter(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] !== 'pageType'
+		);
+		const filters = { ...query.filters, $and: newAndFilters };
+
+		if (newAndFilters && newAndFilters.length === 0) {
+			delete filters.$and;
+		}
+
+		setQuery({
+			page: 1,
+			filters
+		});
+	};
+
+	const handleFilterChange = (filters: Record<string, any>) => {
+		const currentFilters = query.filters?.$and ? query.filters : { ...query.filters, $and: [] }; // Make sure $and exists.
+		const pageTypeFilterIndex = currentFilters.$and.findIndex(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] === 'pageType'
+		);
+
+		if (pageTypeFilterIndex > -1) {
+			set(currentFilters, `$and[${pageTypeFilterIndex}]`, filters); // If the pageType filter already exists, replace it
+		} else {
+			currentFilters.$and.push(filters);
+		}
+
+		setQuery({
+			page: 1,
+			filters: currentFilters
+		});
+	};
+
+	const handleSelect = (value: string) => {
+		setSelectedPageTypeUid(value);
+
+		if (value === 'all') {
+			removeFilters();
+			return;
+		}
+
+		if (value === PAGE_TYPE_PAGE) {
+			handleFilterChange(nullPageTypeQueryFilter);
+			return;
+		}
+
+		handleFilterChange(getPageTypeQueryFilter(value));
+	};
+
+	useEffect(() => {
+		setSelectedPageTypeUid(getInitialPageType(query, pageTypes));
+	}, [pageTypes]);
+
+	useEffect(() => {
+		if (!query?.filters) {
+			setSelectedPageTypeUid(null);
+		}
+	}, [query]);
+
+	return (
+		<SingleSelect placeholder="Select page type" onChange={handleSelect} size="S" value={selectedPageTypeUid}>
+			<SingleSelectOption key={PAGE_TYPE_NO_FILTER} value={PAGE_TYPE_NO_FILTER}>
+				Alle Paginatypes
+			</SingleSelectOption>
+			<SingleSelectOption key={PAGE_TYPE_PAGE} value={PAGE_TYPE_PAGE}>
+				Pagina
+			</SingleSelectOption>
+			{pageTypes?.map((pageType) => (
+				<SingleSelectOption key={pageType.uid} value={pageType.uid}>
+					{pageType.title || pageType.uid}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};
+
+export { PageTypeFilter };
+
+const getPageTypeQueryFilter = (pageType: string) => ({
+	pageType: {
+		uid: {
+			$eq: pageType
+		}
+	}
+});
+
+const nullPageTypeQueryFilter = {
+	pageType: {
+		uid: {
+			$null: true
+		}
+	}
+};
+
+const getInitialPageType = (query: any, pageTypes: any) => {
+	const pageTypeFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === 'pageType'
+	)?.pageType;
+
+	if (pageTypeFromQuery?.uid?.$null === 'true') {
+		return PAGE_TYPE_PAGE;
+	}
+
+	if (pageTypeFromQuery?.uid?.$eq) {
+		const matchingPageType = pageTypes?.find((pageType: any) => pageType?.uid === pageTypeFromQuery.uid.$eq);
+
+		if (matchingPageType) {
+			return matchingPageType.uid;
+		}
+	}
+
+	return PAGE_TYPE_NO_FILTER;
+};