(F) Add send to doctor

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

@@ -62,6 +62,26 @@
     color: var(--accent-color);
 }
 
+.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;
+}
+
 /* #endregion */
 
 /* #region collection item */

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

@@ -30,24 +30,20 @@
 
     <div class="d-grid gap-3 custom-edit-button">
         <a>
-            <button class="btn btn-outline-secondary" style="width: 100%;">
+            <button class="btn btn-outline-secondary" style="width: 100%;"
+            (click)="openModal(SendToDoctorModal)">
                 إرسال إلى طبيب<i class="fas fa-arrow-left"></i>
             </button>
         </a>
 
         <div class="custom-delete-button">
             <button class="btn btn-outline-secondary"
-            (click)="onClickDelete(confirmDeleteModal)">
+            (click)="openModal(confirmDeleteModal)">
                 <i class="fa fa-trash-alt"></i>
             </button>
         </div>
 
     </div>
-
-
-
-
-
     <!-- #endregion -->
 </div>
 
@@ -79,3 +75,41 @@
         </div>
     </div>
 </ng-template>
+
+
+<ng-template #SendToDoctorModal let-modal>
+    <div 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">
+                    <option value="-1" disabled>يرجى اختيار الطبيب</option>
+                    <option *ngFor="let doctor of doctors" [ngValue]="doctor.id">{{doctor.name}}</option>
+                </select>
+            </div>
+
+            <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>
+                </a>
+            </div>
+
+                <a>
+                    <div class="custom-edit-button">
+                        <button class="btn btn-outline-secondary" style="width:100%;"
+                        (click)="onSendToDoctor(); modal.dismiss();">
+                            تأكيد
+                        </button>
+                    </div>
+                </a>                        
+        </div>
+            
+    </div>
+</ng-template>
\ No newline at end of file

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

@@ -29,7 +29,7 @@ export class WaitingListItemComponent {
     return this.types.FamilyMember;
   }
 
-  onClickDelete(modal: any): void {
+  openModal(modal: any): void {
     this.modalService.open(modal, {
       centered: true,
       size: 'md'
@@ -48,4 +48,16 @@ export class WaitingListItemComponent {
       }
     })
   }
+
+  selectedDoctorId: number = -1;
+  doctors: {id: number, name:string}[] = [
+    {id: 1, name: 'A'},
+    {id: 2, name: 'B'},
+    {id: 3, name: 'C'},
+    {id: 4, name: 'D'},
+    {id: 5, name: 'E'},
+  ]
+  onSendToDoctor(): void {
+    console.log(this.selectedDoctorId);
+  }
 }