(F) Add create doctor

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

@@ -23,6 +23,7 @@ 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';
+import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component';
 
 
 @NgModule({
@@ -63,6 +64,7 @@ import { DoctorUsersService } from './usecases/admin/services/doctor-users.servi
     TestSignalRComponent,
     DoctorUserComponent,
     DoctorUsersComponent,
+    CreateDoctorUserFormComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/usecases/admin/create-doctor-user/classes/create-doctor-user-command.ts

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

Clinics.Frontend/src/app/usecases/admin/create-doctor-user/classes/create-doctor-user-result.ts

+export class CreateDoctorUserResult{
+
+    constructor(status: boolean, errorMessage?:string){
+        this.status = status;
+        this.errorMessage = errorMessage;
+    }
+
+    public status: boolean;
+    public errorMessage?: string;
+}
\ No newline at end of file

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

+.custom-input,
+.custom-input::placeholder {
+    color: var(--heading-color);   
+}
+
+.custom-input::placeholder {
+    opacity: 40%;
+}
+
+.custom-label {
+    color: var(--heading-color);   
+    font-weight: 700;
+}
+
+.custom-cancel-button {
+    color: var(--heading-color);   
+}
+.custom-cancel-button:hover {
+    color: white;   
+    background-color: var(--heading-color);
+}
\ No newline at end of file

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

+<div class="custom-child" dir="rtl">
+    <div>
+
+        <div class="text-center">
+            <h3 style="font-weight: 800;">إضافة طبيب</h3>
+        </div>
+
+        <hr>
+
+        <div *ngIf="isFailure" class="d-grid mb-2">
+            <button type="button" class="btn btn-danger" style="cursor: auto;">خطأ: {{errorMessage}}</button>
+        </div>
+
+        <form #createDoctorUserForm="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off">
+
+            <!-- To avoid first field auto focus -->
+            <div class="form-group">
+                <input type="text" autofocus="autofocus" style="display:none" />
+            </div>
+
+            <div class="form-group mb-2">
+                <label for="username" class="col-form-label custom-label mb-2">اسم المستخدم <span
+                        class="text-danger">*</span></label>
+                <input type="text" class="form-control text-center custom-input mb-2" placeholder="ادخل اسم المستخدم"
+                    dir="ltr" [(ngModel)]="formModel.userName" name="userName" #userName="ngModel" required
+                    maxlength="50">
+
+                <div *ngIf="(userName.touched || userName.dirty) && userName.errors" class="mb-2">
+                    <span class="text-danger">
+                        {{
+                        userName.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="form-group mb-2">
+                <label for="password" class="col-form-label custom-label mb-2">كلمة المرور <span
+                        class="text-danger">*</span></label>
+                <input type="password" class="form-control text-center custom-input mb-2" placeholder="ادخل كلمة المرور"
+                    dir="ltr" [(ngModel)]="formModel.password" name="password" #password="ngModel" required
+                    maxlength="50">
+
+                <div *ngIf="(password.touched || password.dirty) && password.errors" class="mb-2">
+                    <span class="text-danger">
+                        {{
+                        password.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </span>
+                </div>
+
+            </div>
+
+            <div class="form-group mb-2">
+                <label for="firstName" class="col-form-label custom-label mb-2">الاسم الأول <span
+                        class="text-danger">*</span></label>
+                <input type="text" class="form-control text-center custom-input mt-2" placeholder="ادخل الاسم الأول"
+                    [(ngModel)]="formModel.firstName" name="firstName" #firstName="ngModel" required maxlength="50">
+
+                <div *ngIf="(firstName.touched || firstName.dirty) && firstName.errors" class="mb-2">
+                    <span class="text-danger">
+                        {{
+                        firstName.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </span>
+                </div>
+
+            </div>
+
+            <div class="form-group mb-2">
+                <label for="middleName" class="col-form-label custom-label mb-2">اسم الأب<span
+                        class="text-danger">*</span></label>
+                <input type="text" class="form-control text-center custom-input mb-2" placeholder="ادخل اسم الأب"
+                    [(ngModel)]="formModel.middleName" name="middleName" #middleName="ngModel" required maxlength="50">
+
+                <div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors" class="mb-2">
+                    <span class="text-danger">
+                        {{
+                        middleName.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </span>
+                </div>
+
+            </div>
+
+            <div class="form-group mb-2">
+                <label for="lastName" class="col-form-label custom-label mb-2">الكنية<span
+                        class="text-danger">*</span></label>
+                <input type="text" class="form-control text-center custom-input mb-2" placeholder="ادخل الكنية"
+                    [(ngModel)]="formModel.lastName" name="lastName" #lastName="ngModel" required maxlength="50">
+
+                <div *ngIf="(lastName.touched || lastName.dirty) && lastName.errors" class="mb-2">
+                    <span class="text-danger">
+                        {{
+                        lastName.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </span>
+                </div>
+
+            </div>
+
+            <div class="d-grid gap-3">
+                <button type="submit" class="btn btn-outline-primary"
+                    [disabled]="!createDoctorUserForm.dirty || createDoctorUserForm.invalid">حفظ</button>
+
+                <button type="button" class="btn btn-outline-secondary custom-cancel-button"
+                    (click)="parentModal.dismiss()">الغاء</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file

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

+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { DoctorUsersService } from '../../../services/doctor-users.service';
+import { ToastrService } from 'ngx-toastr';
+import { CreateDoctorUserCommand } from '../../classes/create-doctor-user-command';
+import { NgForm } from '@angular/forms';
+import { DoctorUser } from '../../../list-doctor-users/classes/doctor-user';
+
+@Component({
+  selector: 'app-create-doctor-user-form',
+  templateUrl: './create-doctor-user-form.component.html',
+  styleUrl: './create-doctor-user-form.component.css'
+})
+export class CreateDoctorUserFormComponent {
+  //#region CTOR DI
+  constructor(private doctorUsersService: DoctorUsersService,
+    private toastrService: ToastrService
+  ) { }
+  //#endregion
+
+  //#region Inputs
+  @Input("parentModal") parentModal: any;
+  //#endregion
+
+  //#region Outputs
+  @Output("created") created: EventEmitter<DoctorUser> = new EventEmitter();
+  //#endregion
+
+  //#region Variables
+  @ViewChild("createDoctorUserForm") loginForm: NgForm;
+  formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand();
+
+  isFailure: boolean = false;
+  errorMessage: string = '';
+  //#endregion
+
+  // #region on submit
+  onSubmit(): void {
+    console.table(this.loginForm);
+    if (this.loginForm.valid) {
+      this.isFailure = false;
+      this.errorMessage = '';
+
+      this.doctorUsersService.createDoctorUser(this.formModel)
+        .subscribe(
+          result => {
+            if (result.status === false) {
+              this.isFailure = true;
+              this.errorMessage = result.errorMessage!;
+            }
+            else {
+              this.toastrService.success("تمت إضافة الطبيب بنجاح ✔");
+              this.created.emit(
+                new DoctorUser(
+                  this.formModel.userName, `${this.formModel.firstName} ${this.formModel.middleName} ${this.formModel.lastName}`
+                )
+              )
+
+            }
+          }
+        )
+      this.loginForm.form.markAsPristine();
+
+    }
+  }
+  // #endregion
+}

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

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

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

@@ -11,7 +11,8 @@
         <!-- #region buttons-->
 
         <div class="text-center custom-create-button">
-            <button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة طبيب +</button>
+            <button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;"
+                (click)="openCreateDoctorUserForm(createDoctorUserModal)">إضافة طبيب +</button>
         </div>
 
 
@@ -21,11 +22,22 @@
         <div class="container">
             <div class="row gy-5 ">
                 <div *ngFor="let doctorUser of doctorUsers" class="col-lg-4 col-md-6">
-                    <app-doctor-user [doctorUser]="doctorUser" ></app-doctor-user>
+                    <app-doctor-user [doctorUser]="doctorUser"></app-doctor-user>
                 </div>
+                <div id="bottom"></div>
             </div>
         </div>
+
         <!-- #endregion -->
 
     </section>
+
+    <!-- #region create doctor user pop-up -->
+    <ng-template #createDoctorUserModal let-modal>
+        <div *ngIf="creating" class="modal-body">
+            <app-create-doctor-user-form (created)="onCreate($event); modal.dismiss();"
+                [parentModal]="modal"></app-create-doctor-user-form>
+        </div>
+    </ng-template>
+    <!-- #endregion -->
 </div>
\ No newline at end of file

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

@@ -3,6 +3,8 @@ 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';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ViewportScroller } from '@angular/common';
 
 @Component({
   selector: 'app-doctor-users',
@@ -12,7 +14,10 @@ import { GetAllDoctorUsersResult } from '../../classes/get-all-doctor-users-resu
 export class DoctorUsersComponent implements OnInit {
 
   // #region CTOR DI
-  constructor(private doctorUsersService: DoctorUsersService, private toastrService:ToastrService) {}
+  constructor(private doctorUsersService: DoctorUsersService,
+    private toastrService:ToastrService,
+    private modalService: NgbModal,
+    private viewportScroller: ViewportScroller) {}
   // #endregion
 
   // #region On init
@@ -31,4 +36,17 @@ export class DoctorUsersComponent implements OnInit {
   doctorUsers: DoctorUser[];
   // #endregion
 
+  // #region Create doctor user
+  creating: boolean = false;
+  openCreateDoctorUserForm(modal: any){
+    this.creating = true;
+    this.modalService.open(modal);
+  }
+  onCreate(userData: DoctorUser): void {
+    this.doctorUsers.push(userData);
+    this.viewportScroller.scrollToAnchor('bottom');
+  }
+  // #endregion
+
+
 }

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

@@ -2,9 +2,10 @@ 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';
+import { CreateDoctorUserCommand } from '../create-doctor-user/classes/create-doctor-user-command';
+import { CreateDoctorUserResult } from '../create-doctor-user/classes/create-doctor-user-result';
 
 @Injectable({
   providedIn: 'root'
@@ -36,5 +37,19 @@ export class DoctorUsersService {
   }
   // #endregion
   
+  // #region Create doctor user
+  createDoctorUser(command: CreateDoctorUserCommand) : Observable<CreateDoctorUserResult> {
+    return this.http.post(this.DOCTORUSERS_ENDPOINT, command)
+    .pipe(
+      map (_ => {
+        return new CreateDoctorUserResult(true);
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return of(new CreateDoctorUserResult(false, error.error.detail))
+      })
+    );
+  }
+  // #endregion
+
   // #endregion
 }
\ No newline at end of file