(F) Add update doctor forms

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

@@ -9,6 +9,7 @@ import { TestSignalRComponent } from './notifications/components/test-signal-r/t
 import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
 import { AdminDashboardComponent } from './usecases/admin/shared/admin-dashboard/admin-dashboard.component';
 import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component';
+import { UpdateDoctorUserComponent } from './usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component';
 
 const routes: Routes = [
   {
@@ -46,9 +47,12 @@ const routes: Routes = [
       {
         path: 'doctors/create',
         component: CreateDoctorUserFormComponent
+      },
+      {
+        path: 'doctors/update/:id',
+        component: UpdateDoctorUserComponent
       }
     ]
-    
   },
   
   // #region Testing SignalR

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

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './usecases/shared/components/root/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -25,6 +23,9 @@ import { DoctorUserComponent } from './usecases/admin/list-doctor-users/componen
 import { DoctorUsersService } from './usecases/admin/services/doctor-users.service';
 import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component';
 import { AdminDashboardComponent } from './usecases/admin/shared/admin-dashboard/admin-dashboard.component';
+import { UpdateDoctorUserComponent } from './usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component';
+import { UpdateDoctorPersonalDataFormComponent } from './usecases/admin/update-doctor-user/update-doctor-personal-data/components/update-doctor-personal-data-form/update-doctor-personal-data-form.component';
+import { UpdateDoctorUserDataFormComponent } from './usecases/admin/update-doctor-user/update-doctor-user-data/components/update-doctor-user-data-form/update-doctor-user-data-form.component';
 
 
 @NgModule({
@@ -67,6 +68,9 @@ import { AdminDashboardComponent } from './usecases/admin/shared/admin-dashboard
     DoctorUsersComponent,
     CreateDoctorUserFormComponent,
     AdminDashboardComponent,
+    UpdateDoctorUserComponent,
+    UpdateDoctorPersonalDataFormComponent,
+    UpdateDoctorUserDataFormComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component.html

@@ -22,11 +22,13 @@
 
     <!-- #region buttons-->
 
-    <div class="d-grid gap-3 custom-edit-button">
+
+    <a [routerLink]="['update',doctorUser.id]" class="d-grid gap-3 custom-edit-button">
         <button class="btn btn-outline-secondary">
             تعديل <i class="bi bi-pencil-fill"></i>
         </button>
-    </div>
+    </a>
+
 
     <!-- #endregion -->
 

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component.css

+/* #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);
+    font-weight: 700;
+}
+
+/* #endregion */

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component.html

+<div class="custom-child" dir="rtl">
+  <section class="section">
+
+    <!-- #region Title -->
+    <div class="container text-center mb-3 custom-title">
+      <h2>تعديل بيانات الطبيب</h2>
+      <h2>اسم الطبيب الثلاثي</h2>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region Edit user data-->
+    <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"
+
+              data-bs-toggle="collapse" data-bs-target="#collapseOne"
+              aria-expanded="true" aria-controls="collapseOne"
+
+              (click)="isUserDataSelected = !isUserDataSelected">
+
+              تعديل معلومات الحساب
+              <i *ngIf="!isUserDataSelected" class="fas fa-chevron-down"></i>
+              <i *ngIf="isUserDataSelected" class="fas fa-chevron-up"></i>
+
+            </button>
+          </div>
+
+          <div id="collapseOne"
+            class="accordion-collapse collapse"
+            >
+
+            <div class="accordion-body">
+              <app-update-doctor-user-data-form>
+                
+              </app-update-doctor-user-data-form>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- #endregion -->
+
+    <!-- #region Edit personal data-->
+    <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"
+
+              data-bs-toggle="collapse" data-bs-target="#collapseTwo"
+              aria-expanded="true" aria-controls="collapseTwo"
+
+              (click)="isPersonalInfoSelected = !isPersonalInfoSelected">
+
+              تعديل المعلومات الشخصية
+              <i *ngIf="!isPersonalInfoSelected" class="fas fa-chevron-down"></i>
+              <i *ngIf="isPersonalInfoSelected" class="fas fa-chevron-up"></i>
+
+            </button>
+          </div>
+
+          <div id="collapseTwo"
+            class="accordion-collapse collapse"
+            >
+
+            <div class="accordion-body">
+              <app-update-doctor-personal-data-form>
+                
+              </app-update-doctor-personal-data-form>              
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- #endregion -->
+
+    
+  </section>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-doctor-user',
+  templateUrl: './update-doctor-user.component.html',
+  styleUrl: './update-doctor-user.component.css'
+})
+export class UpdateDoctorUserComponent {
+
+// #region Variables
+
+  isUserDataSelected: boolean = false;
+  isPersonalInfoSelected: boolean = false;
+
+// #endregion
+
+
+}

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-personal-data/components/update-doctor-personal-data-form/update-doctor-personal-data-form.component.html

+<p>update-doctor-personal-data-form works!</p>

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-personal-data/components/update-doctor-personal-data-form/update-doctor-personal-data-form.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-doctor-personal-data-form',
+  templateUrl: './update-doctor-personal-data-form.component.html',
+  styleUrl: './update-doctor-personal-data-form.component.css'
+})
+export class UpdateDoctorPersonalDataFormComponent {
+
+}

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-user-data/components/update-doctor-user-data-form/update-doctor-user-data-form.component.html

+<p>update-doctor-user-data-form works!</p>

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-user-data/components/update-doctor-user-data-form/update-doctor-user-data-form.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-doctor-user-data-form',
+  templateUrl: './update-doctor-user-data-form.component.html',
+  styleUrl: './update-doctor-user-data-form.component.css'
+})
+export class UpdateDoctorUserDataFormComponent {
+
+}