(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.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 {
+
+}