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

package/README.md

@@ -134,14 +134,15 @@ 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.
+      // (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.

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

@@ -1,10 +1,10 @@
 import { useQuery, UseQueryOptions } from 'react-query';
-import orderBy from 'lodash/orderBy';
 import objGet from 'lodash/get';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 import qs from 'qs';
-import { getConditionalFilters } from '../components/PlatformFilteredSelectField/utils/get-condition-filters';
+
+import Fuse from 'fuse.js';
 
 export type SearchFilteredEntitiesResult = {
 	pagination: {
@@ -81,32 +81,44 @@ export const getSearchFilteredEntities = async ({
 		});
 
 		const { data } = await get(`/content-manager/collection-types/${uid}?${filters}`);
-		const mapResults = data.results.map(
-			(result: Record<string, any>): SearchFilteredEntitiesResult['results'][number] => {
-				const getPublicationState = () => {
-					if (result?.publishedAt !== undefined) {
-						return result?.publishedAt ? 'published' : 'draft';
-					}
-
-					return false;
-				};
-
-				const subTitle = subTitlePath ? objGet(result, subTitlePath) : undefined;
-
-				return {
-					id: result.id,
-					title: result?.[mainFieldName],
-					publicationState: getPublicationState(),
-					publishedAt: result?.publishedAt,
-					href: `/content-manager/collectionType/${uid}/${result.id}`,
-					subTitle: typeof subTitle === 'string' || typeof subTitle === 'number' ? String(subTitle) : ''
-				};
+		let results = data.results;
+
+		if (searchQuery) {
+			const fuse = new Fuse(data.results, {
+				keys: searchableFields
+			});
+
+			const fuseSearch = fuse.search(searchQuery);
+
+			if (fuseSearch && fuseSearch.length > 0) {
+				results = fuseSearch.map((r) => r.item);
 			}
-		);
+		}
+
+		const mapResults = results.map((result: Record<string, any>): SearchFilteredEntitiesResult['results'][number] => {
+			const getPublicationState = () => {
+				if (result?.publishedAt !== undefined) {
+					return result?.publishedAt ? 'published' : 'draft';
+				}
+
+				return false;
+			};
+
+			const subTitle = subTitlePath ? objGet(result, subTitlePath) : undefined;
+
+			return {
+				id: result.id,
+				title: result?.[mainFieldName],
+				publicationState: getPublicationState(),
+				publishedAt: result?.publishedAt,
+				href: `/content-manager/collectionType/${uid}/${result.id}`,
+				subTitle: typeof subTitle === 'string' || typeof subTitle === 'number' ? String(subTitle) : ''
+			};
+		});
 
 		return {
 			pagination: data.pagination,
-			results: orderBy(mapResults, ['title'], ['asc'])
+			results: mapResults
 		};
 	} catch (e) {
 		return {

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/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/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.14.0-platform",
+    "version": "0.14.2-platform",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",
@@ -31,6 +31,7 @@
         "@strapi/utils": "^4.15.0",
         "add": "^2.0.6",
         "aws-sdk": "^2.1528.0",
+        "fuse.js": "^7.0.0",
         "handlebars": "^4.7.8",
         "react-select": "^5.7.4",
         "sitemap": "^7.1.1"