@webbio/strapi-plugin-page-builder 0.13.0-platform → 0.14.1-platform

package/README.md

@@ -134,14 +134,23 @@ Ik wil een lijst van vacature relaties selecteren. Deze vacatures moeten van het
       "targetField": "vacatures",
       // (Default: undefined) Adds filters to the $and query for result filtering
       "customFilters": [{ "title": { "$contains": "Hoi" } }],
-      // (Default: true). Disables result filtering by globally selected platform
+      // (Default: false). Disables result filtering by globally selected platform
       "disablePlatformFilter": boolean,
       // (Default: false) Hides id of the entity that is edited if it's the same as the targetField uid. So if this is enabled on a vacancy entity and also targets other vacancies, the current vacancy that is edited will not be shown.
       "hideSameEntity": boolean,
       // (Default: ['title']) Defines searchable fields
       "searchableFields": string[],
-      // If set the field will show a subtitle with the value that results in following this path.
-      "subTitlePath": string
+      // (Default: undefined) If set the field will show a subtitle with the value that results in following this path.
+      "subTitlePath": string,
+      // (Default: undefined)
+      // Conditional filters add the posibility to who results based on values from other fields.
+      // For now this only works for fields on the same level as the targetfield.
+      // The value found will be replacing the '${value}' string.
+      "conditionalFilters": {
+        "targetField": string,
+        "targetFieldKey": string,
+        "filter": [{ "title": { "$contains": "${value}" } }]
+      }[];
     }
   },
   "type": "customField",

package/admin/src/api/search-filtered-entity.ts

@@ -4,6 +4,7 @@ import objGet from 'lodash/get';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 import qs from 'qs';
+import { getConditionalFilters } from '../components/PlatformFilteredSelectField/utils/get-condition-filters';
 
 export type SearchFilteredEntitiesResult = {
 	pagination: {
@@ -34,6 +35,7 @@ type SearchFilteredEntitiesQueryParams = {
 	searchableFields?: string[];
 	subTitlePath?: string;
 	mainFieldName?: string;
+	conditionalFilters?: Record<string, any>[];
 };
 
 const QUERY_KEY = 'filteredEntities';
@@ -49,7 +51,8 @@ export const getSearchFilteredEntities = async ({
 	customFilters,
 	searchableFields = ['title'],
 	subTitlePath,
-	mainFieldName = 'title'
+	mainFieldName = 'title',
+	conditionalFilters = []
 }: SearchFilteredEntitiesQueryParams): Promise<SearchFilteredEntitiesResult> => {
 	try {
 		const { get } = fetchClient;
@@ -71,7 +74,8 @@ export const getSearchFilteredEntities = async ({
 						$or: fieldFilters
 					},
 					...notIdFilters,
-					...customFilterObject
+					...customFilterObject,
+					...conditionalFilters
 				]
 			}
 		});

package/admin/src/components/PlatformFilteredSelectField/Multi/index.tsx

@@ -14,6 +14,7 @@ import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
 import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
 import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
 import { getTranslation } from '../utils/get-translations';
+import { getConditionalFilters } from '../utils/get-condition-filters';
 
 const PAGE = 1;
 
@@ -72,11 +73,7 @@ const MultiPlatformFilteredSelectField = ({
 	const { formatMessage } = useIntl();
 
 	const { targetAttributes, targetFieldValue, targetField, relationMainFieldName } = RelationHelper.getTargetAttributes(
-		name,
-		attribute,
-		modifiedData,
-		layout,
-		allLayoutData
+		{ fieldName: name, attribute, modifiedData, layout, allLayoutData }
 	);
 
 	const label = intlLabel?.id
@@ -92,6 +89,14 @@ const MultiPlatformFilteredSelectField = ({
 	}, [targetFieldValue]);
 
 	const getItems = async (inputValue?: string) => {
+		const conditionalFilters = getConditionalFilters({
+			fieldName: name,
+			allLayoutData,
+			attribute,
+			layout,
+			modifiedData
+		});
+
 		const entities = await getSearchFilteredEntities({
 			fetchClient,
 			page: PAGE,
@@ -103,7 +108,8 @@ const MultiPlatformFilteredSelectField = ({
 			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters,
 			searchableFields: attribute?.pluginOptions?.filteredSelect?.searchableFields,
 			subTitlePath: attribute?.pluginOptions?.filteredSelect?.subTitlePath,
-			mainFieldName: relationMainFieldName
+			mainFieldName: relationMainFieldName,
+			conditionalFilters
 		});
 
 		const mapped = entities?.results.map((x) => ({

package/admin/src/components/PlatformFilteredSelectField/Single/index.tsx

@@ -15,6 +15,7 @@ import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
 import S from './../styles';
 import getTrad from '../../../utils/getTrad';
 import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { getConditionalFilters } from '../utils/get-condition-filters';
 
 export interface ISinglePlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {}
 
@@ -53,11 +54,7 @@ const SinglePlatformFilteredSelectField = ({
 	const { formatMessage } = useIntl();
 
 	const { targetAttributes, targetFieldValue, targetField, relationMainFieldName } = RelationHelper.getTargetAttributes(
-		name,
-		attribute,
-		modifiedData,
-		layout,
-		allLayoutData
+		{ fieldName: name, attribute, modifiedData, layout, allLayoutData }
 	);
 
 	const label = intlLabel?.id
@@ -110,6 +107,14 @@ const SinglePlatformFilteredSelectField = ({
 	};
 
 	const getItems = async (inputValue?: string, platformTitle?: string): Promise<CustomReactSelectValue[]> => {
+		const conditionalFilters = getConditionalFilters({
+			fieldName: name,
+			allLayoutData,
+			attribute,
+			layout,
+			modifiedData
+		});
+
 		const pages = await getSearchFilteredEntities({
 			fetchClient,
 			page: PAGE,
@@ -121,7 +126,8 @@ const SinglePlatformFilteredSelectField = ({
 			notIds: hiddenId,
 			searchableFields: attribute?.pluginOptions?.filteredSelect?.searchableFields,
 			subTitlePath: attribute?.pluginOptions?.filteredSelect?.subTitlePath,
-			mainFieldName: relationMainFieldName
+			mainFieldName: relationMainFieldName,
+			conditionalFilters
 		});
 
 		return pages?.results.map((x) => ({

package/admin/src/components/PlatformFilteredSelectField/hooks/useRelationLoad.tsx

@@ -24,7 +24,7 @@ const useRelationLoad = ({ name, attribute }: IRelationLoadProps) => {
 	const entityId = origin || modifiedData.id;
 
 	const { componentUid, componentId, relationMainFieldName, targetAttributes, targetField, targetFieldName } =
-		RelationHelper.getTargetAttributes(fieldName, attribute, modifiedData, layout, allLayoutData);
+		RelationHelper.getTargetAttributes({ fieldName, attribute, modifiedData, layout, allLayoutData });
 
 	const nameSplit = targetFieldName.split('.');
 	const isComponentRelation = Boolean(componentUid);

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

@@ -13,7 +13,13 @@ const PlatformFilteredSelectField = (props: IPlatformFilteredSelectFieldProps) =
 	const { modifiedData, layout, allLayoutData } = form;
 	const { selectedPlatform } = usePlatformFormData(form);
 	const { relations, isCloningEntry, totalRelations, relationsFromModifiedData } = useRelationLoad(props);
-	const { targetAttributes } = RelationHelper.getTargetAttributes(name, attribute, modifiedData, layout, allLayoutData);
+	const { targetAttributes } = RelationHelper.getTargetAttributes({
+		fieldName: name,
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData
+	});
 	const toOneRelation = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
 		targetAttributes?.relation || ''
 	);

package/admin/src/components/PlatformFilteredSelectField/styles.tsx

@@ -34,7 +34,7 @@ const CustomOption = styled(Box)`
 const CustomOptionSubTitle = styled(Box)`
 	${({ theme, disabled }) => css`
 		font-size: ${theme.fontSizes[1]};
-		opacity: 0.5;
+		color: ${theme.colors.neutral400};
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

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

@@ -31,6 +31,11 @@ export interface IPlatformFilteredSelectFieldProps {
 				hideSameEntity?: boolean;
 				searchableFields?: string[];
 				subTitlePath?: string;
+				conditionalFilters?: {
+					targetField?: string;
+					targetFieldKey?: string;
+					filter?: Record<string, any>;
+				}[];
 			};
 		};
 		required?: boolean;
@@ -48,16 +53,26 @@ export interface IPlatformFilteredSelectFieldProps {
 	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 = {

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

@@ -312,8 +312,7 @@ const RelationInput = ({
 							onRelationDisconnect,
 							publicationStateTranslations,
 							relations,
-							updatePositionOfRelation: handleUpdatePositionOfRelation,
-							subTitle: 'ho'
+							updatePositionOfRelation: handleUpdatePositionOfRelation
 						}}
 						itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
 						innerElementType="ol"
@@ -452,7 +451,6 @@ interface ListItemProps extends Pick<RelationItemProps, 'index' | 'style'> {
 			published: string;
 		};
 		relations: NormalizedRelation[];
-		subTitle?: string;
 	};
 }
 
@@ -472,7 +470,7 @@ const ListItem = ({ data, index, style }: ListItemProps) => {
 		relations,
 		updatePositionOfRelation
 	} = data;
-	const { publicationState, href, mainField, id } = relations[index];
+	const { publicationState, href, mainField, id, subTitle } = relations[index];
 	const statusColor = publicationState === 'draft' ? 'secondary' : 'success';
 
 	return (
@@ -512,14 +510,14 @@ const ListItem = ({ data, index, style }: ListItemProps) => {
 					{href ? (
 						<Flex direction="column" alignItems="start" gap={0}>
 							<LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
-							{data?.subTitle && <S.CustomOptionSubTitle>{data.subTitle}</S.CustomOptionSubTitle>}
+							{subTitle && <S.CustomOptionSubTitle>{subTitle}</S.CustomOptionSubTitle>}
 						</Flex>
 					) : (
 						<Flex direction="column" alignItems="start" gap={0}>
 							<Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
 								{mainField ?? id}
 							</Typography>
-							{data?.subTitle && <S.CustomOptionSubTitle>{data.subTitle}</S.CustomOptionSubTitle>}
+							{subTitle && <S.CustomOptionSubTitle>{subTitle}</S.CustomOptionSubTitle>}
 						</Flex>
 					)}
 				</Tooltip>

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/utils/normalizeRelations.ts

@@ -15,6 +15,7 @@ export type NormalizedRelation = Contracts.Relations.RelationResult & {
 	href?: string;
 	mainField: string;
 	publicationState?: false | 'published' | 'draft';
+	subTitle?: string;
 };
 
 export const normalizeRelation = (

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.13.0-platform",
+    "version": "0.14.1-platform",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",