@webbio/strapi-plugin-page-builder 0.12.2-platform → 0.12.3-platform

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

@@ -1,27 +1,27 @@
-import styled, { css } from 'styled-components';
-
-const Wrapper = styled.div<{ small?: boolean }>`
-	${({ theme, small }) => {
-		return css`
-			width: ${small ? '72px' : '224px'};
-			&:hover {
-				width: 224px;
-				transition: ${small ? 'width 0.15s ease-in-out' : 'none'};
-			}
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-			position: fixed;
-			top: 64px;
-			left: 0;
-			z-index: 4;
-			padding: 0 8px 0 12px;
-		`;
-	}}
-`;
-
-const GlobalPlatformSelectStyles = {
-	Wrapper
-};
-
-export default GlobalPlatformSelectStyles;
+import styled, { css } from 'styled-components';
+
+const Wrapper = styled.div<{ small?: boolean }>`
+	${({ theme, small }) => {
+		return css`
+			width: ${small ? '72px' : '224px'};
+			&:hover {
+				width: 224px;
+				transition: ${small ? 'width 0.15s ease-in-out' : 'none'};
+			}
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			position: fixed;
+			top: 64px;
+			left: 0;
+			z-index: 4;
+			padding: 0 8px 0 12px;
+		`;
+	}}
+`;
+
+const GlobalPlatformSelectStyles = {
+	Wrapper
+};
+
+export default GlobalPlatformSelectStyles;

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

@@ -1,24 +1,24 @@
-/**
- *
- * Initializer
- *
- */
-
-import { useEffect, useRef } from 'react';
-import pluginId from '../../pluginId';
-
-type InitializerProps = {
-	setPlugin: (id: string) => void;
-};
-
-const Initializer = ({ setPlugin }: InitializerProps) => {
-	const ref = useRef(setPlugin);
-
-	useEffect(() => {
-		ref.current(pluginId);
-	}, []);
-
-	return null;
-};
-
-export default Initializer;
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import pluginId from '../../pluginId';
+
+type InitializerProps = {
+	setPlugin: (id: string) => void;
+};
+
+const Initializer = ({ setPlugin }: InitializerProps) => {
+	const ref = useRef(setPlugin);
+
+	useEffect(() => {
+		ref.current(pluginId);
+	}, []);
+
+	return null;
+};
+
+export default Initializer;

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

@@ -1,39 +1,39 @@
-import React from 'react';
-
-import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
-
-import { PageType } from '../../../api/platform-page-types';
-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="Pagina types"
-			onChange={onChange}
-			size="S"
-			value={selectedPageTypeUid}
-			disabled={(pageTypes?.length || 0) === 0}
-		>
-			<SingleSelectOption key={PAGE_TYPE_NO_FILTER} value={PAGE_TYPE_NO_FILTER}>
-				Alle pagina types
-			</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 default PageTypeFilter;
+import React from 'react';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+
+import { PageType } from '../../../api/platform-page-types';
+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="Pagina types"
+			onChange={onChange}
+			size="S"
+			value={selectedPageTypeUid}
+			disabled={(pageTypes?.length || 0) === 0}
+		>
+			<SingleSelectOption key={PAGE_TYPE_NO_FILTER} value={PAGE_TYPE_NO_FILTER}>
+				Alle pagina types
+			</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 default PageTypeFilter;

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

@@ -1,32 +1,32 @@
-import React from 'react';
-
-import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
-import { Platform } from '../../../api/platform';
-
-interface Props {
-	onChange?: (platform: Platform) => void;
-	selectedPlatform?: Platform;
-	platforms?: Platform[];
-}
-
-const PlatformFilter = ({ onChange, platforms, selectedPlatform }: Props) => {
-	const handleChange = (platformId?: string) => {
-		const foundPlatform = platforms?.find((platform) => platform?.id === Number(platformId));
-
-		if (foundPlatform) {
-			onChange?.(foundPlatform);
-		}
-	};
-
-	return (
-		<SingleSelect placeholder="Selecteer platform" onChange={handleChange} size="S" value={selectedPlatform?.id}>
-			{platforms?.map((platform: Platform) => (
-				<SingleSelectOption key={platform?.id} value={platform?.id}>
-					{platform?.title}
-				</SingleSelectOption>
-			))}
-		</SingleSelect>
-	);
-};
-
-export default PlatformFilter;
+import React from 'react';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+import { Platform } from '../../../api/platform';
+
+interface Props {
+	onChange?: (platform: Platform) => void;
+	selectedPlatform?: Platform;
+	platforms?: Platform[];
+}
+
+const PlatformFilter = ({ onChange, platforms, selectedPlatform }: Props) => {
+	const handleChange = (platformId?: string) => {
+		const foundPlatform = platforms?.find((platform) => platform?.id === Number(platformId));
+
+		if (foundPlatform) {
+			onChange?.(foundPlatform);
+		}
+	};
+
+	return (
+		<SingleSelect placeholder="Selecteer platform" onChange={handleChange} size="S" value={selectedPlatform?.id}>
+			{platforms?.map((platform: Platform) => (
+				<SingleSelectOption key={platform?.id} value={platform?.id}>
+					{platform?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};
+
+export default PlatformFilter;

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

@@ -1,189 +1,189 @@
-import { useEffect, useMemo } from 'react';
-import set from 'lodash/set';
-
-import { Stack } from '@strapi/design-system';
-import { useQueryParams } from '@strapi/helper-plugin';
-
-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/platform-page-types';
-import { useGetPageTypesForPlatform } from '../../api/platform-page-types';
-import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
-import { useHideOverviewFilterTags } from '../../utils/hooks/useHideOverviewFilterTags';
-
-interface PageFiltersProps {
-	hidePageType?: boolean;
-}
-
-const PageFilters = ({ hidePageType }: PageFiltersProps) => {
-	const [{ query }, setQuery] = useQueryParams() as any;
-	const { selectedPlatform: globalSelectedPlatform } = useDefaultPlatformFromLocalStorage();
-	useHideOverviewFilterTags();
-	const { data: platforms } = useGetPlatforms({});
-
-	const { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
-		id: globalSelectedPlatform?.id
-	});
-
-	const selectedPageTypeUid = useMemo(
-		() => getPageTypeFromQuery(query, pageTypesForPlatform),
-		[query, platforms, globalSelectedPlatform, pageTypesForPlatform]
-	);
-
-	const handleFilterChange = (
-		filters: Record<string, any>,
-		filterCategory: string,
-		filterCategoryToRemove?: string
-	) => {
-		const currentFilters = query.filters?.$and ? query.filters : { ...query.filters, $and: [] };
-		const filterIndex = currentFilters.$and.findIndex(
-			(x?: Record<string, any>) => Object.keys(x || {})?.[0] === filterCategory
-		);
-
-		if (filterIndex > -1) {
-			set(currentFilters, `$and[${filterIndex}]`, filters); // If the filter in this category already exists, replace it
-		} else {
-			currentFilters.$and.push(filters);
-		}
-
-		const removedFilters = removeFiltersFromQuery({ filters: currentFilters }, filterCategoryToRemove);
-
-		setQuery({
-			page: 1,
-			filters: removedFilters
-		});
-	};
-
-	const removeFilters = (filterCategory: string) => {
-		const filters = removeFiltersFromQuery(query, filterCategory);
-
-		setQuery({
-			page: 1,
-			filters
-		});
-	};
-
-	const handlePlatformSelect = (platformTitle: string) => {
-		if (platformTitle === PLATFORM_NO_FILTER) {
-			removeFilters(PLATFORM);
-			return;
-		}
-
-		handleFilterChange(getPlatformQueryFilter(platformTitle), PLATFORM, PAGE_TYPE);
-	};
-
-	const handlePageTypeSelect = (pageType: string) => {
-		if (pageType === PAGE_TYPE_NO_FILTER) {
-			removeFilters(PAGE_TYPE);
-			return;
-		}
-
-		if (pageType === PAGE_TYPE_PAGE) {
-			handleFilterChange(nullPageTypeQueryFilter, PAGE_TYPE);
-			return;
-		}
-
-		handleFilterChange(getPageTypeQueryFilter(pageType), PAGE_TYPE);
-	};
-
-	useEffect(() => {
-		const selectedPlatformFromQuery = getPlatformFromQuery(query, platforms);
-		if (globalSelectedPlatform?.title && globalSelectedPlatform.title !== selectedPlatformFromQuery) {
-			handlePlatformSelect(globalSelectedPlatform.title);
-		}
-	}, [query, platforms, globalSelectedPlatform]);
-
-	return (
-		<Stack horizontal spacing={2}>
-			{!hidePageType && (
-				<PageTypeFilter
-					onChange={handlePageTypeSelect}
-					pageTypes={pageTypesForPlatform}
-					selectedPageTypeUid={selectedPageTypeUid}
-				/>
-			)}
-		</Stack>
-	);
-};
-
-export default PageFilters;
-
-const getPageTypeFromQuery = (query: Record<string, any>, pageTypes?: PageType[]) => {
-	const pageTypeFromQuery = query?.filters?.$and?.find(
-		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === PAGE_TYPE
-	)?.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;
-};
-
-const getPlatformFromQuery = (query: Record<string, any>, platforms?: Platform[]): string | undefined => {
-	const platformFromQuery = query?.filters?.$and?.find(
-		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === PLATFORM
-	)?.platform;
-
-	if (platformFromQuery?.title?.$null === 'true') {
-		return PLATFORM_NO_FILTER;
-	}
-
-	if (platformFromQuery?.title?.$eq) {
-		const matchingPageType = platforms?.find((platforms: Platform) => platforms?.title === platformFromQuery.title.$eq);
-
-		if (matchingPageType) {
-			return matchingPageType.title;
-		}
-	}
-
-	return PLATFORM_NO_FILTER;
-};
-
-const getPlatformQueryFilter = (platform: string) => ({
-	platform: {
-		title: {
-			$eq: platform
-		}
-	}
-});
-
-const getPageTypeQueryFilter = (pageType: string) => ({
-	pageType: {
-		uid: {
-			$eq: pageType
-		}
-	}
-});
-
-const nullPageTypeQueryFilter = {
-	pageType: {
-		uid: {
-			$null: true
-		}
-	}
-};
-
-const removeFiltersFromQuery = (query: Record<string, any>, filterCategory?: string) => {
-	const newAndFilters = query.filters?.$and?.filter(
-		(x?: Record<string, any>) => Object.keys(x || {})?.[0] !== filterCategory
-	);
-
-	const filters = { ...query.filters, $and: newAndFilters };
-
-	if (newAndFilters && newAndFilters.length === 0) {
-		delete filters.$and;
-	}
-
-	return filters;
-};
+import { useEffect, useMemo } from 'react';
+import set from 'lodash/set';
+
+import { Stack } from '@strapi/design-system';
+import { useQueryParams } from '@strapi/helper-plugin';
+
+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/platform-page-types';
+import { useGetPageTypesForPlatform } from '../../api/platform-page-types';
+import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
+import { useHideOverviewFilterTags } from '../../utils/hooks/useHideOverviewFilterTags';
+
+interface PageFiltersProps {
+	hidePageType?: boolean;
+}
+
+const PageFilters = ({ hidePageType }: PageFiltersProps) => {
+	const [{ query }, setQuery] = useQueryParams() as any;
+	const { selectedPlatform: globalSelectedPlatform } = useDefaultPlatformFromLocalStorage();
+	useHideOverviewFilterTags();
+	const { data: platforms } = useGetPlatforms({});
+
+	const { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
+		id: globalSelectedPlatform?.id
+	});
+
+	const selectedPageTypeUid = useMemo(
+		() => getPageTypeFromQuery(query, pageTypesForPlatform),
+		[query, platforms, globalSelectedPlatform, pageTypesForPlatform]
+	);
+
+	const handleFilterChange = (
+		filters: Record<string, any>,
+		filterCategory: string,
+		filterCategoryToRemove?: string
+	) => {
+		const currentFilters = query.filters?.$and ? query.filters : { ...query.filters, $and: [] };
+		const filterIndex = currentFilters.$and.findIndex(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] === filterCategory
+		);
+
+		if (filterIndex > -1) {
+			set(currentFilters, `$and[${filterIndex}]`, filters); // If the filter in this category already exists, replace it
+		} else {
+			currentFilters.$and.push(filters);
+		}
+
+		const removedFilters = removeFiltersFromQuery({ filters: currentFilters }, filterCategoryToRemove);
+
+		setQuery({
+			page: 1,
+			filters: removedFilters
+		});
+	};
+
+	const removeFilters = (filterCategory: string) => {
+		const filters = removeFiltersFromQuery(query, filterCategory);
+
+		setQuery({
+			page: 1,
+			filters
+		});
+	};
+
+	const handlePlatformSelect = (platformTitle: string) => {
+		if (platformTitle === PLATFORM_NO_FILTER) {
+			removeFilters(PLATFORM);
+			return;
+		}
+
+		handleFilterChange(getPlatformQueryFilter(platformTitle), PLATFORM, PAGE_TYPE);
+	};
+
+	const handlePageTypeSelect = (pageType: string) => {
+		if (pageType === PAGE_TYPE_NO_FILTER) {
+			removeFilters(PAGE_TYPE);
+			return;
+		}
+
+		if (pageType === PAGE_TYPE_PAGE) {
+			handleFilterChange(nullPageTypeQueryFilter, PAGE_TYPE);
+			return;
+		}
+
+		handleFilterChange(getPageTypeQueryFilter(pageType), PAGE_TYPE);
+	};
+
+	useEffect(() => {
+		const selectedPlatformFromQuery = getPlatformFromQuery(query, platforms);
+		if (globalSelectedPlatform?.title && globalSelectedPlatform.title !== selectedPlatformFromQuery) {
+			handlePlatformSelect(globalSelectedPlatform.title);
+		}
+	}, [query, platforms, globalSelectedPlatform]);
+
+	return (
+		<Stack horizontal spacing={2}>
+			{!hidePageType && (
+				<PageTypeFilter
+					onChange={handlePageTypeSelect}
+					pageTypes={pageTypesForPlatform}
+					selectedPageTypeUid={selectedPageTypeUid}
+				/>
+			)}
+		</Stack>
+	);
+};
+
+export default PageFilters;
+
+const getPageTypeFromQuery = (query: Record<string, any>, pageTypes?: PageType[]) => {
+	const pageTypeFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === PAGE_TYPE
+	)?.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;
+};
+
+const getPlatformFromQuery = (query: Record<string, any>, platforms?: Platform[]): string | undefined => {
+	const platformFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === PLATFORM
+	)?.platform;
+
+	if (platformFromQuery?.title?.$null === 'true') {
+		return PLATFORM_NO_FILTER;
+	}
+
+	if (platformFromQuery?.title?.$eq) {
+		const matchingPageType = platforms?.find((platforms: Platform) => platforms?.title === platformFromQuery.title.$eq);
+
+		if (matchingPageType) {
+			return matchingPageType.title;
+		}
+	}
+
+	return PLATFORM_NO_FILTER;
+};
+
+const getPlatformQueryFilter = (platform: string) => ({
+	platform: {
+		title: {
+			$eq: platform
+		}
+	}
+});
+
+const getPageTypeQueryFilter = (pageType: string) => ({
+	pageType: {
+		uid: {
+			$eq: pageType
+		}
+	}
+});
+
+const nullPageTypeQueryFilter = {
+	pageType: {
+		uid: {
+			$null: true
+		}
+	}
+};
+
+const removeFiltersFromQuery = (query: Record<string, any>, filterCategory?: string) => {
+	const newAndFilters = query.filters?.$and?.filter(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] !== filterCategory
+	);
+
+	const filters = { ...query.filters, $and: newAndFilters };
+
+	if (newAndFilters && newAndFilters.length === 0) {
+		delete filters.$and;
+	}
+
+	return filters;
+};