(F) Add list doctor users

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

@@ -22,6 +22,7 @@ import { TestSignalRComponent } from './notifications/components/test-signal-r/t
 import { SignalRService } from './notifications/services/signal-r.service';
 import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
 import { DoctorUserComponent } from './usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component';
+import { DoctorUsersService } from './usecases/admin/services/doctor-users.service';
 
 
 @NgModule({
@@ -43,7 +44,8 @@ import { DoctorUserComponent } from './usecases/admin/list-doctor-users/componen
   providers: [
     AuthenticationService,
     { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true},
-    SignalRService
+    SignalRService,
+    DoctorUsersService,
   ],
 
   // components and directives that belong to this module

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/classes/doctor-user.ts

+export class DoctorUser {
+    public userName!: string;
+    public fullName!: string;
+}
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/classes/get-all-doctor-users-response.ts

+import { DoctorUser } from "./doctor-user";
+
+export class GetAllDoctorUsersResponse {
+    public doctorUsers: DoctorUser[];
+}
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/classes/get-all-doctor-users-result.ts

+import { DoctorUser } from "./doctor-user";
+
+export class GetAllDoctorUsersResult {
+
+    constructor(status: boolean, errorMessage?: string, doctorUsers?: DoctorUser[])
+    {
+        this.status = status;
+        this.errorMessage = errorMessage;
+        this.doctorUsers = doctorUsers;
+    }
+    public status!: boolean;
+    public errorMessage?: string;
+    public doctorUsers?: DoctorUser[];
+    
+}
\ No newline at end of file

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

@@ -8,7 +8,7 @@
 
     <!-- #region Name-->
     <div class="mb-3" class="custom-user-full-name">
-        <h3>د. رغدان عدنان ربيع</h3>
+        <h3>د. {{doctorUser.fullName}}</h3>
     </div>
     <!-- #endregion -->
 
@@ -16,7 +16,7 @@
 
     <div class="custom-user-data mb-4 mt-4">
         <span>اسم المستخدم: </span>
-        <span>almouhannad.hafez</span>
+        <span>{{doctorUser.userName}}</span>
     </div>
     <!-- #endregion -->
 

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

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { DoctorUser } from '../../classes/doctor-user';
 
 @Component({
   selector: 'app-doctor-user',
@@ -7,4 +8,8 @@ import { Component } from '@angular/core';
 })
 export class DoctorUserComponent {
 
+  // #region Inputs
+  @Input("doctorUser") doctorUser: DoctorUser;
+  // #endregion
+
 }

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

@@ -20,20 +20,8 @@
         <!-- #region container-->
         <div class="container">
             <div class="row gy-5 ">
-                <div class="col-lg-4 col-md-6">
-                    <app-doctor-user></app-doctor-user>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <app-doctor-user></app-doctor-user>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <app-doctor-user></app-doctor-user>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <app-doctor-user></app-doctor-user>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <app-doctor-user></app-doctor-user>
+                <div *ngFor="let doctorUser of doctorUsers" class="col-lg-4 col-md-6">
+                    <app-doctor-user [doctorUser]="doctorUser" ></app-doctor-user>
                 </div>
             </div>
         </div>

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

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DoctorUsersService } from '../../../services/doctor-users.service';
+import { DoctorUser } from '../../classes/doctor-user';
+import { ToastrService } from 'ngx-toastr';
+import { GetAllDoctorUsersResult } from '../../classes/get-all-doctor-users-result';
 
 @Component({
   selector: 'app-doctor-users',
   templateUrl: './doctor-users.component.html',
   styleUrl: './doctor-users.component.css'
 })
-export class DoctorUsersComponent {
+export class DoctorUsersComponent implements OnInit {
+
+  // #region CTOR DI
+  constructor(private doctorUsersService: DoctorUsersService, private toastrService:ToastrService) {}
+  // #endregion
+
+  // #region On init
+  ngOnInit(): void {
+    this.doctorUsersService.getDoctorUsers()
+    .subscribe((getAllDoctorUsersResult: GetAllDoctorUsersResult) => {
+      if (getAllDoctorUsersResult.status)
+        this.doctorUsers = getAllDoctorUsersResult.doctorUsers!;
+      else
+        this.toastrService.error(getAllDoctorUsersResult.errorMessage!);
+    })
+  }
+  // #endregion
+
+  // #region Variables
+  doctorUsers: DoctorUser[];
+  // #endregion
 
 }

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

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { catchError, map, Observable, of } from 'rxjs';
+import * as config from '../../../../../config';
+import { DoctorUser } from '../list-doctor-users/classes/doctor-user';
+import { GetAllDoctorUsersResult } from '../list-doctor-users/classes/get-all-doctor-users-result';
+import { GetAllDoctorUsersResponse } from '../list-doctor-users/classes/get-all-doctor-users-response';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DoctorUsersService {
+
+  // #region DI CTOR
+  constructor(private http: HttpClient) { }
+  // #endregion
+
+  // #region Constants
+  private readonly DOCTORUSERS_ENDPOINT: string = `${config.apiUrl}/Users/Doctors`;
+  // #endregion
+
+  // #region Methods
+
+  // #region Get all doctor users
+  getDoctorUsers(): Observable<GetAllDoctorUsersResult> {
+    return this.http
+    .get<GetAllDoctorUsersResponse>(this.DOCTORUSERS_ENDPOINT)
+    .pipe(
+      map((getAllDoctorUsersResponse: GetAllDoctorUsersResponse) => {
+        return new GetAllDoctorUsersResult(true, '', getAllDoctorUsersResponse.doctorUsers);
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return of(new GetAllDoctorUsersResult(false, error.error.detail))
+      })
+    )
+  }
+  // #endregion
+  
+  // #endregion
+}
\ No newline at end of file