GZY-424: Add supporting employment type filters across main views of the system (#100)

* feat: add supporting employment type filters across main views of the system

* feat: add styles to filter employment type component

Author: YanaYestr

apps/gauzy/src/app/pages/employees/employees.component.ts

@@ -24,8 +24,8 @@ import {
 	EmployeeViewModel,
 	CrudActionEnum,
 	IEmployee,
-	ITag,
-	PermissionsEnum
+	PermissionsEnum,
+	IOrganizationEmploymentType
 } from '@gauzy/contracts';
 import { API_PREFIX, ComponentEnum, distinctUntilChange } from '@gauzy/ui-core/common';
 import {
@@ -36,12 +36,12 @@ import {
 	EmployeeEndWorkComponent,
 	EmployeeMutationComponent,
 	EmployeeStartWorkComponent,
+	EmploymentTypeComponent,
+	EmploymentTypeFilterComponent,
 	InputFilterComponent,
 	InviteMutationComponent,
 	PaginationFilterBaseComponent,
 	PictureNameTagsComponent,
-	TagsColorFilterComponent,
-	TagsOnlyComponent,
 	ToggleFilterComponent
 } from '@gauzy/ui-core/shared';
 import { EmployeeTimeTrackingStatusComponent, EmployeeWorkStatusComponent } from './table-components';
@@ -547,7 +547,7 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 
 			this.smartTableSource = new ServerDataSource(this._httpClient, {
 				endPoint: `${API_PREFIX}/employee/pagination`,
-				relations: ['user', 'tags'],
+				relations: ['user', 'tags', 'organizationEmploymentTypes'],
 				withDeleted: this.includeDeleted, // Include soft-deleted records if flag is true
 				where: {
 					organizationId,
@@ -621,7 +621,7 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 			user = {},
 			isActive,
 			endWork,
-			tags,
+			organizationEmploymentTypes,
 			// Hidden from the table according to the task https://trello.com/c/78ttN8d4/409-remove-average-income-expenses-and-bonus-columns-from-table
 			/*averageIncome = 0,
 			averageExpenses = 0,
@@ -647,7 +647,7 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 			endWork: endWork ? new Date(endWork) : '',
 			workStatus: endWork ? workStatus : '',
 			imageUrl: imageUrl || '',
-			tags: tags || [],
+			organizationEmploymentTypes: organizationEmploymentTypes || [],
 			bonus: this.bonusForSelectedMonth, // TODO: load real bonus and bonusDate
 			// Hidden from the table according to the task https://trello.com/c/78ttN8d4/409-remove-average-income-expenses-and-bonus-columns-from-table
 			//averageIncome: Math.floor(averageIncome),
@@ -772,24 +772,24 @@ export class EmployeesComponent extends PaginationFilterBaseComponent implements
 			},
 			{
 				dataTableId: this.dataTableId,
-				columnId: 'tags',
+				columnId: 'organizationEmploymentTypes',
 				order: 3,
-				title: () => this.getTranslation('SM_TABLE.TAGS'),
+				title: () => this.getTranslation('EMPLOYEES_PAGE.EDIT_EMPLOYEE.EMPLOYMENT_TYPE'),
 				type: 'custom',
-				width: '20%',
+				width: '15%',
 				isFilterable: true,
 				isSortable: false,
 				filter: {
 					type: 'custom',
-					component: TagsColorFilterComponent
+					component: EmploymentTypeFilterComponent
 				},
-				filterFunction: (tags: ITag[]) => {
-					const tagIds = tags.map((tag) => tag.id);
-					this.setFilter({ field: 'tags', search: tagIds });
-					return tags.length > 0;
+				filterFunction: (employmentTypes: IOrganizationEmploymentType[]) => {
+					const typeIds = employmentTypes.map((t) => t.id);
+					this.setFilter({ field: 'organizationEmploymentTypes', search: typeIds });
+					return true;
 				},
-				renderComponent: TagsOnlyComponent,
-				componentInitFunction: (instance: TagsOnlyComponent, cell: Cell) => {
+				renderComponent: EmploymentTypeComponent,
+				componentInitFunction: (instance: EmploymentTypeComponent, cell: Cell) => {
 					instance.rowData = cell.getRow().getData();
 					instance.value = cell.getValue();
 				}

apps/gauzy/src/app/pages/employees/timesheet/calendar/calendar/calendar.component.html

@@ -19,6 +19,7 @@
 			</div>
 			<ngx-gauzy-filters
 				[isTimeFormat]="true"
+				[hasEmploymentTypes]="true"
 				[filters]="filters"
 				[saveFilters]="(datePickerConfig$ | async).isSaveDatePicker"
 				(filtersChange)="filtersChange($event)"

apps/gauzy/src/app/pages/employees/timesheet/calendar/calendar/calendar.component.ts

@@ -255,7 +255,7 @@ export class CalendarComponent extends BaseSelectorFilterComponent implements On
 		const timeZone = this.timeZoneService.currentTimeZone;
 		const startDate = moment(arg.start).startOf('day').format('YYYY-MM-DD HH:mm:ss');
 		const endDate = moment(arg.end).subtract(1, 'days').endOf('day').format('YYYY-MM-DD HH:mm:ss');
-		const appliedFilter = pick(this.filters, 'source', 'activityLevel', 'logType');
+		const appliedFilter = pick(this.filters, 'source', 'employmentTypes', 'activityLevel', 'logType');
 		const request: IGetTimeLogInput = {
 			...appliedFilter,
 			...this.getFilterRequest({ startDate, endDate })
@@ -267,7 +267,8 @@ export class CalendarComponent extends BaseSelectorFilterComponent implements On
 				'project',
 				'task',
 				'organizationContact',
-				'employee.user'
+				'employee.user',
+				'employee.organizationEmploymentTypes'
 			]);
 			timeLogs$.then((logs: ITimeLog[]) => {
 				const events = logs.map((log: ITimeLog): EventInput => {

apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.html

@@ -17,6 +17,7 @@
 			<ngx-gauzy-filters
 				[isTimeFormat]="true"
 				[hasWorkedPerDay]="true"
+				[hasEmploymentTypes]="true"
 				[saveFilters]="(datePickerConfig$ | async).isSaveDatePicker"
 				(filtersChange)="filtersChange($event)"
 			></ngx-gauzy-filters>

apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.ts

@@ -26,7 +26,6 @@ import {
 	ITimeLog,
 	PermissionsEnum,
 	ITimeLogFilters,
-	TimeLogSourceEnum,
 	TimeLogPartialStatus,
 	IDeleteTimeLogData,
 	IDateRangePicker,
@@ -293,7 +292,8 @@ export class DailyComponent extends BaseSelectorFilterComponent implements After
 				'project',
 				'task',
 				'organizationContact',
-				'employee.user'
+				'employee.user',
+				'employee.organizationEmploymentTypes'
 			])
 		).pipe(
 			// Handle errors gracefully and return empty result
@@ -381,7 +381,7 @@ export class DailyComponent extends BaseSelectorFilterComponent implements After
 		}
 
 		// Pick specific properties from filters
-		const appliedFilter = pick(this.filters, 'source', 'activityLevel', 'logType');
+		const appliedFilter = pick(this.filters, 'source', 'employmentTypes', 'activityLevel', 'logType');
 
 		// Create a request object by combining appliedFilter and processed request
 		const request: IGetTimeLogInput = {

apps/gauzy/src/app/pages/employees/timesheet/weekly/weekly/weekly.component.html

@@ -20,6 +20,7 @@
 			<ngx-gauzy-filters
 				[saveFilters]="(datePickerConfig$ | async).isSaveDatePicker"
 				[hasWorkedPerWeek]="true"
+				[hasEmploymentTypes]="true"
 				(filtersChange)="filtersChange($event)"
 			></ngx-gauzy-filters>
 		</div>

apps/gauzy/src/app/pages/employees/timesheet/weekly/weekly/weekly.component.ts

@@ -206,7 +206,7 @@ export class WeeklyComponent extends BaseSelectorFilterComponent implements OnIn
 		if (isEmpty(this.request) || isEmpty(this.filters)) {
 			return; // Early return to avoid further processing
 		}
-		const appliedFilter = pick(this.filters, 'source', 'activityLevel', 'logType');
+		const appliedFilter = pick(this.filters, 'source', 'employmentTypes', 'activityLevel', 'logType');
 		const request: IGetTimeLogInput = {
 			...appliedFilter,
 			...this.getFilterRequest(this.request)
@@ -229,7 +229,12 @@ export class WeeklyComponent extends BaseSelectorFilterComponent implements OnIn
 
 		this.loading = true;
 		try {
-			const logs = await this.timesheetService.getTimeLogsChunk(payloads, ['project', 'employee.user', 'task']);
+			const logs = await this.timesheetService.getTimeLogsChunk(payloads, [
+				'project',
+				'employee.user',
+				'task',
+				'employee.organizationEmploymentTypes'
+			]);
 
 			this.weekData = chain(logs)
 				.groupBy('projectId')

apps/gauzy/src/app/pages/reports/time-reports/time-reports/time-reports.component.html

@@ -20,6 +20,7 @@ <h4>
 			<div class="col-auto ml-auto">
 				<ngx-gauzy-filters
 					[filters]="filters"
+					[hasEmploymentTypes]="true"
 					[saveFilters]="(datePickerConfig$ | async).isSaveDatePicker"
 					(filtersChange)="filtersChange($event)"
 				></ngx-gauzy-filters>

apps/gauzy/src/app/pages/reports/time-reports/time-reports/time-reports.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -23,14 +23,14 @@ import {
 
 @UntilDestroy({ checkProperties: true })
 @Component({
-    selector: 'ga-time-reports',
-    templateUrl: './time-reports.component.html',
-    styleUrls: ['./time-reports.component.scss'],
-    standalone: false
+	selector: 'ga-time-reports',
+	templateUrl: './time-reports.component.html',
+	styleUrls: ['./time-reports.component.scss'],
+	standalone: false
 })
-export class TimeReportsComponent extends BaseSelectorFilterComponent implements OnInit, AfterViewInit, OnDestroy {
+export class TimeReportsComponent extends BaseSelectorFilterComponent implements OnInit, AfterViewInit {
 	public filters: ITimeLogFilters;
-	public loading: boolean = false;
+	public loading = false;
 	public charts: IChartData;
 	public groupBy: ReportGroupByFilter = ReportGroupFilterEnum.date;
 	public datePickerConfig$: Observable<any> = this.dateRangePickerBuilderService.datePickerConfig$;
@@ -103,8 +103,8 @@ export class TimeReportsComponent extends BaseSelectorFilterComponent implements
 		if (isEmpty(this.request) || isEmpty(this.filters)) {
 			return;
 		}
-		// Pick specific properties ('source', 'activityLevel', 'logType') from this.filters
-		const appliedFilter = pick(this.filters, 'source', 'activityLevel', 'logType');
+		// Pick specific properties ('source', 'employmentTypes', 'activityLevel', 'logType') from this.filters
+		const appliedFilter = pick(this.filters, 'source', 'employmentTypes', 'activityLevel', 'logType');
 
 		// Create a request object of type IGetTimeLogReportInput
 		const request: IGetTimeLogReportInput = {
@@ -187,6 +187,4 @@ export class TimeReportsComponent extends BaseSelectorFilterComponent implements
 			this.loading = false;
 		}
 	}
-
-	ngOnDestroy(): void {}
 }

apps/gauzy/src/app/pages/reports/weekly-time-reports/weekly-time-reports/weekly-time-reports.component.html

@@ -20,6 +20,7 @@ <h4>
 			<div class="col-auto ml-auto">
 				<ngx-gauzy-filters
 					[filters]="filters"
+					[hasEmploymentTypes]="true"
 					[saveFilters]="(datePickerConfig$ | async).isSaveDatePicker"
 					(filtersChange)="filtersChange($event)"
 				></ngx-gauzy-filters>