(F) Add list receptionist users

Clinics.Backend/API/Program.cs

@@ -45,7 +45,7 @@ builder.Services.AddDbContext<ClinicsDbContext>(
 builder.Services.AddSignalR();
 
 // Background services:
-builder.Services.AddHostedService<ServerTimeNotifier>();
+//builder.Services.AddHostedService<ServerTimeNotifier>();
 #endregion
 
 #region Add CORS

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

@@ -10,6 +10,8 @@ import { DoctorUsersComponent } from './components/admin/doctor-users/doctor-use
 import { AdminDashboardComponent } from './components/admin/admin-dashboard/admin-dashboard.component';
 import { CreateDoctorUserFormComponent } from './components/admin/create-doctor-user-form/create-doctor-user-form.component';
 import { UpdateDoctorUserComponent } from './components/admin/update-doctor-user/update-doctor-user.component';
+import { ReceptionistUserComponent } from './components/admin/receptionist-user/receptionist-user.component';
+import { ReceptionistUsersComponent } from './components/admin/receptionist-users/receptionist-users.component';
 
 const routes: Routes = [
   {
@@ -51,6 +53,10 @@ const routes: Routes = [
       {
         path: 'doctors/update/:id',
         component: UpdateDoctorUserComponent
+      },
+      {
+        path: 'receptionists',
+        component: ReceptionistUsersComponent
       }
     ]
   },

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

@@ -27,6 +27,9 @@ import { AdminDashboardComponent } from './components/admin/admin-dashboard/admi
 import { UpdateDoctorUserComponent } from './components/admin/update-doctor-user/update-doctor-user.component';
 import { UpdateDoctorPersonalDataFormComponent } from './components/admin/update-doctor-personal-data-form/update-doctor-personal-data-form.component';
 import { UpdateDoctorUserDataFormComponent } from './components/admin/update-doctor-user-data-form/update-doctor-user-data-form.component';
+import { ReceptionistUserComponent } from './components/admin/receptionist-user/receptionist-user.component';
+import { ReceptionistUsersComponent } from './components/admin/receptionist-users/receptionist-users.component';
+import { ReceptionistUsersService } from './services/admin/receptionist-users.service';
 
 
 @NgModule({
@@ -50,6 +53,7 @@ import { UpdateDoctorUserDataFormComponent } from './components/admin/update-doc
     { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true},
     SignalRService,
     DoctorUsersService,
+    ReceptionistUsersService,
   ],
 
   // components and directives that belong to this module
@@ -72,6 +76,8 @@ import { UpdateDoctorUserDataFormComponent } from './components/admin/update-doc
     UpdateDoctorUserComponent,
     UpdateDoctorPersonalDataFormComponent,
     UpdateDoctorUserDataFormComponent,
+    ReceptionistUserComponent,
+    ReceptionistUsersComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/classes/admin/get-all-receptionist-users-result.ts

+import { ReceptionistUser } from "./receptionist-user";
+
+
+export class GetAllReceptionistUsersResult {
+    public status: boolean;
+    public errorMessage: string | null = null;
+    public receptionistUsers: ReceptionistUser[] | null = null;
+
+    constructor(status: boolean, errorMessage: string | null = null, receptionistUsers: ReceptionistUser[] | null = null)
+    {
+        this.status = status;
+        this.errorMessage = errorMessage;
+        this.receptionistUsers = receptionistUsers;
+    }
+}
\ No newline at end of file

Clinics.Frontend/src/app/classes/admin/receptionist-user.ts

+export class ReceptionistUser {
+    public id: number;
+    public userName: string;
+    public fullName: string;
+
+    constructor(id: number, userName: string, fullName: string) {
+        this.id = id;
+        this.userName = userName;
+        this.fullName = fullName;
+    }
+}
\ No newline at end of file

Clinics.Frontend/src/app/components/admin/receptionist-user/receptionist-user.component.css

+/* #region custom*/
+
+.custom-user-data {
+    color: var(--heading-color);
+    font-weight: 700;
+}
+
+.custom-user-full-name h3 {
+    font-weight: 700;
+    padding-bottom: 0.5em;
+
+    border-bottom: 1px solid var(--accent-color);
+}
+
+.custom-edit-button button:hover {
+    font-weight: 900;
+    background-color: inherit;
+    border-color: var(--heading-color);
+    color: var(--heading-color);
+}
+
+.custom-edit-button button {
+    font-weight: 900;
+
+    background-color: var(--heading-color);
+    color: white;
+}
+
+/* #endregion */
+
+/* #region collection item */
+.collection-item {
+    background-color: var(--background-color);
+    text-align: center;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+    padding: 80px 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 40px;
+    transition: all ease-in-out 0.3s;
+    height: 100%;
+}
+
+.collection-item .icon {
+    margin: 0 auto;
+    width: 64px;
+    height: 64px;
+    background: var(--heading-color);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transition: 0.3s;
+    transform-style: preserve-3d;
+}
+
+.collection-item .icon i {
+    color: var(--contrast-color);
+    font-size: 28px;
+    transition: ease-in-out 0.3s;
+}
+
+.collection-item .icon::before {
+    position: absolute;
+    content: "";
+    left: -8px;
+    top: -8px;
+    height: 100%;
+    width: 100%;
+    background: color-mix(in srgb, var(--accent-color), transparent 80%);
+    border-radius: 5px;
+    transition: all 0.3s ease-out 0s;
+    transform: translateZ(-1px);
+}
+
+.collection-item:hover {
+    box-shadow: 2px 2px 2px var(--accent-color)
+}
+
+/* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/components/admin/receptionist-user/receptionist-user.component.html

+<div class="collection-item">
+
+    <!-- #region icon -->
+    <div class="icon">
+        <i class="fas fa-user"></i>
+        <i class="bi bi-clock-history"></i>
+        
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region Name-->
+    <div class="mb-3" class="custom-user-full-name">
+        <h3>{{receptionistUser.fullName}}</h3>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region details-->
+
+    <div class="custom-user-data mb-4 mt-4">
+        <span>اسم المستخدم: </span>
+        <span>{{receptionistUser.userName}}</span>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region buttons-->
+
+
+    <a class="d-grid gap-3 custom-edit-button">
+        <button class="btn btn-outline-secondary">
+            تعديل <i class="bi bi-pencil-fill"></i>
+        </button>
+    </a>
+
+
+    <!-- #endregion -->
+
+
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/admin/receptionist-user/receptionist-user.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { ReceptionistUser } from '../../../classes/admin/receptionist-user';
+
+@Component({
+  selector: 'app-receptionist-user',
+  templateUrl: './receptionist-user.component.html',
+  styleUrl: './receptionist-user.component.css'
+})
+export class ReceptionistUserComponent{
+
+  @Input("receptionistUser") receptionistUser: ReceptionistUser = new ReceptionistUser(0,'','');
+}

Clinics.Frontend/src/app/components/admin/receptionist-users/receptionist-users.component.css

+/* #region custom*/
+.custom-create-button button:hover {
+    font-weight: 900;
+    background-color: inherit;
+    border-color: var(--heading-color);
+    color: var(--heading-color);
+}
+
+.custom-create-button button {
+    font-weight: 900;
+
+    background-color: var(--heading-color);
+    color: white;
+}
+/* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/components/admin/receptionist-users/receptionist-users.component.html

+<div class="custom-child" dir="rtl" style="cursor: auto;">
+    <section class="section">
+
+        <!-- #region Title -->
+        <div class="container text-center mb-3 custom-title">
+            <h2>موظفو الاستقبال المسجلون في النظام:</h2>
+        </div>
+
+        <!-- #endregion -->
+
+        <!-- #region buttons-->
+        <div class="text-center custom-create-button">
+            <a><button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة موظف استقبال +</button></a>
+        </div>
+        <!-- #endregion -->
+
+        <!-- #region container-->
+        <div class="container">
+            <div class="row gy-5 ">
+                <div *ngFor="let receptionistUser of receptionistUsers" class="col-lg-4 col-md-6">
+                    <app-receptionist-user [receptionistUser]="receptionistUser"></app-receptionist-user>
+                </div>
+            </div>
+        </div>
+
+        <!-- #endregion -->
+
+    </section>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/admin/receptionist-users/receptionist-users.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ReceptionistUser } from '../../../classes/admin/receptionist-user';
+import { ReceptionistUsersService } from '../../../services/admin/receptionist-users.service';
+
+@Component({
+  selector: 'app-receptionist-users',
+  templateUrl: './receptionist-users.component.html',
+  styleUrl: './receptionist-users.component.css'
+})
+export class ReceptionistUsersComponent implements OnInit {
+
+  constructor(private usersService: ReceptionistUsersService) {}
+
+  ngOnInit(): void {
+    this.usersService.getAllReceptionistUsers()
+    .subscribe(result => {
+      if (result.status === true) {
+        this.receptionistUsers = result.receptionistUsers!;
+      }
+      else {
+        console.error(result.errorMessage!);
+      }
+    })
+  }
+
+  receptionistUsers: ReceptionistUser[];
+}

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

@@ -50,7 +50,7 @@
                             </ul>
                         </li>
 
-                        <li><a><button class="btn"
+                        <li><a [routerLink]="['admin/receptionists']"><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Admin-Receptionists'), 'btn-outline-secondary': !isSelected('Admin-Receptionists')}"
                                     (click)="selectButton('Admin-Receptionists')">موظفو الاستقبال</button></a></li>
 

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

+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import * as config from '../../../../config';
+import { catchError, map, Observable, of } from 'rxjs';
+import { GetAllReceptionistUsersResult } from '../../classes/admin/get-all-receptionist-users-result';
+import { ReceptionistUser } from '../../classes/admin/receptionist-user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReceptionistUsersService {
+
+  constructor(private http: HttpClient) { }
+
+  private readonly RECEPTIONISTUSERS_ENDPOINT: string = `${config.apiUrl}/Users/Receptionists`;
+
+  public getAllReceptionistUsers(): Observable<GetAllReceptionistUsersResult> {
+    return this.http.get< {receptionistUsers: ReceptionistUser[]} >(this.RECEPTIONISTUSERS_ENDPOINT)
+    .pipe(
+      map((response: {receptionistUsers: ReceptionistUser[]}) => {
+        return new GetAllReceptionistUsersResult(true,'', response.receptionistUsers);
+      }),
+      catchError( (error: HttpErrorResponse) => {
+          return of(new GetAllReceptionistUsersResult(false, error.error.detail));
+      })
+    );
+  }
+}