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*/
.custom-form {
width: 50%;
......@@ -43,13 +68,13 @@
.custom-buttons .btn-outline-primary {
color: white;
background-color: var(--accent-color);
background-color: var(--heading-color);
}
.custom-buttons .btn-outline-primary:hover {
background-color: white;
color: var(--accent-color);
box-shadow: 0 0 0 0.1em var(--accent-color);
color: var(--heading-color);
box-shadow: 0 0 0 0.1em var(--heading-color);
}
/* #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 @@
</div>
<!-- #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-->
<div class="form-group mb-3 custom-field">
<!-- #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">
<label for="username" class="col-form-label custom-label">
اسم المستخدم
<span class="text-danger">*</span>
</label>
<div class="accordion-body">
<!-- #region Username-->
<div class="form-group mb-3 custom-field">
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم المستخدم" dir="ltr"
<label for="username" class="col-form-label custom-label">
اسم المستخدم
<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"
class="custom-error-message">
#userName="ngModel" required maxlength="50"
>
<p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<div *ngIf="(userName.touched || userName.dirty || isInvalid) && (userName.errors)"
class="custom-error-message">
</div>
<p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
<!-- #endregion -->
</div>
<!-- #region Password-->
<div class="form-group mb-3 custom-field">
</div>
<!-- #endregion -->
<!-- #region Password-->
<div class="form-group mb-3 custom-field">
<label for="password" class="col-form-label custom-label">
كلمة المرور
<span class="text-danger">*</span>
</label>
<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"
<input
type="password" class="form-control text-center custom-input"
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"
class="custom-error-message">
<div *ngIf="(password.touched || password.dirty || isInvalid) && (password.errors)"
class="custom-error-message">
<p class="text-danger">
{{
password.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<p class="text-danger">
{{
password.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</div>
</div>
<!-- #endregion -->
</div>
</div>
</div>
</div>
<!-- #endregion -->
<!-- #region FirstName-->
<div class="form-group mb-3 custom-field">
<!-- #region Personal info-->
<div class="accordion">
<div class="accordion-item">
<label for="firstName" class="col-form-label custom-label">
الاسم
<span class="text-danger">*</span>
</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"
(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>
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل الاسم" dir="rtl"
<div id="collapseTwo" class="accordion-collapse collapse" [class.show]="isInvalid" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
[(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"
class="custom-error-message">
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل الاسم" dir="rtl"
<p class="text-danger">
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
[(ngModel)]="formModel.firstName" name="firstName"
</div>
#firstName="ngModel" required maxlength="50"
>
</div>
<!-- #endregion -->
<div *ngIf="(firstName.touched || firstName.dirty || isInvalid) && (firstName.errors)"
class="custom-error-message">
<!-- #region MiddleName-->
<div class="form-group mb-3 custom-field">
<p class="text-danger">
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<label for="middleName" class="col-form-label custom-label">
اسم الأب
<span class="text-danger">*</span>
</label>
</div>
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم الأب" dir="rtl"
</div>
<!-- #endregion -->
[(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"
class="custom-error-message">
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم الأب" dir="rtl"
<p class="text-danger">
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
[(ngModel)]="formModel.middleName" name="middleName"
</div>
#middleName="ngModel" required maxlength="50"
>
</div>
<!-- #endregion -->
<div *ngIf="(middleName.touched || middleName.dirty || isInvalid) && (middleName.errors)"
class="custom-error-message">
<!-- #region MiddleName-->
<div class="form-group mb-3 custom-field">
<p class="text-danger">
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<label for="lastName" class="col-form-label custom-label">
الكنية
<span class="text-danger">*</span>
</label>
</div>
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل الكنية" dir="rtl"
</div>
<!-- #endregion -->
[(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"
class="custom-error-message">
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل الكنية" dir="rtl"
<p class="text-danger">
{{
lastName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
[(ngModel)]="formModel.lastName" name="lastName"
</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>
<!-- #endregion -->
<!-- #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"
[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>
<button type="submit" class="btn btn-outline-primary"
[disabled]="createDoctorUserForm.pristine">
حفظ
<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>
</div>
</div>
</div>
</div>
</div>
<!-- #endregion -->
</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 {
formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand();
isFailure: boolean = false;
isInvalid: boolean = false;
errorMessage: string = '';
isUserSectionOpen:boolean = true;
isPersonalInfoSectionOpen:boolean = false;
isOptionsSectionOpen:boolean = false;
//#endregion
// #region on submit
onSubmit(): void {
console.table(this.loginForm);
if (this.loginForm.valid) {
this.isInvalid = false;
this.isFailure = false;
this.errorMessage = '';
......@@ -42,7 +47,9 @@ export class CreateDoctorUserFormComponent {
if (result.status === false) {
this.isFailure = true;
this.errorMessage = result.errorMessage!;
this.scroller.scrollToPosition([0,0])
this.scroller.scrollToPosition([0,0]);
this.loginForm.form.markAsPristine();
}
else {
this.toastrService.success("تم إضافة الطبيب بنجاح ✔");
......@@ -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.scroller.scrollToPosition([0,0]);
}
}
......
Clinics.Frontend/src/app/usecases/shared/components/template/header/header.component.css
View file @ 7c8c4cbd
......@@ -15,6 +15,7 @@
font-weight: 700;
color: white;
border-color: var(--accent-color);
background-color: var(--accent-color);
}
.custom-buttons .btn-outline-secondary {
......
Clinics.Frontend/src/styles/templateConstants.css
View file @ 7c8c4cbd
......@@ -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 */
:root {
--background-color: #ffffff;
--background-color: #f7ffff;
/* --background-color: #ffffff; */
/* Background color for the entire website, including individual sections */
--default-color: #444444;
/* Default color used for the majority of the text content across the entire website */
--heading-color: #2c4964;
/* 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 */
--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. */
......
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