@webbio/strapi-plugin-page-builder 0.12.8-platform → 0.14.0-platform

package/admin/src/components/PlatformFilteredSelectField/utils/get-condition-filters.ts

@@ -0,0 +1,82 @@
+import { isJSON } from '../../../utils/isJson';
+import RelationHelper, { IRelationHelperProps } from './relation-helper';
+
+interface IGetConditionalFiltersProps extends IRelationHelperProps {}
+
+export const getConditionalFilters = ({
+	attribute,
+	modifiedData,
+	layout,
+	allLayoutData,
+	fieldName
+}: IGetConditionalFiltersProps): Record<string, any>[] => {
+	const conditionalFilters = (attribute?.pluginOptions?.filteredSelect?.conditionalFilters || []).filter(
+		(x) => x.filter && x.targetField
+	);
+
+	const filters: Record<string, any>[] = [];
+
+	for (const { targetField, filter, targetFieldKey } of conditionalFilters) {
+		const completeFieldNamePath = (fieldName || '').split('.');
+		completeFieldNamePath.pop();
+		completeFieldNamePath.push(targetField || '');
+		const { targetFieldValue } = RelationHelper.getTargetAttributes({
+			fieldName,
+			attribute,
+			modifiedData,
+			layout,
+			allLayoutData,
+			customTargetField: targetField
+		});
+
+		const value = getTargetFieldValue(targetFieldValue, targetFieldKey);
+
+		// If the value is an array, we need to create an OR filter
+		if (Array.isArray(value)) {
+			const orFilters: { $or: Record<string, any>[] } = {
+				$or: []
+			};
+
+			for (const val of value) {
+				const filterReplacement = replaceObj(filter, val);
+				if (val && filterReplacement) {
+					orFilters.$or.push(filterReplacement);
+				}
+			}
+			filters.push(orFilters);
+		} else {
+			const filterReplacement = replaceObj(filter, value);
+
+			if (value) {
+				filters.push(filterReplacement);
+			}
+		}
+	}
+
+	return filters.filter(Boolean);
+};
+
+const getTargetFieldValue = (targetFieldValue?: any, targetFieldKey?: string): any => {
+	const key = targetFieldKey || 'id';
+
+	if (typeof targetFieldValue !== 'object' || !targetFieldValue) {
+		return targetFieldValue;
+	}
+
+	if (Array.isArray(targetFieldValue)) {
+		return targetFieldValue.map((x) => x?.[key]);
+	}
+
+	return targetFieldValue?.[key];
+};
+
+const replaceObj = (filter?: Record<string, any>, value?: string) => {
+	const stringFilter = JSON.stringify(filter || {}).replaceAll('${value}', value || '');
+	const json = isJSON(stringFilter);
+
+	if (!json) {
+		return undefined;
+	}
+
+	return JSON.parse(stringFilter);
+};

package/admin/src/components/PlatformFilteredSelectField/utils/relation-helper.ts

@@ -1,6 +1,7 @@
 import { IntlFormatters, MessageDescriptor } from '@formatjs/intl';
 import get from 'lodash/get';
 import { pointPathToGetPath } from '../../../utils/getObjectFromFormName';
+import { Platform } from '../../../api/platform';
 
 export interface GetTargetAttributesResult {
 	targetAttributes?: {
@@ -28,6 +29,13 @@ export interface IPlatformFilteredSelectFieldProps {
 				customFilters?: Record<string, any>[];
 				disablePlatformFilter?: boolean;
 				hideSameEntity?: boolean;
+				searchableFields?: string[];
+				subTitlePath?: string;
+				conditionalFilters?: {
+					targetField?: string;
+					targetFieldKey?: string;
+					filter?: Record<string, any>;
+				}[];
 			};
 		};
 		required?: boolean;
@@ -41,20 +49,31 @@ export interface IPlatformFilteredSelectFieldProps {
 	value?: string;
 	contentTypeUID?: string;
 	placeholder?: MessageDescriptor & Parameters<IntlFormatters['formatMessage']>;
+	selectedPlatform?: Platform;
+	hiddenId?: number[];
+}
+
+export interface IRelationHelperProps {
+	fieldName?: string;
+	attribute?: IPlatformFilteredSelectFieldProps['attribute'];
+	modifiedData?: Record<string, any>;
+	layout?: Record<string, any>;
+	allLayoutData?: Record<string, any>;
+	customTargetField?: string;
 }
 
 const RelationHelper = {
-	getTargetAttributes: (
-		fieldName?: string,
-		attribute?: IPlatformFilteredSelectFieldProps['attribute'],
-		modifiedData?: Record<string, any>,
-		layout?: Record<string, any>,
-		allLayoutData?: Record<string, any>
-	) => {
+	getTargetAttributes: ({
+		fieldName = '',
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData,
+		customTargetField
+	}: IRelationHelperProps) => {
 		const lastFieldName = fieldName?.split('.')?.[fieldName?.split('.')?.length - 1];
-		const targetField = attribute?.pluginOptions?.filteredSelect?.targetField || fieldName || '';
+		const targetField = customTargetField || attribute?.pluginOptions?.filteredSelect?.targetField || fieldName || '';
 		const targetFieldName = (fieldName || '')?.replace(lastFieldName || '', targetField);
-
 		const component = getComponent(targetFieldName, modifiedData, allLayoutData);
 		const result: GetTargetAttributesResult = {
 			targetAttributes: undefined,

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/RelationInput.tsx

@@ -32,6 +32,7 @@ import { getTranslation } from '../../utils/translations';
 import type { NormalizedRelation } from './utils/normalizeRelations';
 import type { Contracts } from '../../../../../../content-manager/shared';
 import type { Entity } from '@strapi/types';
+import S from '../../../../../../../PlatformFilteredSelectField/styles';
 
 const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
@@ -81,6 +82,7 @@ interface RelationInputProps
 		hasNextPage?: boolean;
 	};
 	size: number;
+	mainField?: string;
 }
 
 const RelationInput = ({
@@ -114,6 +116,7 @@ const RelationInput = ({
 	required,
 	relations: paginatedRelations,
 	searchResults,
+	mainField,
 	size
 }: RelationInputProps) => {
 	const [textValue, setTextValue] = React.useState<string | undefined>('');
@@ -265,9 +268,9 @@ const RelationInput = ({
 							onSearch(event.currentTarget.value);
 						}}
 					>
-						{options.map((opt) => {
-							return <Option key={opt.id} {...opt} />;
-						})}
+						{options.map((opt) => (
+							<Option key={opt.id} {...opt} />
+						))}
 					</Combobox>
 				</ComboboxWrapper>
 
@@ -309,7 +312,8 @@ const RelationInput = ({
 							onRelationDisconnect,
 							publicationStateTranslations,
 							relations,
-							updatePositionOfRelation: handleUpdatePositionOfRelation
+							updatePositionOfRelation: handleUpdatePositionOfRelation,
+							subTitle: 'ho'
 						}}
 						itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
 						innerElementType="ol"
@@ -366,8 +370,9 @@ const ShadowBox = styled(Box)<{ overflowDirection?: 'top-bottom' | 'top' | 'bott
 const Option = ({
 	publicationState,
 	mainField,
-	id
-}: Pick<NormalizedRelation, 'id' | 'mainField' | 'publicationState'>) => {
+	id,
+	subTitle
+}: Pick<NormalizedRelation, 'id' | 'mainField' | 'publicationState'> & { subTitle?: string }) => {
 	const { formatMessage } = useIntl();
 	const stringifiedDisplayValue = (mainField ?? id).toString();
 
@@ -384,18 +389,32 @@ const Option = ({
 		const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
 		return (
-			<ComboboxOption value={id.toString()} textValue={stringifiedDisplayValue}>
+			<ComboboxOption
+				value={id.toString()}
+				textValue={stringifiedDisplayValue}
+				style={{ paddingTop: 5, paddingBottom: 5 }}
+			>
 				<Flex>
 					<StyledBullet title={title} isDraft={isDraft} />
-					<Typography ellipsis>{stringifiedDisplayValue}</Typography>
+					<S.CustomOptionItemWrapper direction="column" alignItems="start">
+						<Typography ellipsis>{stringifiedDisplayValue}</Typography>
+						{subTitle && <S.CustomOptionSubTitle>{subTitle}</S.CustomOptionSubTitle>}
+					</S.CustomOptionItemWrapper>
 				</Flex>
 			</ComboboxOption>
 		);
 	}
 
 	return (
-		<ComboboxOption value={id.toString()} textValue={stringifiedDisplayValue}>
-			{stringifiedDisplayValue}
+		<ComboboxOption
+			value={id.toString()}
+			textValue={stringifiedDisplayValue}
+			style={{ paddingTop: 5, paddingBottom: 5 }}
+		>
+			<S.CustomOptionItemWrapper direction="column" alignItems="start" gap={0}>
+				{stringifiedDisplayValue}
+				{subTitle && <S.CustomOptionSubTitle>{subTitle}</S.CustomOptionSubTitle>}
+			</S.CustomOptionItemWrapper>
 		</ComboboxOption>
 	);
 };
@@ -433,6 +452,7 @@ interface ListItemProps extends Pick<RelationItemProps, 'index' | 'style'> {
 			published: string;
 		};
 		relations: NormalizedRelation[];
+		subTitle?: string;
 	};
 }
 
@@ -487,14 +507,20 @@ const ListItem = ({ data, index, style }: ListItemProps) => {
 			}}
 			updatePositionOfRelation={updatePositionOfRelation}
 		>
-			<Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+			<Box minWidth={0} paddingRight={4}>
 				<Tooltip description={mainField ?? `${id}`}>
 					{href ? (
-						<LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
+						<Flex direction="column" alignItems="start" gap={0}>
+							<LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
+							{data?.subTitle && <S.CustomOptionSubTitle>{data.subTitle}</S.CustomOptionSubTitle>}
+						</Flex>
 					) : (
-						<Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
-							{mainField ?? id}
-						</Typography>
+						<Flex direction="column" alignItems="start" gap={0}>
+							<Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
+								{mainField ?? id}
+							</Typography>
+							{data?.subTitle && <S.CustomOptionSubTitle>{data.subTitle}</S.CustomOptionSubTitle>}
+						</Flex>
 					)}
 				</Tooltip>
 			</Box>

package/admin/src/utils/hooks/useQueryParams.ts

@@ -0,0 +1,52 @@
+import { parse, stringify } from 'qs';
+import { useMemo, useCallback } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+
+interface IUseQueryParamsObj {
+	query: Record<string, any>;
+	rawQuery: string;
+}
+
+type ISetQuery = (nextParams: Record<string, any>, method?: string, routerMethod?: string) => void;
+
+// We created this as a copy of the useQueryParams hook from the Strapi plugin
+// This one however supports the replace and push methods from the useHistory hook
+const useQueryParams = (initialParams?: Record<string, any>): [IUseQueryParamsObj, ISetQuery] => {
+	const { search } = useLocation();
+	const { replace, push } = useHistory();
+
+	const query = useMemo(() => {
+		const searchQuery = search.substring(1);
+		if (!search) {
+			return initialParams || {};
+		}
+		return parse(searchQuery);
+	}, [search, initialParams]);
+
+	const setQuery = useCallback(
+		(nextParams: Record<string, any>, method = 'push', routerMethod = 'push') => {
+			let nextQuery = { ...query };
+			if (method === 'remove') {
+				Object.keys(nextParams).forEach((key) => {
+					if (Object.prototype.hasOwnProperty.call(nextQuery, key)) {
+						delete nextQuery[key];
+					}
+				});
+			} else {
+				nextQuery = { ...query, ...nextParams };
+			}
+			const props = { search: stringify(nextQuery, { encode: false }) };
+
+			if (routerMethod === 'replace') {
+				replace(props);
+			} else {
+				push(props);
+			}
+		},
+		[push, replace, query]
+	);
+
+	return [{ query, rawQuery: search }, setQuery];
+};
+
+export { useQueryParams };

package/admin/src/utils/isJson.ts

@@ -0,0 +1,9 @@
+export const isJSON = (value?: string) => {
+	if (!value) return false;
+
+	try {
+		return !!(JSON.parse(value) && value);
+	} catch (e) {
+		return false;
+	}
+};

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.12.8-platform",
+    "version": "0.14.0-platform",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",

package/dist/server/bootstrap/permissions.js

@@ -20,7 +20,7 @@ exports.default = async ({ strapi }) => {
                 displayName,
                 category: 'Platform',
                 handler: async (x) => {
-                    var _a, _b, _c, _d;
+                    var _a, _b, _c;
                     if (((_a = x === null || x === void 0 ? void 0 : x.permission) === null || _a === void 0 ? void 0 : _a.subject) === 'api::platform.platform') {
                         return {
                             id: {
@@ -34,25 +34,28 @@ exports.default = async ({ strapi }) => {
                                 limit: -1,
                                 populate: '*'
                             })));
-                            // checks which role the user has
-                            const foundRole = roles.filter((role) => {
-                                return x.roles.find((userRole) => userRole.name === role.name);
-                            });
+                            // checks which roles the user has
+                            const foundRoles = roles.filter((role) => x.roles.find((userRole) => userRole.name === role.name));
+                            // Get all permissions from the roles the user has
+                            const allPermissions = [foundRoles === null || foundRoles === void 0 ? void 0 : foundRoles[0]]
+                                .map((role) => role === null || role === void 0 ? void 0 : role.permissions)
+                                .flat()
+                                .filter(Boolean);
                             // get the right platform permissions, and filters out the platform
                             // this is neccesary because of multiple platforms. if you can see Vacancy from platform 1 and collegue from platform 2
                             // it will show both at page level, so this filters out the wrong page
-                            const platformPermission = (_d = foundRole === null || foundRole === void 0 ? void 0 : foundRole[0]) === null || _d === void 0 ? void 0 : _d.permissions.map((permission) => {
-                                return {
-                                    permission: permission.subject,
-                                    condition: permission.conditions.filter((condition) => condition.includes(platform.title))
-                                };
-                            });
-                            // get the right permission for platform
-                            const permissions = platformPermission.map((permission) => {
-                                if (permission.condition.length > 0) {
-                                    return permission.permission;
+                            const platformPermission = allPermissions.map((permission) => ({
+                                subject: permission.subject,
+                                conditions: permission === null || permission === void 0 ? void 0 : permission.conditions.filter((condition) => condition.includes(platform.title))
+                            }));
+                            // Get the right permission for platform
+                            const permissions = platformPermission
+                                .map((permission) => {
+                                if (permission.conditions.length > 0) {
+                                    return permission.subject;
                                 }
-                            });
+                            })
+                                .filter(Boolean);
                             const uniquePermissions = (0, uniq_1.default)(permissions);
                             return {
                                 $and: [

package/dist/server/controllers/private-content.js

@@ -8,7 +8,7 @@ exports.default = {
             return ctx.redirect(callbackUrl);
         }
         catch (error) {
-            console.log(ctx);
+            console.log('Activate User Error', error, ctx);
             return ctx.unauthorized('User is already confirmed or token is invalid');
         }
     },