Commit 4c1e40ac authored by Almouhannad's avatar Almouhannad

(F) Use routing for create doctor use case

parent ff10fca8
...@@ -7,6 +7,8 @@ import { ForbiddenComponent } from './usecases/shared/components/errors/forbidde ...@@ -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 { NotFoundComponent } from './usecases/shared/components/errors/not-found/not-found.component';
import { TestSignalRComponent } from './notifications/components/test-signal-r/test-signal-r.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 { 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 = [ const routes: Routes = [
{ {
...@@ -30,11 +32,22 @@ const routes: Routes = [ ...@@ -30,11 +32,22 @@ const routes: Routes = [
}, },
{ {
path: 'admin/doctors', path: 'admin',
component: DoctorUsersComponent, component: AdminDashboardComponent,
canActivate: [RoleGuard], canActivate: [RoleGuard],
// canActivateChild: [RoleGuard], canActivateChild: [RoleGuard],
data: { role: Roles.Admin }, data: { role: Roles.Admin },
children: [
{
path: 'doctors',
component: DoctorUsersComponent
},
{
path: 'doctors/create',
component: CreateDoctorUserFormComponent
}
]
}, },
......
...@@ -24,6 +24,7 @@ import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/compone ...@@ -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 { DoctorUserComponent } from './usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component';
import { DoctorUsersService } from './usecases/admin/services/doctor-users.service'; 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 { 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({ @NgModule({
...@@ -65,6 +66,7 @@ import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-us ...@@ -65,6 +66,7 @@ import { CreateDoctorUserFormComponent } from './usecases/admin/create-doctor-us
DoctorUserComponent, DoctorUserComponent,
DoctorUsersComponent, DoctorUsersComponent,
CreateDoctorUserFormComponent, CreateDoctorUserFormComponent,
AdminDashboardComponent,
], ],
// identifies the root component that Angular should // identifies the root component that Angular should
......
import { Injectable } from '@angular/core'; 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 { AuthenticationService } from '../authentication.service';
import { Roles } from '../../classes/roles'; import { Roles } from '../../classes/roles';
import { UserData } from '../../classes/user-data'; import { UserData } from '../../classes/user-data';
...@@ -7,7 +7,7 @@ import { UserData } from '../../classes/user-data'; ...@@ -7,7 +7,7 @@ import { UserData } from '../../classes/user-data';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class RoleGuard implements CanActivate { export class RoleGuard implements CanActivate, CanActivateChild {
constructor(private authenticationService: AuthenticationService, private router: Router) { } constructor(private authenticationService: AuthenticationService, private router: Router) { }
...@@ -40,4 +40,8 @@ export class RoleGuard implements CanActivate { ...@@ -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
.custom-input, /* #region Form card*/
.custom-input::placeholder { .custom-form {
color: var(--heading-color); width: 50%;
margin: auto;
padding: 1em;
border: 1px solid var(--accent-color);
border-radius: 3%;
} }
/* #endregion */
.custom-input::placeholder { /* #region Title*/
opacity: 40%; .custom-form .custom-title h3 {
width: 50%;
margin: auto;
padding: 0.5em;
border: 1px solid var(--accent-color);
border-radius: 10em;
} }
/* #endregion */
.custom-label { /* #region Server error message*/
color: var(--heading-color); .custom-form .custom-server-error-message .btn{
width: 100%;
font-size: 1.2em;
font-weight: 700; font-weight: 700;
cursor: auto;
} }
/* #endregion */
.custom-cancel-button { /* #region Buttons*/
color: var(--heading-color); .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(--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-cancel-button:hover {
color: white; .custom-form-buttons {
background-color: var(--heading-color); margin-top: 2em;
} }
\ No newline at end of file
/* #endregion */
\ No newline at end of file
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import { DoctorUsersService } from '../../../services/doctor-users.service'; import { DoctorUsersService } from '../../../services/doctor-users.service';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { CreateDoctorUserCommand } from '../../classes/create-doctor-user-command'; import { CreateDoctorUserCommand } from '../../classes/create-doctor-user-command';
import { NgForm } from '@angular/forms'; 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({ @Component({
selector: 'app-create-doctor-user-form', selector: 'app-create-doctor-user-form',
...@@ -11,20 +12,15 @@ import { DoctorUser } from '../../../list-doctor-users/classes/doctor-user'; ...@@ -11,20 +12,15 @@ import { DoctorUser } from '../../../list-doctor-users/classes/doctor-user';
styleUrl: './create-doctor-user-form.component.css' styleUrl: './create-doctor-user-form.component.css'
}) })
export class CreateDoctorUserFormComponent { export class CreateDoctorUserFormComponent {
//#region CTOR DI //#region CTOR DI
constructor(private doctorUsersService: DoctorUsersService, constructor(private doctorUsersService: DoctorUsersService,
private toastrService: ToastrService private toastrService: ToastrService,
private router: Router,
private scroller: ViewportScroller
) { } ) { }
//#endregion //#endregion
//#region Inputs
@Input("parentModal") parentModal: any;
//#endregion
//#region Outputs
@Output("created") created: EventEmitter<DoctorUser> = new EventEmitter();
//#endregion
//#region Variables //#region Variables
@ViewChild("createDoctorUserForm") loginForm: NgForm; @ViewChild("createDoctorUserForm") loginForm: NgForm;
formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand(); formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand();
...@@ -46,15 +42,11 @@ export class CreateDoctorUserFormComponent { ...@@ -46,15 +42,11 @@ export class CreateDoctorUserFormComponent {
if (result.status === false) { if (result.status === false) {
this.isFailure = true; this.isFailure = true;
this.errorMessage = result.errorMessage!; this.errorMessage = result.errorMessage!;
this.scroller.scrollToPosition([0,0])
} }
else { else {
this.toastrService.success("تمت إضافة الطبيب بنجاح ✔"); this.toastrService.success("تم إضافة الطبيب بنجاح ✔");
this.created.emit( this.router.navigateByUrl('admin/doctors');
new DoctorUser(
this.formModel.userName, `${this.formModel.firstName} ${this.formModel.middleName} ${this.formModel.lastName}`
)
)
} }
} }
) )
......
...@@ -9,13 +9,9 @@ ...@@ -9,13 +9,9 @@
<!-- #endregion --> <!-- #endregion -->
<!-- #region buttons--> <!-- #region buttons-->
<div class="text-center custom-create-button"> <div class="text-center custom-create-button">
<button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;" <a [routerLink]="['create']"><button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة طبيب +</button></a>
(click)="openCreateDoctorUserForm(createDoctorUserModal)">إضافة طبيب +</button>
</div> </div>
<!-- #endregion --> <!-- #endregion -->
<!-- #region container--> <!-- #region container-->
...@@ -24,20 +20,10 @@ ...@@ -24,20 +20,10 @@
<div *ngFor="let doctorUser of doctorUsers" class="col-lg-4 col-md-6"> <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>
<div id="bottom"></div>
</div> </div>
</div> </div>
<!-- #endregion --> <!-- #endregion -->
</section> </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> </div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { DoctorUsersService } from '../../../services/doctor-users.service'; import { DoctorUsersService } from '../../../services/doctor-users.service';
import { DoctorUser } from '../../classes/doctor-user'; import { DoctorUser } from '../../classes/doctor-user';
import { ToastrService } from 'ngx-toastr';
import { GetAllDoctorUsersResult } from '../../classes/get-all-doctor-users-result'; import { GetAllDoctorUsersResult } from '../../classes/get-all-doctor-users-result';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ViewportScroller } from '@angular/common';
@Component({ @Component({
selector: 'app-doctor-users', selector: 'app-doctor-users',
...@@ -14,10 +11,7 @@ import { ViewportScroller } from '@angular/common'; ...@@ -14,10 +11,7 @@ import { ViewportScroller } from '@angular/common';
export class DoctorUsersComponent implements OnInit { export class DoctorUsersComponent implements OnInit {
// #region CTOR DI // #region CTOR DI
constructor(private doctorUsersService: DoctorUsersService, constructor(private doctorUsersService: DoctorUsersService) {}
private toastrService:ToastrService,
private modalService: NgbModal,
private viewportScroller: ViewportScroller) {}
// #endregion // #endregion
// #region On init // #region On init
...@@ -27,7 +21,7 @@ export class DoctorUsersComponent implements OnInit { ...@@ -27,7 +21,7 @@ export class DoctorUsersComponent implements OnInit {
if (getAllDoctorUsersResult.status) if (getAllDoctorUsersResult.status)
this.doctorUsers = getAllDoctorUsersResult.doctorUsers!; this.doctorUsers = getAllDoctorUsersResult.doctorUsers!;
else else
this.toastrService.error(getAllDoctorUsersResult.errorMessage!); console.error(getAllDoctorUsersResult.errorMessage!);
}) })
} }
// #endregion // #endregion
...@@ -36,17 +30,5 @@ export class DoctorUsersComponent implements OnInit { ...@@ -36,17 +30,5 @@ export class DoctorUsersComponent implements OnInit {
doctorUsers: DoctorUser[]; doctorUsers: DoctorUser[];
// #endregion // #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
} }
<div class="custom-child">
<router-outlet></router-outlet>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-admin-dashboard',
templateUrl: './admin-dashboard.component.html',
styleUrl: './admin-dashboard.component.css'
})
export class AdminDashboardComponent {
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment