mock filtering

src/Umbraco.Web.UI.Client/src/mocks/data/user.data.ts

@@ -1,5 +1,6 @@
 import { UmbEntityData } from './entity.data.js';
 import { umbUserGroupData } from './user-group.data.js';
+import { arrayFilter, stringFilter, queryFilter } from './utils.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLoggedInUser } from '@umbraco-cms/backoffice/auth';
 import {
@@ -20,6 +21,10 @@ const createUserItem = (item: UserResponseModel): UserItemResponseModel => {
 	};
 };
 
+const userGroupFilter = (filterOptions: any, item: UserItemResponseModel) => arrayFilter(filterOptions.userGroupIds, item.userGroupIds);
+const userStateFilter = (filterOptions: any, item: UserItemResponseModel) => stringFilter(filterOptions.userStates, item.state);
+const userQueryFilter = (filterOptions: any, item: UserItemResponseModel) => queryFilter(filterOptions.filter, item.name);
+
 // Temp mocked database
 class UmbUserData extends UmbEntityData<UserResponseModel> {
 	constructor(data: UserResponseModel[]) {
@@ -154,23 +159,25 @@ class UmbUserData extends UmbEntityData<UserResponseModel> {
 		this.createUser(invitedUser);
 	}
 
-	filter (config: any): PagedUserResponseModel {
-		const { total, items: allItems } = this.getAll();
+	filter (options: any): PagedUserResponseModel {
+		const { items: allItems } = this.getAll();
 
-    const filter = {
-      skip: config.skip || 0,
-      take: config.take || 10,
-      orderBy: config.orderBy || 'name',
-      orderDirection: config.orderDirection || 'asc',
-      userGroupIds: config.userGroupIds || [],
-      userStates: config.userStates || [],
-      filter: config.filter || '',
+    const filterOptions = {
+      skip: options.skip || 0,
+      take: options.take || 25,
+      orderBy: options.orderBy || 'name',
+      orderDirection: options.orderDirection || 'asc',
+      userGroupIds: options.userGroupIds,
+      userStates: options.userStates,
+      filter: options.filter,
     };
 
-		// TODO: filter item based on values in filter object
-		const filteredItems = allItems.slice(filter.skip, filter.skip + filter.take);
+		const filteredItems = allItems.filter((item) => userGroupFilter(filterOptions, item) && userStateFilter(filterOptions, item) && userQueryFilter(filterOptions, item));
+		const totalItems = filteredItems.length;
 
-		return { total, items: filteredItems };
+		const paginatedItems = filteredItems.slice(filterOptions.skip, filterOptions.skip + filterOptions.take);
+
+		return { total: totalItems, items: paginatedItems };
 	};
 }
 

src/Umbraco.Web.UI.Client/src/mocks/data/utils.ts

@@ -87,3 +87,29 @@ export const createFileItemResponseModelBaseModel = (item: any): FileItemRespons
 	name: item.name,
 	icon: item.icon,
 });
+
+export const arrayFilter = (filterBy: Array<string>, value?: Array<string>): boolean => {
+	// if a filter is not set, return all items
+	if (!filterBy) {
+		return true;
+	}
+
+	return filterBy.some((filterValue: string) => value?.includes(filterValue));
+}
+
+export const stringFilter = (filterBy: Array<string>, value?: string): boolean => {
+	// if a filter is not set, return all items
+	if (!filterBy || !value) {
+		return true;
+	}
+	return filterBy.includes(value);
+};
+
+export const queryFilter = (filterBy: string, value: string) => {
+	if (!filterBy || !value) {
+		return true;
+	}
+
+	const query = filterBy.toLowerCase();
+	return value.toLowerCase().includes(query);
+};

src/Umbraco.Web.UI.Client/src/mocks/handlers/user/filter.handlers.ts

@@ -6,17 +6,25 @@ import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 export const handlers = [
   rest.get(umbracoPath(`${slug}/filter`), (req, res, ctx) => {
 
-    const filter = {
-      skip: Number(req.url.searchParams.get('skip')),
-      take: Number(req.url.searchParams.get('take')),
-      orderBy: req.url.searchParams.get('orderBy'),
-      orderDirection: req.url.searchParams.get('orderDirection'),
-      userGroupIds: req.url.searchParams.getAll('userGroupIds'),
-      userStates: req.url.searchParams.getAll('userStates'),
-      filter: req.url.searchParams.get('filter'),
+    const skip = Number(req.url.searchParams.get('skip'));
+    const take = Number(req.url.searchParams.get('take'));
+    const orderBy = req.url.searchParams.get('orderBy');
+    const orderDirection = req.url.searchParams.get('orderDirection');
+    const userGroupIds = req.url.searchParams.getAll('userGroupIds');
+    const userStates = req.url.searchParams.getAll('userStates');
+    const filter = req.url.searchParams.get('filter');
+
+    const options = {
+      skip: skip || undefined,
+      take: take || undefined,
+      orderBy: orderBy || undefined,
+      orderDirection: orderDirection || undefined,
+      userGroupIds: userGroupIds.length > 0 ? userGroupIds : undefined,
+      userStates: userStates.length > 0 ? userStates : undefined,
+      filter: filter || undefined,
     };
 
-    const response = umbUsersData.filter(filter);
+    const response = umbUsersData.filter(options);
     return res(ctx.status(200), ctx.json(response));
   }),
 ];