Skip to content

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

(F) Add accordion to form

parent 1fa7ffa4
Show whitespace changes
Inline Side-by-side
Showing with 248 additions and 133 deletions
Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.css
View file @ 7c8c4cbd
/* #region Accordion*/
.accordion {
margin-bottom: 1em;
}
.accordion-header{
border: none;
}
.accordion-header .accordion-button{
border: none;
}
.accordion-item {
border: none;
}
.custom-accordion-header .btn-primary{
width: 100%;
background-color: var(--heading-color);
font-weight: 700;
}
/* #endregion */
/* #region Form card*/ /* #region Form card*/
.custom-form { .custom-form {
width: 50%; width: 50%;
...@@ -43,13 +68,13 @@ ...@@ -43,13 +68,13 @@
.custom-buttons .btn-outline-primary { .custom-buttons .btn-outline-primary {
color: white; color: white;
background-color: var(--accent-color); background-color: var(--heading-color);
} }
.custom-buttons .btn-outline-primary:hover { .custom-buttons .btn-outline-primary:hover {
background-color: white; background-color: white;
color: var(--accent-color); color: var(--heading-color);
box-shadow: 0 0 0 0.1em var(--accent-color); box-shadow: 0 0 0 0.1em var(--heading-color);
} }
/* #endregion */ /* #endregion */
......
Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.html
View file @ 7c8c4cbd
...@@ -14,7 +14,25 @@ ...@@ -14,7 +14,25 @@
</div> </div>
<!-- #endregion --> <!-- #endregion -->
<form #createDoctorUserForm="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off"> <form #createDoctorUserForm="ngForm" (ngSubmit)="onSubmit()" class="text-center custom-form-container" autocomplete="off">
<!-- #region User data-->
<div class="accordion">
<div class="accordion-item">
<div class="custom-accordion-header">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
(click)="isUserSectionOpen = !isUserSectionOpen"
[disabled]="isInvalid">
معلومات الحساب
<i *ngIf="!isUserSectionOpen" class="fas fa-chevron-down"></i>
<i *ngIf="isUserSectionOpen" class="fas fa-chevron-up"></i>
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse show" [class.show]="isInvalid" ngClass="{'show': isInvalid}" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<!-- #region Username--> <!-- #region Username-->
<div class="form-group mb-3 custom-field"> <div class="form-group mb-3 custom-field">
...@@ -33,7 +51,7 @@ ...@@ -33,7 +51,7 @@
#userName="ngModel" required maxlength="50" #userName="ngModel" required maxlength="50"
> >
<div *ngIf="(userName.touched || userName.dirty) && userName.errors" <div *ngIf="(userName.touched || userName.dirty || isInvalid) && (userName.errors)"
class="custom-error-message"> class="custom-error-message">
<p class="text-danger"> <p class="text-danger">
...@@ -65,7 +83,7 @@ ...@@ -65,7 +83,7 @@
#password="ngModel" required maxlength="50" #password="ngModel" required maxlength="50"
> >
<div *ngIf="(password.touched || password.dirty) && password.errors" <div *ngIf="(password.touched || password.dirty || isInvalid) && (password.errors)"
class="custom-error-message"> class="custom-error-message">
<p class="text-danger"> <p class="text-danger">
...@@ -78,11 +96,36 @@ ...@@ -78,11 +96,36 @@
</div> </div>
</div> </div>
<!-- #endregion --> <!-- #endregion -->
</div>
</div>
</div>
</div>
<!-- #endregion -->
<!-- #region Personal info-->
<div class="accordion">
<div class="accordion-item">
<div class="custom-accordion-header">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
(click)="isPersonalInfoSectionOpen = !isPersonalInfoSectionOpen"
[disabled]="isInvalid">
المعلومات الشخصية
<i *ngIf="!isPersonalInfoSectionOpen" class="fas fa-chevron-down"></i>
<i *ngIf="isPersonalInfoSectionOpen" class="fas fa-chevron-up"></i>
</button>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" [class.show]="isInvalid" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<!-- #region FirstName--> <!-- #region FirstName-->
<div class="form-group mb-3 custom-field"> <div class="form-group mb-3 custom-field">
<label for="firstName" class="col-form-label custom-label"> <label for="firstName" class="col-form-label custom-label">
الاسم الاسم
<span class="text-danger">*</span> <span class="text-danger">*</span>
...@@ -97,7 +140,7 @@ ...@@ -97,7 +140,7 @@
#firstName="ngModel" required maxlength="50" #firstName="ngModel" required maxlength="50"
> >
<div *ngIf="(firstName.touched || firstName.dirty) && firstName.errors" <div *ngIf="(firstName.touched || firstName.dirty || isInvalid) && (firstName.errors)"
class="custom-error-message"> class="custom-error-message">
<p class="text-danger"> <p class="text-danger">
...@@ -129,7 +172,7 @@ ...@@ -129,7 +172,7 @@
#middleName="ngModel" required maxlength="50" #middleName="ngModel" required maxlength="50"
> >
<div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors" <div *ngIf="(middleName.touched || middleName.dirty || isInvalid) && (middleName.errors)"
class="custom-error-message"> class="custom-error-message">
<p class="text-danger"> <p class="text-danger">
...@@ -144,7 +187,7 @@ ...@@ -144,7 +187,7 @@
</div> </div>
<!-- #endregion --> <!-- #endregion -->
<!-- #region MiddleName--> <!-- #region LastName-->
<div class="form-group mb-3 custom-field"> <div class="form-group mb-3 custom-field">
<label for="lastName" class="col-form-label custom-label"> <label for="lastName" class="col-form-label custom-label">
...@@ -161,7 +204,7 @@ ...@@ -161,7 +204,7 @@
#lastName="ngModel" required maxlength="50" #lastName="ngModel" required maxlength="50"
> >
<div *ngIf="(lastName.touched || lastName.dirty) && lastName.errors" <div *ngIf="(lastName.touched || lastName.dirty || isInvalid) && (lastName.errors)"
class="custom-error-message"> class="custom-error-message">
<p class="text-danger"> <p class="text-danger">
...@@ -176,11 +219,34 @@ ...@@ -176,11 +219,34 @@
</div> </div>
<!-- #endregion --> <!-- #endregion -->
</div>
</div>
</div>
</div>
<!-- #endregion -->
<!-- #region Buttons--> <!-- #region Buttons-->
<div class="accordion">
<div class="accordion-item">
<div class="custom-accordion-header">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"
(click)="isOptionsSectionOpen = !isOptionsSectionOpen"
[disabled]="isInvalid">
خيارات
<i *ngIf="!isOptionsSectionOpen" class="fas fa-chevron-down"></i>
<i *ngIf="isOptionsSectionOpen" class="fas fa-chevron-up"></i>
</button>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="d-grid gap-3 mb-5 custom-buttons custom-form-buttons"> <div class="d-grid gap-3 mb-5 custom-buttons custom-form-buttons">
<button type="submit" class="btn btn-outline-primary" <button type="submit" class="btn btn-outline-primary"
[disabled]="!createDoctorUserForm.dirty || createDoctorUserForm.invalid"> [disabled]="createDoctorUserForm.pristine">
حفظ حفظ
<i class="bi bi-save"></i> <i class="bi bi-save"></i>
</button> </button>
...@@ -192,6 +258,13 @@ ...@@ -192,6 +258,13 @@
</button> </button>
</a> </a>
</div> </div>
</div>
</div>
</div>
</div>
</div>
<!-- #endregion --> <!-- #endregion -->
......
Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.ts
View file @ 7c8c4cbd
...@@ -26,13 +26,18 @@ export class CreateDoctorUserFormComponent { ...@@ -26,13 +26,18 @@ export class CreateDoctorUserFormComponent {
formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand(); formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand();
isFailure: boolean = false; isFailure: boolean = false;
isInvalid: boolean = false;
errorMessage: string = ''; errorMessage: string = '';
isUserSectionOpen:boolean = true;
isPersonalInfoSectionOpen:boolean = false;
isOptionsSectionOpen:boolean = false;
//#endregion //#endregion
// #region on submit // #region on submit
onSubmit(): void { onSubmit(): void {
console.table(this.loginForm);
if (this.loginForm.valid) { if (this.loginForm.valid) {
this.isInvalid = false;
this.isFailure = false; this.isFailure = false;
this.errorMessage = ''; this.errorMessage = '';
...@@ -42,7 +47,9 @@ export class CreateDoctorUserFormComponent { ...@@ -42,7 +47,9 @@ 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]) this.scroller.scrollToPosition([0,0]);
this.loginForm.form.markAsPristine();
} }
else { else {
this.toastrService.success("تم إضافة الطبيب بنجاح ✔"); this.toastrService.success("تم إضافة الطبيب بنجاح ✔");
...@@ -50,7 +57,14 @@ export class CreateDoctorUserFormComponent { ...@@ -50,7 +57,14 @@ export class CreateDoctorUserFormComponent {
} }
} }
) )
}
else {
this.isInvalid = true;
this.isOptionsSectionOpen = true;
this.isPersonalInfoSectionOpen = true;
this.isOptionsSectionOpen = true;
this.loginForm.form.markAsPristine(); this.loginForm.form.markAsPristine();
this.scroller.scrollToPosition([0,0]);
} }
} }
......
Clinics.Frontend/src/app/usecases/shared/components/template/header/header.component.css
View file @ 7c8c4cbd
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
font-weight: 700; font-weight: 700;
color: white; color: white;
border-color: var(--accent-color); border-color: var(--accent-color);
background-color: var(--accent-color);
} }
.custom-buttons .btn-outline-secondary { .custom-buttons .btn-outline-secondary {
......
Clinics.Frontend/src/styles/templateConstants.css
View file @ 7c8c4cbd
...@@ -7,13 +7,15 @@ ...@@ -7,13 +7,15 @@
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */ /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { :root {
--background-color: #ffffff; --background-color: #f7ffff;
/* --background-color: #ffffff; */
/* Background color for the entire website, including individual sections */ /* Background color for the entire website, including individual sections */
--default-color: #444444; --default-color: #444444;
/* Default color used for the majority of the text content across the entire website */ /* Default color used for the majority of the text content across the entire website */
--heading-color: #2c4964; --heading-color: #2c4964;
/* Color for headings, subheadings and title throughout the website */ /* Color for headings, subheadings and title throughout the website */
--accent-color: #1977cc; --accent-color: #05a9b2;
/* --accent-color: #1977cc; */
/* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */ /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--surface-color: #ffffff; --surface-color: #ffffff;
/* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */ /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
......
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