(F) Add update forms

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

@@ -5,5 +5,12 @@ export class DoctorUserResponse {
     public middleName!: string;
     public lastName!: string;
 
+    constructor() {
+        this.userName='';
+        this.firstName='';
+        this.middleName='';
+        this.lastName='';
+    }
+
 
 }
\ No newline at end of file

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

@@ -43,8 +43,8 @@
             class="accordion-collapse collapse"
             >
 
-            <div class="accordion-body">
-              <app-update-doctor-user-data-form>
+            <div class="accordion-body custom-child">
+              <app-update-doctor-user-data-form [formModel]="editUserDataQuery">
                 
               </app-update-doctor-user-data-form>
             </div>
@@ -81,8 +81,8 @@
             class="accordion-collapse collapse"
             >
 
-            <div class="accordion-body">
-              <app-update-doctor-personal-data-form>
+            <div class="accordion-body custom-child">
+              <app-update-doctor-personal-data-form [formModel]="editPersonalDataQuery">
                 
               </app-update-doctor-personal-data-form>              
             </div>

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

@@ -2,6 +2,8 @@ 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';
+import { UpdateDoctorPersonalDataQuery } from '../../update-doctor-personal-data/classes/update-doctor-personal-data-query';
+import { updateDoctorUserQuery } from '../../update-doctor-user-data/classes/updateDoctorUserQuery';
 
 @Component({
   selector: 'app-update-doctor-user',
@@ -22,7 +24,12 @@ export class UpdateDoctorUserComponent implements OnInit{
       this.doctorUsersService.getDoctorUserById(this.doctorUserId)
       .subscribe( doctorUser => {
         this.doctorUser = doctorUser!;
-          }
+        this.editPersonalDataQuery = new UpdateDoctorPersonalDataQuery(
+          this.doctorUser.firstName, this.doctorUser.middleName,
+          this.doctorUser.lastName
+          );
+        this.editUserDataQuery = new updateDoctorUserQuery(doctorUser!.userName);
+        }
       )
   }
   // #endregion
@@ -30,7 +37,9 @@ export class UpdateDoctorUserComponent implements OnInit{
   // #region Variables
 
   doctorUserId: number;
-  doctorUser: DoctorUserResponse;
+  doctorUser: DoctorUserResponse = new DoctorUserResponse();
+  editPersonalDataQuery: UpdateDoctorPersonalDataQuery;
+  editUserDataQuery: updateDoctorUserQuery;
 
   isUserDataSelected: boolean = false;
   isPersonalInfoSelected: boolean = false;

Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-personal-data/classes/update-doctor-personal-data-query.ts

+export class UpdateDoctorPersonalDataQuery {
+    public firstName: string;
+    public middleName: string;
+    public lastName: string;
+
+    constructor(firstName: string, middleName: string, lastName:string) {
+        this.firstName = firstName;
+        this.middleName = middleName;
+        this.lastName = lastName;
+    }
+}
\ No newline at end of file

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.css

+/* #region Form card*/
+.custom-form {
+    width: 80%;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+}
+/* #endregion */
+
+/* #region Title*/
+.custom-form .custom-form-title h3 {
+    width: 50%;
+    margin: auto;
+    padding: 0.5em;
+    border: 1px solid var(--accent-color);
+    border-radius: 10em;
+}
+/* #endregion */
+
+/* #region Server error message*/
+.custom-form .custom-server-error-message .btn{
+    width: 100%;
+    font-size: 1.2em;
+    font-weight: 700;
+    cursor: auto;
+}
+/* #endregion */
+
+/* #region Buttons*/
+.custom-buttons .btn {
+    font-weight: 700;
+    width: 50%;
+    margin: auto;
+    font-size: 1.2em;
+}
+
+.custom-buttons .btn i {
+    font-weight: 900;
+    font-size: 1.2em;
+    margin-right: 0.5em;
+}
+
+.custom-buttons .btn-outline-primary {
+    color: white;
+    background-color: var(--heading-color);
+}
+
+.custom-buttons .btn-outline-primary:hover {
+    background-color: white;
+    color: var(--heading-color);
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+/* #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 {
+    width: 50%;
+    margin: auto;
+    color: var(--heading-color);
+}
+
+
+.custom-field .custom-label {
+    font-weight: 800;
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-label span{
+    margin-right: 0.1em;
+}
+
+.custom-field .custom-input {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+  }
+
+.custom-field .custom-error-message {
+    font-weight: 700;
+}
+
+.custom-form-buttons {
+    margin-top: 2em;
+}
+
+/* #endregion */
\ No newline at end of file

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>
+<div class="cutom-child" dir="rtl">
+    <div class="custom-form">
+
+        <!-- #region Server-side errors -->
+        <div *ngIf="isFailure" class="mb-3 d-grid gap-3 custom-server-error-message">
+            <button type="button" class="btn btn-danger">خطأ: {{errorMessage}}</button>
+        </div>
+        <!-- #endregion -->
+
+        <form #form="ngForm" (ngSubmit)="onSubmit()"
+            class="text-center custom-form-container" autocomplete="off">
+            
+            <!-- #region first name-->
+            <div class="form-group mb-3 custom-field">
+
+                <!-- #region Field label-->
+                <label for="firstName" class="col-form-label custom-label">
+                    الاسم
+                    <span class="text-danger">*</span>
+                </label>
+                <!-- #endregion -->
+
+                <!-- #region Fiels input-->
+                <input type="text" class="form-control text-center custom-input" placeholder="ادخل الاسم" dir="rtl"
+
+                    [(ngModel)]="formModel.firstName" name="firstName"
+                    #firstName="ngModel" required maxlength="50">
+                    <!-- #endregion -->
+
+                <!-- #region Field errors-->
+                <div *ngIf="(firstName.touched || firstName.dirty) && (firstName.errors)" class="custom-error-message">
+
+                    <p class="text-danger">
+                        {{
+                        firstName.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </p>
+                </div>
+                <!-- #endregion -->
+                
+            </div>
+            <!-- #endregion -->
+
+            <!-- #region middle name-->
+            <div class="form-group mb-3 custom-field">
+
+                <!-- #region Field label-->
+                <label for="middleName" class="col-form-label custom-label">
+                    اسم الأب
+                    <span class="text-danger">*</span>
+                </label>
+                <!-- #endregion -->
+
+                <!-- #region Fiels input-->
+                <input type="text" class="form-control text-center custom-input" placeholder="ادخل اسم الأب" dir="rtl"
+
+                    [(ngModel)]="formModel.middleName" name="middleName"
+                    #middleName="ngModel" required maxlength="50">
+                    <!-- #endregion -->
+
+                <!-- #region Field errors-->
+                <div *ngIf="(middleName.touched || middleName.dirty) && (middleName.errors)" class="custom-error-message">
+
+                    <p class="text-danger">
+                        {{
+                            middleName.errors['required'] ? 'هذا الحقل مطلوب'
+                            : ''
+                        }}
+                    </p>
+                </div>
+                <!-- #endregion -->
+                
+            </div>
+            <!-- #endregion -->            
+            
+            <!-- #region last name-->
+            <div class="form-group mb-3 custom-field">
+
+                <!-- #region Field label-->
+                <label for="lastName" class="col-form-label custom-label">
+                    الكنية
+                    <span class="text-danger">*</span>
+                </label>
+                <!-- #endregion -->
+
+                <!-- #region Fiels input-->
+                <input type="text" class="form-control text-center custom-input" placeholder="ادخل الكنية" dir="rtl"
+
+                    [(ngModel)]="formModel.lastName" name="lastName"
+                    #lastName="ngModel" required maxlength="50">
+                    <!-- #endregion -->
+
+                <!-- #region Field errors-->
+                <div *ngIf="(lastName.touched || lastName.dirty) && (lastName.errors)" class="custom-error-message">
+
+                    <p class="text-danger">
+                        {{
+                            lastName.errors['required'] ? 'هذا الحقل مطلوب'
+                            : ''
+                        }}
+                    </p>
+                </div>
+                <!-- #endregion -->
+                
+            </div>
+            <!-- #endregion -->                         
+            
+            <!-- #region Buttons-->
+            <div class="d-grid gap-3 mb-5 custom-buttons custom-form-buttons">
+                <button type="submit" class="btn btn-outline-primary"
+                [disabled]="!form.dirty || form.invalid">
+                    حفظ
+                    <i class="bi bi-save"></i>
+                </button>
+            </div>
+            <!-- #endregion -->
+            
+        </form>
+    </div>
+</div>
\ No newline at end of file

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';
+import { Component, Input, ViewChild } from '@angular/core';
+import { DoctorUsersService } from '../../../../services/doctor-users.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgForm } from '@angular/forms';
+import { UpdateDoctorPersonalDataQuery } from '../../classes/update-doctor-personal-data-query';
 
 @Component({
   selector: 'app-update-doctor-personal-data-form',
@@ -7,4 +11,28 @@ import { Component } from '@angular/core';
 })
 export class UpdateDoctorPersonalDataFormComponent {
 
+  //#region CTOR DI
+  constructor(private doctorUsersService: DoctorUsersService,
+    private toastrService: ToastrService
+  ) {}
+  //#endregion
+
+  // #region Inputs
+  @Input("formModel") formModel: UpdateDoctorPersonalDataQuery = new UpdateDoctorPersonalDataQuery('','','');
+  
+  // #endregion
+  
+  //#region Variables
+  @ViewChild("form") updateDoctorPseronalDataForm: NgForm;
+
+  isFailure: boolean = false;
+  errorMessage: string;
+  //#endregion
+
+  // #region On submut
+  onSubmit(): void{
+
+  }
+  
+  // #endregion
 }

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

+export class updateDoctorUserQuery {
+    public userName: string;
+    public password: string | null = null;
+
+    constructor(userName: string, password: string | null = null) {
+        this.userName = userName;
+        this.password = password;
+    }
+}
\ No newline at end of file

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.css

+/* #region Form card*/
+.custom-form {
+    width: 60%;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+}
+/* #endregion */
+
+/* #region Title*/
+.custom-form .custom-form-title h3 {
+    width: 50%;
+    margin: auto;
+    padding: 0.5em;
+    border: 1px solid var(--accent-color);
+    border-radius: 10em;
+}
+/* #endregion */
+
+/* #region Server error message*/
+.custom-form .custom-server-error-message .btn{
+    width: 100%;
+    font-size: 1.2em;
+    font-weight: 700;
+    cursor: auto;
+}
+/* #endregion */
+
+/* #region Buttons*/
+.custom-buttons .btn {
+    font-weight: 700;
+    width: 50%;
+    margin: auto;
+    font-size: 1.2em;
+}
+
+.custom-buttons .btn i {
+    font-weight: 900;
+    font-size: 1.2em;
+    margin-right: 0.5em;
+}
+
+.custom-buttons .btn-outline-primary {
+    color: white;
+    background-color: var(--heading-color);
+}
+
+.custom-buttons .btn-outline-primary:hover {
+    background-color: white;
+    color: var(--heading-color);
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+/* #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 {
+    width: 50%;
+    margin: auto;
+    color: var(--heading-color);
+}
+
+
+.custom-field .custom-label {
+    font-weight: 800;
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-label span{
+    margin-right: 0.1em;
+}
+
+.custom-field .custom-input {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+  }
+
+.custom-field .custom-error-message {
+    font-weight: 700;
+}
+
+.custom-form-buttons {
+    margin-top: 2em;
+}
+
+/* #endregion */
\ No newline at end of file

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>
+<div class="cutom-child" dir="rtl">
+    <div class="custom-form">
+
+        <!-- #region Server-side errors -->
+        <div *ngIf="isFailure" class="mb-3 d-grid gap-3 custom-server-error-message">
+            <button type="button" class="btn btn-danger">خطأ: {{errorMessage}}</button>
+        </div>
+        <!-- #endregion -->
+
+        <form #form="ngForm" (ngSubmit)="onSubmit()"
+            class="text-center custom-form-container" autocomplete="off">
+            
+            <!-- #region User name-->
+            <div class="form-group mb-3 custom-field">
+
+                <!-- #region Field label-->
+                <label for="userName" class="col-form-label custom-label">
+                    اسم المستخدم
+                    <span class="text-danger">*</span>
+                </label>
+                <!-- #endregion -->
+
+                <!-- #region Fiels input-->
+                <input type="text" class="form-control text-center custom-input" placeholder="ادخل اسم المستخدم" dir="rtl"
+
+                    [(ngModel)]="formModel.userName" name="userName"
+                    #userName="ngModel" required maxlength="50">
+                    <!-- #endregion -->
+
+                <!-- #region Field errors-->
+                <div *ngIf="(userName.touched || userName.dirty) && (userName.errors)" class="custom-error-message">
+
+                    <p class="text-danger">
+                        {{
+                        userName.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </p>
+                </div>
+                <!-- #endregion -->
+                
+            </div>
+             
+            
+            <!-- #endregion -->
+
+            <!-- #region password-->
+            <div class="form-group mb-3 custom-field">
+
+                <!-- #region Field label-->
+                <label for="password" class="col-form-label custom-label">
+                    كلمة السر
+                    <span>(اختياري)</span>
+                </label>
+                <!-- #endregion -->
+
+                <!-- #region Fiels input-->
+                <input type="password" class="form-control text-center custom-input" placeholder="ادخل كلمة السر" dir="rtl"
+
+                    [(ngModel)]="formModel.password" name="password"
+                    #password="ngModel" maxlength="50">
+                    <!-- #endregion -->
+
+                <!-- #region Field errors-->
+                <div *ngIf="(password.touched || password.dirty) && (password.errors)" class="custom-error-message">
+
+                    <p class="text-danger">
+
+                    </p>
+                </div>
+                <!-- #endregion -->
+                
+            </div>
+             
+            
+            <!-- #endregion -->            
+
+            <!-- #region Buttons-->
+            <div class="d-grid gap-3 mb-5 custom-buttons custom-form-buttons">
+                <button type="submit" class="btn btn-outline-primary"
+                [disabled]="!form.dirty || form.invalid">
+                    حفظ
+                    <i class="bi bi-save"></i>
+                </button>
+            </div>
+            <!-- #endregion -->
+            
+        </form>
+    </div>
+</div>
\ No newline at end of file

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';
+import { Component, Input } from '@angular/core';
+import { updateDoctorUserQuery } from '../../classes/updateDoctorUserQuery';
 
 @Component({
   selector: 'app-update-doctor-user-data-form',
@@ -7,4 +8,12 @@ import { Component } from '@angular/core';
 })
 export class UpdateDoctorUserDataFormComponent {
 
+  isFailure: boolean = false;
+  errorMessage: string;
+
+  @Input("formModel") formModel: updateDoctorUserQuery;
+
+  onSubmit(): void {
+
+  }
 }