feat: fix toggle table filters (#141)

YanaYestr · web-flow · commit 672d2a61dabf · 2025-12-30T13:29:07.000+01:00
diff --git a/apps/gauzy/src/app/pages/employees/employees.component.ts b/apps/gauzy/src/app/pages/employees/employees.component.ts
@@ -42,7 +42,7 @@ import {
 	InviteMutationComponent,
 	PaginationFilterBaseComponent,
 	PictureNameTagsComponent,
-	ToggleFilterComponent
+	SmartToggleFilterComponent
 } from '@gauzy/ui-core/shared';
 import { EmployeeTimeTrackingStatusComponent, EmployeeWorkStatusComponent } from './table-components';
 
@@ -182,8 +182,13 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 			.componentLayout$(this.viewComponentName)
 			.pipe(
 				distinctUntilChange(),
-				tap((componentLayout) => (this.dataLayoutStyle = componentLayout)),
-				tap(() => this.refreshPagination()),
+				tap((componentLayout: ComponentLayoutStyleEnum) => {
+					this.dataLayoutStyle = componentLayout;
+					this._loadSmartTableSettings();
+					this._additionalColumns();
+					this._registerDataTableColumns();
+					this.refreshPagination();
+				}),
 				filter((componentLayout) => componentLayout === ComponentLayoutStyleEnum.CARDS_GRID),
 				tap(() => (this.employees = [])),
 				tap(() => this.employees$.next(true)),
@@ -685,7 +690,10 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 				},
 				filter: {
 					type: 'custom',
-					component: InputFilterComponent
+					component: InputFilterComponent,
+					config: {
+						initialValueInput: this.filters?.where?.user?.name ?? null
+					}
 				},
 				filterFunction: this._getFilterFunction('user.name')
 			},
@@ -700,7 +708,10 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 				isFilterable: true,
 				filter: {
 					type: 'custom',
-					component: InputFilterComponent
+					component: InputFilterComponent,
+					config: {
+						initialValueInput: this.filters?.where?.user?.email ?? null
+					}
 				},
 				filterFunction: this._getFilterFunction('user.email')
 			},
@@ -762,9 +773,28 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 				width: '5%',
 				filter: {
 					type: 'custom',
-					component: ToggleFilterComponent
+					component: SmartToggleFilterComponent,
+					config: {
+						initialChoice:
+							this.filters?.where?.isTrackingEnabled === true
+								? 'accept'
+								: this.filters?.where?.isTrackingEnabled === false
+								? 'deny'
+								: null,
+						acceptValue: { field: 'isTrackingEnabled', value: true },
+						denyValue: { field: 'isTrackingEnabled', value: false }
+					}
+				},
+				filterFunction: (data: { field: string; value: boolean } | null) => {
+					if (!data) {
+						// Reset filter
+						this.setFilterWithServiceFalse({ field: 'isTrackingEnabled', search: null });
+						return false;
+					}
+
+					this.setFilterWithServiceFalse({ field: data.field, search: data.value });
+					return false;
 				},
-				filterFunction: this._getFilterFunction('isTrackingEnabled'),
 				renderComponent: EmployeeTimeTrackingStatusComponent,
 				componentInitFunction: (instance: EmployeeTimeTrackingStatusComponent, cell: Cell) => {
 					instance.rowData = cell.getRow().getData();
@@ -781,7 +811,10 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 				isSortable: false,
 				filter: {
 					type: 'custom',
-					component: EmploymentTypeFilterComponent
+					component: EmploymentTypeFilterComponent,
+					config: {
+						initialValueInput: this.filters?.where?.organizationEmploymentTypes ?? null
+					}
 				},
 				filterFunction: (employmentTypes: IOrganizationEmploymentType[]) => {
 					const typeIds = employmentTypes.map((t) => t.id);
@@ -806,11 +839,27 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 				isSortable: false,
 				filter: {
 					type: 'custom',
-					component: ToggleFilterComponent
+					component: SmartToggleFilterComponent,
+					config: {
+						initialChoice: this.filters?.where?.isActive
+							? 'accept'
+							: this.filters?.where?.isArchived
+							? 'deny'
+							: null,
+						acceptValue: { isActive: true, isArchived: false },
+						denyValue: { isActive: false, isArchived: true }
+					}
 				},
-				filterFunction: (isActive: boolean) => {
-					this.setFilter({ field: 'isActive', search: isActive });
-					return isActive;
+				filterFunction: (value: { isActive?: boolean; isArchived?: boolean } | null) => {
+					if (!value) {
+						// Reset filter
+						this.setFilter({ field: 'isActive', search: null });
+						this.setFilter({ field: 'isArchived', search: null });
+						return false;
+					}
+					if ('isActive' in value) this.setFilter({ field: 'isActive', search: value.isActive });
+					if ('isArchived' in value) this.setFilter({ field: 'isArchived', search: value.isArchived });
+					return false;
 				},
 				renderComponent: EmployeeWorkStatusComponent,
 				componentInitFunction: (instance: EmployeeWorkStatusComponent, cell: Cell) => {
@@ -897,11 +946,27 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 			hide: allowScreenshotCapture === false,
 			filter: {
 				type: 'custom',
-				component: ToggleFilterComponent
+				component: SmartToggleFilterComponent,
+				config: {
+					initialChoice:
+						this.filters?.where?.allowScreenshotCapture === true
+							? 'accept'
+							: this.filters?.where?.allowScreenshotCapture === false
+							? 'deny'
+							: null,
+					acceptValue: { field: 'allowScreenshotCapture', value: true },
+					denyValue: { field: 'allowScreenshotCapture', value: false }
+				}
 			},
-			filterFunction: (isEnable: boolean) => {
-				this.setFilter({ field: 'allowScreenshotCapture', search: isEnable });
-				return isEnable;
+			filterFunction: (data: { field: string; value: boolean } | null) => {
+				if (!data) {
+					// Reset filter
+					this.setFilterWithServiceFalse({ field: 'allowScreenshotCapture', search: null });
+					return false;
+				}
+
+				this.setFilterWithServiceFalse({ field: data.field, search: data.value });
+				return false;
 			},
 			renderComponent: AllowScreenshotCaptureComponent, // The component to render the column
 			componentInitFunction: (instance: AllowScreenshotCaptureComponent, cell: Cell) => {
diff --git a/apps/gauzy/src/app/pages/users/users.component.ts b/apps/gauzy/src/app/pages/users/users.component.ts
@@ -41,7 +41,7 @@ import {
 	TagsOnlyComponent,
 	UserMutationComponent,
 	UserRoleFilterComponent,
-	UserToggleFilterComponent
+	SmartToggleFilterComponent
 } from '@gauzy/ui-core/shared';
 import { EmployeeWorkStatusComponent } from '../employees/table-components';
 import { HttpClient } from '@angular/common/http';
@@ -613,30 +613,25 @@ export class UsersComponent extends PaginationFilterBaseComponent implements OnI
 					isSortable: false,
 					filter: {
 						type: 'custom',
-						component: UserToggleFilterComponent,
+						component: SmartToggleFilterComponent,
 						config: {
-							initialValueToggle: {
-								isActive: this.filters?.where?.isActive ?? null,
-								isArchived: this.filters?.where?.isArchived ?? null
-							}
+							initialChoice: this.filters?.where?.isActive
+								? 'accept'
+								: this.filters?.where?.isArchived
+								? 'deny'
+								: null,
+							acceptValue: { isActive: true, isArchived: false },
+							denyValue: { isActive: false, isArchived: true }
 						}
 					},
-					filterFunction: (value: { isActive?: boolean; isArchived?: boolean }) => {
+					filterFunction: (value: { isActive?: boolean; isArchived?: boolean } | null) => {
 						if (!value) {
-							// reset
 							this.setFilter({ field: 'isActive', search: null });
 							this.setFilter({ field: 'isArchived', search: null });
 							return false;
 						}
-
-						if ('isActive' in value) {
-							this.setFilter({ field: 'isActive', search: value.isActive });
-						}
-
-						if ('isArchived' in value) {
-							this.setFilter({ field: 'isArchived', search: value.isArchived });
-						}
-
+						if ('isActive' in value) this.setFilter({ field: 'isActive', search: value.isActive });
+						if ('isArchived' in value) this.setFilter({ field: 'isArchived', search: value.isArchived });
 						return false;
 					},
 					renderComponent: EmployeeWorkStatusComponent,
diff --git a/packages/contracts/src/lib/smart-table-filters.model.ts b/packages/contracts/src/lib/smart-table-filters.model.ts
@@ -4,10 +4,15 @@ export interface CustomFilterConfig {
 	initialValueInput?: string;
 	initialValueStatus?: ITaskStatus;
 	initialValueIds?: string[];
-	initialValueToggle?: StatusFilterValue;
 }
 
 export interface StatusFilterValue {
 	isActive?: boolean;
 	isArchived?: boolean;
 }
+
+export interface ToggleFilterConfig {
+	initialChoice?: 'accept' | 'deny' | null;
+	acceptValue?: boolean;
+	denyValue?: boolean;
+}
diff --git a/packages/core/src/lib/employee/employee.service.ts b/packages/core/src/lib/employee/employee.service.ts
@@ -566,7 +566,7 @@ export class EmployeeService extends TenantAwareCrudService<Employee> {
 								if (isNotEmpty(user.email)) {
 									const keywords: string[] = user.email.split(' ');
 									keywords.forEach((keyword: string, index: number) => {
-										web.orWhere(p(`LOWER("user"."email") like LOWER(:email_${index})`), {
+										web.andWhere(p(`LOWER("user"."email") LIKE LOWER(:email_${index})`), {
 											[`email_${index}`]: `%${keyword}%`
 										});
 									});
diff --git a/packages/ui-core/shared/src/lib/smart-data-layout/pagination/pagination-filter-base.component.ts b/packages/ui-core/shared/src/lib/smart-data-layout/pagination/pagination-filter-base.component.ts
@@ -117,6 +117,42 @@ export class PaginationFilterBaseComponent extends TranslationBaseComponent impl
 		}
 	}
 
+	/**
+	 * Set filter for data based on the provided filter object.
+	 * @param filter - The filter object containing information about the field and search criteria.
+	 * @param doEmit - A boolean flag indicating whether to emit a notification after setting the filter. Default is true.
+	 */
+	protected setFilterWithServiceFalse(filter: any, doEmit = true) {
+		// Split the field path into an array of field names
+		const fields = filter?.field?.split?.('.');
+		const search = filter?.search;
+
+		if (!fields || fields.length === 0) return;
+
+		if (search != null) {
+			// Create an object with nested keys representing the field path and set the search value
+			const keys = fields.reduceRight((value: string, key: string) => ({ [key]: value }), search);
+
+			// Update the 'where' property in the 'filters' object with the new keys
+			this.filters = {
+				where: {
+					...this.filters.where,
+					...keys,
+					...mergeDeep(this.filters.where, keys)
+				}
+			};
+		} else {
+			// If the search criteria is empty or not a boolean, remove the field from the 'where' property
+			const [field] = fields.reverse();
+			cleanKeys(this.filters.where, field);
+		}
+
+		// Emit a notification if doEmit is true
+		if (doEmit) {
+			this.subject$.next(true);
+		}
+	}
+
 	/**
 	 *
 	 * @param selectedPage
diff --git a/packages/ui-core/shared/src/lib/table-filters/employment-type-filter.component.ts b/packages/ui-core/shared/src/lib/table-filters/employment-type-filter.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DefaultFilter } from 'angular2-smart-table';
-import { IOrganizationEmploymentType } from '@gauzy/contracts';
+import { CustomFilterConfig, IOrganizationEmploymentType } from '@gauzy/contracts';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { OrganizationEmploymentTypesService, Store } from '@gauzy/ui-core/core';
 
@@ -10,6 +10,7 @@ import { OrganizationEmploymentTypesService, Store } from '@gauzy/ui-core/core';
 		<ng-select
 			id="employmentType"
 			[items]="employmentTypes"
+			[(ngModel)]="selectedEmploymentTypes"
 			bindLabel="name"
 			[searchable]="false"
 			placeholder="{{ 'EMPLOYEES_PAGE.EDIT_EMPLOYEE.EMPLOYMENT_TYPE' | translate }}"
@@ -35,6 +36,7 @@ import { OrganizationEmploymentTypesService, Store } from '@gauzy/ui-core/core';
 @UntilDestroy({ checkProperties: true })
 export class EmploymentTypeFilterComponent extends DefaultFilter implements OnInit, OnChanges {
 	employmentTypes: IOrganizationEmploymentType[] = [];
+	selectedEmploymentTypes: IOrganizationEmploymentType[] = [];
 
 	constructor(
 		private readonly organizationEmploymentTypesService: OrganizationEmploymentTypesService,
@@ -44,6 +46,7 @@ export class EmploymentTypeFilterComponent extends DefaultFilter implements OnIn
 	}
 
 	ngOnInit(): void {
+		const config = this.column?.filter?.config as CustomFilterConfig;
 		const { id: organizationId, tenantId } = this.store.selectedOrganization;
 
 		// Fetch employment types from the service and subscribe to the observable for asynchronous updates
@@ -56,6 +59,12 @@ export class EmploymentTypeFilterComponent extends DefaultFilter implements OnIn
 			.subscribe((types) => {
 				// Store the fetched employment types in a class-level property
 				this.employmentTypes = types.items;
+
+				if (config?.initialValueInput?.length) {
+					this.selectedEmploymentTypes = this.employmentTypes.filter((t) =>
+						config.initialValueInput.includes(t.id)
+					);
+				}
 			});
 	}
 
diff --git a/packages/ui-core/shared/src/lib/table-filters/index.ts b/packages/ui-core/shared/src/lib/table-filters/index.ts
@@ -14,4 +14,4 @@ export * from './product-category-filter.component';
 export * from './product-type-filter.component';
 export * from './employment-type-filter.component';
 export * from './user-role-filter.component';
-export * from './user-toggle-filter/user-toggle-filter.component';
+export * from './smart-toggle-filter/smart-toggle-filter.component';
diff --git a/packages/ui-core/shared/src/lib/table-filters/smart-toggle-filter/smart-toggle-filter.component.html b/packages/ui-core/shared/src/lib/table-filters/smart-toggle-filter/smart-toggle-filter.component.html
@@ -0,0 +1,24 @@
+<div class="container">
+	<div class="btn-grp">
+		<button
+			nbButton
+			class="check"
+			[ngClass]="choice === 'accept' ? 'on' : 'off'"
+			type="button"
+			(click)="choice = 'accept'; onChange()"
+		>
+			<fa-icon [icon]="faCheck"></fa-icon>
+		</button>
+		<button nbButton class="na" [ngClass]="!choice ? 'on' : 'off'" (click)="choice = null; onChange()">
+			<fa-icon [icon]="faBan"></fa-icon>
+		</button>
+		<button
+			nbButton
+			class="deny"
+			[ngClass]="choice === 'deny' ? 'on' : 'off'"
+			(click)="choice = 'deny'; onChange()"
+		>
+			<fa-icon [icon]="faTimes"></fa-icon>
+		</button>
+	</div>
+</div>
diff --git a/packages/ui-core/shared/src/lib/table-filters/smart-toggle-filter/smart-toggle-filter.component.scss b/packages/ui-core/shared/src/lib/table-filters/smart-toggle-filter/smart-toggle-filter.component.scss
diff --git a/packages/ui-core/shared/src/lib/table-filters/smart-toggle-filter/smart-toggle-filter.component.ts b/packages/ui-core/shared/src/lib/table-filters/smart-toggle-filter/smart-toggle-filter.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { DefaultFilter } from 'angular2-smart-table';
+import { faCheck, faBan, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { ToggleFilterConfig } from '@gauzy/contracts';
+
+@Component({
+	selector: 'ga-smart-toggle-filter',
+	templateUrl: './smart-toggle-filter.component.html',
+	styleUrls: ['./smart-toggle-filter.component.scss'],
+	standalone: false
+})
+export class SmartToggleFilterComponent extends DefaultFilter implements OnInit, OnChanges {
+	faCheck = faCheck;
+	faBan = faBan;
+	faTimes = faTimes;
+	choice: 'accept' | 'deny' | null = null;
+	private config: ToggleFilterConfig;
+
+	ngOnInit(): void {
+		this.config = this.column?.filter?.config as ToggleFilterConfig;
+
+		if (this.config?.initialChoice !== undefined) {
+			this.choice = this.config.initialChoice;
+		}
+	}
+
+	onChange(): void {
+		let value = null;
+
+		switch (this.choice) {
+			case 'accept':
+				value = this.config?.acceptValue ?? true;
+				break;
+			case 'deny':
+				value = this.config?.denyValue ?? false;
+				break;
+			default:
+				value = null;
+		}
+
+		this.column.filterFunction(value, this.column.id);
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		// Required for angular2-smart-table, even if unused
+	}
+}
diff --git a/packages/ui-core/shared/src/lib/table-filters/table-filters.module.ts b/packages/ui-core/shared/src/lib/table-filters/table-filters.module.ts
diff --git a/packages/ui-core/shared/src/lib/table-filters/user-toggle-filter/user-toggle-filter.component.html b/packages/ui-core/shared/src/lib/table-filters/user-toggle-filter/user-toggle-filter.component.html
diff --git a/packages/ui-core/shared/src/lib/table-filters/user-toggle-filter/user-toggle-filter.component.ts b/packages/ui-core/shared/src/lib/table-filters/user-toggle-filter/user-toggle-filter.component.ts
