Skip to content

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

(F) Add accordion to form

parent 1fa7ffa4
Hide 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,185 +14,258 @@ ...@@ -14,185 +14,258 @@
</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 Username--> <!-- #region User data-->
<div class="form-group mb-3 custom-field"> <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">
<label for="username" class="col-form-label custom-label"> <div class="accordion-body">
اسم المستخدم
<span class="text-danger">*</span> <!-- #region Username-->
</label> <div class="form-group mb-3 custom-field">
<input <label for="username" class="col-form-label custom-label">
type="text" class="form-control text-center custom-input" اسم المستخدم
placeholder="ادخل اسم المستخدم" dir="ltr" <span class="text-danger">*</span>
</label>
[(ngModel)]="formModel.userName" name="userName" <input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم المستخدم" dir="ltr"
#userName="ngModel" required maxlength="50" [(ngModel)]="formModel.userName" name="userName"
>
<div *ngIf="(userName.touched || userName.dirty) && userName.errors" #userName="ngModel" required maxlength="50"
class="custom-error-message"> >
<p class="text-danger"> <div *ngIf="(userName.touched || userName.dirty || isInvalid) && (userName.errors)"
{{ class="custom-error-message">
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div> <p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div> </div>
<!-- #endregion -->
<!-- #region Password--> </div>
<div class="form-group mb-3 custom-field"> <!-- #endregion -->
<!-- #region Password-->
<div class="form-group mb-3 custom-field">
<label for="password" class="col-form-label custom-label"> <label for="password" class="col-form-label custom-label">
كلمة المرور كلمة المرور
<span class="text-danger">*</span> <span class="text-danger">*</span>
</label> </label>
<input <input
type="password" class="form-control text-center custom-input" type="password" class="form-control text-center custom-input"
placeholder="ادخل كلمة المرور" dir="ltr" placeholder="ادخل كلمة المرور" dir="ltr"
[(ngModel)]="formModel.password" name="password" [(ngModel)]="formModel.password" name="password"
#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">
{{ {{
password.errors['required'] ? 'هذا الحقل مطلوب' password.errors['required'] ? 'هذا الحقل مطلوب'
: '' : ''
}} }}
</p> </p>
</div> </div>
</div>
<!-- #endregion -->
</div>
</div>
</div>
</div> </div>
<!-- #endregion --> <!-- #endregion -->
<!-- #region FirstName--> <!-- #region Personal info-->
<div class="form-group mb-3 custom-field"> <div class="accordion">
<div class="accordion-item">
<label for="firstName" class="col-form-label custom-label"> <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"
<span class="text-danger">*</span> (click)="isPersonalInfoSectionOpen = !isPersonalInfoSectionOpen"
</label> [disabled]="isInvalid">
المعلومات الشخصية
<i *ngIf="!isPersonalInfoSectionOpen" class="fas fa-chevron-down"></i>
<i *ngIf="isPersonalInfoSectionOpen" class="fas fa-chevron-up"></i>
</button>
</div>
<input <div id="collapseTwo" class="accordion-collapse collapse" [class.show]="isInvalid" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
type="text" class="form-control text-center custom-input"
placeholder="ادخل الاسم" dir="rtl"
[(ngModel)]="formModel.firstName" name="firstName" <div class="accordion-body">
#firstName="ngModel" required maxlength="50" <!-- #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>
<div *ngIf="(firstName.touched || firstName.dirty) && firstName.errors" <input
class="custom-error-message"> type="text" class="form-control text-center custom-input"
placeholder="ادخل الاسم" dir="rtl"
<p class="text-danger"> [(ngModel)]="formModel.firstName" name="firstName"
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div> #firstName="ngModel" required maxlength="50"
>
</div> <div *ngIf="(firstName.touched || firstName.dirty || isInvalid) && (firstName.errors)"
<!-- #endregion --> class="custom-error-message">
<!-- #region MiddleName--> <p class="text-danger">
<div class="form-group mb-3 custom-field"> {{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<label for="middleName" class="col-form-label custom-label"> </div>
اسم الأب
<span class="text-danger">*</span>
</label>
<input </div>
type="text" class="form-control text-center custom-input" <!-- #endregion -->
placeholder="ادخل اسم الأب" dir="rtl"
[(ngModel)]="formModel.middleName" name="middleName" <!-- #region MiddleName-->
<div class="form-group mb-3 custom-field">
#middleName="ngModel" required maxlength="50" <label for="middleName" class="col-form-label custom-label">
> اسم الأب
<span class="text-danger">*</span>
</label>
<div *ngIf="(middleName.touched || middleName.dirty) && middleName.errors" <input
class="custom-error-message"> type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم الأب" dir="rtl"
<p class="text-danger"> [(ngModel)]="formModel.middleName" name="middleName"
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div> #middleName="ngModel" required maxlength="50"
>
</div> <div *ngIf="(middleName.touched || middleName.dirty || isInvalid) && (middleName.errors)"
<!-- #endregion --> class="custom-error-message">
<!-- #region MiddleName--> <p class="text-danger">
<div class="form-group mb-3 custom-field"> {{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<label for="lastName" class="col-form-label custom-label"> </div>
الكنية
<span class="text-danger">*</span>
</label>
<input </div>
type="text" class="form-control text-center custom-input" <!-- #endregion -->
placeholder="ادخل الكنية" dir="rtl"
[(ngModel)]="formModel.lastName" name="lastName" <!-- #region LastName-->
<div class="form-group mb-3 custom-field">
#lastName="ngModel" required maxlength="50" <label for="lastName" class="col-form-label custom-label">
> الكنية
<span class="text-danger">*</span>
</label>
<div *ngIf="(lastName.touched || lastName.dirty) && lastName.errors" <input
class="custom-error-message"> type="text" class="form-control text-center custom-input"
placeholder="ادخل الكنية" dir="rtl"
<p class="text-danger"> [(ngModel)]="formModel.lastName" name="lastName"
{{
lastName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div> #lastName="ngModel" required maxlength="50"
>
<div *ngIf="(lastName.touched || lastName.dirty || isInvalid) && (lastName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
lastName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</div>
<!-- #endregion -->
</div>
</div>
</div>
</div> </div>
<!-- #endregion --> <!-- #endregion -->
<!-- #region Buttons--> <!-- #region Buttons-->
<div class="d-grid gap-3 mb-5 custom-buttons custom-form-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">
<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>
<a [routerLink]="['..']"> <a [routerLink]="['..']">
<button type="button" class="btn btn-outline-primary"> <button type="button" class="btn btn-outline-primary">
عودة عودة
<i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-left"></i>
</button> </button>
</a> </a>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- #endregion --> <!-- #endregion -->
</form> </form>
......
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