@webbio/strapi-plugin-page-builder 0.2.2 → 0.2.4

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

@@ -1,38 +1,38 @@
-import { Template, useGetTemplates } from '../../../../api/template';
-import { sanitizeModules } from '../../../../utils/sanitizeModules';
-import { useFetchClient } from '@strapi/helper-plugin';
-import getRequestUrl from '../../../../utils/getRequestUrl';
-
-type OnChangeFormType = (props: { target: Record<string, any>; shouldSetInitialValue: boolean }) => void;
-
-export const useTemplateModules = (onChange: OnChangeFormType) => {
-	const { data: templates } = useGetTemplates({});
-	const fetchClient = useFetchClient();
-
-	return {
-		findTemplate,
-		templates,
-		replaceContentTypeModules: (id: number) => replaceContentTypeModules(id, fetchClient, onChange)
-	};
-};
-
-const findTemplate = (templates?: Template[], selectedTemplateId?: string | number) =>
-	templates?.find((template) => template.id === Number(selectedTemplateId));
-
-const sanatizeContentTypeModules = (onChange: OnChangeFormType, modules: Record<string, any>[]) => {
-	const sanitizedModules = sanitizeModules(modules);
-
-	return onChange({
-		target: {
-			name: 'modules',
-			value: sanitizedModules
-		},
-		shouldSetInitialValue: true
-	});
-};
-
-const replaceContentTypeModules = async (id: number, fetchClient: any, onChange: OnChangeFormType) => {
-	const { get } = fetchClient;
-	const result = await get(getRequestUrl(`/template/${id}`));
-	return sanatizeContentTypeModules(onChange, result.data.modules);
-};
+import { Template, useGetTemplates } from '../../../../api/template';
+import { sanitizeModules } from '../../../../utils/sanitizeModules';
+import { useFetchClient } from '@strapi/helper-plugin';
+import getRequestUrl from '../../../../utils/getRequestUrl';
+
+type OnChangeFormType = (props: { target: Record<string, any>; shouldSetInitialValue: boolean }) => void;
+
+export const useTemplateModules = (onChange: OnChangeFormType) => {
+	const { data: templates } = useGetTemplates({});
+	const fetchClient = useFetchClient();
+
+	return {
+		findTemplate,
+		templates,
+		replaceContentTypeModules: (id: number) => replaceContentTypeModules(id, fetchClient, onChange)
+	};
+};
+
+const findTemplate = (templates?: Template[], selectedTemplateId?: string | number) =>
+	templates?.find((template) => template.id === Number(selectedTemplateId));
+
+const sanatizeContentTypeModules = (onChange: OnChangeFormType, modules: Record<string, any>[]) => {
+	const sanitizedModules = sanitizeModules(modules);
+
+	return onChange({
+		target: {
+			name: 'modules',
+			value: sanitizedModules
+		},
+		shouldSetInitialValue: true
+	});
+};
+
+const replaceContentTypeModules = async (id: number, fetchClient: any, onChange: OnChangeFormType) => {
+	const { get } = fetchClient;
+	const result = await get(getRequestUrl(`/template/${id}`));
+	return sanatizeContentTypeModules(onChange, result.data.modules);
+};

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

@@ -1,29 +1,29 @@
-import React from 'react';
-
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-
-import { PAGE_UID } from '../../../../shared/utils/constants';
-import { PageSettings } from './PageSettings';
-import { CollectionTypeSettings } from './CollectionTypeSettings';
-import { useHasPageRelation } from '../../api/has-page-relation';
-
-export const EditView = () => {
-	const { layout } = useCMEditViewDataManager();
-
-	const isPageCollectionType = layout.uid === PAGE_UID;
-	const isCollectionType = layout.kind === 'collectionType';
-
-	const { data: hasPageRelation, isLoading } = useHasPageRelation({
-		uid: layout.uid
-	});
-
-	if (isPageCollectionType) {
-		return <PageSettings />;
-	}
-
-	if (isCollectionType && !isLoading && hasPageRelation) {
-		return <CollectionTypeSettings />;
-	}
-
-	return null;
-};
+import React from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import { PAGE_UID } from '../../../../shared/utils/constants';
+import { PageSettings } from './PageSettings';
+import { CollectionTypeSettings } from './CollectionTypeSettings';
+import { useHasPageRelation } from '../../api/has-page-relation';
+
+export const EditView = () => {
+	const { layout } = useCMEditViewDataManager() as any;
+
+	const isPageCollectionType = layout.uid === PAGE_UID;
+	const isCollectionType = layout.kind === 'collectionType';
+
+	const { data: hasPageRelation, isLoading } = useHasPageRelation({
+		uid: layout.uid
+	});
+
+	if (isPageCollectionType) {
+		return <PageSettings />;
+	}
+
+	if (isCollectionType && !isLoading && hasPageRelation) {
+		return <CollectionTypeSettings />;
+	}
+
+	return null;
+};

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

@@ -1,32 +1,32 @@
-import React from 'react';
-
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
-
-import { PageType } from '../../api/page-type';
-import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
-
-interface Props {
-	onChange: (pageTypeId: string) => void;
-	selectedPageType?: PageType | null;
-	pageTypes?: PageType[];
-	disabled?: boolean;
-}
-
-export const PageTypeSelect = ({ onChange, pageTypes, selectedPageType, disabled }: Props) => {
-	return (
-		<SingleSelect
-			label="Page type"
-			placeholder="Choose a page type"
-			value={selectedPageType?.id || PAGE_TYPE_PAGE}
-			onChange={onChange}
-			disabled={disabled}
-		>
-			<SingleSelectOption value={PAGE_TYPE_PAGE}>Page</SingleSelectOption>
-			{pageTypes?.map((pageType: PageType) => (
-				<SingleSelectOption key={pageType?.uid} value={pageType?.id}>
-					{pageType?.title}
-				</SingleSelectOption>
-			))}
-		</SingleSelect>
-	);
-};
+import React from 'react';
+
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+
+import { PageType } from '../../api/page-type';
+import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
+
+interface Props {
+	onChange: (pageTypeId: string) => void;
+	selectedPageType?: PageType | null;
+	pageTypes?: PageType[];
+	disabled?: boolean;
+}
+
+export const PageTypeSelect = ({ onChange, pageTypes, selectedPageType, disabled }: Props) => {
+	return (
+		<SingleSelect
+			label="Page type"
+			placeholder="Choose a page type"
+			value={selectedPageType?.id || PAGE_TYPE_PAGE}
+			onChange={onChange}
+			disabled={Boolean(disabled)}
+		>
+			<SingleSelectOption value={PAGE_TYPE_PAGE}>Page</SingleSelectOption>
+			{pageTypes?.map((pageType: PageType) => (
+				<SingleSelectOption key={pageType?.uid} value={pageType?.id}>
+					{pageType?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};

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

@@ -1,35 +1,35 @@
-import React from 'react';
-import { Flex, Box, Divider, Typography } from '@strapi/design-system';
-
-interface Props {
-	title: string;
-	children: React.ReactNode;
-}
-
-export const Wrapper = (props: Props) => {
-	return (
-		<Flex
-			as="aside"
-			direction="column"
-			background="neutral0"
-			borderColor="neutral150"
-			hasRadius={true}
-			paddingTop={6}
-			paddingBottom={4}
-			paddingRight={4}
-			paddingLeft={4}
-			shadow="tableShadow"
-			alignItems="left"
-		>
-			<Typography variant="sigma" textColor="neutral600" id="additional-information">
-				{props.title}
-			</Typography>
-
-			<Box paddingTop={2} paddingBottom={4}>
-				<Divider />
-			</Box>
-
-			{props.children}
-		</Flex>
-	);
-};
+import React from 'react';
+import { Flex, Box, Divider, Typography } from '@strapi/design-system';
+
+interface Props {
+	title: string;
+	children: React.ReactNode;
+}
+
+export const Wrapper = (props: Props) => {
+	return (
+		<Flex
+			as="aside"
+			direction="column"
+			background="neutral0"
+			borderColor="neutral150"
+			hasRadius={true}
+			paddingTop={6}
+			paddingBottom={4}
+			paddingRight={4}
+			paddingLeft={4}
+			shadow="tableShadow"
+			alignItems="left"
+		>
+			<Typography variant="sigma" textColor="neutral600" id="additional-information">
+				{props.title}
+			</Typography>
+
+			<Box paddingTop={2} paddingBottom={4}>
+				<Divider />
+			</Box>
+
+			{props.children}
+		</Flex>
+	);
+};

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/PageTypeFilter/index.tsx

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

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

@@ -1,130 +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();
-	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}>
-				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 { 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;
-};
+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;
+};

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

@@ -1,12 +1,12 @@
-/**
- *
- * PluginIcon
- *
- */
-
-import React from 'react';
-import { Puzzle } from '@strapi/icons';
-
-const PluginIcon = () => <Puzzle />;
-
-export default PluginIcon;
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import { Puzzle } from '@strapi/icons';
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

package/admin/src/constants.ts

@@ -1,3 +1,3 @@
-export const PAGE_TYPE_NO_FILTER = 'all';
-export const PLATFORM_NO_FILTER = 'allPlatforms';
-export const PAGE_TYPE = 'pageType';
+export const PAGE_TYPE_NO_FILTER = 'all';
+export const PLATFORM_NO_FILTER = 'allPlatforms';
+export const PAGE_TYPE = 'pageType';