Skip to content

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

(F) Add update forms

parent 9b05c995
Show whitespace changes
Inline Side-by-side
Showing with 532 additions and 10 deletions
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/classes/doctor-user-response.ts
View file @ ac879c28
...@@ -5,5 +5,12 @@ export class DoctorUserResponse { ...@@ -5,5 +5,12 @@ export class DoctorUserResponse {
public middleName!: string; public middleName!: string;
public lastName!: string; public lastName!: string;
constructor() {
this.userName='';
this.firstName='';
this.middleName='';
this.lastName='';
}
} }
\ No newline at end of file
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component.html
View file @ ac879c28
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
class="accordion-collapse collapse" class="accordion-collapse collapse"
> >
<div class="accordion-body"> <div class="accordion-body custom-child">
<app-update-doctor-user-data-form> <app-update-doctor-user-data-form [formModel]="editUserDataQuery">
</app-update-doctor-user-data-form> </app-update-doctor-user-data-form>
</div> </div>
...@@ -81,8 +81,8 @@ ...@@ -81,8 +81,8 @@
class="accordion-collapse collapse" class="accordion-collapse collapse"
> >
<div class="accordion-body"> <div class="accordion-body custom-child">
<app-update-doctor-personal-data-form> <app-update-doctor-personal-data-form [formModel]="editPersonalDataQuery">
</app-update-doctor-personal-data-form> </app-update-doctor-personal-data-form>
</div> </div>
......
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/components/update-doctor-user/update-doctor-user.component.ts
View file @ ac879c28
...@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core'; ...@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { DoctorUsersService } from '../../../services/doctor-users.service'; import { DoctorUsersService } from '../../../services/doctor-users.service';
import { DoctorUserResponse } from '../../classes/doctor-user-response'; import { DoctorUserResponse } from '../../classes/doctor-user-response';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { UpdateDoctorPersonalDataQuery } from '../../update-doctor-personal-data/classes/update-doctor-personal-data-query';
import { updateDoctorUserQuery } from '../../update-doctor-user-data/classes/updateDoctorUserQuery';
@Component({ @Component({
selector: 'app-update-doctor-user', selector: 'app-update-doctor-user',
...@@ -22,6 +24,11 @@ export class UpdateDoctorUserComponent implements OnInit{ ...@@ -22,6 +24,11 @@ export class UpdateDoctorUserComponent implements OnInit{
this.doctorUsersService.getDoctorUserById(this.doctorUserId) this.doctorUsersService.getDoctorUserById(this.doctorUserId)
.subscribe( doctorUser => { .subscribe( doctorUser => {
this.doctorUser = doctorUser!; this.doctorUser = doctorUser!;
this.editPersonalDataQuery = new UpdateDoctorPersonalDataQuery(
this.doctorUser.firstName, this.doctorUser.middleName,
this.doctorUser.lastName
);
this.editUserDataQuery = new updateDoctorUserQuery(doctorUser!.userName);
} }
) )
} }
...@@ -30,7 +37,9 @@ export class UpdateDoctorUserComponent implements OnInit{ ...@@ -30,7 +37,9 @@ export class UpdateDoctorUserComponent implements OnInit{
// #region Variables // #region Variables
doctorUserId: number; doctorUserId: number;
doctorUser: DoctorUserResponse; doctorUser: DoctorUserResponse = new DoctorUserResponse();
editPersonalDataQuery: UpdateDoctorPersonalDataQuery;
editUserDataQuery: updateDoctorUserQuery;
isUserDataSelected: boolean = false; isUserDataSelected: boolean = false;
isPersonalInfoSelected: boolean = false; isPersonalInfoSelected: boolean = false;
......
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-personal-data/classes/update-doctor-personal-data-query.ts 0 → 100644
View file @ ac879c28
export class UpdateDoctorPersonalDataQuery {
public firstName: string;
public middleName: string;
public lastName: string;
constructor(firstName: string, middleName: string, lastName:string) {
this.firstName = firstName;
this.middleName = middleName;
this.lastName = lastName;
}
}
\ No newline at end of file
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-personal-data/components/update-doctor-personal-data-form/update-doctor-personal-data-form.component.css
View file @ ac879c28
/* #region Form card*/
.custom-form {
width: 80%;
margin: auto;
padding: 1em;
border: 1px solid var(--accent-color);
border-radius: 3%;
}
/* #endregion */
/* #region Title*/
.custom-form .custom-form-title h3 {
width: 50%;
margin: auto;
padding: 0.5em;
border: 1px solid var(--accent-color);
border-radius: 10em;
}
/* #endregion */
/* #region Server error message*/
.custom-form .custom-server-error-message .btn{
width: 100%;
font-size: 1.2em;
font-weight: 700;
cursor: auto;
}
/* #endregion */
/* #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(--heading-color);
}
.custom-buttons .btn-outline-primary:hover {
background-color: white;
color: var(--heading-color);
box-shadow: 0 0 0 0.1em var(--heading-color);
}
/* #endregion */
/* #region Back-button*/
.custom-back-button {
margin-bottom: 1em;
}
.custom-back-button a{
width: 50%;
}
.custom-back-button a .btn{
width: 50%;
background-color: var(--accent-color);
color: white;
border-color: var(--accent-color);
font-weight: 700;
}
.custom-back-button a button:hover{
background-color: white;
border-color: var(--accent-color);
color:var(--accent-color);
}
.custom-back-button a .btn i{
margin-right: 0.5em;
}
/* #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/update-doctor-user/update-doctor-personal-data/components/update-doctor-personal-data-form/update-doctor-personal-data-form.component.html
View file @ ac879c28
<p>update-doctor-personal-data-form works!</p> <div class="cutom-child" dir="rtl">
<div class="custom-form">
<!-- #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 #form="ngForm" (ngSubmit)="onSubmit()"
class="text-center custom-form-container" autocomplete="off">
<!-- #region first name-->
<div class="form-group mb-3 custom-field">
<!-- #region Field label-->
<label for="firstName" class="col-form-label custom-label">
الاسم
<span class="text-danger">*</span>
</label>
<!-- #endregion -->
<!-- #region Fiels input-->
<input type="text" class="form-control text-center custom-input" placeholder="ادخل الاسم" dir="rtl"
[(ngModel)]="formModel.firstName" name="firstName"
#firstName="ngModel" required maxlength="50">
<!-- #endregion -->
<!-- #region Field errors-->
<div *ngIf="(firstName.touched || firstName.dirty) && (firstName.errors)" class="custom-error-message">
<p class="text-danger">
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
<!-- #endregion -->
</div>
<!-- #endregion -->
<!-- #region middle name-->
<div class="form-group mb-3 custom-field">
<!-- #region Field label-->
<label for="middleName" class="col-form-label custom-label">
اسم الأب
<span class="text-danger">*</span>
</label>
<!-- #endregion -->
<!-- #region Fiels input-->
<input type="text" class="form-control text-center custom-input" placeholder="ادخل اسم الأب" dir="rtl"
[(ngModel)]="formModel.middleName" name="middleName"
#middleName="ngModel" required maxlength="50">
<!-- #endregion -->
<!-- #region Field errors-->
<div *ngIf="(middleName.touched || middleName.dirty) && (middleName.errors)" class="custom-error-message">
<p class="text-danger">
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
<!-- #endregion -->
</div>
<!-- #endregion -->
<!-- #region last name-->
<div class="form-group mb-3 custom-field">
<!-- #region Field label-->
<label for="lastName" class="col-form-label custom-label">
الكنية
<span class="text-danger">*</span>
</label>
<!-- #endregion -->
<!-- #region Fiels input-->
<input type="text" class="form-control text-center custom-input" placeholder="ادخل الكنية" dir="rtl"
[(ngModel)]="formModel.lastName" name="lastName"
#lastName="ngModel" required maxlength="50">
<!-- #endregion -->
<!-- #region Field errors-->
<div *ngIf="(lastName.touched || lastName.dirty) && (lastName.errors)" class="custom-error-message">
<p class="text-danger">
{{
lastName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
<!-- #endregion -->
</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]="!form.dirty || form.invalid">
حفظ
<i class="bi bi-save"></i>
</button>
</div>
<!-- #endregion -->
</form>
</div>
</div>
\ No newline at end of file
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-personal-data/components/update-doctor-personal-data-form/update-doctor-personal-data-form.component.ts
View file @ ac879c28
import { Component } from '@angular/core'; import { Component, Input, ViewChild } from '@angular/core';
import { DoctorUsersService } from '../../../../services/doctor-users.service';
import { ToastrService } from 'ngx-toastr';
import { NgForm } from '@angular/forms';
import { UpdateDoctorPersonalDataQuery } from '../../classes/update-doctor-personal-data-query';
@Component({ @Component({
selector: 'app-update-doctor-personal-data-form', selector: 'app-update-doctor-personal-data-form',
...@@ -7,4 +11,28 @@ import { Component } from '@angular/core'; ...@@ -7,4 +11,28 @@ import { Component } from '@angular/core';
}) })
export class UpdateDoctorPersonalDataFormComponent { export class UpdateDoctorPersonalDataFormComponent {
//#region CTOR DI
constructor(private doctorUsersService: DoctorUsersService,
private toastrService: ToastrService
) {}
//#endregion
// #region Inputs
@Input("formModel") formModel: UpdateDoctorPersonalDataQuery = new UpdateDoctorPersonalDataQuery('','','');
// #endregion
//#region Variables
@ViewChild("form") updateDoctorPseronalDataForm: NgForm;
isFailure: boolean = false;
errorMessage: string;
//#endregion
// #region On submut
onSubmit(): void{
}
// #endregion
} }
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-user-data/classes/updateDoctorUserQuery.ts 0 → 100644
View file @ ac879c28
export class updateDoctorUserQuery {
public userName: string;
public password: string | null = null;
constructor(userName: string, password: string | null = null) {
this.userName = userName;
this.password = password;
}
}
\ No newline at end of file
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-user-data/components/update-doctor-user-data-form/update-doctor-user-data-form.component.css
View file @ ac879c28
/* #region Form card*/
.custom-form {
width: 60%;
margin: auto;
padding: 1em;
border: 1px solid var(--accent-color);
border-radius: 3%;
}
/* #endregion */
/* #region Title*/
.custom-form .custom-form-title h3 {
width: 50%;
margin: auto;
padding: 0.5em;
border: 1px solid var(--accent-color);
border-radius: 10em;
}
/* #endregion */
/* #region Server error message*/
.custom-form .custom-server-error-message .btn{
width: 100%;
font-size: 1.2em;
font-weight: 700;
cursor: auto;
}
/* #endregion */
/* #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(--heading-color);
}
.custom-buttons .btn-outline-primary:hover {
background-color: white;
color: var(--heading-color);
box-shadow: 0 0 0 0.1em var(--heading-color);
}
/* #endregion */
/* #region Back-button*/
.custom-back-button {
margin-bottom: 1em;
}
.custom-back-button a{
width: 50%;
}
.custom-back-button a .btn{
width: 50%;
background-color: var(--accent-color);
color: white;
border-color: var(--accent-color);
font-weight: 700;
}
.custom-back-button a button:hover{
background-color: white;
border-color: var(--accent-color);
color:var(--accent-color);
}
.custom-back-button a .btn i{
margin-right: 0.5em;
}
/* #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/update-doctor-user/update-doctor-user-data/components/update-doctor-user-data-form/update-doctor-user-data-form.component.html
View file @ ac879c28
<p>update-doctor-user-data-form works!</p> <div class="cutom-child" dir="rtl">
<div class="custom-form">
<!-- #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 #form="ngForm" (ngSubmit)="onSubmit()"
class="text-center custom-form-container" autocomplete="off">
<!-- #region User name-->
<div class="form-group mb-3 custom-field">
<!-- #region Field label-->
<label for="userName" class="col-form-label custom-label">
اسم المستخدم
<span class="text-danger">*</span>
</label>
<!-- #endregion -->
<!-- #region Fiels input-->
<input type="text" class="form-control text-center custom-input" placeholder="ادخل اسم المستخدم" dir="rtl"
[(ngModel)]="formModel.userName" name="userName"
#userName="ngModel" required maxlength="50">
<!-- #endregion -->
<!-- #region Field errors-->
<div *ngIf="(userName.touched || userName.dirty) && (userName.errors)" class="custom-error-message">
<p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
<!-- #endregion -->
</div>
<!-- #endregion -->
<!-- #region password-->
<div class="form-group mb-3 custom-field">
<!-- #region Field label-->
<label for="password" class="col-form-label custom-label">
كلمة السر
<span>(اختياري)</span>
</label>
<!-- #endregion -->
<!-- #region Fiels input-->
<input type="password" class="form-control text-center custom-input" placeholder="ادخل كلمة السر" dir="rtl"
[(ngModel)]="formModel.password" name="password"
#password="ngModel" maxlength="50">
<!-- #endregion -->
<!-- #region Field errors-->
<div *ngIf="(password.touched || password.dirty) && (password.errors)" class="custom-error-message">
<p class="text-danger">
</p>
</div>
<!-- #endregion -->
</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]="!form.dirty || form.invalid">
حفظ
<i class="bi bi-save"></i>
</button>
</div>
<!-- #endregion -->
</form>
</div>
</div>
\ No newline at end of file
Clinics.Frontend/src/app/usecases/admin/update-doctor-user/update-doctor-user-data/components/update-doctor-user-data-form/update-doctor-user-data-form.component.ts
View file @ ac879c28
import { Component } from '@angular/core'; import { Component, Input } from '@angular/core';
import { updateDoctorUserQuery } from '../../classes/updateDoctorUserQuery';
@Component({ @Component({
selector: 'app-update-doctor-user-data-form', selector: 'app-update-doctor-user-data-form',
...@@ -7,4 +8,12 @@ import { Component } from '@angular/core'; ...@@ -7,4 +8,12 @@ import { Component } from '@angular/core';
}) })
export class UpdateDoctorUserDataFormComponent { export class UpdateDoctorUserDataFormComponent {
isFailure: boolean = false;
errorMessage: string;
@Input("formModel") formModel: updateDoctorUserQuery;
onSubmit(): void {
}
} }
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