refactor: use common toggle switcher

packages/plugins/integration-github-ui/src/lib/components/view/view.component.ts

@@ -412,7 +412,7 @@ export class GithubViewComponent extends PaginationFilterBaseComponent implement
 						instance.value = rowData?.customFields?.repository?.hasSyncEnabled || false;
 
 						// Subscribe to the 'switched' event of the ToggleSwitcherComponent
-						instance.onSwitched.pipe(untilDestroyed(this)).subscribe({
+						instance.onSwitched.subscribe({
 							// When the switch state changes, execute the following callback
 							next: (hasSyncEnabled: boolean) => {
 								// Call the 'updateGithubRepository' method with the row data and the new switch state

packages/plugins/job-employee-ui/src/lib/components/job-employee/job-employee.component.ts

@@ -20,7 +20,8 @@ import {
 	ToastrService,
 	PageTabsetRegistryId,
 	PageTabRegistryService,
-	PageDataTableRegistryId
+	PageDataTableRegistryId,
+	JobSearchStoreService
 } from '@gauzy/ui-core/core';
 import { I18nService } from '@gauzy/ui-core/i18n';
 import {
@@ -29,7 +30,7 @@ import {
 	NumberEditorComponent,
 	EmployeeLinkEditorComponent,
 	PaginationFilterBaseComponent,
-	SmartTableToggleComponent
+	ToggleSwitcherComponent
 } from '@gauzy/ui-core/shared';
 
 /**
@@ -75,6 +76,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 		private readonly _store: Store,
 		private readonly _employeesService: EmployeesService,
 		private readonly _jobService: JobService,
+		private readonly _jobSearchStoreService: JobSearchStoreService,
 		private readonly _toastrService: ToastrService,
 		private readonly _currencyPipe: CurrencyPipe,
 		private readonly _i18nService: I18nService,
@@ -206,7 +208,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 	registerDataTableColumns(_pageDataTableRegistryService: PageDataTableRegistryService): void {
 		// Register the data table column
 		_pageDataTableRegistryService.registerPageDataTableColumn({
-			dataTableId: 'job-employee', // The identifier for the data table location
+			dataTableId: this.dataTableId, // The identifier for the data table location
 			columnId: 'name', // The identifier for the column
 			order: 0, // The order of the column in the table
 			title: () => this.getTranslation('JOB_EMPLOYEE.EMPLOYEE'), // The title of the column
@@ -230,7 +232,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 
 		// Register the data table column
 		_pageDataTableRegistryService.registerPageDataTableColumn({
-			dataTableId: 'job-employee', // The identifier for the data table location
+			dataTableId: this.dataTableId, // The identifier for the data table location
 			columnId: 'availableJobs', // The identifier for the column
 			order: 1, // The order of the column in the table
 			title: () => this.getTranslation('JOB_EMPLOYEE.AVAILABLE_JOBS'), // The title of the column
@@ -243,7 +245,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 
 		// Register the data table column
 		_pageDataTableRegistryService.registerPageDataTableColumn({
-			dataTableId: 'job-employee', // The identifier for the data table location
+			dataTableId: this.dataTableId, // The identifier for the data table location
 			columnId: 'appliedJobs', // The identifier for the column
 			order: 2, // The order of the column in the table
 			title: () => this.getTranslation('JOB_EMPLOYEE.APPLIED_JOBS'), // The title of the column
@@ -256,7 +258,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 
 		// Register the data table column
 		_pageDataTableRegistryService.registerPageDataTableColumn({
-			dataTableId: 'job-employee', // The identifier for the data table location
+			dataTableId: this.dataTableId, // The identifier for the data table location
 			columnId: 'billRateValue', // The identifier for the column
 			order: 3, // The order of the column in the table
 			title: () => this.getTranslation('JOB_EMPLOYEE.BILLING_RATE'), // The title of the column
@@ -278,7 +280,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 
 		// Register the data table column
 		_pageDataTableRegistryService.registerPageDataTableColumn({
-			dataTableId: 'job-employee', // The identifier for the data table location
+			dataTableId: this.dataTableId, // The identifier for the data table location
 			columnId: 'minimumBillingRate', // The identifier for the column
 			order: 4, // The order of the column in the table
 			title: () => this.getTranslation('JOB_EMPLOYEE.MINIMUM_BILLING_RATE'), // The title of the column
@@ -298,25 +300,28 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 
 		// Register the data table column
 		_pageDataTableRegistryService.registerPageDataTableColumn({
-			dataTableId: 'job-employee', // The identifier for the data table location
+			dataTableId: this.dataTableId, // The identifier for the data table location
 			columnId: 'isJobSearchActive', // The identifier for the column
 			order: 5, // The order of the column in the table
 			title: () => this.getTranslation('JOB_EMPLOYEE.JOB_SEARCH_STATUS'), // The title of the column
 			type: 'custom', // The type of the column
 			width: '20%', // The width of the column
 			isSortable: false, // Indicates whether the column is sortable
 			isEditable: false, // Indicates whether the column is editable
-			renderComponent: SmartTableToggleComponent,
-			componentInitFunction: (instance: SmartTableToggleComponent, cell: Cell) => {
+			renderComponent: ToggleSwitcherComponent,
+			componentInitFunction: (instance: ToggleSwitcherComponent, cell: Cell) => {
 				// Get the employee data from the cell
 				const employee: IEmployee = cell.getRow().getData();
 
+				// Set the label property to false to hide the label
+				instance.label = false;
 				// Set the initial value of the toggle
 				instance.value = employee.isJobSearchActive;
 
 				// Subscribe to the toggleChange event
-				instance.toggleChange.pipe(untilDestroyed(this)).subscribe((toggle: boolean) => {
-					this.updateJobSearchAvailability(employee, toggle);
+				instance.onSwitched.subscribe((toggle: boolean) => {
+					// Call the JobSearchStoreService to update the job search availability
+					this._jobSearchStoreService.updateJobSearchAvailability(this.organization, employee, toggle);
 				});
 			}
 		});
@@ -525,42 +530,6 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 		}
 	}
 
-	/**
-	 * Updates the job search availability status of an employee within the organization.
-	 * @param employee - The employee object to update.
-	 * @param isJobSearchActive - A boolean flag indicating whether the job search is active.
-	 * @returns {Promise<void>} - A Promise resolving to void.
-	 */
-	async updateJobSearchAvailability(employee: IEmployee, isJobSearchActive: boolean): Promise<void> {
-		try {
-			// Ensure the organization context is available before proceeding.
-			if (!this.organization) {
-				return;
-			}
-
-			// Destructure organization properties for clarity.
-			const { id: organizationId, tenantId } = this.organization;
-
-			// Update the job search status using the employeesService.
-			await this._jobService.updateJobSearchStatus(employee.id, {
-				isJobSearchActive,
-				organizationId,
-				tenantId
-			});
-
-			// Display a success toastr notification based on the job search status.
-			const toastrMessageKey = isJobSearchActive
-				? 'TOASTR.MESSAGE.EMPLOYEE_JOB_STATUS_ACTIVE'
-				: 'TOASTR.MESSAGE.EMPLOYEE_JOB_STATUS_INACTIVE';
-
-			const fullName = employee.fullName.trim() || 'Unknown Employee';
-			this._toastrService.success(toastrMessageKey, { name: fullName });
-		} catch (error) {
-			// Display an error toastr notification in case of any exceptions.
-			this._toastrService.danger(error);
-		}
-	}
-
 	/**
 	 * Applies translations to the Smart Table settings when the language changes.
 	 * This method listens for the onLangChange event from the translateService.

packages/ui-core/core/src/lib/services/job/index.ts

@@ -1,4 +1,5 @@
 export * from './job-preset.service';
 export * from './job-search-category.service';
 export * from './job-search-occupation.service';
-export * from './job.service';
+export * from './job.service';
+export * from './job-search.store.service';

packages/ui-core/core/src/lib/services/job/job-preset.service.ts

@@ -2,8 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import { ID, IEmployeePresetInput, IGetJobPresetInput, IJobPreset, IMatchingCriterions } from '@gauzy/contracts';
-import { toParams } from '@gauzy/ui-core/common';
-import { API_PREFIX } from '@gauzy/ui-core/common';
+import { API_PREFIX, toParams } from '@gauzy/ui-core/common';
 
 @Injectable({
 	providedIn: 'root'

packages/ui-core/core/src/lib/services/job/job-search.store.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { IEmployee, IOrganization } from '@gauzy/contracts';
+import { JobService } from './job.service';
+import { ToastrService } from '../notification/toastr.service';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class JobSearchStoreService {
+	constructor(private readonly _jobService: JobService, private readonly _toastrService: ToastrService) {}
+
+	/**
+	 * Updates the job search availability status of an employee within the organization.
+	 *
+	 * @param organization - The current organization context.
+	 * @param employee - The employee object to update.
+	 * @param isJobSearchActive - A boolean flag indicating whether the job search is active.
+	 * @returns {Promise<void>} - A Promise resolving to void.
+	 */
+	async updateJobSearchAvailability(
+		organization: IOrganization | undefined,
+		employee: IEmployee,
+		isJobSearchActive: boolean
+	): Promise<void> {
+		try {
+			// Ensure the organization context is available before proceeding.
+			if (!organization) {
+				console.warn('No organization provided to update job search availability.');
+				return;
+			}
+
+			// Destructure organization properties for clarity.
+			const { id: organizationId, tenantId } = organization;
+
+			// Update the job search status using the employeesService.
+			await this._jobService.updateJobSearchStatus(employee.id, {
+				isJobSearchActive,
+				organizationId,
+				tenantId
+			});
+
+			// Display a success toastr notification based on the job search status.
+			const toastrMessageKey = isJobSearchActive
+				? 'TOASTR.MESSAGE.EMPLOYEE_JOB_STATUS_ACTIVE'
+				: 'TOASTR.MESSAGE.EMPLOYEE_JOB_STATUS_INACTIVE';
+
+			const fullName = employee.fullName.trim() || 'Unknown Employee';
+			this._toastrService.success(toastrMessageKey, { name: fullName });
+		} catch (error) {
+			// Display an error toastr notification in case of any exceptions.
+			const errorMessage = error?.message || 'An error occurred while updating the job search availability.';
+			console.error('Error while updating job search availability:', error?.message);
+			this._toastrService.danger(errorMessage);
+		}
+	}
+}

packages/ui-core/shared/src/lib/smart-data-layout/index.ts

@@ -4,7 +4,6 @@ export * from './no-data-message/no-data-message.module';
 
 // Components
 export * from './no-data-message/no-data-message.component';
-export * from './smart-table-toggle/smart-table-toggle.component';
 export * from './pagination/pagination.component';
 export * from './pagination/pagination-filter-base.component';
 export * from './pagination/pagination-v2/pagination-v2.component';

packages/ui-core/shared/src/lib/smart-data-layout/smart-data-view-layout.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { NbIconModule, NbSelectModule, NbToggleModule } from '@nebular/theme';
 import { TranslateModule } from '@ngx-translate/core';
 import { Angular2SmartTableModule } from 'angular2-smart-table';
@@ -9,19 +8,16 @@ import { GauzyButtonActionModule } from '../gauzy-button-action/gauzy-button-act
 import { NoDataMessageModule } from './no-data-message/no-data-message.module';
 import { PaginationComponent } from './pagination/pagination.component';
 import { PaginationV2Component } from './pagination/pagination-v2/pagination-v2.component';
-import { SmartTableToggleComponent } from './smart-table-toggle/smart-table-toggle.component';
-
-// Nebular Modules
-const NB_MODULES = [NbToggleModule, NbIconModule, NbSelectModule];
 
 // Components
-const COMPONENTS = [PaginationComponent, PaginationV2Component, SmartTableToggleComponent];
+const COMPONENTS = [PaginationComponent, PaginationV2Component];
 
 @NgModule({
 	declarations: [...COMPONENTS],
 	imports: [
-		CommonModule,
-		...NB_MODULES,
+		NbToggleModule,
+		NbIconModule,
+		NbSelectModule,
 		TranslateModule.forChild(),
 		NgxPermissionsModule.forChild(),
 		Angular2SmartTableModule,

packages/ui-core/shared/src/lib/table-components/toggle-switcher/toggle-switcher.component.html

@@ -1,5 +1,10 @@
 <div>
-	<nb-toggle status="primary" [checked]="switcher$ | async" (checkedChange)="onCheckedChange($event)">
+	<nb-toggle
+		status="primary"
+		[checked]="switcher$ | async"
+		(checkedChange)="onCheckedChange($event)"
+		triggerParentClick
+	>
 		<ng-template [ngIf]="label">
 			{{ ((switcher$ | async) ? 'BUTTONS.ENABLED' : 'BUTTONS.DISABLED') | translate }}
 		</ng-template>