(F) Use routing for create doctor use case

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

@@ -7,6 +7,8 @@ import { ForbiddenComponent } from './usecases/shared/components/errors/forbidde
 import { NotFoundComponent } from './usecases/shared/components/errors/not-found/not-found.component';
 import { TestSignalRComponent } from './notifications/components/test-signal-r/test-signal-r.component';
 import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
+import { AdminDashboardComponent } from './usecases/admin/shared/admin-dashboard/admin-dashboard.component';
+import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component';
 
 const routes: Routes = [
   {
@@ -30,11 +32,22 @@ const routes: Routes = [
   },
 
   {
-    path: 'admin/doctors',
-    component: DoctorUsersComponent,
+    path: 'admin',
+    component: AdminDashboardComponent,
     canActivate: [RoleGuard],
-    // canActivateChild: [RoleGuard],
+    canActivateChild: [RoleGuard],
+    
     data: { role: Roles.Admin },
+    children: [
+      {
+        path: 'doctors',
+        component: DoctorUsersComponent
+      },
+      {
+        path: 'doctors/create',
+        component: CreateDoctorUserFormComponent
+      }
+    ]
     
   },
   

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

@@ -24,6 +24,7 @@ import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/compone
 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';
+import { AdminDashboardComponent } from './usecases/admin/shared/admin-dashboard/admin-dashboard.component';
 
 
 @NgModule({
@@ -65,6 +66,7 @@ import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-us
     DoctorUserComponent,
     DoctorUsersComponent,
     CreateDoctorUserFormComponent,
+    AdminDashboardComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/authentication/services/guards/role-guard.ts

 import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanActivateChild, GuardResult, MaybeAsync } from '@angular/router';
 import { AuthenticationService } from '../authentication.service';
 import { Roles } from '../../classes/roles';
 import { UserData } from '../../classes/user-data';
@@ -7,7 +7,7 @@ import { UserData } from '../../classes/user-data';
 @Injectable({
   providedIn: 'root'
 })
-export class RoleGuard implements CanActivate {
+export class RoleGuard implements CanActivate, CanActivateChild {
 
   constructor(private authenticationService: AuthenticationService, private router: Router) { }
 
@@ -40,4 +40,8 @@ export class RoleGuard implements CanActivate {
     
   }
 
+  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): MaybeAsync<GuardResult> {
+    return this.canActivate(childRoute, state);
+  }
+
 }
\ 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);   
+/* #region Form card*/
+.custom-form {
+    width: 50%;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
 }
+/* #endregion */
 
-.custom-input::placeholder {
-    opacity: 40%;
+/* #region Title*/
+.custom-form .custom-title h3 {
+    width: 50%;
+    margin: auto;
+    padding: 0.5em;
+    border: 1px solid var(--accent-color);
+    border-radius: 10em;
 }
+/* #endregion */
 
-.custom-label {
-    color: var(--heading-color);   
+/* #region Server error message*/
+.custom-form .custom-server-error-message .btn{
+    width: 100%;
+    font-size: 1.2em;
     font-weight: 700;
+    cursor: auto;
 }
+/* #endregion */
 
-.custom-cancel-button {
-    color: var(--heading-color);   
+/* #region Buttons*/
+.custom-buttons .btn {
+    font-weight: 700;
+    width: 50%;
+    margin: auto;
+    font-size: 1.2em;
 }
-.custom-cancel-button:hover {
+
+.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);
+    background-color: var(--accent-color);
+}
+
+.custom-buttons .btn-outline-primary:hover {
+    background-color: white;
+    color: var(--accent-color);
+    box-shadow: 0 0 0 0.1em var(--accent-color);
+}
+/* #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/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.html

-<div class="custom-child" dir="rtl">
-    <div>
+<div dir="rtl" class="mt-5 mb-5 custom-form">
     
-        <div class="text-center">
+    <!-- #region Title-->
+
+    <div class="text-center custom-title mb-4">
         <h3 style="font-weight: 800;">إضافة طبيب</h3>
     </div>
 
-        <hr>
+    <!-- #endregion -->
     
-        <div *ngIf="isFailure" class="d-grid mb-2">
-            <button type="button" class="btn btn-danger" style="cursor: auto;">خطأ: {{errorMessage}}</button>
+    <!-- #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 #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>
+        <!-- #region Username-->
+        <div class="form-group mb-3 custom-field">
+
+            <label for="username" class="col-form-label custom-label">
+                اسم المستخدم
+                <span class="text-danger">*</span>
+            </label>
+
+            <input
+                type="text" class="form-control text-center custom-input"
+                placeholder="ادخل اسم المستخدم" dir="ltr"
+
+                [(ngModel)]="formModel.userName" name="userName" 
 
-            <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">
+                #userName="ngModel" required maxlength="50"
+            >
 
-                <div *ngIf="(userName.touched || userName.dirty) && userName.errors" class="mb-2">
-                    <span class="text-danger">
+            <div *ngIf="(userName.touched || userName.dirty) && userName.errors"
+                class="custom-error-message">
+
+                <p class="text-danger">
                     {{
                         userName.errors['required'] ? 'هذا الحقل مطلوب'
                         : ''
                     }}
-                    </span>
+                </p>
+
             </div>
+
         </div>
+        <!-- #endregion -->
+
+        <!-- #region Password-->
+        <div class="form-group mb-3 custom-field">
+
+            <label for="password" class="col-form-label custom-label">
+                كلمة المرور
+                <span class="text-danger">*</span>
+            </label>
 
-            <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">
+            <input
+                type="password" class="form-control text-center custom-input"
+                placeholder="ادخل كلمة المرور" dir="ltr"
 
-                <div *ngIf="(password.touched || password.dirty) && password.errors" class="mb-2">
-                    <span class="text-danger">
+                [(ngModel)]="formModel.password" name="password" 
+
+                #password="ngModel" required maxlength="50"
+            >
+
+            <div *ngIf="(password.touched || password.dirty) && password.errors"
+                class="custom-error-message">
+
+                <p class="text-danger">
                     {{
                         password.errors['required'] ? 'هذا الحقل مطلوب'
                         : ''
                     }}
-                    </span>
+                </p>
+
             </div>
 
         </div>
+        <!-- #endregion -->
+
+        <!-- #region FirstName-->
+        <div class="form-group mb-3 custom-field">
+
+            <label for="firstName" class="col-form-label custom-label">
+                الاسم
+                <span class="text-danger">*</span>
+            </label>
+
+            <input
+                type="text" class="form-control text-center custom-input"
+                placeholder="ادخل الاسم" dir="rtl"
+
+                [(ngModel)]="formModel.firstName" name="firstName" 
+
+                #firstName="ngModel" required maxlength="50"
+            >
 
-            <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="custom-error-message">
 
-                <div *ngIf="(firstName.touched || firstName.dirty) && firstName.errors" class="mb-2">
-                    <span class="text-danger">
+                <p class="text-danger">
                     {{
                         firstName.errors['required'] ? 'هذا الحقل مطلوب'
                         : ''
                     }}
-                    </span>
+                </p>
+
             </div>
 
         </div>
+        <!-- #endregion -->
+
+        <!-- #region MiddleName-->
+        <div class="form-group mb-3 custom-field">
+
+            <label for="middleName" class="col-form-label custom-label">
+                اسم الأب
+                <span class="text-danger">*</span>
+            </label>
+
+            <input
+                type="text" class="form-control text-center custom-input"
+                placeholder="ادخل اسم الأب" dir="rtl"
+
+                [(ngModel)]="formModel.middleName" name="middleName" 
 
-            <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">
+                #middleName="ngModel" required maxlength="50"
+            >
 
-                <div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors" class="mb-2">
-                    <span class="text-danger">
+            <div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors"
+                class="custom-error-message">
+
+                <p class="text-danger">
                     {{
                         middleName.errors['required'] ? 'هذا الحقل مطلوب'
                         : ''
                     }}
-                    </span>
+                </p>
+
             </div>
 
         </div>
+        <!-- #endregion -->
+
+        <!-- #region MiddleName-->
+        <div class="form-group mb-3 custom-field">
+
+            <label for="lastName" class="col-form-label custom-label">
+                الكنية
+                <span class="text-danger">*</span>
+            </label>
 
-            <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">
+            <input
+                type="text" class="form-control text-center custom-input"
+                placeholder="ادخل الكنية" dir="rtl"
 
-                <div *ngIf="(lastName.touched || lastName.dirty) && lastName.errors" class="mb-2">
-                    <span class="text-danger">
+                [(ngModel)]="formModel.lastName" name="lastName" 
+
+                #lastName="ngModel" required maxlength="50"
+            >
+
+            <div *ngIf="(lastName.touched || lastName.dirty) && lastName.errors"
+                class="custom-error-message">
+
+                <p class="text-danger">
                     {{
                         lastName.errors['required'] ? 'هذا الحقل مطلوب'
                         : ''
                     }}
-                    </span>
+                </p>
+
             </div>
 
         </div>
+        <!-- #endregion -->
         
-            <div class="d-grid gap-3">
-                <button type="submit" class="btn btn-outline-primary"
-                    [disabled]="!createDoctorUserForm.dirty || createDoctorUserForm.invalid">حفظ</button>
+        <!-- #region Buttons-->
+        <div class="d-grid gap-3 mb-5 custom-buttons custom-form-buttons">
             
-                <button type="button" class="btn btn-outline-secondary custom-cancel-button"
-                    (click)="parentModal.dismiss()">الغاء</button>
+            <button type="submit" class="btn btn-outline-primary"
+                [disabled]="!createDoctorUserForm.dirty || createDoctorUserForm.invalid">
+                حفظ
+                <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>
+        
+        <!-- #endregion -->
+    
     </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 { Component, 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';
+import { Router } from '@angular/router';
+import { ViewportScroller } from '@angular/common';
 
 @Component({
   selector: 'app-create-doctor-user-form',
@@ -11,20 +12,15 @@ import { DoctorUser } from '../../../list-doctor-users/classes/doctor-user';
   styleUrl: './create-doctor-user-form.component.css'
 })
 export class CreateDoctorUserFormComponent {
+
   //#region CTOR DI
   constructor(private doctorUsersService: DoctorUsersService,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private router: Router,
+    private scroller: ViewportScroller
   ) { }
   //#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();
@@ -46,15 +42,11 @@ export class CreateDoctorUserFormComponent {
             if (result.status === false) {
               this.isFailure = true;
               this.errorMessage = result.errorMessage!;
+              this.scroller.scrollToPosition([0,0])
             }
             else {
-              this.toastrService.success("تمت إضافة الطبيب بنجاح ✔");
-              this.created.emit(
-                new DoctorUser(
-                  this.formModel.userName, `${this.formModel.firstName} ${this.formModel.middleName} ${this.formModel.lastName}`
-                )
-              )
-
+              this.toastrService.success("تم إضافة الطبيب بنجاح ✔");
+              this.router.navigateByUrl('admin/doctors');
             }
           }
         )

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

@@ -9,13 +9,9 @@
         <!-- #endregion -->
 
         <!-- #region buttons-->
-
         <div class="text-center custom-create-button">
-            <button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;"
-                (click)="openCreateDoctorUserForm(createDoctorUserModal)">إضافة طبيب +</button>
+            <a [routerLink]="['create']"><button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة طبيب +</button></a>
         </div>
-
-
         <!-- #endregion -->
 
         <!-- #region container-->
@@ -24,20 +20,10 @@
                 <div *ngFor="let doctorUser of doctorUsers" class="col-lg-4 col-md-6">
                     <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

 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';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ViewportScroller } from '@angular/common';
 
 @Component({
   selector: 'app-doctor-users',
@@ -14,10 +11,7 @@ import { ViewportScroller } from '@angular/common';
 export class DoctorUsersComponent implements OnInit {
 
   // #region CTOR DI
-  constructor(private doctorUsersService: DoctorUsersService,
-    private toastrService:ToastrService,
-    private modalService: NgbModal,
-    private viewportScroller: ViewportScroller) {}
+  constructor(private doctorUsersService: DoctorUsersService) {}
   // #endregion
 
   // #region On init
@@ -27,7 +21,7 @@ export class DoctorUsersComponent implements OnInit {
       if (getAllDoctorUsersResult.status)
         this.doctorUsers = getAllDoctorUsersResult.doctorUsers!;
       else
-        this.toastrService.error(getAllDoctorUsersResult.errorMessage!);
+        console.error(getAllDoctorUsersResult.errorMessage!);
     })
   }
   // #endregion
@@ -36,17 +30,5 @@ 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/shared/admin-dashboard/admin-dashboard.component.html

+<div class="custom-child">
+    <router-outlet></router-outlet>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/shared/admin-dashboard/admin-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-admin-dashboard',
+  templateUrl: './admin-dashboard.component.html',
+  styleUrl: './admin-dashboard.component.css'
+})
+export class AdminDashboardComponent {
+
+}