(F) update pages

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

@@ -52,6 +52,8 @@ import { HistoryComponent } from './components/doctor/history/history.component'
 import { VisitComponent } from './components/doctor/visit/visit.component';
 import { CreateVisitComponent } from './components/doctor/create-visit/create-visit.component';
 import { MedicinesComponent } from './components/doctor/medicines/medicines.component';
+import { AccordionDirective } from './directives/accordion.directive';
+import { PatientIsComingNotificationComponent } from './components/doctor/patient-is-coming-notification/patient-is-coming-notification.component';
 
 
 @NgModule({
@@ -122,6 +124,8 @@ import { MedicinesComponent } from './components/doctor/medicines/medicines.comp
     VisitComponent,
     CreateVisitComponent,
     MedicinesComponent,
+    AccordionDirective,
+    PatientIsComingNotificationComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/doctor/ask-for-serial-number/ask-for-serial-number.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { EmployeesDataService } from '../../../services/employees/employees-data.service';
 import { Router } from '@angular/router';
 import { NgForm } from '@angular/forms';
+import { DoctorsService } from '../../../services/doctors/doctors.service';
 
 @Component({
   selector: 'app-ask-for-serial-number',
@@ -11,6 +12,7 @@ import { NgForm } from '@angular/forms';
 export class AskForSerialNumberComponent {
 
   constructor(private employeeDataService: EmployeesDataService,
+    private doctorsService: DoctorsService,
     private router: Router
   ){}
 

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

@@ -14,7 +14,7 @@
 
 
 <ng-template #changeStatusModal let-modal>
-
+    <div class="modal-body">
         <!-- To avoid first field auto focus -->
         <div class="form-group">
             <input type="text" autofocus="autofocus" style="display:none" />
@@ -31,8 +31,7 @@
 
                 <div class="container">
                     <div class="custom-select">
-                    <select class="text-center mb-3 form-control"
-                    [(ngModel)]="doctorStatus">
+                        <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>
@@ -41,8 +40,7 @@
                     <a>
                         <div class="custom-ok-button mb-3">
                             <button class="btn btn-outline-secondary" style="width:100%;" (click)="modal.dismiss()"
-                        [disabled]="doctorStatus === ''"
-                        (click)="onChangeStatus()">
+                                [disabled]="doctorStatus === ''" (click)="onChangeStatus()">
                                 تأكيد
                             </button>
                         </div>
@@ -59,4 +57,6 @@
 
             </section>
         </div>
+    </div>
+
 </ng-template>
\ No newline at end of file

Clinics.Frontend/src/app/components/doctor/history/history.component.html

-<p>history works!</p>
+<div class="custom-child">
+    <section class="section">
+        <div class="custom-title">
+            <h2 >زيارات المريض محمد رضا وائل تقلا</h2>
+        </div>
+
+
+        <div>
+            <app-visit [index]="'1'"></app-visit>
+            <!-- <hr style="border:2px solid var(--heading-color);">             -->
+        </div>
+        
+        <div>
+            <app-visit [index]="'2'"></app-visit>
+            <!-- <hr style="border:2px solid var(--heading-color);">             -->
+        </div>
+
+        <div>
+            <app-visit [index]="'3'"></app-visit>
+            <!-- <hr style="border:2px solid var(--heading-color);">             -->
+        </div>
+
+        <div>
+            <app-visit [index]="'4'"></app-visit>
+            <!-- <hr style="border:2px solid var(--heading-color);">             -->
+        </div>
+
+        <div>
+            <app-visit [index]="'5'"></app-visit>
+            <!-- <hr style="border:2px solid var(--heading-color);">             -->
+        </div>
+
+    
+    </section>
+
+
+
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/doctor/medicines/medicines.component.css

 .table {
+    width: 90%;
+    margin: auto;
     --mdb-table-bg: var(--heading-color);
     --mdb-table-accent-bg: var(--accent-color);
     font-weight: 800;

Clinics.Frontend/src/app/components/doctor/medicines/medicines.component.html

@@ -5,6 +5,7 @@
               <tr>
                 <th scope="col">#</th>
                 <th scope="col">اسم الدواء</th>
+                <th scope="col">الشكل الدوائي</th>
                 <th scope="col">سعة العلبة</th>
                 <th scope="col">العيار</th>
                 <th scope="col">الكمية</th>
@@ -15,23 +16,18 @@
               <tr>
                 <th scope="row">1</th>
                 <td>أسبيرين</td>
-                <td>100 ملج</td>
-                <td>مرتين في اليوم</td>
-                <td>30</td>
+                <td>حب</td>
+                <td>20 حبة</td>
+                <td>1000</td>
+                <td>3</td>
               </tr>
               <tr>
                 <th scope="row">2</th>
                 <td>باراسيتامول</td>
-                <td>500 ملج</td>
-                <td>مرة واحدة في اليوم</td>
-                <td>20</td>
-              </tr>
-              <tr>
-                <th scope="row">3</th>
-                <td>فيتامين سي</td>
-                <td>200 ملج</td>
-                <td>ثلاث مرات في اليوم</td>
-                <td>40</td>
+                <td>شراب</td>
+                <td>500 ملغ</td>
+                <td>500</td>
+                <td>2</td>
               </tr>
             </tbody>
           </table>

Clinics.Frontend/src/app/components/doctor/patient-is-coming-notification/patient-is-coming-notification.component.html

+<div class="custom-child" dir="rtl">
+    <!-- To avoid first field auto focus -->
+    <div class="form-group">
+        <input type="text" autofocus="autofocus" style="display:none" />
+    </div>
+
+    <section class="section">
+        <div class="custom-title mb-3">
+            <h2><i class="bi bi-exclamation-triangle-fill" style="color: var(--heading-color);"></i> إشعار هام
+            </h2>
+        </div>
+
+        <div class="custom-notification-message text-center mb-3">
+            <h2>المريض {{notification.patientFullName}}</h2>
+            <h3>في طريقه إليك</h3>
+        </div>
+
+        <div class="container">
+            <div class="custom-ok-button">
+                <button class="btn btn-outline-primary" (click)="onReceive()">استقبال</button>
+            </div>
+        </div>
+
+    </section>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/doctor/patient-is-coming-notification/patient-is-coming-notification.component.ts

+import { Component, Input, NgModuleFactory } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-patient-is-coming-notification',
+  templateUrl: './patient-is-coming-notification.component.html',
+  styleUrl: './patient-is-coming-notification.component.css'
+})
+export class PatientIsComingNotificationComponent {
+
+  constructor(private router: Router) {}
+
+  @Input("parentModal") parentModal: any;
+
+  @Input("notification") notification : {
+    patientId: Number,
+    patientFullName: string,
+    doctorId: Number,
+    doctorUserId: Number
+  };
+
+  onReceive(): void {
+    this.router.navigateByUrl(`doctor/visits/create/${this.notification.patientId}`);
+    this.parentModal.dismiss();
+  }
+
+
+}

Clinics.Frontend/src/app/components/doctor/visit/visit.component.css

+/* #region Custom*/
+.custom-back-button {
+    margin-bottom: 1em;
+}
+.custom-back-button a{
+    width: 100%;
+}
+
+.custom-back-button a .btn{
+    width: 100%;
+    background-color: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+    font-weight: 700;
+}
+
+.custom-back-button a button:hover{
+    background-color: white;
+    border-color: var(--accent-color);
+
+    color:var(--accent-color);
+}
+
+.custom-back-button a .btn i{
+    margin-right: 0.5em;
+}
+
+.custom-visit-details h2{
+    font-weight: 700;
+    font-size: 1.5em;
+}
+
+
+/* #endregion */
+
+/* #region Accordion*/
+.accordion {
+    margin-bottom: 1em;
+    width: 75%;
+    margin: auto;
+}
+.accordion-header{
+    border: none;
+    
+}
+.accordion-header .accordion-button{
+    border: none;
+    
+}
+
+.accordion-item {
+    border: none;
+}
+
+.custom-accordion-header .btn-primary{
+    width: 100%;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+    font-weight: 700;
+}
+
+/* #endregion */
+

Clinics.Frontend/src/app/components/doctor/visit/visit.component.html

-<p>visit works!</p>
+<div class="cutsom-child">
+        <!-- #region Employee-->
+        <div class="container text-center mt-4" dir="rtl">
+            <div class="accordion">
+              <div class="accordion-item">
+      
+                <div class="custom-accordion-header">
+                  <button class="btn btn-primary" type="button"
+      
+                    appAccordion [index]="index"
+                    (click)="isSelected = !isSelected"
+                    >
+                    زيارة بتاريخ 12/8/2024
+                    <i *ngIf="!isSelected" class="fas fa-chevron-down"></i>
+                    <i *ngIf="isSelected" class="fas fa-chevron-up"></i>
+      
+                  </button>
+                </div>
+      
+                <div [id]="'collapse'+index"
+                  class="accordion-collapse collapse"
+                  >
+      
+                  <div class="accordion-body custom-child">
+                    <div class="custom-visit-details mb-4">
+                        <h2>الطبيب: أحمد محمد فريد حافظ</h2>
+                    </div>
+                    <div class="custom-visit-details mb-4">
+                        <h2>التشخيص: التهاب أمعاء</h2>
+                    </div>
+                    <div class="custom-visit-details mb-4">
+                        <h2>الأدوية:</h2>
+                    </div>
+                    <app-medicines></app-medicines>
+                  </div>
+      
+                </div>
+              </div>
+            </div>
+          </div>
+      
+      
+          <!-- #endregion -->
+    
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/doctor/visit/visit.component.ts

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-visit',
@@ -7,4 +7,7 @@ import { Component } from '@angular/core';
 })
 export class VisitComponent {
 
+  @Input("index") index: string;
+
+  isSelected: boolean = false;
 }

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

@@ -76,14 +76,14 @@
                                 (click)="showDropdown = !showDropdown">خيارات <i
                                     class="bi bi-chevron-down toggle-dropdown"></i></button>
                             <ul [ngClass]="{'show': showDropdown}">
-                                <li (click)="showDropdown=false; openPopUp(doctorAskForSerialNumberQuery);"><a>الاستعلام عن موظف</a></li>
+                                <li (click)="showDropdown=false; openPopUp(doctorAskForSerialNumberCommand);"><a>تسجيل زيارة</a></li>
                                 <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
                             </ul>
                         </li>
 
                         <li><a><button class="btn"
                             [class]="{'btn-outline-primary': isSelected('AddVisit'), 'btn-outline-secondary': !isSelected('AddVisit')}"
-                            (click)="showDropdown=false; selectButton('AddVisit');openPopUp(doctorAskForSerialNumberCommand);">تسجيل زيارة</button></a></li>                        
+                            (click)="showDropdown=false; selectButton('AddVisit');openPopUp(doctorAskForSerialNumberQuery);">الاستعلام عن مريض</button></a></li>                        
 
                         <li><a [routerLink]="'doctor/waitinglist'" appScrollToTop><button class="btn"
                             [class]="{'btn-outline-primary': isSelected('WaitingList'), 'btn-outline-secondary': !isSelected('WaitingList')}"

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

@@ -7,30 +7,7 @@
 </div>
 
 <ng-template #doctorNotificationModal let-modal>
-    <div class="custom-child" dir="rtl">
-        <!-- To avoid first field auto focus -->
-        <div class="form-group">
-            <input type="text" autofocus="autofocus" style="display:none" />
+    <div class="modal-body" >
+        <app-patient-is-coming-notification [notification]="doctorNotification" [parentModal]="modal"></app-patient-is-coming-notification>
     </div>
-
-        <section class="section">
-            <div class="custom-title mb-3">
-                <h2><i class="bi bi-exclamation-triangle-fill" style="color: var(--heading-color);"></i> إشعار هام</h2>
-            </div>
-
-            <div class="custom-notification-message text-center mb-3">
-                <h2>المريض {{doctorNotification.patientFullName}}</h2>
-                <h3>في طريقه إليك</h3>
-            </div>
-
-            <div class="container">
-                <div class="custom-ok-button">
-                    <button class="btn btn-outline-primary" (click)="modal.dismiss()">استقبال</button>
-                </div>
-            </div>
-
-        </section>
-    </div>
-
-
 </ng-template>
\ No newline at end of file

Clinics.Frontend/src/app/directives/accordion.directive.ts

+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appAccordion]'
+})
+export class AccordionDirective {
+
+  @Input('index') index: string;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngAfterViewInit(): void {
+    this.elementRef.nativeElement.setAttribute('data-bs-toggle', 'collapse');
+    this.elementRef.nativeElement.setAttribute('data-bs-target', `#collapse${this.index}`);
+    this.elementRef.nativeElement.setAttribute('aria-expanded', 'true');
+    this.elementRef.nativeElement.setAttribute('aria-controls', `#collapse${this.index}`);
+  }
+
+}