(F) Add status to doctor

Clinics.Frontend/src/app/components/doctor/doctor-dashboard/doctor-status/doctor-status.component.html

 <div class="custom-child" dir="rtl">
     <div class="custom-bttuons-after-title custom-ok-button">
         <a appScrollToTop><button class="btn btn-lg btn-outline-success" style="width: 25%; cursor:auto">الحالة:
-                متاح</button></a>
+                {{doctorStatus}}</button></a>
     </div>
 
     <div class="custom-bttuons-after-title custom-create-button">
@@ -31,15 +31,18 @@
 
             <div class="container">
                 <div class="custom-select">
-                    <select class="text-center mb-3 form-control">
-                        <option value="-1" disabled>يرجى اختيار الحالة</option>
-                        <!-- <option *ngFor="let doctor of doctors" [ngValue]="doctor.id">د. {{doctor.name}}</option> -->
+                    <select class="text-center mb-3 form-control"
+                    [(ngModel)]="doctorStatus">
+                        <option value="''" disabled>يرجى اختيار الحالة</option>
+                        <option *ngFor="let status of statuses" [ngValue]="status">{{status}}</option>
                     </select>
                 </div>
 
                 <a>
                     <div class="custom-ok-button mb-3">
-                        <button class="btn btn-outline-secondary" style="width:100%;" (click)="modal.dismiss()">
+                        <button class="btn btn-outline-secondary" style="width:100%;" (click)="modal.dismiss()"
+                        [disabled]="doctorStatus === ''"
+                        (click)="onChangeStatus()">
                             تأكيد
                         </button>
                     </div>

Clinics.Frontend/src/app/components/doctor/doctor-dashboard/doctor-status/doctor-status.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { AuthenticationService } from '../../../../services/authentication/authentication.service';
 import { UserData } from '../../../../classes/authentication/user-data';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { DoctorsService } from '../../../../services/doctors/doctors.service';
 
 @Component({
   selector: 'app-doctor-status',
@@ -11,11 +13,14 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 export class DoctorStatusComponent implements OnInit {
 
   constructor(private authenticationService: AuthenticationService,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    private toastr: ToastrService,
+    private doctorsService: DoctorsService
   ) {}
 
-  ngOnInit(): void {
-      
+  ngOnInit(): void {  
+    this.setUserData();
+    this.setDoctorStatus();
   }
 
   userData: UserData;
@@ -29,4 +34,31 @@ export class DoctorStatusComponent implements OnInit {
       size: 'md'
     });
   }
+
+  doctorStatus: string;
+  setDoctorStatus(): void {
+    this.doctorsService.getStatusByUserId(this.userData.id)
+    .subscribe(result => {
+      if (result.status === false) {
+        this.toastr.error('حدثت مشكلة، يرجى إعادة المحاولة');
+      }
+      else {
+        this.doctorStatus = result.doctorStatus!;
+      }
+    })
+  }
+
+  statuses: string[] = ['مشغول', 'متاح', 'لديه مريض'];
+
+  onChangeStatus(): void {
+    this.doctorsService.changeStatusByUserId(this.userData.id, this.doctorStatus)
+    .subscribe(result => {
+      if (result.status === false) {
+        this.toastr.error('حدثت مشكلة، يرجى إعادة المحاولة');
+      }
+      else {
+        this.toastr.success('تم تغيير الحالة بنجاح ✔')
+      }
+    })
+  }
 }

Clinics.Frontend/src/app/services/doctors/doctors.service.ts

@@ -38,4 +38,30 @@ export class DoctorsService {
       })
     );
   }
+
+  getStatusByUserId(userId: number): Observable<{status: boolean, errorMessage: string | null, doctorStatus: string | null}> {
+    return this.http.get<{status: string}>(`${this.DOCTORS_ENDPOINT}/Status/${userId}`)
+    .pipe(
+      map((response: {status: string}) => {
+        return {status: true, errorMessage: null, doctorStatus: response.status};
+      }),
+      catchError((error: HttpErrorResponse) => {
+        console.error(error.error.detail);
+        return of ({status: false, errorMessage: error.error.detail, doctorStatus: null});
+      })
+    );
+  }
+
+  changeStatusByUserId(userId: number, doctorStatus: string): Observable<{status: boolean, errorMessage: string | null}> {
+    var body = {userId: userId, status: doctorStatus};
+    return this.http.post(`${this.DOCTORS_ENDPOINT}/Status`, body)
+    .pipe(
+      map(_ => {
+        return {status: true, errorMessage: null};
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return of ({status: false, errorMessage: error.error.detail});
+      })
+    );
+  }
 }

Clinics.Frontend/src/app/services/doctorsNotifications/doctor-notifications.service.ts

@@ -20,9 +20,11 @@ export class DoctorNotificationsService {
     this.hubConnection
       .start()
       .then(() => {
-        console.log('Connected to signalR!')
+        // console.log('Connected to signalR!')
       })
-      .catch(err => console.error('Error while starting connection: ' + err))
+      .catch(
+        // err => console.error('Error while starting connection: ' + err)
+    )
   }
 
 }