ever-co · evereq · Jul 13, 2020 · Jul 13, 2020
diff --git a/...src/app/@shared/time-off/time-off-request-mutation/time-off-request-mutation.component.ts b/...src/app/@shared/time-off/time-off-request-mutation/time-off-request-mutation.component.ts
@@ -140,19 +140,17 @@ export class TimeOffRequestMutationComponent implements OnInit {
 		}
 	}
 
-	private async _getOrganizationEmployees() {
+	private _getOrganizationEmployees() {
 		if (!this.organizationId) {
 			return;
 		}
 
-		const { items } = await this.employeesService
+		this.employeesService
 			.getAll(['user', 'tags'], {
 				organization: { id: this.organizationId }
 			})
 			.pipe(first())
-			.toPromise();
-
-		this.orgEmployees = items;
+			.subscribe((res) => this.orgEmployees = res.items)
 	}
 
 	onPolicySelected(policy: TimeOffPolicy) {

diff --git a/apps/gauzy/src/app/pages/time-off/table-components/time-off-status.component.html b/apps/gauzy/src/app/pages/time-off/table-components/time-off-status.component.html
@@ -0,0 +1,11 @@
+<div class="text-center d-block" *ngIf="rowData.status">
+	<div class="badge-danger" *ngIf="rowData.status=='Denied'">
+		Denied
+	</div>
+	<div class="badge-success" *ngIf="rowData.status=='Approved'">
+		Approved
+    </div>
+    <div class="badge-warning" *ngIf="rowData.status=='Requested'">
+		Requested
+	</div>
+</div>
diff --git a/apps/gauzy/src/app/pages/time-off/table-components/time-off-status.component.ts b/apps/gauzy/src/app/pages/time-off/table-components/time-off-status.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { ViewCell } from 'ng2-smart-table';
+import { TimeOff } from '@gauzy/models';
+
+@Component({
+	templateUrl: './time-off-status.component.html'
+})
+export class TimeOffStatusComponent implements ViewCell {
+	@Input()
+    rowData: TimeOff;
+
+    value: string | number;
+}
diff --git a/apps/gauzy/src/app/pages/time-off/time-off.component.ts b/apps/gauzy/src/app/pages/time-off/time-off.component.ts
@@ -10,6 +10,8 @@ import { LocalDataSource } from 'ng2-smart-table';
 import { untilDestroyed } from 'ngx-take-until-destroy';
 import { PictureNameTagsComponent } from '../../@shared/table-components/picture-name-tags/picture-name-tags.component';
 import { DatePipe } from '@angular/common';
+import { DeleteConfirmationComponent } from '../../@shared/user/forms/delete-confirmation/delete-confirmation.component';
+import { TimeOffStatusComponent } from './table-components/time-off-status.component';
 
 @Component({
 	selector: 'ngx-time-off',
@@ -139,8 +141,11 @@ export class TimeOffComponent implements OnInit, OnDestroy {
 				},
 				status: {
 					title: 'Status',
-					type: 'string',
-					class: 'text-center'
+					type: 'custom',
+					class: 'text-center',
+					width: '200px',
+					renderComponent: TimeOffStatusComponent,
+					filter: false
 				}
 			},
 			pager: {
@@ -161,36 +166,31 @@ export class TimeOffComponent implements OnInit, OnDestroy {
 				this.selectedDate || null
 			)
 			.pipe(first())
-			.subscribe(
-				(res) => {
-					this.tableData = [];
-
-					res.items.forEach((result: TimeOff) => {
-						let employeeName: string;
-						let employeeImage: string;
+			.subscribe((res) => {
+				this.tableData = [];
+				res.items.forEach((result: TimeOff) => {
+					let employeeName: string;
+					let employeeImage: string;
 
-						if (result.employees.length !== 1) {
-							employeeName = 'Multiple employees';
-							employeeImage =
-								'assets/images/avatars/people-outline.svg';
-						} else {
-							employeeName = `${result.employees[0].user.firstName} ${result.employees[0].user.lastName}`;
-							employeeImage = result.employees[0]?.user?.imageUrl;
-						}
+					if (result.employees.length !== 1) {
+						employeeName = 'Multiple employees';
+						employeeImage =
+							'assets/images/avatars/people-outline.svg';
+					} else {
+						employeeName = `${result.employees[0].user.firstName} ${result.employees[0].user.lastName}`;
+						employeeImage = result.employees[0].user.imageUrl;
+					}
 
-						this.tableData.push({
-							...result,
-							fullName: employeeName,
-							imageUrl: employeeImage,
-							policy: result.policy.name
-						});
+					this.tableData.push({
+						...result,
+						fullName: employeeName,
+						imageUrl: employeeImage,
+						policy: result.policy.name
 					});
+				});
 
-					this.sourceSmartTable.load(this.tableData);
-				},
-				() =>
-					this.toastrService.danger('Unable to load time off records')
-			);
+				this.sourceSmartTable.load(this.tableData);
+			}, () => this.toastrService.danger('Unable to load time off records'));
 	}
 
 	detectStatusChange(status: string) {
@@ -244,24 +244,15 @@ export class TimeOffComponent implements OnInit, OnDestroy {
 					status: this.selectedTimeOffRecord.status
 				})
 				.pipe(first())
-				.subscribe(
-					() => {
-						this.toastrService.success(
-							'You successfully set the days off request status to approved',
-							'Days off request approved'
-						);
-						this._loadTableData();
-					},
-					() =>
-						this.toastrService.danger(
-							'Unable to set days off request status.'
-						)
-				);
+				.subscribe(() => {
+					this.toastrService.success(
+						'You successfully set the days off request status to approved',
+						'Days off request approved'
+					);
+					this._loadTableData();
+				}, () => this.toastrService.danger('Unable to set days off request status.'));
 		} else {
-			this.toastrService.info(
-				'The days off request status is already set to approved',
-				'No changes'
-			);
+			this.toastrService.info('The days off request status is already set to approved','No changes');
 		}
 	}
 
@@ -274,19 +265,13 @@ export class TimeOffComponent implements OnInit, OnDestroy {
 					status: this.selectedTimeOffRecord.status
 				})
 				.pipe(first())
-				.subscribe(
-					() => {
-						this.toastrService.success(
-							'You successfully set the days off request status to denied',
-							'Days off request denied'
-						);
-						this._loadTableData();
-					},
-					() =>
-						this.toastrService.danger(
-							'Unable to set days off request status.'
-						)
-				);
+				.subscribe(() => {
+					this.toastrService.success(
+						'You successfully set the days off request status to denied',
+						'Days off request denied'
+					);
+					this._loadTableData();
+				}, () => this.toastrService.danger('Unable to set days off request status.'));
 		} else {
 			this.toastrService.info(
 				'The days off request status is already set to denied',
@@ -296,22 +281,25 @@ export class TimeOffComponent implements OnInit, OnDestroy {
 	}
 
 	deleteRequest() {
-		this.timeOffService
-			.deleteDaysOffRequest(this.selectedTimeOffRecord.id)
-			.pipe(first())
-			.subscribe(
-				() => {
-					this.toastrService.success(
-						'Days off request successfully deleted',
-						'Days off record deleted'
-					);
-					this._loadTableData();
-				},
-				() =>
-					this.toastrService.warning(
-						'Unable to delete Days off request'
-					)
-			);
+		this.dialogService
+			.open(DeleteConfirmationComponent, {
+				context: { recordType: 'Time off request' }
+			})
+			.onClose.pipe(first())
+			.subscribe((result) => {
+				if (result) {
+					this.timeOffService
+						.deleteDaysOffRequest(this.selectedTimeOffRecord.id)
+						.pipe(first())
+						.subscribe(() => {
+							this.toastrService.success(
+								'Days off request successfully deleted',
+								'Days off record deleted'
+							);
+							this._loadTableData();
+						}, () => this.toastrService.warning('Unable to delete Days off request'));
+				}
+			});
 	}
 
 	requestDaysOff() {

diff --git a/apps/gauzy/src/app/pages/time-off/time-off.module.ts b/apps/gauzy/src/app/pages/time-off/time-off.module.ts
@@ -30,6 +30,7 @@ import { UserFormsModule } from '../../@shared/user/forms/user-forms.module';
 import { RequestApprovalIcon } from './table-components/request-approval-icon';
 import { PaidIcon } from './table-components/paid-icon';
 import { SharedModule } from '../../@shared/shared.module';
+import { TimeOffStatusComponent } from './table-components/time-off-status.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
 	return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -70,9 +71,10 @@ export function HttpLoaderFactory(http: HttpClient) {
 		TimeOffComponent,
 		TimeOffSettingsComponent,
 		RequestApprovalIcon,
+		TimeOffStatusComponent,
 		PaidIcon
 	],
-	entryComponents: [TimeOffSettingsComponent, RequestApprovalIcon, PaidIcon],
+	entryComponents: [TimeOffSettingsComponent, TimeOffStatusComponent, RequestApprovalIcon, PaidIcon],
 	providers: [OrganizationsService, TimeOffService]
 })
 export class TimeOffModule {}