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
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
}
]
},
......
......@@ -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
......
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
.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-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;
background-color: var(--heading-color);
}
\ No newline at end of file
.custom-form-buttons {
margin-top: 2em;
}
/* #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 { 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');
}
}
)
......
......@@ -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
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
}
<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