(F) Add waiting list for doctor

Clinics.Frontend/src/app/app-routing.module.ts

@@ -81,6 +81,15 @@ const routes: Routes = [
     
     data: { role: Roles.Doctor },
     children: [
+      {
+        path: '',
+        redirectTo: '/home',
+        pathMatch: 'full'
+      },
+      {
+        path: 'waitinglist',
+        component: WaitingListComponent
+      },      
     ]
   },  
 

Clinics.Frontend/src/app/app.module.ts

@@ -46,6 +46,7 @@ import { EmployeesDataService } from './services/employees/employees-data.servic
 import { ScrollToTopDirective } from './directives/scroll-to-top.directive';
 import { DoctorDashboardComponent } from './components/doctor/doctor-dashboard/doctor-dashboard.component';
 import { DoctorNotificationsService } from './services/doctorsNotifications/doctor-notifications.service';
+import { DoctorStatusComponent } from './components/doctor/doctor-dashboard/doctor-status/doctor-status.component';
 
 
 @NgModule({
@@ -110,6 +111,7 @@ import { DoctorNotificationsService } from './services/doctorsNotifications/doct
     EmployeeComponent,
     ScrollToTopDirective,
     DoctorDashboardComponent,
+    DoctorStatusComponent,
   ],
   
   // identifies the root component that Angular should

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

+.custom-select select {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+
+    /* For arrow */
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--heading-color) 50%), linear-gradient(135deg, var(--heading-color) 50%, transparent 50%);
+    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+    background-size: 5px 5px, 5px 5px, 1px 1.5em;
+    background-repeat: no-repeat;
+}
+.custom-select select:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+.custom-select option {
+    color: var(--heading-color);
+    background-color: white;
+}
\ No newline at end of file

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>
+    </div>
+
+    <div class="custom-bttuons-after-title custom-create-button">
+        <a appScrollToTop><button class="btn btn-lg btn-outline-success mb-5"
+                (click)="openModal(changeStatusModal)">تغيير الحالة</button></a>
+    </div>
+
+</div>
+
+
+
+<ng-template #changeStatusModal let-modal>
+
+    <!-- To avoid first field auto focus -->
+    <div class="form-group">
+        <input type="text" autofocus="autofocus" style="display:none" />
+    </div>
+
+
+    <div class="custom-child">
+        <section class="section">
+            <div class="custom-title mb-3">
+                <h2>تغيير الحالة</h2>
+            </div>
+
+
+
+            <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>
+                </div>
+
+                <a>
+                    <div class="custom-ok-button mb-3">
+                        <button class="btn btn-outline-secondary" style="width:100%;" (click)="modal.dismiss()">
+                            تأكيد
+                        </button>
+                    </div>
+                </a>
+
+                <div class="d-grid gap-3 custom-no-button">
+                    <a>
+                        <button class="btn btn-outline-secondary" style="width: 100%;" (click)="modal.dismiss()">
+                            إلغاء
+                        </button>
+                    </a>
+                </div>
+            </div>
+
+        </section>
+    </div>
+</ng-template>
\ No newline at end of file

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

+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';
+
+@Component({
+  selector: 'app-doctor-status',
+  templateUrl: './doctor-status.component.html',
+  styleUrl: './doctor-status.component.css'
+})
+export class DoctorStatusComponent implements OnInit {
+
+  constructor(private authenticationService: AuthenticationService,
+    private modalService: NgbModal
+  ) {}
+
+  ngOnInit(): void {
+      
+  }
+
+  userData: UserData;
+  setUserData(): void {
+    this.userData = this.authenticationService.getUserData()!;
+  }
+
+  openModal(modal: any) {
+    this.modalService.open(modal, {
+      centered: true,
+      size: 'md'
+    });
+  }
+}

Clinics.Frontend/src/app/components/receptionist/waiting-list-item/waiting-list-item.component.html

@@ -19,10 +19,16 @@
         <span style="margin-right: 0.5em;">{{getType()}}</span>
     </div>
 
-    <div class="custom-user-data mb-4 mt-4">
+    <div class="custom-user-data mb-4 mt-4" *ngIf="userData.role === RECEPTIONIST">
+        <span>ساعة الوصول:</span>
+        <span style="margin-right: 0.5em;" dir="ltr">{{ model.arrivalTime | date: 'hh:mm a' }}</span>
+    </div>
+
+    <div class="custom-user-data mt-4" *ngIf="userData.role === DOCTOR">
         <span>ساعة الوصول:</span>
         <span style="margin-right: 0.5em;" dir="ltr">{{ model.arrivalTime | date: 'hh:mm a' }}</span>
     </div>
+
     <!-- #endregion -->
 
     <!-- #region buttons-->
@@ -31,14 +37,14 @@
     <div class="d-grid gap-3 custom-edit-button">
         <a>
             <button class="btn btn-outline-secondary" style="width: 100%;"
-            (click)="onClickSend(); openModal(SendToDoctorModal)">
+                (click)="onClickSend(); openModal(SendToDoctorModal)" *ngIf="userData.role === RECEPTIONIST">
                 إرسال إلى طبيب<i class="fas fa-arrow-left"></i>
             </button>
         </a>
 
         <div class="custom-delete-button">
-            <button class="btn btn-outline-secondary"
-            (click)="openModal(confirmDeleteModal)">
+            <button class="btn btn-outline-secondary" (click)="openModal(confirmDeleteModal)"
+                *ngIf="userData.role === RECEPTIONIST">
                 <i class="fa fa-trash-alt"></i>
             </button>
         </div>
@@ -49,28 +55,26 @@
 
 
 <ng-template #confirmDeleteModal let-modal>
-    <div class="modal-body">
+    <div *ngIf="userData.role === RECEPTIONIST" class="modal-body">
         <div class="custom-child" dir="rtl">
             <p style="font-weight: 800;">هل أنت متأكد من رغبتك في حذف هذا المريض من قائمة الانتظار ؟</p>
 
             <div class="d-grid gap-3 custom-undo-button mb-3">
                 <a>
-                    <button class="btn btn-outline-secondary" style="width: 100%;"
-                    (click)="modal.dismiss()">
+                    <button class="btn btn-outline-secondary" style="width: 100%;" (click)="modal.dismiss()">
                         إلغاء
                     </button>
                 </a>
             </div>
 
-                <a>
-                    <div class="custom-edit-button">
-                        <button class="btn btn-outline-secondary" style="width:100%;"
-                        (click)="modal.dismiss(); onDelete()">
-                            تأكيد
-                        </button>
-                    </div>
-                </a>
-                
+            <a>
+                <div class="custom-edit-button">
+                    <button class="btn btn-outline-secondary" style="width:100%;" (click)="modal.dismiss(); onDelete()">
+                        تأكيد
+                    </button>
+                </div>
+            </a>
+
 
         </div>
     </div>
@@ -78,39 +82,37 @@
 
 
 <ng-template #SendToDoctorModal let-modal>
-    <div class="modal-body">
+    <div *ngIf="userData.role === RECEPTIONIST" class="modal-body">
         <div class="custom-child" dir="rtl">
             <div class="custom-title mb-3">
                 <h2>إرسال إلى طبيب</h2>
             </div>
 
             <div class="custom-select">
-                <select class="text-center mb-3 form-control"
-                [(ngModel)]="selectedDoctorId">
+                <select class="text-center mb-3 form-control" [(ngModel)]="selectedDoctorId">
                     <option value="-1" disabled>يرجى اختيار الطبيب</option>
                     <option *ngFor="let doctor of doctors" [ngValue]="doctor.id">د. {{doctor.name}}</option>
                 </select>
             </div>
 
-                <a>
-                    <div class="custom-edit-button mb-3">
-                        <button class="btn btn-outline-secondary" style="width:100%;"
-                        (click)="onSendToDoctor(); modal.dismiss();"
-                        [disabled]="selectedDoctorId===-1">
-                            تأكيد
-                        </button>
-                    </div>
-                </a>      
-
-                <div class="d-grid gap-3 custom-undo-button">
-                    <a>
-                        <button class="btn btn-outline-secondary" style="width: 100%;"
-                        (click)="modal.dismiss()">
-                            إلغاء
-                        </button>
-                    </a>
+            <a>
+                <div class="custom-edit-button mb-3">
+                    <button class="btn btn-outline-secondary" style="width:100%;"
+                        (click)="onSendToDoctor(); modal.dismiss();" [disabled]="selectedDoctorId===-1">
+                        تأكيد
+                    </button>
                 </div>
-        </div>
+            </a>
+
+            <div class="d-grid gap-3 custom-undo-button">
+                <a>
+                    <button class="btn btn-outline-secondary" style="width: 100%;" (click)="modal.dismiss()">
+                        إلغاء
+                    </button>
+                </a>
+            </div>
             
+        </div>
+
     </div>
 </ng-template>
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/waiting-list-item/waiting-list-item.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { WaitingListRecord } from '../../../classes/waitingList/waiting-list-record';
 import { WaitingListService } from '../../../services/waitingList/waiting-list.service';
 import { ToastrService } from 'ngx-toastr';
 import { DoctorsService } from '../../../services/doctors/doctors.service';
+import { AuthenticationService } from '../../../services/authentication/authentication.service';
+import { UserData } from '../../../classes/authentication/user-data';
+import { Roles } from '../../../classes/authentication/roles';
 
 @Component({
   selector: 'app-waiting-list-item',
   templateUrl: './waiting-list-item.component.html',
   styleUrl: './waiting-list-item.component.css'
 })
-export class WaitingListItemComponent {
+export class WaitingListItemComponent implements OnInit {
 
   constructor(private modalService: NgbModal,
     private waitingListService: WaitingListService,
     private toastrService: ToastrService,
-    private doctorsService: DoctorsService
+    private doctorsService: DoctorsService,
+    private authenticationService: AuthenticationService
   ) {}
 
+  ngOnInit(): void {
+      this.getUserData();
+  }
+
   @Input("model") model: WaitingListRecord = new WaitingListRecord(0,0,'',true, new Date(Date.now()));
   @Output("deleted") deleted: EventEmitter<any> = new EventEmitter();
 
@@ -78,4 +86,15 @@ export class WaitingListItemComponent {
       }
     })
   }
+
+  userData: UserData;
+  //#region Roles
+  readonly ADMIN: string = Roles.Admin;
+  readonly DOCTOR: string = Roles.Doctor;
+  readonly RECEPTIONIST: string = Roles.Receptionist;
+  //#endregion  
+  getUserData(): void {
+    this.userData = this.authenticationService.getUserData()!;
+  }
+
 }

Clinics.Frontend/src/app/components/receptionist/waiting-list/waiting-list.component.html

@@ -9,9 +9,13 @@
         <!-- #endregion -->
 
         <!-- #region buttons-->
-        <div class="custom-bttuons-after-title custom-create-button" >
+        <div *ngIf="userData.role === RECEPTIONIST" class="custom-bttuons-after-title custom-create-button" >
             <a [routerLink]="['create']" appScrollToTop><button class="btn btn-lg btn-outline-success mb-5">إضافة +</button></a>
         </div>
+
+        <div *ngIf="userData.role === DOCTOR">
+            <app-doctor-status></app-doctor-status>
+        </div>
         <!-- #endregion -->
 
         <!-- #region container-->

Clinics.Frontend/src/app/components/receptionist/waiting-list/waiting-list.component.ts

@@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { WaitingListRecord } from '../../../classes/waitingList/waiting-list-record';
 import { WaitingListService } from '../../../services/waitingList/waiting-list.service';
 import { ToastrService } from 'ngx-toastr';
+import { UserData } from '../../../classes/authentication/user-data';
+import { AuthenticationService } from '../../../services/authentication/authentication.service';
+import { Roles } from '../../../classes/authentication/roles';
 
 @Component({
   selector: 'app-waiting-list',
@@ -11,11 +14,13 @@ import { ToastrService } from 'ngx-toastr';
 export class WaitingListComponent implements OnInit {
 
   constructor(private waitingListService: WaitingListService,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private authenticationService: AuthenticationService
   ) {}
 
   ngOnInit(): void {
     this.updateList();
+    this.getUserData();
   }
 
   updateList(): void {
@@ -32,4 +37,14 @@ export class WaitingListComponent implements OnInit {
   onRecordDeleted(): void {
     this.updateList();
   }
+
+  userData: UserData;
+  //#region Roles
+  readonly ADMIN: string = Roles.Admin;
+  readonly DOCTOR: string = Roles.Doctor;
+  readonly RECEPTIONIST: string = Roles.Receptionist;
+  //#endregion    
+  getUserData(): void {
+    this.userData = this.authenticationService.getUserData()!;
+  }
 }

Clinics.Frontend/src/app/components/shared/template/header/header.component.html

@@ -80,6 +80,10 @@
                             </ul>
                         </li>
 
+                        <li><a [routerLink]="'doctor/waitinglist'" appScrollToTop><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('WaitingList'), 'btn-outline-secondary': !isSelected('WaitingList')}"
+                            (click)="showDropdown=false; selectButton('WaitingList')">قائمة الانتظار</button></a></li>                        
+
                         <li><a [routerLink]="'home'" appScrollToTop><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
                                     (click)="showDropdown=false; selectButton('Home')">الصفحة الرئيسية</button></a></li>