Commit f2ce0f95 authored by Almouhannad's avatar Almouhannad

(F) Add doctor user card and collection comps

parent 87c88f16
......@@ -6,6 +6,7 @@ import { Roles } from './authentication/classes/roles';
import { ForbiddenComponent } from './usecases/shared/components/errors/forbidden/forbidden.component';
import { NotFoundComponent } from './usecases/shared/components/errors/not-found/not-found.component';
import { TestSignalRComponent } from './notifications/components/test-signal-r/test-signal-r.component';
import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
const routes: Routes = [
{
......@@ -20,12 +21,22 @@ const routes: Routes = [
canActivate: [RoleGuard],
data: { role: Roles.NotRegistered }
},
{
path: 'errors/forbidden',
component: ForbiddenComponent,
canActivate: [RoleGuard],
data: { role: Roles.NotRegistered }
},
{
path: 'admin/doctors',
component: DoctorUsersComponent,
canActivate: [RoleGuard],
// canActivateChild: [RoleGuard],
data: { role: Roles.Admin },
},
// #region Testing SignalR
{
......
......@@ -20,6 +20,8 @@ import { ForbiddenComponent } from './usecases/shared/components/errors/forbidde
import { NotFoundComponent } from './usecases/shared/components/errors/not-found/not-found.component';
import { TestSignalRComponent } from './notifications/components/test-signal-r/test-signal-r.component';
import { SignalRService } from './notifications/services/signal-r.service';
import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
import { DoctorUserComponent } from './usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component';
@NgModule({
......@@ -56,7 +58,9 @@ import { SignalRService } from './notifications/services/signal-r.service';
LoginFormComponent,
ForbiddenComponent,
NotFoundComponent,
TestSignalRComponent
TestSignalRComponent,
DoctorUserComponent,
DoctorUsersComponent,
],
// identifies the root component that Angular should
......
/* #region custom*/
.custom-user-data {
color: var(--heading-color);
font-weight: 700;
}
.custom-user-full-name h3 {
font-weight: 700;
padding-bottom: 0.5em;
border-bottom: 1px solid var(--accent-color);
}
.custom-edit-button button {
font-weight: 900;
background-color: inherit;
border-color: var(--heading-color);
color: var(--heading-color);
}
.custom-edit-button button:hover {
background-color: var(--heading-color);
color: white;
}
/* #endregion */
/* #region collection item */
.collection-item {
background-color: #dff7ff;
text-align: center;
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 35%);
border-radius: 3%;
padding: 80px 20px;
transition: all ease-in-out 0.3s;
height: 100%;
}
.collection-item .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: var(--heading-color);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: 0.3s;
transform-style: preserve-3d;
}
.collection-item .icon i {
color: var(--contrast-color);
font-size: 28px;
transition: ease-in-out 0.3s;
}
.collection-item .icon::before {
position: absolute;
content: "";
left: -8px;
top: -8px;
height: 100%;
width: 100%;
background: color-mix(in srgb, var(--accent-color), transparent 80%);
border-radius: 5px;
transition: all 0.3s ease-out 0s;
transform: translateZ(-1px);
}
.collection-item:hover {
box-shadow: 2px 2px 2px var(--accent-color)
}
/* #endregion */
\ No newline at end of file
<div class="collection-item">
<!-- #region icon -->
<div class="icon">
<i class="fas fa-user-md"></i>
</div>
<!-- #endregion -->
<!-- #region Name-->
<div class="mb-3" class="custom-user-full-name">
<h3>د. رغدان عدنان ربيع</h3>
</div>
<!-- #endregion -->
<!-- #region details-->
<div class="custom-user-data mb-4 mt-4">
<span>اسم المستخدم: </span>
<span>almouhannad.hafez</span>
</div>
<!-- #endregion -->
<!-- #region buttons-->
<div class="d-grid gap-3 custom-edit-button">
<button class="btn btn-outline-secondary">تعديل</button>
</div>
<!-- #endregion -->
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-doctor-user',
templateUrl: './doctor-user.component.html',
styleUrl: './doctor-user.component.css'
})
export class DoctorUserComponent {
}
/* #region custom*/
.custom-title {
width: 31%;
padding-bottom: 0.3em;
border-bottom: 2px solid var(--accent-color);
color: var(--heading-color);
}
.custom-title h2 {
font-weight: 700;
}
/* #endregion */
\ No newline at end of file
<div class="custom-child" dir="rtl" style="cursor: auto;">
<section class="section">
<!-- #region Title -->
<div class="container text-center mb-5 custom-title">
<h2>الأطباء المسجلون في النظام:</h2>
</div>
<!-- #endregion -->
<!-- #region container-->
<div class="container">
<div class="row gy-5 ">
<div class="col-lg-4 col-md-6">
<app-doctor-user></app-doctor-user>
</div>
</div>
</div>
<!-- #endregion -->
</section>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-doctor-users',
templateUrl: './doctor-users.component.html',
styleUrl: './doctor-users.component.css'
})
export class DoctorUsersComponent {
}
......@@ -54,7 +54,7 @@
[class]="{'btn-outline-primary': isSelected('Admin-Receptionists'), 'btn-outline-secondary': !isSelected('Admin-Receptionists')}"
(click)="selectButton('Admin-Receptionists')">موظفو الاستقبال</button></a></li>
<li><a><button class="btn"
<li><a [routerLink]="['admin/doctors']"><button class="btn"
[class]="{'btn-outline-primary': isSelected('Admin-Dorctors'), 'btn-outline-secondary': !isSelected('Admin-Dorctors')}"
(click)="selectButton('Admin-Dorctors')">الأطباء</button></a></li>
......
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