(F) Edit update page

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

@@ -78,6 +78,34 @@
 }
 /* #endregion */
 
+/* #region Back-button*/
+.custom-back-button {
+    margin-bottom: 1em;
+}
+.custom-back-button a{
+    width: 50%;
+}
+
+.custom-back-button a .btn{
+    width: 50%;
+    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;
+}
+/* #endregion */
+
 /* #region Field*/
 
 .custom-field {

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

@@ -2,7 +2,19 @@
     <section class="section">
         <div dir="rtl" class="mb-5 custom-form">
     
+
+            <div class="container text-center mb-3">
+      
+                <div class="custom-back-button">
+                  <a [routerLink]="['..']">
+                    <button class="btn btn-outline-primary">
+                      عودة<i class="bi bi-arrow-left"></i>
+                    </button>
+                  </a>
+                </div>
+            </div>
             <!-- #region Title-->
+            
             <div class="text-center custom-form-title mb-4">
                 <h3 style="font-weight: 800;">إضافة طبيب</h3>
             </div>
@@ -251,13 +263,7 @@
                                             حفظ
                                             <i class="bi bi-save"></i>
                                         </button>
-                            
-                                        <a [routerLink]="['..']">
-                                            <button type="button" class="btn btn-outline-primary">
-                                                عودة
-                                                <i class="bi bi-arrow-left"></i>
-                                            </button>
-                                        </a>
+                        
                                     </div>
                                 </div>
                             </div>

Clinics.Frontend/src/app/usecases/admin/services/doctor-users.service.ts

@@ -6,6 +6,7 @@ import { GetAllDoctorUsersResult } from '../list-doctor-users/classes/get-all-do
 import { GetAllDoctorUsersResponse } from '../list-doctor-users/classes/get-all-doctor-users-response';
 import { CreateDoctorUserCommand } from '../create-doctor-user/classes/create-doctor-user-command';
 import { CreateDoctorUserResult } from '../create-doctor-user/classes/create-doctor-user-result';
+import { DoctorUserResponse } from '../update-doctor-user/classes/doctor-user-response';
 
 @Injectable({
   providedIn: 'root'
@@ -51,5 +52,20 @@ export class DoctorUsersService {
   }
   // #endregion
 
+  // #region Get doctor user by Id
+  getDoctorUserById(id: number): Observable<DoctorUserResponse | null>
+  {
+    return this.http.get<DoctorUserResponse>(`${this.DOCTORUSERS_ENDPOINT}/${id}`)
+    .pipe(
+      map((doctorUser: DoctorUserResponse) => {
+        return doctorUser;
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return of(null);
+      })
+    )
+  }
+  // #endregion
+  
   // #endregion
 }
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/classes/doctor-user-response.ts

+export class DoctorUserResponse {
+    public id!: number;
+    public userName!: string;
+    public firstName!: string;
+    public middleName!: string;
+    public lastName!: string;
+
+
+}
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.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;
+}
+/* #endregion */
+
 /* #region Accordion*/
 .accordion {
     margin-bottom: 1em;

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">
+      
+      <div class="custom-back-button">
+        <a [routerLink]="['../..']">
+          <button class="btn btn-outline-primary">
+            عودة<i class="bi bi-arrow-left"></i>
+          </button>
+        </a>
+      </div>
+
       <h2>تعديل بيانات الطبيب</h2>
-      <h2>اسم الطبيب الثلاثي</h2>
+      <h2>{{getUserFullName()}}</h2>
+
     </div>
     <!-- #endregion -->
 

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

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DoctorUsersService } from '../../../services/doctor-users.service';
+import { DoctorUserResponse } from '../../classes/doctor-user-response';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-update-doctor-user',
   templateUrl: './update-doctor-user.component.html',
   styleUrl: './update-doctor-user.component.css'
 })
-export class UpdateDoctorUserComponent {
+export class UpdateDoctorUserComponent implements OnInit{
 
-// #region Variables
+  // #region CTOR DI
+  constructor(private doctorUsersService: DoctorUsersService,
+    private route: ActivatedRoute
+  ){}
+  // #endregion
+
+  // #region On init
+  ngOnInit(): void {
+      this.doctorUserId = Number(this.route.snapshot.paramMap.get('id'));
+      this.doctorUsersService.getDoctorUserById(this.doctorUserId)
+      .subscribe( doctorUser => {
+        this.doctorUser = doctorUser!;
+          }
+      )
+  }
+  // #endregion
+
+  // #region Variables
+
+  doctorUserId: number;
+  doctorUser: DoctorUserResponse;
 
   isUserDataSelected: boolean = false;
   isPersonalInfoSelected: boolean = false;
 
-// #endregion
+  // #endregion
 
+  // #region Methods
+    public getUserFullName(): string {
+      return `${this.doctorUser.firstName} ${this.doctorUser.middleName} ${this.doctorUser.lastName}`
+    }
 
+  // #endregion
+  
 }