Skip to content

H
HIAST-Clinics
Commit 4c1e40ac authored by Almouhannad's avatar Almouhannad
Browse files
Options

(F) Use routing for create doctor use case

parent ff10fca8
Hide whitespace changes
Inline Side-by-side
Showing with 297 additions and 151 deletions
Clinics.Frontend/src/app/app-routing.module.ts
View file @ 4c1e40ac
......@@ -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
View file @ 4c1e40ac
......@@ -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
View file @ 4c1e40ac
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
View file @ 4c1e40ac
.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
Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.html
View file @ 4c1e40ac
<div class="custom-child" dir="rtl">
<div>
<div dir="rtl" class="mt-5 mb-5 custom-form">
<!-- #region Title-->
<div class="text-center">
<h3 style="font-weight: 800;">إضافة طبيب</h3>
</div>
<div class="text-center custom-title mb-4">
<h3 style="font-weight: 800;">إضافة طبيب</h3>
</div>
<!-- #endregion -->
<!-- #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 -->
<hr>
<form #createDoctorUserForm="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off">
<div *ngIf="isFailure" class="d-grid mb-2">
<button type="button" class="btn btn-danger" style="cursor: auto;">خطأ: {{errorMessage}}</button>
</div>
<!-- #region Username-->
<div class="form-group mb-3 custom-field">
<form #createDoctorUserForm="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off">
<label for="username" class="col-form-label custom-label">
اسم المستخدم
<span class="text-danger">*</span>
</label>
<!-- To avoid first field auto focus -->
<div class="form-group">
<input type="text" autofocus="autofocus" style="display:none" />
</div>
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم المستخدم" dir="ltr"
<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">
[(ngModel)]="formModel.userName" name="userName"
<div *ngIf="(userName.touched || userName.dirty) && userName.errors" class="mb-2">
<span class="text-danger">
{{
#userName="ngModel" required maxlength="50"
>
<div *ngIf="(userName.touched || userName.dirty) && userName.errors"
class="custom-error-message">
<p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</span>
</div>
}}
</p>
</div>
<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">
</div>
<!-- #endregion -->
<!-- #region Password-->
<div class="form-group mb-3 custom-field">
<div *ngIf="(password.touched || password.dirty) && password.errors" class="mb-2">
<span class="text-danger">
{{
<label for="password" class="col-form-label custom-label">
كلمة المرور
<span class="text-danger">*</span>
</label>
<input
type="password" class="form-control text-center custom-input"
placeholder="ادخل كلمة المرور" dir="ltr"
[(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>
</div>
}}
</p>
</div>
<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>
<!-- #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"
<div *ngIf="(firstName.touched || firstName.dirty) && firstName.errors" class="mb-2">
<span class="text-danger">
{{
#firstName="ngModel" required maxlength="50"
>
<div *ngIf="(firstName.touched || firstName.dirty) && firstName.errors"
class="custom-error-message">
<p class="text-danger">
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</span>
</div>
}}
</p>
</div>
<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">
</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"
<div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors" class="mb-2">
<span class="text-danger">
{{
[(ngModel)]="formModel.middleName" name="middleName"
#middleName="ngModel" required maxlength="50"
>
<div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors"
class="custom-error-message">
<p class="text-danger">
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</span>
</div>
}}
</p>
</div>
<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">
</div>
<!-- #endregion -->
<!-- #region MiddleName-->
<div class="form-group mb-3 custom-field">
<div *ngIf="(lastName.touched || lastName.dirty) && lastName.errors" class="mb-2">
<span class="text-danger">
{{
<label for="lastName" 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.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>
</div>
}}
</p>
</div>
<div class="d-grid gap-3">
<button type="submit" class="btn btn-outline-primary"
[disabled]="!createDoctorUserForm.dirty || createDoctorUserForm.invalid">حفظ</button>
<button type="button" class="btn btn-outline-secondary custom-cancel-button"
(click)="parentModal.dismiss()">الغاء</button>
</div>
</form>
</div>
</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]="!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>
\ 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
View file @ 4c1e40ac
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
View file @ 4c1e40ac
......@@ -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
View file @ 4c1e40ac
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 0 → 100644
View file @ 4c1e40ac
<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 0 → 100644
View file @ 4c1e40ac
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

HIAST - GitLab