(F) Add scroll to top behavior

Clinics.Frontend/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { EmployeeSerialNumberPopUpComponent } from './components/receptionist/em
 import { EmployeeComponent } from './components/receptionist/employee/employee.component';
 import { WaitingListService } from './services/waitingList/waiting-list.service';
 import { EmployeesDataService } from './services/employees/employees-data.service';
+import { ScrollToTopDirective } from './directives/scroll-to-top.directive';
 
 
 @NgModule({
@@ -104,6 +105,7 @@ import { EmployeesDataService } from './services/employees/employees-data.servic
     CreateEmployeeFormComponent,
     EmployeeSerialNumberPopUpComponent,
     EmployeeComponent,
+    ScrollToTopDirective,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/admin/create-doctor-user-form/create-doctor-user-form.component.html

@@ -6,7 +6,7 @@
             <div class="container text-center mb-3">
       
                 <div class="custom-back-button">
-                  <a [routerLink]="['..']">
+                  <a [routerLink]="['..']" appScrollToTop>
                     <button class="btn btn-outline-primary">
                       عودة<i class="bi bi-arrow-left"></i>
                     </button>

Clinics.Frontend/src/app/components/admin/doctor-user/doctor-user.component.html

@@ -23,7 +23,7 @@
     <!-- #region buttons-->
 
 
-    <a [routerLink]="['update',doctorUser.id]" class="d-grid gap-3 custom-edit-button">
+    <a [routerLink]="['update',doctorUser.id]" class="d-grid gap-3 custom-edit-button" appScrollToTop>
         <button class="btn btn-outline-secondary">
             تعديل <i class="bi bi-pencil-fill"></i>
         </button>

Clinics.Frontend/src/app/components/admin/doctor-users/doctor-users.component.html

@@ -10,7 +10,7 @@
 
         <!-- #region buttons-->
         <div class="text-center custom-create-button">
-            <a [routerLink]="['create']"><button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة طبيب +</button></a>
+            <a [routerLink]="['create']" appScrollToTop><button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة طبيب +</button></a>
         </div>
         <!-- #endregion -->
 

Clinics.Frontend/src/app/components/admin/update-doctor-user/update-doctor-user.component.html

@@ -6,7 +6,7 @@
     <div class="container text-center mb-3 custom-title">
       
       <div class="custom-back-button">
-        <a [routerLink]="['../..']">
+        <a [routerLink]="['../..']" appScrollToTop>
           <button class="btn btn-outline-primary">
             عودة<i class="bi bi-arrow-left"></i>
           </button>

Clinics.Frontend/src/app/components/receptionist/waiting-list/waiting-list.component.html

@@ -10,7 +10,7 @@
 
         <!-- #region buttons-->
         <div class="custom-bttuons-after-title custom-create-button" >
-            <a [routerLink]="['create']"><button class="btn btn-lg btn-outline-success mb-5">إضافة +</button></a>
+            <a [routerLink]="['create']" appScrollToTop><button class="btn btn-lg btn-outline-success mb-5">إضافة +</button></a>
         </div>
         <!-- #endregion -->
 

Clinics.Frontend/src/app/components/shared/template/header/header.component.css

 /* #region Custom */
 .custom-app-name {
-    font-size: 30px;
+    font-size: 1.8em;
     font-weight: 700;
     color: var(--heading-color);
 }

Clinics.Frontend/src/app/components/shared/template/header/header.component.html

@@ -50,15 +50,15 @@
                             </ul>
                         </li>
 
-                        <li><a [routerLink]="['admin/receptionists']"><button class="btn"
+                        <li><a [routerLink]="['admin/receptionists']" appScrollToTop><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Admin-Receptionists'), 'btn-outline-secondary': !isSelected('Admin-Receptionists')}"
                                     (click)="showDropdown=false; selectButton('Admin-Receptionists')">موظفو الاستقبال</button></a></li>
 
-                        <li><a [routerLink]="['admin/doctors']"><button class="btn"
+                        <li><a [routerLink]="['admin/doctors']" appScrollToTop><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Admin-Dorctors'), 'btn-outline-secondary': !isSelected('Admin-Dorctors')}"
                                     (click)="showDropdown=false; selectButton('Admin-Dorctors')">الأطباء</button></a></li>
 
-                        <li><a [routerLink]="'home'"><button class="btn"
+                        <li><a [routerLink]="'home'" appScrollToTop><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
                                     (click)="showDropdown=false; selectButton('Home')">الصفحة الرئيسية</button></a></li>
 
@@ -80,7 +80,7 @@
                             </ul>
                         </li>
 
-                        <li><a [routerLink]="'home'"><button class="btn"
+                        <li><a [routerLink]="'home'" appScrollToTop><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
                                     (click)="showDropdown=false; selectButton('Home')">الصفحة الرئيسية</button></a></li>
 
@@ -99,7 +99,7 @@
                                     class="bi bi-chevron-down toggle-dropdown"></i></button>
                             <ul [ngClass]="{'show': showDropdown}">
                                 <li><a (click)="openPopUp(employeeSerialNumber) ;showDropdown = false;">الاستعلام عن موظف</a></li>
-                                <li><a (click)="showDropdown = false;" [routerLink]="['receptionist/employees/create']">إضافة موظف</a></li>
+                                <li><a (click)="showDropdown = false;" [routerLink]="['receptionist/employees/create']" appScrollToTop>إضافة موظف </a></li>
                                 <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
                             </ul>
                         </li>
@@ -108,11 +108,11 @@
                             [class]="{'btn-outline-primary': isSelected('RecDotctors'), 'btn-outline-secondary': !isSelected('RecDotctors')}"
                             (click)="showDropdown=false; selectButton('RecDotctors')">الأطباء</button></a></li>
 
-                        <li><a [routerLink]="'receptionist/waitinglist'"><button class="btn"
+                        <li><a [routerLink]="'receptionist/waitinglist'" appScrollToTop><button class="btn"
                             [class]="{'btn-outline-primary': isSelected('WaitingList'), 'btn-outline-secondary': !isSelected('WaitingList')}"
                             (click)="showDropdown=false; selectButton('WaitingList')">قائمة الانتظار</button></a></li>
 
-                        <li><a [routerLink]="'home'"><button class="btn"
+                        <li><a [routerLink]="'home'"><button class="btn" appScrollToTop
                                     [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
                                     (click)="showDropdown=false; selectButton('Home')">الصفحة الرئيسية</button></a></li>
 

Clinics.Frontend/src/app/directives/scroll-to-top.directive.ts

+import { Directive } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { ViewportScroller } from '@angular/common';
+
+@Directive({
+  selector: '[appScrollToTop]'
+})
+export class ScrollToTopDirective {
+  constructor(private viewportScroller: ViewportScroller, private router: Router) { }
+
+  ngAfterViewInit() {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.viewportScroller.scrollToPosition([0, 0]);
+      }
+    });
+  }
+}
\ No newline at end of file