feat(appointment_scheduling): pick employee on public appointment

apps/gauzy/src/app/pages/employees/appointment/appointment.component.html

@@ -2,6 +2,14 @@
 	<nb-card-header *ngIf="showHeader">
 		<div class="main-header">
 			<h4>{{ 'MENU.APPOINTMENTS' | translate }}</h4>
+			<button
+				style="float: right;"
+				status="success"
+				nbButton
+				(click)="bookPublicAppointment()"
+			>
+				{{ 'BUTTONS.PUBLIC_APPOINTMENT_BOOK' | translate }}
+			</button>
 		</div>
 	</nb-card-header>
 	<nb-card-body>

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

@@ -202,6 +202,11 @@ export class AppointmentComponent extends TranslationBaseComponent
 				if (employee && employee.id) {
 					this._selectedEmployeeId = employee.id;
 					this.renderAppointmentsAndSlots(this._selectedEmployeeId);
+				} else {
+					this._selectedEmployeeId = null;
+					this.calendarEvents = [];
+					this.calendarComponent.getApi() &&
+						this.calendarComponent.getApi().refetchEvents();
 				}
 			});
 
@@ -210,6 +215,14 @@ export class AppointmentComponent extends TranslationBaseComponent
 		}
 	}
 
+	bookPublicAppointment() {
+		this._selectedEmployeeId
+			? this.router.navigate([
+					`/share/employee/${this._selectedEmployeeId}`
+			  ])
+			: this.router.navigate(['/share/employee']);
+	}
+
 	renderAppointmentsAndSlots(employeeId: string) {
 		const findObj = {
 			status: null,

apps/gauzy/src/app/share/public-appointments/pick-employee/pick-employee.component.html

@@ -0,0 +1,35 @@
+<nb-card>
+	<nb-card-header>
+		<h4>
+			{{ 'APPOINTMENTS_PAGE.SELECT_EMPLOYEE' | translate }}
+		</h4>
+	</nb-card-header>
+	<nb-card-body>
+		<div class="col-9">
+			<div style="height: 300px;" class="form-group" *ngIf="!loading">
+				<label for="description" class="label"
+					>{{ 'APPOINTMENTS_PAGE.EMPLOYEE' | translate }}
+				</label>
+				<div class="center-div">
+					<ga-employee-selector
+						class="col-6"
+						style="width: 100%;"
+						#employeeSelector
+						[skipGlobalChange]="true"
+						class="employees"
+					>
+					</ga-employee-selector>
+					<span class="col-1"></span>
+					<button
+						class="col-3"
+						(click)="bookAppointment()"
+						status="success"
+						nbButton
+					>
+						{{ 'PUBLIC_APPOINTMENTS.BOOK_APPOINTMENT' | translate }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</nb-card-body>
+</nb-card>

apps/gauzy/src/app/share/public-appointments/pick-employee/pick-employee.component.scss

@@ -0,0 +1,5 @@
+.center-div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

apps/gauzy/src/app/share/public-appointments/pick-employee/pick-employee.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { TranslationBaseComponent } from '../../../@shared/language-base/translation-base.component';
+import { Subject } from 'rxjs';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { EmployeeSelectorComponent } from '../../../@theme/components/header/selectors/employee/employee.component';
+import { NbToastrService } from '@nebular/theme';
+
+@Component({
+	templateUrl: './pick-employee.component.html',
+	styleUrls: ['pick-employee.component.scss']
+})
+export class PickEmployeeComponent extends TranslationBaseComponent
+	implements OnInit, OnDestroy {
+	private _ngDestroy$ = new Subject<void>();
+
+	@ViewChild('employeeSelector')
+	employeeSelector: EmployeeSelectorComponent;
+	loading: boolean = true;
+
+	constructor(
+		private router: Router,
+		private toastrService: NbToastrService,
+		readonly translateService: TranslateService
+	) {
+		super(translateService);
+	}
+
+	ngOnInit(): void {
+		setTimeout(() => (this.loading = false), 250);
+	}
+
+	bookAppointment() {
+		const selectedEmployee = this.employeeSelector.selectedEmployee.id;
+		if (selectedEmployee) {
+			this.router.navigate([`/share/employee/${selectedEmployee}`]);
+		} else {
+			this.toastrService.danger(
+				this.getTranslation(
+					'PUBLIC_APPOINTMENTS.SELECT_EMPLOYEE_ERROR'
+				),
+				this.getTranslation('TOASTR.TITLE.ERROR')
+			);
+		}
+	}
+
+	ngOnDestroy() {
+		this._ngDestroy$.next();
+		this._ngDestroy$.complete();
+	}
+}

apps/gauzy/src/app/share/public-appointments/pick-employee/pick-employee.module.ts

@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { ThemeModule } from '../../../@theme/theme.module';
+import { PickEmployeeComponent } from './pick-employee.component';
+import { PickEmployeeRoutingModule } from './pick-employee.routing.module';
+import { NbCardModule, NbButtonModule, NbToastrModule } from '@nebular/theme';
+import { EmployeeSelectorsModule } from '../../../@theme/components/header/selectors/employee/employee.module';
+
+export function HttpLoaderFactory(http: HttpClient) {
+	return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+@NgModule({
+	imports: [
+		ThemeModule,
+		NbToastrModule,
+		NbButtonModule,
+		NbCardModule,
+		EmployeeSelectorsModule,
+		PickEmployeeRoutingModule,
+		TranslateModule.forChild({
+			loader: {
+				provide: TranslateLoader,
+				useFactory: HttpLoaderFactory,
+				deps: [HttpClient]
+			}
+		})
+	],
+	declarations: [PickEmployeeComponent],
+	entryComponents: [PickEmployeeComponent],
+	providers: []
+})
+export class PickEmployeeModule {}

apps/gauzy/src/app/share/public-appointments/pick-employee/pick-employee.routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PickEmployeeComponent } from './pick-employee.component';
+const routes: Routes = [
+	{
+		path: '',
+		component: PickEmployeeComponent
+	}
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule]
+})
+export class PickEmployeeRoutingModule {}

apps/gauzy/src/app/share/share-routing.module.ts

@@ -28,6 +28,13 @@ const routes: Routes = [
 						'./public-appointments/edit-appointment/edit-appointment.module'
 					).then((m) => m.EditAppointmentModule)
 			},
+			{
+				path: 'employee',
+				loadChildren: () =>
+					import(
+						'./public-appointments/pick-employee/pick-employee.module'
+					).then((m) => m.PickEmployeeModule)
+			},
 			{
 				path: 'employee/:id',
 				loadChildren: () =>

apps/gauzy/src/assets/i18n/en.json

@@ -50,6 +50,7 @@
 		"SELECT": "Select",
 		"EMAIL": "Email",
 		"CONVERT_TO_INVOICE": "Convert to invoice",
+		"PUBLIC_APPOINTMENT_BOOK": "Book Public Appointment",
 		"SPRINT": {
 			"CREATE": "Create Sprint",
 			"EDIT": "Edit",
@@ -1933,7 +1934,9 @@
 		"CANCEL_APPOINTMENT": "Cancel Appointment",
 		"CANCEL_FAIL": "Failed to cancel appointment",
 		"CANCEL_SUCCESS": "Appointment cancelled successfully",
-		"DURATION_ERROR": "Selected Duration is not valid"
+		"DURATION_ERROR": "Selected Duration is not valid",
+		"SELECT_EMPLOYEE": "Select Employee",
+		"EMPLOYEE": "Employee"
 	},
 	"EVENT_TYPE_PAGE": {
 		"EVENT_TYPE": "Event Types",
@@ -1948,6 +1951,7 @@
 		"RECURRING_AVAILABILITY": "Recurring Availability"
 	},
 	"PUBLIC_APPOINTMENTS": {
+		"BOOK_APPOINTMENT": "Book Appointment",
 		"BOOK_APPOINTMENTS": "Book an appointment",
 		"SELECT_EVENT_TYPES": "Please select an event type",
 		"PICK_DATETIME": "Pick a date and time",
@@ -1960,6 +1964,7 @@
 		"HOST": "Host",
 		"RESCHEDULE": "Reschedule Appointment",
 		"CANCEL": "Cancel Appointment",
+		"SELECT_EMPLOYEE_ERROR": "Please select an employee.",
 		"EXPIRED_OR_CANCELLED": "**This appointment has expired or has been cancelled.",
 		"EMAIL_SENT": "**An email has been sent to the host as well as to all the participants for this meeting."
 	},