Skip to content

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

(F) Edit layout in admin pages

parent e01bbc37
Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 267 deletions
Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.css
View file @ a212c5b9
......@@ -25,7 +25,7 @@
/* #region Form card*/
.custom-form {
width: 50%;
width: 60%;
margin: auto;
padding: 1em;
border: 1px solid var(--accent-color);
......@@ -34,7 +34,7 @@
/* #endregion */
/* #region Title*/
.custom-form .custom-title h3 {
.custom-form .custom-form-title h3 {
width: 50%;
margin: auto;
padding: 0.5em;
......
Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.html
View file @ a212c5b9
<div dir="rtl" class="mt-5 mb-5 custom-form">
<div class="cutom-child" dir="rtl">
<section class="section">
<div dir="rtl" class="mb-5 custom-form">
<!-- #region Title-->
<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 -->
<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>
<!-- #region Title-->
<div class="text-center custom-form-title mb-4">
<h3 style="font-weight: 800;">إضافة طبيب</h3>
</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-->
<div class="form-group mb-3 custom-field">
<label for="username" class="col-form-label custom-label">
اسم المستخدم
<span class="text-danger">*</span>
</label>
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم المستخدم" dir="ltr"
[(ngModel)]="formModel.userName" name="userName"
#userName="ngModel" required maxlength="50"
>
<div *ngIf="(userName.touched || userName.dirty || isInvalid) && (userName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</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 -->
<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>
<!-- #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>
<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 || isInvalid) && (password.errors)"
class="custom-error-message">
<p class="text-danger">
{{
password.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<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-->
<div class="form-group mb-3 custom-field">
<label for="username" class="col-form-label custom-label">
اسم المستخدم
<span class="text-danger">*</span>
</label>
<input
type="text" class="form-control text-center custom-input"
placeholder="ادخل اسم المستخدم" dir="ltr"
[(ngModel)]="formModel.userName" name="userName"
#userName="ngModel" required maxlength="50"
>
<div *ngIf="(userName.touched || userName.dirty || isInvalid) && (userName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
userName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</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>
<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 || isInvalid) && (password.errors)"
class="custom-error-message">
<p class="text-danger">
{{
password.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</div>
<!-- #endregion -->
</div>
</div>
<!-- #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-->
<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"
#firstName="ngModel" required maxlength="50"
>
<div *ngIf="(firstName.touched || firstName.dirty || isInvalid) && (firstName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</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"
[(ngModel)]="formModel.middleName" name="middleName"
#middleName="ngModel" required maxlength="50"
>
<div *ngIf="(middleName.touched || middleName.dirty || isInvalid) && (middleName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</div>
<!-- #endregion -->
<!-- #region LastName-->
<div class="form-group mb-3 custom-field">
<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 || isInvalid) && (lastName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
lastName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
<!-- #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>
<!-- #endregion -->
<div id="collapseTwo" class="accordion-collapse collapse" [class.show]="isInvalid" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<!-- #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"
#firstName="ngModel" required maxlength="50"
>
<div *ngIf="(firstName.touched || firstName.dirty || isInvalid) && (firstName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
firstName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</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"
[(ngModel)]="formModel.middleName" name="middleName"
#middleName="ngModel" required maxlength="50"
>
<div *ngIf="(middleName.touched || middleName.dirty || isInvalid) && (middleName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
middleName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</div>
<!-- #endregion -->
<!-- #region LastName-->
<div class="form-group mb-3 custom-field">
<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 || isInvalid) && (lastName.errors)"
class="custom-error-message">
<p class="text-danger">
{{
lastName.errors['required'] ? 'هذا الحقل مطلوب'
: ''
}}
</p>
</div>
</div>
<!-- #endregion -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- #endregion -->
<!-- #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">
<button type="submit" class="btn btn-outline-primary"
[disabled]="createDoctorUserForm.pristine">
حفظ
<i class="bi bi-save"></i>
</button>
<!-- #endregion -->
<!-- #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">
<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>
</div>
</div>
<!-- #endregion -->
</form>
<!-- #endregion -->
</form>
</div>
</section>
</div>
\ No newline at end of file
Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component.css
View file @ a212c5b9
/* #region custom*/
.custom-title {
width: 35%;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--accent-color);
color: var(--heading-color);
}
.custom-title h2 {
font-weight: 700;
}
.custom-create-button button:hover {
font-weight: 900;
background-color: inherit;
......
Clinics.Frontend/src/app/usecases/admin/shared/admin-dashboard/admin-dashboard.component.css
View file @ a212c5b9
::ng-deep .custom-title {
width: fit-content;
padding-bottom: 0.3em;
border-bottom: 2px solid var(--accent-color);
color: var(--heading-color);
}
::ng-deep .custom-title h2 {
font-weight: 700;
}
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