gohary

package-lock.json

@@ -936,20 +936,24 @@
         "@types/jasmine": "*"
       }
     },
-    "@types/jquery": {
-      "version": "3.3.29",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
-      "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==",
-      "dev": true,
-      "requires": {
-        "@types/sizzle": "*"
-      }
-    },
     "@types/jwt-decode": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-2.2.1.tgz",
       "integrity": "sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A=="
     },
+    "@types/lodash": {
+      "version": "4.14.119",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.119.tgz",
+      "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw=="
+    },
+    "@types/lodash.isequal": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.3.tgz",
+      "integrity": "sha512-tpTUmHksO2H9RF98Y2w7v06ZeEKAxHPo2ysL0bV5qv5UBweiZl33NFu5QYmYOSxSnHMqBt/vsVsBVeQAcJiokg==",
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/node": {
       "version": "8.9.5",
       "resolved": "http://registry.npmjs.org/@types/node/-/node-8.9.5.tgz",
@@ -973,14 +977,6 @@
       "integrity": "sha512-rI0LGoMiZGUM+tjDakQpwZOvcmQoubiJ7hxqrYU12VRxBuGGvOThxrBOU/QmJKlKg1WG6FMzuvcEyLffvVSsmw==",
       "dev": true
     },
-<<<<<<< HEAD
-    "@types/sizzle": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
-      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
-      "dev": true
-    },
-=======
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -1006,7 +1002,6 @@
         }
       }
     },
->>>>>>> 7ae3b8460841f199ceb5f0e46ef2b6450f62c216
     "@webassemblyjs/ast": {
       "version": "1.7.10",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.10.tgz",
@@ -6022,6 +6017,11 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.0.tgz",
@@ -6423,6 +6423,11 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.mergewith": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
@@ -6928,6 +6933,15 @@
       "resolved": "https://registry.npmjs.org/ng-simple-slideshow/-/ng-simple-slideshow-1.2.6.tgz",
       "integrity": "sha512-XL3JZryBqFUUrdzKfyE2A31aWyslTYAvxZNfntJdwVgCftM6PpI8CgLXoiSHtxRJYuH3kTzdNTYw2bJVUkesQQ=="
     },
+    "ng2-carouselamos": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ng2-carouselamos/-/ng2-carouselamos-3.2.0.tgz",
+      "integrity": "sha512-WG5rNL84vo89e5038AqFrvapBVqz2BjRGv2vduJd6OR+Nt/RPfFyEDQd8SfNqHlNAmZqpnCK7puAUldDjcqh7g==",
+      "requires": {
+        "@types/lodash.isequal": "^4.5.2",
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "ng2-opd-popup": {
       "version": "1.1.21",
       "resolved": "https://registry.npmjs.org/ng2-opd-popup/-/ng2-opd-popup-1.1.21.tgz",
@@ -7803,6 +7817,11 @@
         "find-up": "^2.1.0"
       }
     },
+    "popper.js": {
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
+      "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA=="
+    },
     "portfinder": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.17.tgz",

package.json

@@ -35,6 +35,7 @@
     "date-fns": "^1.30.1",
     "flatpickr": "^4.5.2",
     "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
     "jwt-decode": "^2.2.0",
     "materialize-css": "^1.0.0",
     "moment": "^2.23.0",
@@ -42,13 +43,16 @@
     "ng-hijri-gregorian-datepicker": "^1.0.0",
     "ng-sidebar": "^8.0.0",
     "ng-simple-slideshow": "^1.2.6",
+    "ng2-carouselamos": "^3.2.0",
     "ng2-opd-popup": "^1.1.21",
     "ng2-toastr": "^4.1.2",
     "ngx-hijri-lib": "^1.0.6",
     "ngx-moment": "^3.3.0",
     "ngx-pagination": "^3.2.1",
+    "ngx-quill": "^3.0.0",
     "ngx-spinner": "^6.1.2",
     "ngx-toastr": "^9.1.1",
+    "popper.js": "^1.14.6",
     "rxjs": "~6.3.3",
     "rxjs-compat": "^6.3.3",
     "zone.js": "~0.8.26"
@@ -60,10 +64,6 @@
     "@angular/language-service": "~7.0.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-<<<<<<< HEAD
-    "@types/jquery": "^3.3.29",
-=======
->>>>>>> 7ae3b8460841f199ceb5f0e46ef2b6450f62c216
     "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",

src/app/Internal-Page/circulars-page/circulars-page.component.html

@@ -1,5 +1,3 @@
-  
-  
 <div class="lastTab-w">
   <div class="container">
     <div class="row">

src/app/Internal-Page/circulars-page/circulars-page.component.ts

@@ -26,7 +26,7 @@ export class CircularsPageComponent implements OnInit {
   
     ngOnInit() {
       this.spinner.show();
-    this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, 0).subscribe(
+      this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, 0).subscribe(
       (responce) => {
         console.log(responce);
         this.data = responce['tabs'];

src/app/Internal-Page/events/events.component.ts

@@ -56,7 +56,6 @@ export class EventsComponent implements OnInit {
     this.refresh.next();
     console.log("dddddddd"+new Date())
 
-
   }
   loadEvents(): void {
     this.internalService.getEventNow().subscribe(

src/app/Internal-Page/hospital-content/hospital-content.component.html

@@ -1,7 +1,6 @@
 <div class="hospitalContent-w">
   <div class="container">
     <div class="row">
-
         <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
             <div class="col-6 col-md-3">
                 <div class="recordsContent-w">
@@ -13,7 +12,7 @@
                           <div *ngIf="i == expandedIndex">  
                               <div class="containetttt" *ngFor="let field of hospital['fields']">
                                 <ul class="list-unstyled nestedMenu">
-                                  <li (click)="showDescriptionDetails(field)" [ngClass]="">
+                                  <li (click)="showDescriptionDetails(field)" [className]=" arabicTemplate ? '' : 'achievementsLangHeading-w' ">
                                     {{field.title}} 
                                   </li>
                                 </ul>

src/app/Internal-Page/hospital-content/hospital-content.component.ts

@@ -1,3 +1,4 @@
+import { ActivatedRoute, Params } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
@@ -11,6 +12,7 @@ import { InternalPageService } from '../../shared/internal-page.service';
 export class HospitalContentComponent implements OnInit {
 
   constructor(private internalService: InternalPageService, 
+              private route: ActivatedRoute,
               private authSer:AuthServiceService) { }
 
   hospitalCenters = [];
@@ -21,6 +23,7 @@ export class HospitalContentComponent implements OnInit {
   bottomArrow:boolean = false;
   
   flag: boolean = false;
+  typePage:string;
   
   catchEvent(event) {
     this.flag = true
@@ -36,18 +39,37 @@ export class HospitalContentComponent implements OnInit {
   ngOnInit() {
 
     this.expandedIndex = 0;
-
-    this.internalService.getHospitalCenterList().subscribe(
-      (responce) => {
-        console.log(responce);
-        this.hospitalCenters = responce['hospitals_centers'];
-        this.showDescriptionDetails(this.hospitalCenters[0].fields[0]);
-        console.log(this.hospitalCenters);
-      },
-      (error) => {
-        console.log(error);
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.typePage = params['typePage'];
       }
-    )
+    );
+
+    if(this.typePage == 'hospital') {
+      this.internalService.getHospitalCenterList('hospitals_centers_list').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.hospitalCenters = responce['hospitals_centers'];
+          this.showDescriptionDetails(this.hospitalCenters[0].fields[0]);
+          console.log(this.hospitalCenters);
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    } else if(this.typePage == 'managements') {
+      this.internalService.getHospitalCenterList('managements_list').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.hospitalCenters = responce['managements'];
+          this.showDescriptionDetails(this.hospitalCenters[0].fields[0]);
+          console.log(this.hospitalCenters);
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
   }
 
   getInformationData(data) {

src/app/Internal-Page/internal-page-content/internal-page-content.component.css

@@ -2,6 +2,14 @@ input,button {
     outline: none;
 }
 
+.contentPage-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px;
+    border: 1px solid #e3dbd0;
+    margin: 30px 0;
+}
+
 .internalPage-w {
     width: 100%;
     padding-bottom: 30px;
@@ -259,11 +267,6 @@ input,button {
     text-decoration: none;
 }
 
-.servicesContent-w {
-    width: 100%;
-    padding: 20px 0;
-}
-
 .carousel-control-next, .carousel-control-prev{
     cursor: pointer !important;
 }
@@ -271,6 +274,7 @@ input,button {
 .slider {
     width: 100%;
     height: 500px;
+    padding: 10px 0;
 }
 
 .slider img {
@@ -278,13 +282,19 @@ input,button {
     height: 500px;
 }
 
-.slider p .extra {
-    color: #bda380;
+.slider  .extra {
+    color: #e6646e;
     font-weight: bold;
     font-size: 18px;
     cursor: pointer;
 }
 
+
+.servicesContent-w {
+    width: 100%;
+    padding: 40px 0;
+}
+
 .servicesContent-w .serviceItem-w {
     width: 100%;
     height: 150px;
@@ -293,7 +303,6 @@ input,button {
     color: #fff;
     text-align: center;
     background: radial-gradient(#e5e5e5, #bda380);
-    border-radius: 10px;
     border-bottom: 4px solid #00a99d;
     transition: all 0.5s;
 }
@@ -331,7 +340,7 @@ input,button {
     width: 100%;
     height: 55px;
     background-color: #f3f0f0;
-    border-radius: 10px;
+    padding: 0 20px;
 }
 
 .eventPart-w .event .now{
@@ -365,6 +374,7 @@ input,button {
 }
 .contentsData-w {
     width: 100%;
+    padding: 20px 0;
 }
 
 .contentsData-w .joinUs-w,
@@ -375,12 +385,13 @@ input,button {
 .contentsData-w .joinUs-w .joinHeader-w,
 .contentsData-w .joinUsEn-w .joinHeader-w {
     width: 100%;
-    height: 42px;
+    height: 45px;
     padding: 10px 0;
     text-align: center;
     font-size: 17px;
     color: #fff;
     background-color: #bda380;
+    box-shadow: 0px 0px 5px #bda380;
 }
 
 .contentsData-w .joinUs-w .joinHeading-w,
@@ -390,13 +401,14 @@ input,button {
     color: #007A71;
     text-shadow: 0px 0px 1px;
     background-color: #f7f7f7;
-    box-shadow: 1px 1px 6px #2525;
+    box-shadow: 0px 0px 1px #ccc;
+    border: 1px solid #f7f7f7;
 }
 
 .contentsData-w .joinUs-w .joinHeading-w h2,
 .contentsData-w .joinUsEn-w .joinHeading-w h2 {
-    font-size: 18px;
-    padding: 10px 0;
+    font-size: 15px;
+    padding: 15px 0;
     text-align: center;
 }
 
@@ -406,7 +418,7 @@ input,button {
     padding: 30px 15px;
     height: 200px;
     margin-top: 2px;
-    box-shadow: 0 2px 6px #ccc;
+    box-shadow: 0 0px 1px #ccc;
 }
 
 .contentsData-w .joinUs-w .dataContent .joinUs-photo,
@@ -451,8 +463,9 @@ input,button {
 }
 .sharingEvent-w .sharingHeader-w {
     width: 100%;
-    padding: 10px 0;
+    padding: 12px 0;
     background-color: #bda380;
+    box-shadow: 0 0 5px #bda380;
 }
 
 .sharingEvent-w .sharingHeader-w h2 {
@@ -466,7 +479,8 @@ input,button {
 .sharingEvent-w .sadDead-w  {
     width: 100%;
     display: inline-block;
-    box-shadow: 0 0 7px #ccc;
+    box-shadow: 0px 0px 1px #ccc;
+    border: 1px solid #f7f7f7;
 }
 
 .sharingEvent-w .congeratolation h2,
@@ -475,7 +489,7 @@ input,button {
     padding: 15px 0;
     text-align: center;
     background-color: #f7f7f7;
-    font-size: 18px;
+    font-size: 17px;
     color: #007A71;
     text-shadow: 0 0 1px;
 }
@@ -484,7 +498,7 @@ input,button {
     width: 100%;
     height: 200px;
     background-color: #fff;
-    box-shadow: 0 2px 6px #ccc;
+    box-shadow: 0 0px 1px #ccc;
     text-align: center;
     padding: 30px 0;
 }
@@ -507,7 +521,7 @@ input,button {
 
 .secondServices-w {
     width: 100%;
-    padding: 40px 0;
+    padding: 20px 0;
     display: inline-block;
 }
 
@@ -539,11 +553,12 @@ input,button {
     height: 200px;;
     background-color: #fff;
     box-shadow: 0 0 1px #ccc;
+    padding: 10px;
 }
 
 .secondServices-w .contentSecondSer-w .contentSer .fieldData-w {
     width: 100%;
-    padding: 20px 0;
+    padding: 5px 0;
 }
 
 .secondServices-w .contentSecondSer-w .contentSer .fieldData-w img{
@@ -559,7 +574,7 @@ input,button {
 .tabs {
     width: 100%;
     display: inline-block;
-    padding: 40px 0;
+    padding: 20px 0;
 }
 
 .tabs .lastTab-w {
@@ -568,15 +583,18 @@ input,button {
 
 .tabs .lastTab-w .headerTab-w {
     width: 100%;
-    padding: 10px 0;
+    padding: 13px 0;
     background-color: #bda380;
     text-align: center;
     color: #fff;
+    font-size: 18px;
+    color: #fff;
+    font-weight: bold;
 }
 
 .tabs .lastTab-w .menuTab-w {
     width: 100%;
-    padding: 10px 0;
+    padding: 5px 0;
     background-color: #f1f1f1;
 }
 
@@ -601,7 +619,8 @@ input,button {
     width: 100%;
     display: inline-block;
     height: 290px;
-    box-shadow: 0 0 6px #ccc;
+    border: 1px solid #ccc;
+    border-top: 0;
 }
 
 .tabs .lastTab-w .menuTabContent-w h2 {
@@ -611,7 +630,7 @@ input,button {
 
 .tabs .lastTab-w .menuTabContent-w ol {
     width: 100%;
-    padding: 20px 0;
+    padding: 20px;
 }
 
 .tabs .lastTab-w .menuTabContent-w ol li {
@@ -633,17 +652,20 @@ input,button {
 .tabs .recods .headerRecords-w {
     width: 100%;
     display: inline-block;
-    padding: 10px 0;
+    padding: 14px 0;
     background-color: #bda380;
     color: #fff;
     text-align: center;
+    font-size: 17px;
+    font-weight: bold;
 }
 
 .tabs .recods .recordsContent-w {
     width: 100%;
     display: inline-block;
-    box-shadow: 0 0 6px #ccc;
-    height: 360px;
+    height: 350px;
+    border: 1px solid #ccc;
+    padding: 0 12px;
 } 
 
 .tabs .recods .recordsContent-w ol {
@@ -700,3 +722,35 @@ input,button {
     background-color: #03b0b3 !important;
     color: #fff !important;
 }
+
+.lectureHeading {
+    font-size: 15px;
+    padding: 10px 60px;
+    cursor: pointer;
+}
+
+.lectureCalenderImg {
+    width: 30px;
+    height: 30px;
+    margin: 0 10px;
+}
+
+@media(max-width: 767px) {
+    .tabs .lastTab-w .menuTab-w ul li {
+        border-left: 0;
+    }
+
+    .internalPage-w .internalHeader-w .notificationList-w li {
+        margin: 0;
+    }
+    .dateW {
+        margin: 20px 0 !important;
+        display: inline-block !important;
+        font-size: 10px !important;
+    }
+
+    .buttonW {
+        margin: 18px 0;
+        font-size: 8px;
+    }
+}

src/app/Internal-Page/internal-page-content/internal-page-content.component.html

@@ -1,258 +1,203 @@
-
-
-    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
-        <div class="servicesContent-w">
-            <div class="container">
-                <div class="row">
-                    
-                    <div class="col-12 col-md-4">
-                        <div class="row">
-                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
-                                <div class="serviceItem-w">
-                                    <a href="{{service.link}}" target="_blank">
-                                            onExtraPage         <img src="{{authSer.pathImg + service.photo}}" />
-                                        <p>{{service.name}}</p>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-    
-                    <div class="col-12 col-md-8">
-                        <div class="slider">
-                            <ngb-carousel>
-                                <ng-template *ngFor="let report of reportsData" ngbSlide>
-                                    <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
-                                    <div class="carousel-caption">
-                                    <p>{{report.description}} <a class="extra" (click)="onExtraPage(report.id)">المزيد</a></p>
-                                    </div>
-                                </ng-template>
-                            </ngb-carousel>
-                        </div>
-                    </div>
-    
-                </div>
-            </div>
-        </div>
-            
-        <div class="eventPart-w">
-            <div class="container">
-                <div class="event">
-                    <div class="row">
-                        <div class="col-12 col-sm-12 ol-md-4">
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <p class="now"> <img src="../../../assets/image/live.png" />  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-            
-        <div class="contentsData-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-sm-12 col-md-4">
-                        <div class="joinUs-w">
-                            <div class="joinHeader-w">
-                                إنضم إلينا
-                            </div>
-                            <div class="joinHeading-w">
-                                <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
-                            </div>
-                            <div class="dataContent">
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">  
+    <div class="container">
+            <div class="contentPage-w">
+                    <div class="servicesContent-w">
+                            <div class="container">
                                 <div class="row">
+                                    
                                     <div class="col-12 col-md-4">
-                                        <div class="joinUs-photo">
-                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
+                                        <div class="row">
+                                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
+                                                <div class="serviceItem-w">
+                                                    <a href="{{service.link}}" target="_blank"><img src="{{authSer.pathImg + service.photo}}" />
+                                                        <p>{{service.name}}</p>
+                                                    </a>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
+                    
                                     <div class="col-12 col-md-8">
-                                        <div class="profileData-w">
-                                            <p>    الموظف :<span>{{joinUs.name}}</span></p>
-                                            <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
-                                            <p>   التاريخ :<span>{{joinUs.date}}</span></p>
+                                        <div class="slider">
+                                                
+                                            <ngb-carousel #myCarousel="ngbCarousel">
+                                                <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
+                                                    <img [src]="[authSer.pathImg + report.photo]" alt="Random first slide">
+                                                    <div class="carousel-caption">
+                                                    <p [innerHTML] = "report.description"></p>
+                                                    <a class="extra" (click)="onExtraPage(report.id)" *ngIf="report.description">المزيد</a>
+                                                    </div>
+                                                </ng-template>
+                                            </ngb-carousel>
                                         </div>
                                     </div>
+                    
                                 </div>
                             </div>
                         </div>
-                        </div>
-                     <div class="col-12 col-md-8">
-                        <div class="sharingEvent-w">
-                            <div class="sharingHeader-w">
-                                <h2>مشاركه اللحظات</h2>
-                            </div>
-                            <div class="row">
-                                <div class="col-12 col-md-6">
-                                    <div class="congeratolation">
-                                        <h2>التهاني</h2>
-                                    </div>
-                                    <div class="content">
-                                        <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
-                                        <p class="event">{{congratulations.name}}</p>
-                                        <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
-                                    </div>
-                                </div>
-                                <div class="col-12 col-md-6">
-                                    <div class="sadDead-w">
-                                        <h2>التعازي</h2>
-                                    </div>
-                                    <div class="content">
-                                        <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
-                                        <p class="event">{{condolences.name}}</p>
-                                        <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
+                            
+                        <div class="eventPart-w">
+                            <div class="container">
+                                <div class="event">
+                                    <div class="row">
+                                        <div class="col-12 col-sm-12 ol-md-4">
+                                        </div>
+                                        <div class="col-12 col-sm-12 col-md-4">
+                                            <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px"/>  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
+                                        </div>
+                                        <div class="col-12 col-sm-12 col-md-4">
+                                            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
+                                        </div>
+                                        <div class="col-12 col-sm-12 col-md-4">
+                                            <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> جدول المحاضرات</p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-                
-            </div>
-        </div>
-            
-        <div class="secondServices-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
-                        <div class="contentSecondSer-w">
-                            <div class="headerSer-w">
-                                {{ser.name}}
-                            </div>
-                            <div class="contentSer">
+                            
+                        <div class="contentsData-w">
+                            <div class="container">
                                 <div class="row">
-                                    <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
-                                        <div class="fieldData-w text-center">
-                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
-                                            <p>{{field.name ? field.name : 'إضافه خدمه'}}</p>
+                                    <div class="col-12 col-sm-12 col-md-4">
+                                        <div class="joinUs-w">
+                                            <div class="joinHeader-w">
+                                                إنضم إلينا
+                                            </div>
+                                            <div class="joinHeading-w">
+                                                <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
+                                            </div>
+                                            <div class="dataContent">
+                                                <div class="row">
+                                                    <div class="col-12 col-md-4">
+                                                        <div class="joinUs-photo">
+                                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-12 col-md-8">
+                                                        <div class="profileData-w">
+                                                            <p>    الموظف :<span>{{joinUs.name}}</span></p>
+                                                            <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
+                                                            <p>   التاريخ :<span>{{joinUs.created_at}}</span></p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        </div>
+                                        <div class="col-12 col-md-8">
+                                        <div class="sharingEvent-w">
+                                            <div class="sharingHeader-w">
+                                                <h2>مشاركه اللحظات</h2>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-12 col-md-6">
+                                                    <div class="congeratolation">
+                                                        <h2>التهانى</h2>
+                                                    </div>
+                                                    <div class="content">
+                                                        <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
+                                                        <p class="event">{{congratulations.name}}</p>
+                                                        <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
+                                                    </div>
+                                                </div>
+                                                <div class="col-12 col-md-6">
+                                                    <div class="sadDead-w">
+                                                        <h2>التعازى</h2>
+                                                    </div>
+                                                    <div class="content">
+                                                        <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
+                                                        <p class="event">{{condolences.name}}</p>
+                                                        <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
+                                
                             </div>
                         </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-            
-        <div class="tabs">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-md-8">
-                        <div class="lastTab-w">
-                            <div class="headerTab-w">
-                                أخر التعاميم
-                            </div>
-                            <div class="menuTab-w">
-                                <ul class="list-unstyled">
-                                    <li (click)="onGetData(0)">التعاميم الداخليه</li>
-                                    <li (click)="onGetData(1)">التعاميم الخارجيه</li>
-                                    <li (click)="onGetData(2)">السياسات</li>
-                                </ul>
-                            </div>
-                            <div class="menuTabContent-w">
-                                <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
-                                <ol>
-                                    <li *ngFor="let data of tabsData">{{data.name}}</li>
-                                </ol>
-                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px">المزيد</button>
+                            
+                        <div class="secondServices-w">
+                            <div class="container" style="height:560px; overflow-y:auto">
+                                <div class="row">
+                                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+                                        <div class="contentSecondSer-w">
+                                            <div class="headerSer-w">
+                                                {{ser.name}}
+                                            </div>
+                                            <div class="contentSer" style="overflow:auto; overflow-x:hidden">
+                                                <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
+                                                    <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
+                                                        <div class="fieldData-w text-center">
+                                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                                                            <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="col-12 col-md-4">
-                        <div class="recods">
-                            <div class="headerRecords-w">
-                                إحصائيات عامه - إنجازات
-                            </div>
-                            <div class="recordsContent-w">
-                                <ol>
-                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
-                                        <p>{{achiev.title}}</p>     
-                                        <div *ngIf="i == expandedIndex">  
-                                            <div class="collapse">  
-                                                <div>  
-                                                    <p>{{achiev.title}}</p>  
-                                                    <p>{{achiev.descripton}}</p>  
-                                                </div>  
-                                            </div>  
-                                        </div>                                  
-                                    </li>
-                                </ol>
+                            
+                        <div class="tabs">
+                            <div class="container">
+                                <div class="row">
+                                    <div class="col-12 col-md-8">
+                                        <div class="lastTab-w">
+                                            <div class="headerTab-w">
+                                                أخر التعاميم
+                                            </div>
+                                            <div class="menuTab-w">
+                                                <ul class="list-unstyled">
+                                                    <li (click)="onGetData(0)">التعاميم الداخليه</li>
+                                                    <li (click)="onGetData(1)">التعاميم الخارجيه</li>
+                                                    <li (click)="onGetData(2)">السياسات</li>
+                                                </ul>
+                                            </div>
+                                            <div class="menuTabContent-w">
+                                                <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
+                                                <ol>
+                                                    <li *ngFor="let data of tabsData">{{data.name}}</li>
+                                                </ol>
+                                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px;border:none;">المزيد</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12 col-md-4">
+                                        <div class="recods">
+                                            <div class="headerRecords-w">
+                                                إحصائيات عامه - إنجازات
+                                            </div>
+                                            <div class="recordsContent-w">
+                                                <ol>
+                                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
+                                                        <p>{{achiev.title}}</p>     
+                                                        <div *ngIf="i == expandedIndex">  
+                                                            <div class="collapse">  
+                                                                <div>  
+                                                                    <p>{{achiev.title}}</p>  
+                                                                    <p>{{achiev.descripton}}</p>  
+                                                                </div>  
+                                                            </div>  
+                                                        </div>                                  
+                                                    </li>
+                                                </ol>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-            </div>
         </div>
-    </ng-template>
+    </div> 
 
-    </div>
-  </div>
+</ng-template>
 
-    <ng-template #englishTemplate>
-        <div class="servicesContent-w">
-            <div class="container">
-                <div class="row">
-                    
-                    <div class="col-12 col-md-4">
-                        <div class="row">
-                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
-                                <div class="serviceItem-w">
-                                    <a href="{{service.link}}" target="_blank">
-                                        <img src="{{authSer.pathImg + service.photo}}" />
-                                        <p>{{service.name_en}}</p>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-    
-                    <div class="col-12 col-md-8">
-                        <div class="slider">
-                            <ngb-carousel>
-                                <ng-template *ngFor="let report of reportsData" ngbSlide>
-                                    <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
-                                    <div class="carousel-caption">
-                                    <p>{{report.description_en}} <a class="extra" (click)="onExtraPage(report.id)">المزيد</a></p>
-                                    </div>
-                                </ng-template>
-                            </ngb-carousel>
-                        </div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
     
-        <div class="eventPart-w hide">
-            <div class="container">
-                <div class="event">
-                    <div class="row">
-                        <div class="col-12 col-sm-12 ol-md-4">
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</span></p>
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
-                        </div>
-                    </div>
-                  </div>
-                </li>
-              </ol>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</ng-template>
 
 
 <ng-template #englishTemplate>
@@ -279,7 +224,8 @@
               <ng-template *ngFor="let report of reportsData" ngbSlide>
                 <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
                 <div class="carousel-caption">
-                  <p>{{report.description_en}}</p>
+                  <p [innerHTML] = "report.description_en"></p>
+                  <a class="extra" (click)="onExtraPage(report.id)">More</a>
                 </div>
               </ng-template>
             </ngb-carousel>
@@ -290,18 +236,21 @@
     </div>
   </div>
 
-  <div class="eventPart-w hide">
+  <div class="eventPart-w">
     <div class="container">
       <div class="event">
         <div class="row">
           <div class="col-12 col-sm-12 ol-md-4">
           </div>
           <div class="col-12 col-sm-12 col-md-4">
-            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event.name ? live_event.name : ' now event now '}}</span></p>
+            <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px;"/>   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</span></p>
           </div>
           <div class="col-12 col-sm-12 col-md-4">
-            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture.name ? next_lecture.name : 'now event now'}}</span></p>
+            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
           </div>
+            <div class="col-12 col-sm-12 col-md-4">
+                <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> Lecture Table</p>
+            </div>
         </div>
       </div>
     </div>
@@ -329,7 +278,7 @@
                   <div class="profileData-w">
                     <p> Employee : <span>{{joinUs.name_en}}</span></p>
                     <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
-                    <p> Date : <span>{{joinUs.date ? joinUs.date : 'not found'}}</span></p>
+                    <p> Date : <span>{{joinUs.created_at ? joinUs.created_at : 'not found'}}</span></p>
                   </div>
                 </div>
               </div>
@@ -365,52 +314,75 @@
             </div>
           </div>
         </div>
-    
-        <div class="tabs">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-md-8">
-                        <div class="lastTab-w">
-                            <div class="headerTab-w">
-                                Latest Circulars
-                            </div>
-                            <div class="menuTab-w">
-                                <ul class="list-unstyled">
-                                    <li (click)="onGetData(0)"> Internal Circulars</li>
-                                    <li (click)="onGetData(1)">External Circulars</li>
-                                    <li (click)="onGetData(2)">Policies</li>
-                                </ul>
-                            </div>
-                            <div class="menuTabContent-w">
-                                <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
-                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                                    <li *ngFor="let data of tabsData">{{data.name_en}}</li>
-                                </ol>
-                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px">more</button>
+
+
+        <div class="secondServices-w">
+                <div class="container" style="height:560px; overflow-y:auto">
+                    <div class="row">
+                        <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+                            <div class="contentSecondSer-w">
+                                <div class="headerSer-w">
+                                    {{ser.name_en}}
+                                </div>
+                                <div class="contentSer" style="overflow:auto; overflow-x:hidden">
+                                    <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
+                                        <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
+                                            <div class="fieldData-w text-center">
+                                                <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                                                <p style="color:#767676; font-size:13px;">{{field.name_en ? field.name_en : 'إضافه خدمه'}}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-md-4">
-                        <div class="recods">
-                            <div class="headerRecords-w">
-                                General Statistics - Achievements
-                            </div>
-                            <div class="recordsContent-w">
-                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
-                                        <p>{{achiev.title_en}}</p>     
-                                        <div *ngIf="i == expandedIndex">  
-                                            <div class="collapse">  
-                                                <div>  
-                                                    <p>{{achiev.title_en}}</p>  
-                                                    <p>{{achiev.descripton_en}}</p>  
-                                                </div>  
-                                            </div>  
-                                        </div>                                  
-                                    </li>
-                                </ol>
-                            </div>
-                        </div>
+                </div>
+            </div>
+    
+       <div class="tabs">
+          <div class="container">
+            <div class="row">
+              <div class="col-12 col-md-8">
+                <div class="lastTab-w">
+                  <div class="headerTab-w">
+                      Latest Circulars
+                  </div>
+                  <div class="menuTab-w">
+                    <ul class="list-unstyled">
+                        <li (click)="onGetData(0)"> Internal Circulars</li>
+                        <li (click)="onGetData(1)">External Circulars</li>
+                        <li (click)="onGetData(2)">Policies</li>
+                    </ul>
+                  </div>
+                  <div class="menuTabContent-w">
+                    <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
+                    <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                        <li *ngFor="let data of tabsData">{{data.name_en}}</li>
+                    </ol>
+                    <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px; border:none;">more</button>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 col-md-4">
+                <div class="recods">
+                    <div class="headerRecords-w">
+                        General Statistics - Achievements
+                    </div>
+                    <div class="recordsContent-w">
+                      <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                        <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
+                            <p>{{achiev.title_en}}</p>     
+                            <div *ngIf="i == expandedIndex">  
+                                <div class="collapse">  
+                                    <div>  
+                                        <p>{{achiev.title_en}}</p>  
+                                        <p>{{achiev.descripton_en}}</p>  
+                                    </div>  
+                                </div>  
+                            </div>                                  
+                        </li>
+                      </ol>
                     </div>
                 </div>
               </div>
@@ -420,5 +392,8 @@
       </div>
     </div>
   </div>
+</ng-template>
+   
+
 
     

src/app/Internal-Page/internal-page-content/internal-page-content.component.ts

@@ -1,23 +1,39 @@
 import { UserService } from './../../shared/user.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
 import { NgxSpinnerService } from 'ngx-spinner';
+import {NgbCarousel,NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';
+
 
 @Component({
   selector: 'app-internal-page-content',
   templateUrl: './internal-page-content.component.html',
-  styleUrls: ['./internal-page-content.component.css']
+  styleUrls: ['./internal-page-content.component.css'],
+  providers: [NgbCarouselConfig],
 })
 export class InternalPageContentComponent implements OnInit {
 
+  @ViewChild('myCarousel') myCarousel: NgbCarousel;
+
+
   constructor(private authSer: AuthServiceService,
     private router:Router,
     private userservice: UserService,
     private internalService: InternalPageService,
     private route: ActivatedRoute,
-    private spinner: NgxSpinnerService,) { }
+    private config: NgbCarouselConfig,
+    private spinner: NgxSpinnerService) {
+      this.config.interval = 10000;
+       this.config.wrap = false;
+      this.config.keyboard = false;
+
+     }
+
+
+  
+
 
     joinUs = [];
     reportsData = [];
@@ -46,34 +62,34 @@ export class InternalPageContentComponent implements OnInit {
       this.flag = false;
     }
 
+
   ngOnInit() {
 
+    this.spinner.show();
+
     this.authSer.arabicTemplate = true;
     this.authSer.arabicLanguage = true;
     this.authSer.englishLanguage = false;
-    this.spinner.show();
+
+    // this.myCarousel.activeId = '2';
 
     //this.spinner.show();
     this.authSer.showDashboardHeader = false;
    //console.log(this.checkTokenExpire);
        //get profile data
     this.userservice.getUserDataProfile();
-    this.spinner.hide();
-    // this.internalService.getParentData().subscribe(
-    //   (responce) => {
-    //     this.parentsPage = responce['parents'];
-    //     console.log(this.parentsPage);
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
+  
     //get slider data
     this.internalService.getSliderData().subscribe(
       (responce) => {
         console.log('responxce', responce);
         this.reportsData = responce['reports'];
+        for(let i = 0; i< this.reportsData.length; i++) {
+          if(this.reportsData[i].description.length > 60) {
+            this.reportsData[i].description = this.reportsData[i].description.substr(0,60);
+            this.reportsData[i].description_en = this.reportsData[i].description_en.substr(0,60);
+          }
+        }
       },
       (error) => {
         console.log(error);
@@ -83,7 +99,6 @@ export class InternalPageContentComponent implements OnInit {
     //get externals list
     this.internalService.getExternalServicesList().subscribe(
       (responce) => {
-        console.log('external_list' , responce);
         this.externalServices = responce['external_services'];
       },
       (error) => {
@@ -104,7 +119,6 @@ export class InternalPageContentComponent implements OnInit {
 
     this.internalService.getCongatoration().subscribe(
       (responce) => {
-        console.log('condddddd' ,responce['event']);
         this.congratulations = responce['event'];
       },
       (error) => {
@@ -114,7 +128,6 @@ export class InternalPageContentComponent implements OnInit {
 
     this.internalService.getCondolences().subscribe(
       (responce) => {
-        console.log('condddddd',responce['event']);
         this.condolences = responce['event'];
       },
       (error) => {
@@ -150,7 +163,6 @@ export class InternalPageContentComponent implements OnInit {
       (responce) => {
         console.log('weeeeeeeeeeeeeeeeeeee', responce);
         this.achievements = responce['achievements'];
-        this.spinner.hide();
       },
       (error) => {
         console.log(error);
@@ -159,11 +171,9 @@ export class InternalPageContentComponent implements OnInit {
 
     this.internalService.getEventNow().subscribe(
       (responce) => {
-        console.log( 'liiiiiiiiive', responce);
         this.live_event = responce['live_lecture'];
-        console.log('liiiiiiiiive eveeeeeeeeeeent' , this.live_event);
         this.next_lecture = responce['next_lecture'];
-        console.log('nexxxxte_lecture' , this.next_lecture);
+        this.spinner.hide();
       },
       (error) => {
         console.log(error);
@@ -172,36 +182,6 @@ export class InternalPageContentComponent implements OnInit {
 
   }
 
-  // onLogin() {
-  //   this.router.navigate(['/login']);
-  // }
-
-  // onGetProfile() {
-  //   console.log('profile/'  + this.authSer.dataLoginUser['id']);
-  //   this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
-  // }
-
-  // //log out function
-  // onLogout() {
-  //   localStorage.clear();
-  //   this.router.navigate(['login']);
-  // }
-
-  // onDashBoard() {
-  //   this.router.navigate(['dashboard/' + this.authSer.dataLoginUser['id']]);
-  // }
-
-  // getListPage(parent) {
-  //   for(let i = 0; i< this.parentsPage.length; i++) {
-  //     if(this.parentsPage[i].id == parent.id) {
-  //       this.parentsPage[i].active = 1;
-  //     } else if(this.parentsPage[0].id != parent.id) {
-  //       this.parentsPage[i].active = 0;
-  //     } else {
-  //      this.parentsPage[i].active = 0;
-  //     }
-  //   }
-  // };
 
   onGetData(numberTab) {
     this.spinner.show();
@@ -244,4 +224,8 @@ export class InternalPageContentComponent implements OnInit {
     this.router.navigate(['InternalPage/circulars']);
   }
 
+  onLectureTable() {
+    this.router.navigate(['InternalPage/events']);
+  }
+
 }

src/app/Internal-Page/internal-page-header/internal-page-header.component.css

@@ -4,7 +4,7 @@ input,button {
 
 .internalHeader-w {
     width: 100%;
-    height: 60px;
+    height: 30px;
     background-color: #e3dfdf;
 
     /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
@@ -18,10 +18,10 @@ input,button {
 }
 
 .internalHeader-w .login  {
-    margin-top: 13px;
     color: #00a99d;
     cursor: pointer;
     text-align: right;
+    padding: 0 40px;
 }
 
 .internalHeader-w .notificationList-w li {
@@ -54,19 +54,18 @@ input,button {
     background-color: #fff;
     border: none;
     color: #ccc;
-    padding: 5px;
+    padding: 0 5px;
+    height: 30px;
 }
 
 .internalHeader-w .searchBtn {
     background-color: #fff;
     border: none;
-    padding: 5px 10px;
-    margin:  0 5px;
+    height: 30px;
 }
 
 .profileData-w img {
     width: 35px;
-    height: 35px;
     border: 1px solid #252525;
     margin: 0 5px;
 }
@@ -79,12 +78,14 @@ input,button {
     outline: none;
     text-shadow: 0px 0px 2px #000;
     font-weight: bold;
+    margin-right: -25px;
 }
 
 .dateW {
     color: #fff;
     text-shadow: 0px 0px 2px #000;
-    font-weight: bold;  
+    font-weight: bold; 
+    display:inline-block  
 }
 
 .internalPage-w .internalHeader-w .notificationList-w .profileData-w .dropdown-toggle::after {
@@ -113,6 +114,7 @@ input,button {
 
 .logoHeader-w .rightLogo-w img {
     margin-top: 15px;
+    margin-right:15px
 }
 
 .logoHeader-w .leftLogo-w img {
@@ -140,7 +142,7 @@ input,button {
 
 .pagesHeader-w {
     width: 100%;
-    background-color: #dac4a6;
+    background-color: #E3DBD0;
     margin-top: -6px;
     position: relative;
 }
@@ -176,14 +178,18 @@ input,button {
     font-size: 20px;
     border: none;
     outline: none;
-    color: #03887f;
-    padding: 14px 16px;
+    color: #00A99D;
+    padding: 14px 5px;
     background-color: inherit;
     font: inherit;
     margin: 0;
     font-weight: bold;
 }
 
+.pagesHeader-w .dropdown .dropbtn {
+    margin: 0 10px;
+}
+
 .pagesHeader-w .navbar a:hover, .dropdown:hover .dropbtn {
 }
 
@@ -193,8 +199,9 @@ input,button {
     background-color: #bea380;
     border-radius: 10px;
     width: 100%;
+    height: 120px;
     left: 0;
-    top: 44px;
+    top: 55px;
     padding: 10px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
@@ -245,8 +252,21 @@ input,button {
     clear: both;
 }
 
+.pagesHeader-w .iconMenu {
+    width: 35px;
+    height: 35px;
+    float: right;
+    margin: 0 5px;
+}
+
+.pagesHeader-w .parentName-w {
+    margin: 10px 5px;
+    display: inline-block;
+}
+
 .navbar {
     width: 100%;
+    padding: 0 !important;
 }
 
 .hyperLink {
@@ -255,16 +275,29 @@ input,button {
 }
 
 .ar,.en {
-    margin: 0 10px;
+    /* margin: 0 10px;
     padding: 5px;
     color: #03887f;
     font-weight: bold;
     width: 30px;
     height: 30px;
     border-radius: 5px;
-    background-color: #ccc;
+    background-color: #FAFAFA;
+    cursor: pointer;
+    transition: all 0.5s; */
+    margin: 0 10px;
+    padding: 5px;
+    padding: 2px 5px;
+    color: #03887f;
+    font-weight: bold;
+    width: 30px;
+    border: 1px solid #bda380;
+    height: 30px;
+    /* border-radius: 5px; */
+    background-color: #FAFAFA;
     cursor: pointer;
     transition: all 0.5s;
+    display: inline-block; 
 }
 
 .ar:hover{
@@ -297,3 +330,75 @@ input,button {
     background-color: #03b0b3 !important;
     color: #fff !important;
 }
+
+.activeLanguageIcon {
+    width: 40px;
+    height: 40px;
+    float: left !important;
+    margin: 0 5px;
+}
+
+@media(max-width: 767px) {
+    .tabs .lastTab-w .menuTab-w ul li {
+        border-left: 0;
+    }
+
+    .internalPage-w .internalHeader-w .notificationList-w li {
+        margin: 0;
+    }
+    .dateW {
+        margin: 20px 0 !important;
+        display: inline-block !important;
+        font-size: 10px !important;
+    }
+
+    .internalHeader-w .notificationList-w .profileData-w .buttonW {
+        font-size: 8px; 
+    }
+
+  
+    
+    .internalHeader-w .searchBtn {
+        background-color: #fff;
+        border: none;
+        height: 30px;
+        margin-left: 40px;
+    }
+
+    .internalHeader-w input[type='text'] {
+        width: 150px;
+    }
+
+    .internalHeader-w .login {
+        margin-top: 6px;
+        color: #00a99d;
+        cursor: pointer;
+        text-align: right;
+        padding: 0 20px;
+        font-size: 13px;
+    }
+
+    .buttonW {
+        margin-right: -40px;
+    }
+
+    .logoHeader-w .center h2 {
+        font-size: 15px;
+        margin: 0;
+    }
+    
+    .logoHeader-w .center p {
+        font-size: 13px;
+    }
+
+    .logoHeader-w .rightLogo-w{
+        text-align: center;
+        margin-top: 10px;
+    }
+
+    .logoHeader-w .rightLogo-w img {
+        width: 200px;
+        margin: 0;
+        margin-right: -15px;
+    }
+}

src/app/Internal-Page/internal-page-header/internal-page-header.component.html

@@ -1,87 +1,89 @@
 
 
-    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
-
-      <div class="internalHeader-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
-                        <ul class="list-unstyled notificationList-w" *ngIf="authSer.isAuthenticated()">
-                            <li class="profileData-w">
-                                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-                                    <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
-                                    <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الخروج</button>
-                                    </div>
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+    <div class="internalHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4"  style="margin:0;padding:0">
+                    <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                        <li class="profileData-w">
+                            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                                <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
+                                <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
+                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
+                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
+                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الخروج</button>
                                 </div>
-                            </li>
-                            <li><span><i class="fas fa-comments"></i></span></li>
-                            <li><span><i class="fas fa-bell"></i></span></li>
-                        </ul>
-                        <p *ngIf="!authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
-                    </div>
-                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
-                        <div class="form-group" style="margin:10px 0;">
-                            <input type="text" placeholder="أبحث" /><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
-                        </div>
-                    </div>
-                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
-                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p>
-                       <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
-                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>
+                            </div>
+                        </li>
+                        <!-- <li><span><i class="fas fa-comments"></i></span></li>
+                        <li><span><i class="fas fa-bell"></i></span></li> -->
+                    </ul> 
+                    <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>تسجيل دخول </a></p>
+                </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4 backgroundXS">
+                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
+                        <input type="text" placeholder="أبحث"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                     </div>
                 </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
+                    <p class="dateW"> {{currentDate}} </p>
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
             </div>
         </div>
+    </div>
 
-        <div class="logoHeader-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
-                        <div class="rightLogo-w">
-                            <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
-                        </div>
-                    </div>
-                    <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-                    <div class="center text-center">
-                        <h2>المنصه الداخليه</h2>
-                        <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
-                    </div>
-                    </div>
-                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
-                    <div class="leftLogo-w">
-                        <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
-                    </div>
+    <div class="logoHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="rightLogo-w">
+                        <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
                     </div>
                 </div>
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="center text-center">
+                    <h2>المنصه الداخليه</h2>
+                    <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
+                </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                <div class="leftLogo-w">
+                    <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+                </div>
+                </div>
             </div>
         </div>
+    </div>
 
-        <div class="pagesHeader-w">
-            <div class="container">
-                <div class="row">
-                    <div class="navbar">
-                        <button style="cursor:pointer;" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
-                        <div *ngFor="let parent of internalService.parentsPage; let i = index" class="dropdown">
-                            <button class="dropbtn" *ngIf="parent['childs'].length > 0">
-                                {{parent.name}}
-                                <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
-                                </button>
-                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                                    <a [routerLink]="parent.link" style="text-decoration:none">{{parent.name}}</a>
-                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
-                                </button>
-                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
-                                <div class="row">
-                                    <div *ngFor="let child of parent['childs']">
-                                        <ul class="list-unstyled">
-                                            <li>
-                                                <a [routerLink]="child.link"> {{child.name}}</a>
-                                            </li>
-                                        </ul>
-                                    </div>
+    <div class="pagesHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="navbar" style="padding:0">
+                    <button class="dropbtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
+                        <!-- <i class="fas fa-home"></i>  -->
+                        <a style="cursor: pointer; font-size:18px; font-weight:bold"> <span class="parentName-w">الرئيسيه</span></a>
+                    </button>
+                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown">
+                        <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                            <span class="parentName-w"> {{parent.name}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
+                            <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
+                        </button>
+                        <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                            <a href="{{parent.link}}" target="_blank" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span> </a>
+                            <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
+                            <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                        </button>
+                        <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                            <div class="row">
+                                <div *ngFor="let child of parent['childs']" style="width:100%;">
+                                    <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
+                                        <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
+                                            <a href="{{child.link}}" target="_blank"> {{child.name}}</a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
                         </div>
@@ -89,93 +91,96 @@
                 </div>
             </div>
         </div>
-    </ng-template>
+    </div>
+</ng-template>
 
 
 
-    <ng-template #englishTemplate>
-
+<ng-template #englishTemplate>
     <div class="internalHeader-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
-                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
-                            <li class="profileData-w">
-                                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-                                    <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
-                                    <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الدخول</button>
-                                    </div>
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
+                    <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                        <li class="profileData-w">
+                            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                                <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
+                                <div class="dropdown-menu" style="text-align:left" ngbDropdownMenu>
+                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">Profile</button>
+                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> DashBoard</button>
+                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">Log Out</button>
                                 </div>
-                            </li>
-                            <li><span><i class="fas fa-comments"></i></span></li>
-                            <li><span><i class="fas fa-bell"></i></span></li>
-                        </ul>
-                        <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
-                    </div>
-                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
-                        <div class="form-group" style="margin:10px 0;">
-                            <input type="text" placeholder="أبحث" /><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
-                        </div>
-                    </div>
-                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
-                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p>
-                       <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
-                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>
+                            </div>
+                        </li>
+                        <!-- <li><span><i class="fas fa-comments"></i></span></li>
+                        <li><span><i class="fas fa-bell"></i></span></li> -->
+                    </ul>
+                    <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
+                </div>
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS hidden-xs hidden-sm">
+                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
+                        <input type="text" placeholder="search" style=" text-align:left"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                     </div>
                 </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4">
+                    <p class="dateW"> {{currentDate}} </p>
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
             </div>
         </div>
+    </div>
 
-        <div class="logoHeader-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
-                        <div class="rightLogo-w">
-                            <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
-                        </div>
-                    </div>
-                    <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-                    <div class="center text-center">
-                        <h2> Internal Page</h2>
-                        <p>King Faisal Medical Complex in Taif</p>
-                    </div>
-                    </div>
-                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
-                    <div class="leftLogo-w">
-                        <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
-                    </div>
+    <div class="logoHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4">
+                    <div class="rightLogo-w">
+                        <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
                     </div>
                 </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="center text-center">
+                    <h2> Internal Page</h2>
+                    <p>King Faisal Medical Complex in Taif</p>
+                </div>
+                </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                <div class="leftLogo-w">
+                    <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+                </div>
+                </div>
             </div>
         </div>
+    </div>
 
-        <div class="pagesHeader-w">
-            <div class="container">
-                <div class="row">
-                    <div class="navbar">
-                        <button style="cursor:pointer" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
-                        <div *ngFor="let parent of internalService.parentsPage; let i = index" class="dropdown">
-                            <button class="dropbtn" *ngIf="parent['childs'].length > 0">
-                                {{parent.name_en}}
-                                <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
-                                </button>
-                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                                    <a href="{{parent.link}}" style="text-decoration:none">{{parent.name_en}}</a>
-                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
-                                </button>
-                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
-                                <ul class="list-unstyled">
-                                    <li  *ngFor="let child of parent['childs']" [className]=" arabicTemplate ? '' : 'menuEnglish' ">
-                                        <a href="{{child.link}}" target="_blank"> {{child.name_en}}</a>
-                                    </li>
-                                </ul>
-                            </div>
+     <div class="pagesHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="navbar">
+                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown">
+                        <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                            <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
+                            <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
+                        </button>
+                        <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                            <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" [className]=" arabicTemplate ? '' : 'activeLanguageIcon' " />
+                            <a href="{{parent.link}}" target="_blank" style="text-decoration:none"><span class="parentName-w"> {{parent.name_en}} </span> </a>
+                            <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                        </button>
+                        <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                            <ul class="list-unstyled">
+                                <li  *ngFor="let child of parent['childs']" [className]="arabicTemplate ? '' : 'menuEnglish' ">
+                                    <a href="{{child.link}}" target="_blank"> {{child.name_en}}</a>
+                                </li>
+                            </ul>
                         </div>
                     </div>
+                    <button class="dropbtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
+                        <a style="cursor: pointer; font-size:18px; font-weight:bold"> <span class="parentName-w">Home</span></a>
+                    </button>
                 </div>
             </div>
         </div>
-    </ng-template>
+    </div>
+</ng-template>

src/app/Internal-Page/internal-page-header/internal-page-header.component.ts

@@ -16,6 +16,8 @@ export class InternalPageHeaderComponent implements OnInit {
     private internalService: InternalPageService, 
     private router: Router) { }
   
+    parentsPage = [];
+    currentDate: number = Date.now();
 
 
   ngOnInit() {
@@ -24,14 +26,28 @@ export class InternalPageHeaderComponent implements OnInit {
     this.authSer.arabicTemplate = true;
     this.authSer.arabicLanguage = true;
     this.authSer.englishLanguage = false;
-    
+    console.log('tooooken', this.authSer.isAuthenticated());
+    this.internalService.getParentData().subscribe(
+      (responce) => {
+        this.parentsPage = responce['parents'];
+        console.log('parents pageees', this.parentsPage);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
     
     //this.spinner.show();
     this.authSer.showDashboardHeader = false;
+    this.internalService.getParentData();
     //console.log(this.checkTokenExpire);
       //get profile data
     this.userservice.getUserDataProfile();
-    this.authSer.currentDate = this.authSer.writeHijri(new Date(this.authSer.currentDate), 'ar');
+
+    this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar');
+
   }
 
   onLogin() {

src/app/Internal-Page/internal-routing-module.ts

@@ -7,17 +7,18 @@ import { RouterModule, Routes } from '@angular/router';
 import { InternalPageComponent } from './internal-page/internal-page.component';
 
 import { HospitalContentComponent } from './hospital-content/hospital-content.component';
-import { EventsComponent } from './events/events.component';
 import { LoginComponent } from './../login/login.component';
+import { EventsComponent } from './../Internal-Page/events/events.component';
+
 
 const internalPageRoutes: Routes = [
         {path: '' , redirectTo: '/InternalPage/home', pathMatch: 'full'},
         {path: 'InternalPage' , component: InternalPageComponent, children:[
         {path: 'home', component: InternalPageContentComponent},
-        {path: 'hospital', component: HospitalContentComponent},
-        {path: 'news/:reportId', component: NewsPageComponent},
         {path:'circulars', component: CircularsPageComponent},
         {path: 'events', component: EventsComponent},
+        {path: 'news/:reportId', component: NewsPageComponent},
+        {path: ':typePage', component: HospitalContentComponent},
     ]},
 ];
 

src/app/Internal-Page/news-page/news-page.component.css

@@ -26,7 +26,7 @@
 
 .description {
     width: 100%;
-    height: 300px;
+    padding: 40px 0;
     text-align: right;
 }
 

src/app/Internal-Page/news-page/news-page.component.html

@@ -12,7 +12,7 @@
           </div>
           <div class="col-12">
             <div class="description">
-                <p>{{newsData.description}}</p>
+                <p [innerHTML]="newsData.description"></p>
             </div>
           </div>
         </div>
@@ -35,7 +35,7 @@
             </div>
             <div class="col-12">
               <div class="description" [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                  <p>{{newsData.description_en}}</p>
+                  <p [innerHTML]="newsData.description_en"></p>
               </div>
             </div>
           </div>

src/app/Internal-Page/news-page/news-page.component.ts

@@ -2,6 +2,8 @@ import { AuthServiceService } from './../../shared/auth-service.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+
 
 @Component({
   selector: 'app-news-page',
@@ -12,6 +14,7 @@ export class NewsPageComponent implements OnInit {
 
   constructor(private route: ActivatedRoute, 
     private authSer:AuthServiceService, 
+    private spinner: NgxSpinnerService,
     private internalService: InternalPageService) { }
   
   newsId: number;
@@ -20,6 +23,7 @@ export class NewsPageComponent implements OnInit {
 
   ngOnInit() {
 
+  this.spinner.show();
   this.authSer.arabicTemplate = true;
   this.authSer.arabicLanguage = true;
   this.authSer.englishLanguage = false;
@@ -36,6 +40,7 @@ export class NewsPageComponent implements OnInit {
       (responce) => {
         console.log(responce);
         this.newsData = responce['report'];
+        this.spinner.hide();
       },
       (error) => {
         console.log(error);

src/app/app-routing.module.ts

@@ -44,7 +44,7 @@ import { InternalServicesComponent } from './dashboard/internal-services/interna
 import { InternalPageComponent } from './Internal-Page/internal-page/internal-page.component';
 
 const routes: Routes = [
-  {path: '', redirectTo: '/login', pathMatch: 'full'},
+  {path: '', redirectTo: '/InternalPage/home', pathMatch: 'full'},
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: RegesterComponent},
   {path: 'InternalPage', component: InternalPageComponent, canActivate: [AuthGuard]},

src/app/app.module.ts

@@ -93,6 +93,8 @@ import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the modu
 import { FlatpickrModule } from 'angularx-flatpickr';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { ShortenPipe } from './shorten.pipe';
+
 
 
 @NgModule({
@@ -145,6 +147,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     MainListComponent,
     AddMenuComponent,
     AddJoinUsComponent,
+    ShortenPipe,
   ],
   imports: [
     BrowserModule,

src/app/dashboard/dashboard-content.css

@@ -0,0 +1,4 @@
+.routerLinkContainer-w {
+    background: url('../../assets/image/background_login.jpg') no-repeat top center;
+    background-size: cover;
+}

src/app/dashboard/dashboard/dashboard.component.css

@@ -4,20 +4,42 @@
     padding: 40px 0;
 }
 
+.dashboard h1{
+    text-align: right;
+    font-size: 18px;
+    margin: 10px 0;
+    padding: 10px 0;
+}
+
 .dashboardItem-w {
-    width: 100%;
-    height: 150px;
-    padding: 5px;
-    background-color: #bda380;
-    border-radius: 20px;
-    color: #b6e2e5;
+    width: 90%;
+    height: 180px;
+    background-color: #f1f1f1;
+    border-radius: 10px;
+    color: #bda380;
+    border: 1px solid #bda380;
+    border-top: 0;
     font-family: 'Cairo', sans-serif;
+    transition: all 05s;
+}
+
+.dashboardItem-w:hover img {
+    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+    filter: grayscale(100%);
+}
+
+.dashboardItem-w:hover h1 {
+    color: #cdcdcd;
 }
 
 .dashboardItem-w h1 {
-    font-size: 17px;
+    font-size: 15px;
     margin: 5px 0;
-    line-height: 140px;
+    padding: 20px;
+    background-color: #bda380;
+    color: #fff;
+    border-radius: 5px 5px 0 0;
+    font-weight: bold;
 }
 .mainFooter-w {
     width: 100%;
@@ -30,13 +52,26 @@
     font-family: 'Cairo', sans-serif;
 }
 
+.serviceIcon-w {
+    width: 50px;
+    margin: 30px auto;
+    height: 50px;
+}
+
+.serviceIcon-w img{
+    width: 100%;
+    height: 100%;
+    transition: all 0.5s;
+}
+
+
 @media(max-width: 767px){
     .dashboardItem-w {
         width: 100%;
     }
 
     .dashboardItem-w h1 {
-        font-size: 15px;
+        font-size: 9px;
     } 
 }
 
@@ -49,9 +84,9 @@
     }
 }
 
-@media(min-width: 992px) {
+/* @media(min-width: 992px) {
     .dashboardItem-w h1 {
         font-size: 20px;
     }
-}
+} */
 

src/app/dashboard/dashboard/dashboard.component.html

@@ -1,12 +1,17 @@
-
 <div class="dashboard" [style.min-height.px]="myInnerHeight">
   <div class="container">
-    <div class="row">
-      <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
-        <div class="dashboardItem-w text-center" style="cursor:pointer;" (click)="getDataService(service)">
-          <h1>{{service.name}}</h1>
+    <h1>الخدمات الاكترونيه</h1>
+    <div class="contentBorder-w">
+        <div class="row">
+          <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
+            <div class="dashboardItem-w text-center" style="cursor:pointer;" (click)="getDataService(service)">
+              <h1 class="text-center">{{service.name}}</h1>
+              <div class="serviceIcon-w">
+                <img src="{{authService.pathImg + service.photo}}" />
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
     </div>
   </div>
 </div>

src/app/dashboard/department/add-department/add-department.component.css

@@ -12,3 +12,8 @@
 }
 
 
+input,select,textarea {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}

src/app/dashboard/department/add-department/add-department.component.html

@@ -5,58 +5,59 @@
       <div class="row">
         <div class="col-12">
           <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w">خدمه الصلاحيات / </li>
-            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">الادارات / </li>
+            <li class="headingText-w">خدمه الصلاحيات > </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">الادارات > </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">  {{typeLink}} </li>
           </ul>
-          <hr class="hr">
         </div>
       </div>
 
-    <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
-        <div class="row">
-          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="name">الأسم <span class="spanReqired-w">*</span></label>
-              <input type="text" name="name" class="form-control" ngModel #name="ngModel" placeholder="الأسم" [ngModel]="admin.name" required/>
-            </div>
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+            <div class="row">
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name">الأسم <span class="spanReqired-w">*</span></label>
+                  <input type="text" name="name" class="form-control" ngModel #name="ngModel" placeholder="الأسم" [ngModel]="admin.name" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
+                  <input type="email" class="form-control" name="email" placeholder="الإيميل" appEnglishCharacters ngModel email #email="ngModel" [ngModel]="admin.email" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="phone">الهاتف</label>
+                  <input type="phone" class="form-control" name="phone" ngModel #phone="ngModel" [ngModel]="admin.phone"/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="switch_phone">الهاتف البديل</label>
+                  <input type="phone" class="form-control" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="admin.switch_phone"/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="status">الحاله</label>
+                  <select name="status" class="form-control" [ngModel]="admin.status">
+                    <option value="1">فعال</option>
+                    <option value="0">غير فعال</option>
+                  </select>
+                </div>
+              </div>
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="description">الوصف <span class="spanReqired-w">*</span></label>
+                  <textarea cols="3" name="description" class="form-control" ngModel #description="ngModel" [ngModel]="admin.description" required>
+                  </textarea>
+                </div>
+              </div>
           </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
-              <input type="email" class="form-control" name="email" placeholder="الإيميل" appEnglishCharacters ngModel email #email="ngModel" [ngModel]="admin.email" required/>
-            </div>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="phone">الهاتف</label>
-              <input type="phone" class="form-control" name="phone" ngModel #phone="ngModel" [ngModel]="admin.phone"/>
-            </div>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="switch_phone">الهاتف البديل</label>
-              <input type="phone" class="form-control" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="admin.switch_phone"/>
-            </div>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="status">الحاله</label>
-              <select name="status" class="form-control" [ngModel]="admin.status">
-                <option value="1">Active</option>
-                <option value="0">InActive</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="description">الوصف <span class="spanReqired-w">*</span></label>
-              <textarea cols="3" name="description" class="form-control" ngModel #description="ngModel" [ngModel]="admin.description" required>
-              </textarea>
-            </div>
-          </div>
-      </div>
-      <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid ">حفظ</button>
-    </form>
+          <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid ">حفظ</button>
+        </form>
+    </div>
   </div>
 </div>

src/app/dashboard/department/department-list/department-list.component.html

@@ -2,71 +2,74 @@
     <div class="row">
       <div class="col-12">
           <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w">خدمه الصلاحيات / </li>
+            <li class="headingText-w">خدمه الصلاحيات > </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">الإدارات</li>
           </ul>
-        <hr class="hr">
       </div>
     </div>
 
-    <div class="row">
-      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-          <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAddDepart()" *ngIf="authSer.showAddBtn">إنشاء</button>
-          <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDeleteDeparts()" *ngIf="authSer.showDeleteBtn">حذف</button>
-      </div>
-      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <div class="form-group">
-          <input type="text" placeholder="البحث" class="form-control searchInput-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
-          <hr>
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAddDepart()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+            <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDeleteDeparts()" *ngIf="authSer.showDeleteBtn"> <i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
         </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-6">
-        <div class="form-group">
-          <span class="spanSelect-w">أظهر
-            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="10000">المزيد</option>
-              <option value="20">20</option>
-            </select>
-            من العناصر
-          </span>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث" class="form-control searchInput-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+            <hr>
+          </div>
         </div>
       </div>
-      <div class="col-6">
-      
+  
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w">
+              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+              </select>
+              من العناصر يتم عرضها 
+            </span>
+          </div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+        
+        </div>
       </div>
+    
+      <table class="table table-bordered">
+        <thead class="headBackground-w checkAll-w">
+          <tr>
+            <th>
+              <div class="custom-control custom-checkbox">
+                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                <label class="custom-control-label fixedWidthLabel-w" for="customCheck" style="margin-bottom:20px;"></label>
+              </div>
+            </th>
+            <th>الاسم</th>
+            <th *ngIf="authSer.showEditBtn">تعديل</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let department of departmentsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+            <td>
+              <div class="custom-control custom-checkbox centerIneerItem">
+                <input type="checkbox" class="custom-control-input" id="{{department.id}}" [(ngModel)]="department.selected" [value]='department' (change)="checkIfAllSelected();">
+                <label class="custom-control-label disblayBlock-w" for="{{department.id}}" style="color:#2a2a2a"></label>
+              </div>
+            </td>
+            <td>{{department.name}}</td>
+            <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(department.id)"><i class="fas fa-edit"></i></button></td>
+          </tr>
+        </tbody>
+      </table>
+      <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
     </div>
-  
-    <table class="table table-bordered">
-      <thead class="headBackground-w checkAll-w">
-        <tr>
-          <th>
-            <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w" for="customCheck" style="margin-bottom:20px;"></label>
-            </div>
-          </th>
-          <th>الاسم</th>
-          <th *ngIf="authSer.showEditBtn">تعديل</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let department of departmentsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-          <td>
-            <div class="custom-control custom-checkbox centerIneerItem">
-              <input type="checkbox" class="custom-control-input" id="{{department.id}}" [(ngModel)]="department.selected" [value]='department' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{department.id}}" style="color:#2a2a2a"></label>
-            </div>
-          </td>
-          <td>{{department.name}}</td>
-          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(department.id)"><i class="fas fa-edit"></i></button></td>
-        </tr>
-      </tbody>
-    </table>
-    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+
+
   </div>
   

src/app/dashboard/external-services/add-external/add-external.component.css

@@ -23,7 +23,6 @@
     position: relative;
     border-radius: 20px;
     margin: 30px auto;
-    float: right;
 }
 .iconUpload-w {
     width: 30px;
@@ -52,6 +51,12 @@ input {
     font-size: 13px !important;
 }
 
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
 /* .inputfile + label {
     width: 100%;
     font-size: 1.25em;

src/app/dashboard/external-services/add-external/add-external.component.html

@@ -4,74 +4,77 @@
     <div class="row" style="margin-bottom: 30px;">
         <div class="col-12">
           <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w">خدمه إداره المحتوي / </li>
-            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> الخدمات الخارجيه / </li>
+            <li class="headingText-w">خدمه إداره المحتوي > </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> الخدمات الخارجيه > </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
           </ul>
           <hr class="hr">
         </div>
     </div>
 
-    <div class="row">
-      <div class="col-12">
-
-        <form (ngSubmit)="onSubmitted()" #f="ngForm">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
-              <div class="form-group text-center imgContainer">
-                  <img [src]="urlImg" class="imgProfile" height="200"> 
-                  <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
-                  <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-              </div>
-              <span *ngIf="checkValidImg" style="position: absolute; right:0; bottom:0;color: red">must be in 'png' format</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه  <span class="spanReqired-w">*</span></label>
-                  <input type="text" class="form-control" id="name" placeholder="الاسم باللغه العربيه" name="name" ngModel [ngModel]="external.name" #name="ngModel" required/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه  <span class="spanReqired-w">*</span></label>
-                  <input type="text" class="form-control" id="name_en" placeholder="الاسم باللغه الانجليزيه" name="name_en" ngModel [ngModel]="external.name_en" #name="ngModel" required/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="link" style="float: right; margin-right: 5px">الرابط  <span class="spanReqired-w">*</span></label>
-                  <input type="text" class="form-control" id="link" name="link" placeholder="الروابط" ngModel [ngModel]="external.link" #link="ngModel" required/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="ranking" style="float: right; margin-right: 5px">الترتيب  <span class="spanReqired-w">*</span></label>
-                <select class="form-control" name="ranking" [ngModel]="external.ranking" id="ranking" required>  
-                  <option value="10000">المزيد</option>
-                  <option value="1">1</option>
-                  <option value="2">2</option>
-                  <option value="3">3</option>
-                  <option value="4">4</option>
-                  <option value="5">5</option>
-                  <option value="6">6</option>
-                </select>
-              </div>
-            </div>
-  
-            <div class="col-12 col-sm-12 col-md-4">
-              <label for="status" style="float: right; margin-right: 5px">الحاله  <span class="spanReqired-w">*</span></label>
-              <select class="form-control" name="status" [ngModel]="external.status" id="status" required>  
-                <option value="1">فعال</option>
-                <option value="0">غير فعال</option>
-              </select>
+    <div class="containerContent-w">
+        <div class="row">
+            <div class="col-12">
+      
+              <form (ngSubmit)="onSubmitted()" #f="ngForm">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                    <div class="form-group text-center imgContainer">
+                        <img [src]="urlImg" class="imgProfile" height="200"> 
+                        <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                        <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                    </div>
+                    <span class="validateImageMsg" *ngIf="checkValidImg">must be in 'png' format</span>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه  <span class="spanReqired-w">*</span></label>
+                        <input type="text" class="form-control" id="name" placeholder="الاسم باللغه العربيه" name="name" ngModel [ngModel]="external.name" #name="ngModel" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه  <span class="spanReqired-w">*</span></label>
+                        <input type="text" class="form-control" id="name_en" placeholder="الاسم باللغه الانجليزيه" name="name_en" ngModel [ngModel]="external.name_en" #name="ngModel" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="link" style="float: right; margin-right: 5px">الرابط  <span class="spanReqired-w">*</span></label>
+                        <input type="text" class="form-control" id="link" name="link" placeholder="الروابط" ngModel [ngModel]="external.link" #link="ngModel" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="ranking" style="float: right; margin-right: 5px">الترتيب  <span class="spanReqired-w">*</span></label>
+                      <select class="form-control" name="ranking" [ngModel]="external.ranking" id="ranking" required>  
+                        <option value="10000">المزيد</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5">5</option>
+                        <option value="6">6</option>
+                      </select>
+                    </div>
+                  </div>
+        
+                  <div class="col-12 col-sm-12 col-md-4">
+                    <label for="status" style="float: right; margin-right: 5px">الحاله  <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" name="status" [ngModel]="external.status" id="status" required>  
+                      <option value="1">فعال</option>
+                      <option value="0">غير فعال</option>
+                    </select>
+                  </div>
+                </div>
+                
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+      
+              </form>
+      
             </div>
           </div>
-          
-          <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
-
-        </form>
-
-      </div>
     </div>
+
   </div>
 </div>

src/app/dashboard/external-services/external-list/external-list.component.html

@@ -3,84 +3,88 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه الصلاحيات / </li>
+          <li class="headingText-w">خدمه الصلاحيات > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">الخدمات الخارجيه</li>
         </ul>
-      <hr class="hr">
     </div>
   </div>
 
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
-        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="form-group">
-        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
-        <hr>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6">
-      <div class="form-group">
-        <span class="spanSelect-w">أظهر
-          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
-            <option value="5">5</option>
-            <option value="10">10</option>
-            <option value="15">15</option>
-            <option value="20">20</option>
-          </select>
-          من العناصر
-        </span>
-      </div>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6">
-    
-    </div>
-  </div>
-  
-  <table class="table table-bordered">
-    <thead class="headBackground-w">
-      <tr>
-        <th>
-          <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+  <div class="containerContent-w">
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+              <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"> <i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+              <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"> <i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
           </div>
-        </th>
-        <th>الاسم</th>
-        <th>الترتيب</th>
-        <th> الحاله</th>
-        <th *ngIf="authSer.showEditBtn">تعديل</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let external of externalsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-        <td>
-          <div class="custom-control custom-checkbox centerIneerItem">
-            <input type="checkbox" class="custom-control-input" id="{{external.id}}" [(ngModel)]="external.selected" [value]='external' (change)="checkIfAllSelected();">
-            <label class="custom-control-label disblayBlock-w" for="{{external.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="form-group">
+              <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+              <hr>
+            </div>
           </div>
-        </td>
-        <td>{{external.name}}</td>
-        <td>
-          {{external.ranking}}
-          <!-- <select class="form-control" [ngModel]="external.ranking" (change)="changeRanking($event, external.id)">
-            <option value="1">1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-            <option value="4">4</option>
-            <option value="5">5</option>
-            <option value="6">6</option>
-          </select> -->
-        </td>
-        <td>{{external.status == '0' ? 'غير نشط' : external.status == '1' ? 'نشط' : 'not found' }}</td>
-        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(external.id)"><i class="fas fa-edit"></i></button></td>
-      </tr>
-    </tbody>
-  </table>
-  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+        </div>
+      
+        <div class="row">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+              <div class="form-group">
+                <span class="spanSelect-w">
+                  <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="15">15</option>
+                    <option value="20">20</option>
+                  </select>
+                  من العناصر يتم عرضها 
+                </span>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            
+            </div>
+        </div>
+        
+        <table class="table table-bordered">
+          <thead class="headBackground-w">
+            <tr>
+              <th>
+                <div class="custom-control custom-checkbox">
+                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                </div>
+              </th>
+              <th>الاسم</th>
+              <th>الترتيب</th>
+              <th> الحاله</th>
+              <th *ngIf="authSer.showEditBtn">تعديل</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let external of externalsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+              <td>
+                <div class="custom-control custom-checkbox centerIneerItem">
+                  <input type="checkbox" class="custom-control-input" id="{{external.id}}" [(ngModel)]="external.selected" [value]='external' (change)="checkIfAllSelected();">
+                  <label class="custom-control-label disblayBlock-w" for="{{external.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                </div>
+              </td>
+              <td>{{external.name}}</td>
+              <td>
+                {{external.ranking}}
+                <!-- <select class="form-control" [ngModel]="external.ranking" (change)="changeRanking($event, external.id)">
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                </select> -->
+              </td>
+              <td>{{external.status == '0' ? 'غير نشط' : external.status == '1' ? 'نشط' : 'not found' }}</td>
+              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(external.id)"><i class="fas fa-edit"></i></button></td>
+            </tr>
+          </tbody>
+        </table>
+        <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+        
+  </div>
+  
+
 </div>

src/app/dashboard/header/header.component.css

@@ -1,10 +1,9 @@
 .header {
     width: 100%;
-    /* height: 40px; */
+    height: 35px;
     display: inline-block;
     background-color: #d0d0d0;
     direction: rtl;
-    padding: 5px 0;
     font-family: 'Cairo', sans-serif;
     overflow: visible;
     color: #fff;
@@ -12,6 +11,8 @@
 
 .header p{
   text-shadow: 2px 2px 4px #000000;
+  font-size: 14px;
+  margin: 5px 0;
 }
 
 .header .searchDiv-w {
@@ -33,11 +34,10 @@
 
 .header .notificationDiv-w img{
     width: 35px;
-    height: 35px;
     border: 1px solid #15a498;
     float: right;
     margin: 0 10px;
-    margin-top: -5px;
+    margin-top: -4px;
 }
 
 .header .notificationDiv-w button {
@@ -71,7 +71,6 @@
     height: 160px;
     display: inline-block;
     padding: 20px;
-    background: url('../../../assets/image/bottomBackground.jpg');
     background-size: cover;
     margin-top: -6px;
     font-family: 'Cairo', sans-serif;
@@ -103,6 +102,13 @@
     background: rgba(245, 245, 245, 0.3);
 }
 
+.bottomHeader-w .rightLogo-w  {
+    text-align:right; 
+    margin-right:20px;
+}
+
+
+
 .bottomHeader-w .rightLogo-w img {
     margin-top: 15px;
 }
@@ -174,11 +180,48 @@
     color: #fff;
 }
 
+
 /* start media query */
 @media(max-width: 767px){
     .hidden-xs{
         display: none;
     }
+
+
+    .header p {
+        font-size: 14px;
+    }
+
+    .header .notificationDiv-w button {
+        margin-right: -35px;
+    }
+
+    .listDropMenu-w {
+        top: 30px !important;
+        left: -24px !important;
+    }
+
+    .bottomHeader-w .rightLogo-w {
+        margin-top: 0;
+    }
+
+    .bottomHeader-w .rightLogo-w img {
+        width: 140px;
+    }
+    
+    .bottomHeader-w .center h2 {
+        margin-top: 0;
+        font-size: 18px;
+    }
+
+    .bottomHeader-w .center p {
+        font-size: 12px;
+    }
+
+    .bottomHeader-w .rightLogo-w {
+        text-align: center;
+        margin-right: 0;
+    }
 }
 /* end media query */ 
 
@@ -201,6 +244,7 @@
     text-shadow: 0px 0px 2px #000 !important;
     font-weight: bold !important;
     direction: rtl !important;
+    font-size: 14px;
 }
 
 

src/app/dashboard/header/header.component.html

@@ -5,24 +5,14 @@
         <div class="row">
           <div class="col-6 col-sm-6 col-md-6 col-lg-6">
             <div class="notificationDiv-w">
-              <!-- <div class="btn-group mr-3" style="float: right; direction: ltr;">
-                  <button type="button" class="btn btn-primary defaultHover-w" style="background-color:#C0BFC0"> {{authSer.dataLoginUser['name']}} </button>
-                  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-                    <button class="btn btn-primary dropdown-toggle-split" style="background-color:#C0BFC0" ngbDropdownToggle></button>
-                    <div class="dropdown-menu" style="left:-100px" ngbDropdownMenu>
-                      <button class="dropdown-item" style="cursor: pointer" (click)="onGetProfile()">صفحتي</button>
-                      <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
-                    </div>
-                  </div>
-                </div> -->
                 <div class="col">
                     <div ngbDropdown class="d-inline-block" style="float: right; direction: ltr;">
                       <button class="btn btn-outline-primary buttonW" id="dropdownBasic1" ngbDropdownToggle><img class="img" src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="image">
                         {{authSer.dataLoginUser['name']}}</button>
-                      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                      <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="listDropMenu-w">
                           <button class="dropdown-item" style="cursor: pointer" (click)="onGetProfile()">صفحتي</button>
-                          <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
                           <button class="dropdown-item" style="cursor: pointer" (click)="onInternalPage()">البوابه الداخليه</button>
+                          <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
                       </div>
                   </div>
                 </div>
@@ -30,7 +20,7 @@
           </div>
           <div class="col-6 col-sm-6 col-md-6 col-lg-6">
             <div class="dateDiv-w">
-                <p style="float:left;">{{'24/01/2014' | amParse:'!DD/!MM/!YYYY' | amDateFormat:'LL'}}</p>
+                <p style="float:left;">{{currentDate}}</p>
             </div>
           </div>
         </div>
@@ -42,8 +32,8 @@
       <div class="overlay">
         <div class="container">
           <div class="row">
-            <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
-              <div class="rightLogo-w text-center">
+            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+              <div class="rightLogo-w">
                 <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
               </div>
             </div>
@@ -54,7 +44,7 @@
               </div>
             </div>
             <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
-              <div class="leftLogo-w text-center">
+              <div class="leftLogo-w">
                 <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
               </div>
             </div>

src/app/dashboard/header/header.component.ts

@@ -19,6 +19,8 @@ export class HeaderComponent implements OnInit {
   constructor(private authSer: AuthServiceService ,
     private userSer: UserService,
     private router: Router) { }
+    
+    currentDate: number = Date.now();
 
 
   ngOnInit() {
@@ -27,8 +29,10 @@ export class HeaderComponent implements OnInit {
     this.authSer.showHeaderDashBoard = false;
 
     
-    const m = moment().format('iYYYY/iM/iD');
-    console.log(m);
+    // const m = moment().format('iYYYY/iM/iD');
+    // console.log(m);
+    this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar');
+
    
     this.userSer.getUserDataProfile();
     console.log();

src/app/dashboard/hospitals/add-hospital/add-hospital.component.css

@@ -9,6 +9,12 @@
     float: right;
 }
 
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
 .arrayGroupForm-w {
     border: 1px solid #ccc;
     padding: 20px;

src/app/dashboard/hospitals/add-hospital/add-hospital.component.html

@@ -4,86 +4,87 @@
     <div class="row">
       <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي /</li>
-          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> {{typeFirstLink}} / </li>
+          <li class="headingText-w">خدمه إداره المحتوي > </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> {{typeFirstLink}} > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
         </ul>
-        <hr class="hr">
       </div>
     </div>
     
-    <div class="row" style="margin-top: 30px;">
-      <div class="col-12">
-        <form (ngSubmit)="onSubmitted()" [formGroup]="addHospitalForm">
-          
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <div class="form-group">
-                    <label style="float: right; margin: 5px 0">الاسم باللغه العربيه <span class="spanReqired-w">*</span></label>
-                    <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" formControlName="name"/>
-                </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                  <label style="float: right; margin: 5px 0">الاسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
-                  <input type="text" class="form-control" placeholder="الأسم باللغه الإنجليزيه" formControlName="name_en"/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                  <button class="btn btn-secondary rightW" type="button" style="margin-top:33px" (click)="onAddTitle()">أضف المزيد من العناوين </button>
-              </div>
-            </div>
-          </div>
-        
-          <div formArrayName="fields" *ngFor="let titleControl of addHospitalForm.get('fields').controls; let i = index" style="padding: 20px 0;">
-            <div class="form-group  arrayGroupForm-w" [formGroupName]="i">
-             
-              <div class="row">
-                  <div class="col-12 col-md-6">
+    <div class="containerContent-w">
+        <div class="row" style="margin-top: 30px;">
+            <div class="col-12">
+              <form (ngSubmit)="onSubmitted()" [formGroup]="addHospitalForm">
+                
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                       <div class="form-group">
-                          <label for="title" style="float: right;">العنوان باللغه العربيه</label>
-                          <input type="text" id="title" class="form-control" formControlName="title" style="margin: 10px 0;" />
+                          <label style="float: right; margin: 5px 0">الاسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                          <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" formControlName="name"/>
                       </div>
                   </div>
-                  
-    
-                  <div class="col-12 col-md-6">
-                      <div class="form-group">
-                          <label for="title_en" style="float: right;">العنوان باللغه الإنجليزيه</label>
-                          <input type="text" id="title_en" class="form-control" formControlName="title_en" style="margin: 10px 0;" />
-                      </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                        <label style="float: right; margin: 5px 0">الاسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
+                        <input type="text" class="form-control" placeholder="الأسم باللغه الإنجليزيه" formControlName="name_en"/>
+                    </div>
                   </div>
-                
-          
-          
-                <div class="col-12">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                     <div class="form-group">
-                      <label id="description" style="float: right; margin: 10px 5px"> الوصف باللغه العربيه</label>
-                      <quill-editor id="description" formControlName="description" style="margin: 10px 0;">
-                      </quill-editor>
+                        <button class="btn btn-secondary rightW" type="button" style="margin-top:33px" (click)="onAddTitle()">أضف المزيد من العناوين </button>
                     </div>
+                  </div>
                 </div>
-                  
-    
-                  <div class="col-12">
-                    <div class="form-group">
-                      <label id="description_en" style="float: right; margin: 10px 5px">الوصف باللغه الإنجليزيه</label>
-                      <quill-editor id="description_en" formControlName="description_en">
-                      </quill-editor>
+              
+                <div formArrayName="fields" *ngFor="let titleControl of addHospitalForm.get('fields').controls; let i = index" style="padding: 20px 0;">
+                  <div class="form-group  arrayGroupForm-w" [formGroupName]="i">
+                   
+                    <div class="row">
+                        <div class="col-12 col-md-6">
+                            <div class="form-group">
+                                <label for="title" style="float: right;">العنوان باللغه العربيه</label>
+                                <input type="text" id="title" class="form-control" formControlName="title" style="margin: 10px 0;" />
+                            </div>
+                        </div>
+                        
+          
+                        <div class="col-12 col-md-6">
+                            <div class="form-group">
+                                <label for="title_en" style="float: right;">العنوان باللغه الإنجليزيه</label>
+                                <input type="text" id="title_en" class="form-control" formControlName="title_en" style="margin: 10px 0;" />
+                            </div>
+                        </div>
+                      
+                
+                
+                      <div class="col-12">
+                          <div class="form-group">
+                            <label id="description" style="float: right; margin: 10px 5px"> الوصف باللغه العربيه</label>
+                            <quill-editor id="description" formControlName="description" style="margin: 10px 0;">
+                            </quill-editor>
+                          </div>
+                      </div>
+                        
+          
+                        <div class="col-12">
+                          <div class="form-group">
+                            <label id="description_en" style="float: right; margin: 10px 5px">الوصف باللغه الإنجليزيه</label>
+                            <quill-editor id="description_en" formControlName="description_en">
+                            </quill-editor>
+                          </div>
+                        </div>
+      
                     </div>
+          
+                    <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)">حذف</button>
                   </div>
-
-              </div>
-    
-              <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)">حذف</button>
+                </div>
+      
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid">حفظ</button>
+      
+              </form>
             </div>
           </div>
-
-            <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid">حفظ</button>
-
-        </form>
-      </div>
     </div>
   </div>
 </div>

src/app/dashboard/hospitals/hospital-list/hospital-list.component.html

@@ -3,70 +3,71 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w">خدمه إداره المحتوي > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">{{typeLink}}</li>
         </ul>
-      <hr class="hr">
-    </div>
-  </div>
-    
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
-        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="form-group">
-        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
-        <hr>
-      </div>
     </div>
   </div>
 
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6">
-      <div class="form-group">
-        <span class="spanSelect-w">أظهر
-          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
-            <option value="5">5</option>
-            <option value="10">10</option>
-            <option value="15">15</option>
-            <option value="20">20</option>
-          </select>
-          من العناصر
-        </span>
-      </div>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6">
-    
-    </div>
-  </div>
-  
-  <table class="table table-bordered">
-    <thead class="headBackground-w">
-      <tr>
-        <th>
-          <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+  <div class="containerContent-w">
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+              <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+              <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
           </div>
-        </th>
-        <th>الاسم</th>
-        <th *ngIf="authSer.showEditBtn">تعديل</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-        <td>
-          <div class="custom-control custom-checkbox centerIneerItem">
-            <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
-            <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="form-group">
+              <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+              <hr>
+            </div>
           </div>
-        </td>
-        <td>{{data.name}}</td>
-        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
-      </tr>
-    </tbody>
-  </table>
-  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+        </div>
+      
+        <div class="row">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+              <div class="form-group">
+                <span class="spanSelect-w">
+                  <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="15">15</option>
+                    <option value="20">20</option>
+                  </select>
+                  من العناصر يتم عرضها 
+                </span>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            
+            </div>
+        </div>
+        
+        <table class="table table-bordered">
+          <thead class="headBackground-w">
+            <tr>
+              <th>
+                <div class="custom-control custom-checkbox">
+                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                </div>
+              </th>
+              <th>الاسم</th>
+              <th *ngIf="authSer.showEditBtn">تعديل</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+              <td>
+                <div class="custom-control custom-checkbox centerIneerItem">
+                  <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+                  <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                </div>
+              </td>
+              <td>{{data.name}}</td>
+              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+            </tr>
+          </tbody>
+        </table>
+        <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
 </div>

src/app/dashboard/main-footer/footer.component.css

@@ -1,6 +1,6 @@
 .footer {
     width: 100%;
-    height: 200px;
+    height: 250px;
     position: absolute;
     bottom: 0;
     background: url('../../../assets/image/footer.png') no-repeat center center;
@@ -25,62 +25,94 @@
 
 .leftFooter-w {
     width: 100%;
+    height: 80px;
+    margin-top: 30px;
+}
+
+.leftFooter-w ul {
+    width: 100%;
     display: inline-block;
-    padding: 20px 0;
 }
 
+.leftFooter-w ul li{
+    display: inline-block;
+    margin: 0 10px;
+}
+ 
 .leftFooter-w img {
-    width: 100px;
-    margin: 40px 10px;
+    width: 80px;
 }
 
-.centerFooter-w {
+.linksSection-w {
     width: 100%;
     display: inline-block;
+    margin-top: 30px;
 }
 
-.centerFooter-w ul {
+.linksSection-w ul {
     width: 100%;
-    padding: 40px 0;
+    display: inline-block;
 }
 
-.centerFooter-w ul li{
+.linksSection-w ul li{
     display: inline-block;
-    margin: 50px 5px;
+    margin: 0 5px;
+    margin: 10px 0;
 }
 
-.centerFooter-w ul li a {
+.linksSection-w ul li a {
     text-decoration: none;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
     color: #fff;
+    margin: 5px;
     transition: all 0.5s;
     text-shadow: 2px 2px 4px #000000;
 }
 
-.centerFooter-w ul li a:hover {
+.linksSection-w ul li a img {
+    width: 30px;
+    height: 30px;
+}
+
+.linksSection-w ul li a:hover {
     color: #252525;
     text-shadow: 0 0 0 transparent;
 }
 
 .rightFooter-w {
     width: 100%;
-    display: inline-block;
-    padding: 35px 0;
-    margin-top: 40px;
+    height: 80px; 
+    margin-top: 30px;   
 }
 
 .rightFooter-w img {
     width: 200px;
 }
 
+.rights {
+    text-align:center;
+    text-shadow:2px 2px 4px #000;
+    color:#fff;
+}
+
 /* start media query */
 @media(max-width: 767px) {
-    .centerFooter-w ul{
+
+    .linksSection-w{
+        margin-top: 20px !important;
+    }
+
+    .linksSection-w ul{
         padding: 0;
     }
-    .centerFooter-w ul li{
+    
+    .linksSection-w ul li{
         display: inline-block;
         margin: 0 5px;
     }
+    .rights{
+        font-size: 14px;
+        margin: 20px 0;
+    }
 }

src/app/dashboard/main-footer/footer.component.html

@@ -1,29 +1,72 @@
 <div class="footer">
   <div class="overlayFooter-w">
+
     <div class="container">
+
       <div class="row">
-        <div class="col-12 col-sm-6 col-md-3">
+
+        <div class="col-12 col-sm-6 col-md-3 col-lg-3 hidden-xs hidden-sm">
           <div class="rightFooter-w text-center">
             <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
-          </div>    
+          </div> 
         </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="centerFooter-w text-center">
+
+        <div class="col-12 col-sm-6 col-md-6 col-lg-6 hidden-xs hidden-sm">
+          <div class="linksSection-w text-center d-none d-sm-none d-md-block">
             <ul class="list-unstyled">
-              <li><a href="">تواصل معنا</a></li>
-              <li><a href="">البريد الالكتروني</a></li>
-              <li><a href="">سياسه الخصوصيه</a></li>
-              <li><a href="">الاحكام والشروط</a></li>
+                <li *ngFor="let section of sectionLinks">
+                  <a href="{{section.link}}" target="_blank">{{section.name}}</a>
+                </li>
             </ul>
           </div>
         </div>
-        <div class="col-12 col-sm-6 col-md-3 hidden-xs">
-          <div class="leftFooter-w text-center">
-            <img src="../../assets/image/footer_logo1.png" alt="logo" title="logo" />
-            <img src="../../assets/image/footer_logo2.png" alt="logo" title="logo" />
-          </div>
+
+        <div class="col-12 col-sm-6 col-md-3 col-lg-3">
+            <div class="leftFooter-w text-center">
+              <ul class="list-unstyled">
+                <li *ngFor="let award of awardsData">
+                  <img src="{{authSer.pathImg + award.photo}}" />
+                </li>
+              </ul>
+            </div>
+        </div>
+
+        <div class="col-12">
+          <div class="linksSection-w text-center" style="margin-top:0">
+              <ul class="list-unstyled">
+                  <li *ngFor="let socialMedia of socialLinks">
+                    <a href="{{socialMedia.link}}"><img src="{{authSer.pathImg +socialMedia.photo}}" /></a>
+                  </li>
+              </ul>
+            </div>
+            <div class="copyRights">
+                <p class="rights">جميع الحقوق محفوظه لمجمع الملك فيصل الطبي 2019</p>
+            </div>
         </div>
+
+        <!-- <div class="col-12 col-sm-6 col-md-3  d-none d-sm-none d-md-block">
+            
+        </div>
+
+        <div class="col-12 col-sm-6 col-md-6">
+
+         
+
+          
+        
+            
+        </div>
+
+
+
+        <div class="col-12 col-sm-6 col-md-3">
+          
+        </div> -->
+
       </div>
+
     </div>
+
   </div>
+
 </div>

src/app/dashboard/main-footer/footer.component.ts

@@ -1,3 +1,4 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -6,10 +7,26 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./footer.component.css']
 })
 export class FooterComponent implements OnInit {
+  
+  sectionLinks = [];
+  awardsData = [];
+  socialLinks = [];
 
-  constructor() { }
+  constructor(private authSer: AuthServiceService) { }
 
   ngOnInit() {
+    this.authSer.onGetFooterData().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.sectionLinks = responce['footer']['links_section'];//
+        this.awardsData = responce['footer']['awards_section'];//
+        this.socialLinks = responce['footer']['socials_section'];
+        console.log(this.sectionLinks);
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
   }
 
 }

src/app/dashboard/main-menu/add-menu/add-menu.component.css

@@ -9,6 +9,12 @@
     margin: 20px 0;
 }
 
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
 .imgProfile {
     width: 70px;
     height: 70px;
@@ -23,7 +29,6 @@
     position: relative;
     border-radius: 20px;
     margin: 30px auto;
-    float: right;
 }
 .iconUpload-w {
     width: 30px;
@@ -33,10 +38,10 @@
     display: inline-block;
     border-radius: 0 0 20px 20px;
     position: absolute;
-    right: 37px;
     border: 1px solid #ccc;
     border-radius: 50%;
-    top: 10px;
+    bottom: -9px;
+    right: 41%;
 }
 
 .inputfile {

src/app/dashboard/main-menu/add-menu/add-menu.component.html

@@ -8,85 +8,86 @@
               <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> القائمه الرئيسيه/ </li>
               <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
             </ul>
-            <hr class="hr">
           </div>
       </div>
-  
-      <div class="row">
-        <div class="col-12">
-  
-          <form (ngSubmit)="onSubmitted()" #f="ngForm">
 
-            <div class="row">
-              
-              <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
-                <div class="form-group text-center imgContainer">
-                    <img [src]="urlImg" class="imgProfile" height="200"> 
-                    <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
-                    <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-                </div>
-                <!-- <span *ngIf="checkValidImg" style="color: red">must be in 'png' format</span> -->
-              </div>
-              
-              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <div class="form-group">
-                  <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
-                    <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" id="name" name="name" ngModel [ngModel]="menu.name" #name="ngModel" required/>
-                </div>
-              </div>
-              
-              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <div class="form-group">
-                  <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
-                    <input type="text" class="form-control" id="name_en" placeholder="الأسم باللغه الأنجليزيه" name="name_en" ngModel [ngModel]="menu.name_en" #name="ngModel" required/>
-                </div>
-              </div>
-              
-              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <div class="form-group">
-                  <label for="link" style="float: right; margin-right: 5px">الرابط <span class="spanReqired-w">*</span></label>
-                    <input type="text" class="form-control" placeholder="الرابط" id="link" name="link" ngModel [ngModel]="menu.link" #link="ngModel" required/>
-                </div>
-              </div>
-
-              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <div class="form-group">
-                  <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
-                  <select class="form-control" name="ranking" [ngModel]="menu.ranking" id="ranking" required>  
-                    <option value="1000">المزيد</option>
-                    <option value="1">1</option>
-                    <option value="2">2</option>
-                    <option value="3">3</option>
-                    <option value="4">4</option>
-                    <option value="5">5</option>
-                    <option value="6">6</option>
-                  </select>
-                </div>
-              </div>
-    
-              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
-                <select class="form-control" name="status" [ngModel]="menu.status" id="status" required>  
-                  <option value="1">فعال</option>
-                  <option value="0">غير فعال</option>
-                </select>
-              </div>
-              
-              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                <label for="parent" style="float:right; margin-right:5px;">الأب</label>
-                <select class="form-control" name="parent_id" [ngModel]="menu.parent_id" id="parent">
-                  <option value="">لايوجد</option>
-                  <option *ngFor="let parent of parentList" [value]="parent.id">{{parent.name}}</option>
-                </select>
+      <div class="containerContent-w">
+          <div class="row">
+              <div class="col-12">
+        
+                <form (ngSubmit)="onSubmitted()" #f="ngForm">
+      
+                  <div class="row">
+                    
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                      <div class="form-group text-center imgContainer">
+                          <img [src]="urlImg" class="imgProfile" height="200"> 
+                          <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                          <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                      </div>
+                      <!-- <span *ngIf="checkValidImg" style="color: red">must be in 'png' format</span> -->
+                    </div>
+                    
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                          <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" id="name" name="name" ngModel [ngModel]="menu.name" #name="ngModel" required/>
+                      </div>
+                    </div>
+                    
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
+                          <input type="text" class="form-control" id="name_en" placeholder="الأسم باللغه الأنجليزيه" name="name_en" ngModel [ngModel]="menu.name_en" #name="ngModel" required/>
+                      </div>
+                    </div>
+                    
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="link" style="float: right; margin-right: 5px">الرابط <span class="spanReqired-w">*</span></label>
+                          <input type="text" class="form-control" placeholder="الرابط" id="link" name="link" ngModel [ngModel]="menu.link" #link="ngModel" required/>
+                      </div>
+                    </div>
+      
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
+                        <select class="form-control" name="ranking" [ngModel]="menu.ranking" id="ranking" required>  
+                          <option value="1000">المزيد</option>
+                          <option value="1">1</option>
+                          <option value="2">2</option>
+                          <option value="3">3</option>
+                          <option value="4">4</option>
+                          <option value="5">5</option>
+                          <option value="6">6</option>
+                        </select>
+                      </div>
+                    </div>
+          
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                      <select class="form-control" name="status" [ngModel]="menu.status" id="status" required>  
+                        <option value="1">فعال</option>
+                        <option value="0">غير فعال</option>
+                      </select>
+                    </div>
+                    
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <label for="parent" style="float:right; margin-right:5px;">الأب</label>
+                      <select class="form-control" name="parent_id" [ngModel]="menu.parent_id" id="parent">
+                        <option value="">لايوجد</option>
+                        <option *ngFor="let parent of parentList" [value]="parent.id">{{parent.name}}</option>
+                      </select>
+                    </div>
+      
+                  </div>
+                  
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+        
+                </form>
+        
               </div>
-
             </div>
-            
-            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
-  
-          </form>
-  
-        </div>
       </div>
     </div>
   </div>

src/app/dashboard/main-menu/main-list/main-list.component.html

@@ -3,86 +3,88 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w">خدمه إداره المحتوي > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">القائمه الرئيسيه</li>
         </ul>
-      <hr class="hr">
     </div>
   </div>
 
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
-        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="form-group">
-        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
-        <hr>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6">
-      <div class="form-group">
-        <span class="spanSelect-w">أظهر
-          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
-            <option value="5">5</option>
-            <option value="10">10</option>
-            <option value="15">15</option>
-            <option value="20">20</option>
-          </select>
-          من العناصر
-        </span>
+  <div class="containerContent-w">
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+            <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+            <hr>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6">
     
-    </div>
-  </div>
- 
-  <table class="table table-bordered">
-      <thead class="headBackground-w">
-        <tr>
-          <th>
-            <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            <div class="form-group">
+              <span class="spanSelect-w">
+                <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+                من العناصر يتم عرضها 
+              </span>
             </div>
-          </th>
-          <th>عنصر القائمه</th>
-          <th>الترتيب</th>
-          <th> الحاله</th>
-          <th>الأب</th>
-          <th *ngIf="authSer.showEditBtn">تعديل</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let menu of menuList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-          <td>
-            <div class="custom-control custom-checkbox centerIneerItem">
-              <input type="checkbox" class="custom-control-input" id="{{menu.id}}" [(ngModel)]="menu.selected" [value]='menu' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{menu.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
-            </div>
-          </td>
-          <td>{{menu.name}}</td>
-          <td> {{menu.ranking}}
-            <!-- <select class="form-control" [ngModel]="menu.ranking" (change)="changeRanking($event, menu.id)">
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-            </select> -->
-          </td>
-          <td>{{menu.status == 1 ? 'نشط' : menu.status == 0 ? 'غير نشط' : 'not found' }}</td>
-          <td>{{menu.parent_name ? menu.parent_name : 'لايوجد'}}</td>
-          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(menu.id)"><i class="fas fa-edit"></i></button></td>
-        </tr>
-      </tbody>
-    </table>
-    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+          </div>
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          
+          </div>
+      </div>
+      
+      <table class="table table-bordered">
+          <thead class="headBackground-w">
+            <tr>
+              <th>
+                <div class="custom-control custom-checkbox">
+                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                </div>
+              </th>
+              <th>عنصر القائمه</th>
+              <th>الترتيب</th>
+              <th> الحاله</th>
+              <th>الأب</th>
+              <th *ngIf="authSer.showEditBtn">تعديل</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let menu of menuList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+              <td>
+                <div class="custom-control custom-checkbox centerIneerItem">
+                  <input type="checkbox" class="custom-control-input" id="{{menu.id}}" [(ngModel)]="menu.selected" [value]='menu' (change)="checkIfAllSelected();">
+                  <label class="custom-control-label disblayBlock-w" for="{{menu.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                </div>
+              </td>
+              <td>{{menu.name}}</td>
+              <td> {{menu.ranking}}
+                <!-- <select class="form-control" [ngModel]="menu.ranking" (change)="changeRanking($event, menu.id)">
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                </select> -->
+              </td>
+              <td>{{menu.status == 1 ? 'نشط' : menu.status == 0 ? 'غير نشط' : 'not found' }}</td>
+              <td>{{menu.parent_name ? menu.parent_name : 'لايوجد'}}</td>
+              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(menu.id)"><i class="fas fa-edit"></i></button></td>
+            </tr>
+          </tbody>
+        </table>
+        <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+      
+  </div>
 
 </div>

src/app/dashboard/report-list/report-list.component.html

@@ -1,42 +1,43 @@
 <div class="reportList-w">
   <div class="container">
-      <div class="row" *ngIf="permissionsTable">
-        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-          <div class="form-group">
-            <input type="text" placeholder="البحث عن الأسم" class="form-control rightFloat searchInput-w" style="margin-top:13px;" [(ngModel)]="name"/>
-            <button class="btn btn-success leftFloat" (click)="onSearchName()">ابحث</button>
-          </div>
-        </div>
+      <div class="containerContent-w">
+          <div class="row" *ngIf="permissionsTable">
+              <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="form-group">
+                  <input type="text" placeholder="البحث عن الأسم" class="form-control rightFloat searchInput-w" style="margin-top:13px;" [(ngModel)]="name"/>
+                  <button class="btn btn-success leftFloat" (click)="onSearchName()">ابحث</button>
+                </div>
+              </div>
+            </div>
+          
+            <table class="table table-bordered text-center" *ngIf="permissionsTable">
+              <thead>
+                <tr>
+                  <th>الاسم</th>
+                  <th>البريد الإلكتروني</th>
+                  <th>التقارير</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let user of usersList; let i = index ">
+                  <td>{{user.name}}</td>
+                  <td>{{user.email}}</td>
+                  <td><button class="btn btn-outline-secondary" (click)="onGetReport(user.id)"><i class="fas fa-address-card"></i></button></td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="row"  *ngIf="pagesTable">
+              <div class="col-6">
+                <div class="form-group">
+                  <label style="float:right">المجموعات</label>
+                  <select class="form-control" [(ngModel)]="roleVal" name="roleVal" (change)="onGetRoles(roleVal)">
+                    <option *ngFor="let role of rolesList" [value]="role.id">{{role.role_name}}</option>
+                  </select>
+                  <button class="btn btn-success" (click)="getRoleReport()" style="float:right; margin:10px 0;">ابحث</button>
+                </div>
+              </div>
+            </div>
       </div>
-    
-      <table class="table table-bordered text-center" *ngIf="permissionsTable">
-        <thead>
-          <tr>
-            <th>الاسم</th>
-            <th>البريد الإلكتروني</th>
-            <th>التقارير</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let user of usersList; let i = index ">
-            <td>{{user.name}}</td>
-            <td>{{user.email}}</td>
-            <td><button class="btn btn-outline-secondary" (click)="onGetReport(user.id)"><i class="fas fa-address-card"></i></button></td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="row"  *ngIf="pagesTable">
-        <div class="col-6">
-          <div class="form-group">
-            <label style="float:right">المجموعات</label>
-            <select class="form-control" [(ngModel)]="roleVal" name="roleVal" (change)="onGetRoles(roleVal)">
-              <option *ngFor="let role of rolesList" [value]="role.id">{{role.role_name}}</option>
-            </select>
-            <button class="btn btn-success" (click)="getRoleReport()" style="float:right; margin:10px 0;">ابحث</button>
-          </div>
-        </div>
-      </div>
-      
     </div>
 </div>
 

src/app/dashboard/reports-page/reports-page.component.css

@@ -5,16 +5,51 @@
 }
 
 .reportPage-w .report {
-    width: 100%;
+    width: 300px;
     display: inline-block;
-    padding: 20px 0;
-    background-color: #c9a380;
-    border-radius: 20px;
+    padding: 35px 0;
+    margin: 20px 0;
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    height: 150px;
+    border: 1px solid #bda380;
+    transition: all 0.5s;
+}
+
+.reportPage-w .report:hover {
+    background-color: #ccc;
+    color: #00a99d;
+}
+
+.reportPage-w .report:hover a {
+    color: #00a99d;
+}
+
+.reportPage-w .report:hover a span {
+    color: #00a99d;
 }
 
 
 .reportPage-w .report a {
     text-decoration: none;
-    color: #fff;
+    color: #bda380;
     font-size: 20px;
+
+}
+
+.reportPage-w .report a span {
+    display: block;
+    color: #a08c72;
+}
+
+@media(max-width:767px){
+    .reportPage-w .report{
+        width: 100%;
+    }
+}
+
+@media(min-width:767px) and (max-width:991px) {
+    .reportPage-w .report{
+        width: 100%;
+    }
 }

src/app/dashboard/reports-page/reports-page.component.html

@@ -6,25 +6,27 @@
             <li class="headingText-w">خدمه الصلاحيات / </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">التقارير</li>
           </ul>
-        <hr class="hr">
       </div>
     </div>
-    <div class="row" style="margin-top: 30px;">
-      <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="authSer.showReportBtn">
-        <div class="report">
-          <a style="cursor:pointer;" (click)="userReport()">تقرير الصلاحيات لدي مستخدم محدد</a>
-        </div>
-      </div>
-      <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="authSer.showReportBtn">
-        <div class="report">
-            <a style="cursor:pointer" (click)="userInRolesReport()">تقرير الصفحات التابعه لمجموعه</a>
+
+    <div class="containerContent-w">
+      <div class="row" style="margin-top: 30px;">
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="authSer.showReportBtn">
+            <div class="report" (click)="userReport()" style="cursor:pointer;">
+              <a><span>تقرير الصلاحيات</span>لدي مستخدم محدد </a>
+            </div>
           </div>
-      </div>
-      <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="authSer.showReportBtn">
-        <div class="report">
-            <a style="cursor:pointer" (click)="permissionInUsersReport()">  تقرير المستخدمين داخل مجموعه  </a>
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="authSer.showReportBtn">
+            <div class="report" (click)="userInRolesReport()"  style="cursor:pointer"> 
+                <a><span>تقرير الصفحات</span>التابعه لمجموعه</a>
+              </div>
           </div>
-      </div>
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="authSer.showReportBtn">
+            <div class="report" style="cursor:pointer" (click)="permissionInUsersReport()">
+                <a><span>تقرير المستخدمين </span> داخل مجموعه  </a>
+              </div>
+          </div>
+        </div>
     </div>
   </div>
 </div>

src/app/dashboard/roles/add-roles/add-roles.component.css

@@ -11,7 +11,11 @@
     padding: 5px 0;
 }
 
-
+input,select,textarea{
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
 
 
 .addRole-w .permission {

src/app/dashboard/roles/add-roles/add-roles.component.html

@@ -3,24 +3,24 @@
     <div class="row">
       <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه الصلاحيات / </li>
-          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">المجموعات / </li>
+          <li class="headingText-w">خدمه الصلاحيات > </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">المجموعات > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">  {{typeLink}} </li>
         </ul>
-        <hr class="hr">
       </div>
     </div>
 
-    <div class="row" style="margin-top:30px;">
+    <div class="containerContent-w">
+      <div class="row" style="margin-top:30px;">
         <div class="col-12">
           <form (ngSubmit)="onSubmitted()" #f="ngForm">
               <div class="row">
 
                 <div class="col-12 col-sm-12 col-md-4">
-                    <div class="form-group">
-                      <label style="float: right; margin: 5px 0">الاسم <span class="spanReqired-w">*</span></label>
-                      <input type="text" class="form-control" name="role_name" placeholder="الأسم" ngModel required  #name="ngModel" [ngModel]="user.roleName"/>
-                    </div>
+                  <div class="form-group">
+                    <label style="float: right; margin: 5px 0">الاسم <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" name="role_name" placeholder="الأسم" ngModel required  #name="ngModel" [ngModel]="user.roleName"/>
+                  </div>
                 </div>
                 <div class="col-12 col-sm-12 col-md-4">
                     <div class="form-group">
@@ -65,6 +65,8 @@
 
           </form>
         </div>
+     </div>
     </div>
+
   </div>
 </div>

src/app/dashboard/roles/role-report/role-report.component.html

@@ -1,27 +1,29 @@
 <div class="reprot">
   <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
-        <table class="table table-bordered text-center">
-          <thead>
-            <tr>
-              <th>إسم المجموعه</th>
-              <th>إسم الصفحه</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let data of reportPages; let i = index">
-              <td>{{data.role_name}}</td>
-              <td>
-                <p *ngFor="let page of data.pages">
-                  {{page.name}}
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+    <div class="containerContent-w">
+        <div class="row">
+            <div class="col-12">
+              <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
+              <table class="table table-bordered text-center">
+                <thead>
+                  <tr>
+                    <th>إسم المجموعه</th>
+                    <th>إسم الصفحه</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let data of reportPages; let i = index">
+                    <td>{{data.role_name}}</td>
+                    <td>
+                      <p *ngFor="let page of data.pages">
+                        {{page.name}}
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+        </div>
     </div>
   </div>
 </div> 

src/app/dashboard/roles/role-report2/role-report2.component.html

@@ -1,45 +1,47 @@
 <div class="reprot">
   <div class="container">
-    <div class="row">
-      <button class="btn btn-success" style="float:right;margin:10px 0;" (click)="onPrint()">طباعه</button>
-      <div class="col-12">
-        <table class="table table-bordered text-center">
-          <thead>
-            <tr>
-              <th>إسم المجموعه</th>
-              <th>اسم الموظف</th>
-              <th>اسم الاداره</th>
-              <th>أسم الموظف مانح الصلاحيه</th>
-              <th>تاريخ المنح</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let data of reportData; let i = index">
-              <td>{{data.role_name}}</td>
-              <td>
-                <p *ngFor="let user of data.users">
-                  {{user.name}}
-                </p>
-              </td>
-              <td>
-                <p *ngFor="let user of data.users">
-                  {{user.adminstration_name}}
-                </p>
-              </td>
-              <td>
-                <p *ngFor="let user of data.users">
-                  {{user.asigned_by}}
-                </p>
-              </td>
-              <td>
-                <p *ngFor="let user of data.users">
-                  {{user.asigned_at}}
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="containerContent-w">
+          <div class="row">
+              <button class="btn btn-success" style="float:right;margin:10px 0;" (click)="onPrint()">طباعه</button>
+              <div class="col-12">
+                <table class="table table-bordered text-center">
+                  <thead>
+                    <tr>
+                      <th>إسم المجموعه</th>
+                      <th>اسم الموظف</th>
+                      <th>اسم الاداره</th>
+                      <th>أسم الموظف مانح الصلاحيه</th>
+                      <th>تاريخ المنح</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let data of reportData; let i = index">
+                      <td>{{data.role_name}}</td>
+                      <td>
+                        <p *ngFor="let user of data.users">
+                          {{user.name}}
+                        </p>
+                      </td>
+                      <td>
+                        <p *ngFor="let user of data.users">
+                          {{user.adminstration_name}}
+                        </p>
+                      </td>
+                      <td>
+                        <p *ngFor="let user of data.users">
+                          {{user.asigned_by}}
+                        </p>
+                      </td>
+                      <td>
+                        <p *ngFor="let user of data.users">
+                          {{user.asigned_at}}
+                        </p>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
       </div>
-    </div>
   </div>
 </div> 

src/app/dashboard/roles/roles-list/roles-list.component.html

@@ -3,18 +3,17 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه الصلاحيات / </li>
+          <li class="headingText-w">خدمه الصلاحيات > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">المجموعات</li>
         </ul>
       <!-- <p class="headingText-w"> </p> -->
-      <hr class="hr">
     </div>
   </div>
     
   <div class="row">
     <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAddRole()" *ngIf="authSer.showAddBtn">إنشاء</button>
-        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDeleteRoles()" *ngIf="authSer.showDeleteBtn">حذف</button>
+        <button type="button" class="btn btn-outline-success dashButton-w butttonCreate" (click)="onAddRole()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w butttonDelete" (click)="onDeleteRoles()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
     </div>
     <div class="col-12 col-sm-12 col-md-6 col-lg-6">
       <div class="form-group">
@@ -25,20 +24,20 @@
   </div>
 
   <div class="row">
-    <div class="col-12 col-sm-12 col-md-6">
+    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
       <div class="form-group">
-        <span class="spanSelect-w">أظهر
+        <span class="spanSelect-w">
           <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
             <option value="5">5</option>
             <option value="10">10</option>
             <option value="15">15</option>
             <option value="20">20</option>
           </select>
-          من العناصر
+          من العناصر يتم عرضها 
         </span>
       </div>
     </div>
-    <div class="col-12 col-sm-12 col-md-6">
+    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
     
     </div>
   </div>

src/app/dashboard/sections/add-section/add-section.component.css

@@ -12,3 +12,8 @@
 }
 
 
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}

src/app/dashboard/sections/add-section/add-section.component.html

@@ -3,58 +3,60 @@
        <div class="row">
         <div class="col-12">
           <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w">خدمه الصلاحيات / </li>
-            <li class="headingText-w" style="cursor:pointer" (click)="perviousLocation()">الاقسام / </li>
+            <li class="headingText-w">خدمه الصلاحيات > </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="perviousLocation()">الاقسام > </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">  {{typeLink}} </li>
           </ul>
-          <hr class="hr">
         </div>
       </div>
-      <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 30px;">
-          <div class="row">
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="name">الأسم <span class="spanReqired-w">*</span></label>
-                <input type="text" name="name" class="form-control" placeholder="الأسم" ngModel #name="ngModel" [ngModel]="section.name" required/>
-              </div>
+
+      <div class="containerContent-w">
+          <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 30px;">
+              <div class="row">
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="name">الأسم <span class="spanReqired-w">*</span></label>
+                    <input type="text" name="name" class="form-control" placeholder="الأسم" ngModel #name="ngModel" [ngModel]="section.name" required/>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
+                    <input type="email" class="form-control" name="email" placeholder="الإيميل" ngModel email #email="ngModel" [ngModel]="section.email" required/>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="phone">الهاتف</label>
+                    <input type="phone" class="form-control" placeholder="الهاتف" name="phone" ngModel #phone="ngModel" [ngModel]="section.phone"/>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="switch_phone">الهاتف البديل</label>
+                    <input type="phone" class="form-control" placeholder="الهاتف البديل" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="section.switch_phone"/>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="status">الحاله</label>
+                    <select name="status" class="form-control" [ngModel]="section.status">
+                      <option value="1">Active</option>
+                      <option value="0">InActive</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label>الاداره <span class="spanReqired-w">*</span></label>
+                    <select [ngModel]="section.adminstration_id" name="adminstration_id" class="form-control" required>
+                      <option *ngFor="let admin of adminstartionsList; let i = index" [value]="admin.id">{{admin.name}}</option>
+                    </select>
+                  </div>
+                </div>
             </div>
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
-                <input type="email" class="form-control" name="email" placeholder="الإيميل" ngModel email #email="ngModel" [ngModel]="section.email" required/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="phone">الهاتف</label>
-                <input type="phone" class="form-control" placeholder="الهاتف" name="phone" ngModel #phone="ngModel" [ngModel]="section.phone"/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="switch_phone">الهاتف البديل</label>
-                <input type="phone" class="form-control" placeholder="الهاتف البديل" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="section.switch_phone"/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="status">الحاله</label>
-                <select name="status" class="form-control" [ngModel]="section.status">
-                  <option value="1">Active</option>
-                  <option value="0">InActive</option>
-                </select>
-              </div>
-            </div>
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label>الاداره <span class="spanReqired-w">*</span></label>
-                <select [ngModel]="section.adminstration_id" name="adminstration_id" class="form-control" required>
-                  <option *ngFor="let admin of adminstartionsList; let i = index" [value]="admin.id">{{admin.name}}</option>
-                </select>
-              </div>
-            </div>
-        </div>
-        <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid">حفظ</button>
-      </form>
+            <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid">حفظ</button>
+          </form>
+      </div>
     </div>
   </div>

src/app/dashboard/sections/section-list/section-list.component.html

@@ -3,71 +3,72 @@
     <div class="row">
       <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w">خدمه الصلاحيات / </li>
+            <li class="headingText-w">خدمه الصلاحيات  > </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">الأقسام</li>
         </ul>
-        <hr class="hr">
       </div>
     </div>
     
-    <div class="row">
-      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-          <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAddSection()" *ngIf="authSer.showAddBtn">إنشاء</button>
-          <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDeleteSections()" *ngIf="authSer.showDeleteBtn">حذف</button>
-      </div>
-      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <div class="form-group">
-          <input type="text" placeholder="أكتب ماتبحث عنه" class="form-control searchInput-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
-          <hr>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-6">
-        <div class="form-group">
-          <span class="spanSelect-w">أظهر
-            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
-              <option value="20">20</option>
-            </select>
-            من العناصر
-          </span>
-        </div>
-      </div>
-      <div class="col-6">
-      
-      </div>
-    </div>
-  
-    <table class="table table-bordered">
-      <thead class="headBackground-w">
-        <tr>
-          <th>
-            <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+    <div class="containerContent-w">
+        <div class="row">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAddSection()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+                <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDeleteSections()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
             </div>
-          </th>
-          <th>الاسم</th>
-          <th *ngIf="authSer.showEditBtn">تعديل</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let section of sectionsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-          <td>
-            <div class="custom-control custom-checkbox centerIneerItem">
-              <input type="checkbox" class="custom-control-input" id="{{section.id}}" [(ngModel)]="section.selected" [value]='section' (change)="checkIfAllSelected()">
-              <label class="custom-control-label disblayBlock-w" for="{{section.id}}" style="color:#2a2a2a; cursor: pointer;"></label>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+              <div class="form-group">
+                <input type="text" placeholder="أكتب ماتبحث عنه" class="form-control searchInput-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+                <hr>
+              </div>
             </div>
-          </td>
-          <td>{{section.name}}</td>
-          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(section.id)"><i class="fas fa-edit"></i></button></td>
-        </tr>
-      </tbody>
-    </table>
-    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+          </div>
+      
+          <div class="row">
+              <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+                <div class="form-group">
+                  <span class="spanSelect-w">
+                    <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                      <option value="5">5</option>
+                      <option value="10">10</option>
+                      <option value="15">15</option>
+                      <option value="20">20</option>
+                    </select>
+                    من العناصر يتم عرضها 
+                  </span>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+              
+              </div>
+          </div>
+        
+          <table class="table table-bordered">
+            <thead class="headBackground-w">
+              <tr>
+                <th>
+                  <div class="custom-control custom-checkbox">
+                      <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                  </div>
+                </th>
+                <th>الاسم</th>
+                <th *ngIf="authSer.showEditBtn">تعديل</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let section of sectionsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                <td>
+                  <div class="custom-control custom-checkbox centerIneerItem">
+                    <input type="checkbox" class="custom-control-input" id="{{section.id}}" [(ngModel)]="section.selected" [value]='section' (change)="checkIfAllSelected()">
+                    <label class="custom-control-label disblayBlock-w" for="{{section.id}}" style="color:#2a2a2a; cursor: pointer;"></label>
+                  </div>
+                </td>
+                <td>{{section.name}}</td>
+                <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(section.id)"><i class="fas fa-edit"></i></button></td>
+              </tr>
+            </tbody>
+          </table>
+          <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+    </div>
   </div>
   

src/app/dashboard/service-item/service-item.component.css

@@ -61,13 +61,88 @@
 }
 
 .headerServices {
+    width: 50px;
+    height: 50px;
     position: fixed;
     cursor: pointer;
-    right:-15px;
+    right: -15px;
     color: #252525;
     z-index: 10;
+    background-color: #efefef;
+    border-radius: 5px 0 0 5px;
+    border: 1px solid #ecdcc7; 
+    display: block;
 }
 
+.showHeaderServices {
+    width: 200px;
+    min-height: 200px;
+    position: fixed;
+    cursor: pointer;
+    right: -15px;
+    color: #252525;
+    z-index: 10;
+    background-color: #f7f7f7;
+    border-radius: 5px 0 0 5px;
+    text-align: right;
+    border: 1px solid #bda380;
+    display: none;
+  }
+
+
+.serviceSideList-w{
+    width: 200px;
+    min-height: 200px;
+    position: fixed;
+    cursor: pointer;
+    right: -15px;
+    color: #252525;
+    z-index: 10;
+    background-color: #f7f7f7;
+    border-radius: 5px 0 0 5px;
+    text-align: right;
+    border: 1px solid #bda380;
+    display: none;
+    z-index: 9999999;
+  }
+
+  .showServiceSideList-w{
+    width: 200px;
+    min-height: 200px;
+    position: fixed;
+    cursor: pointer;
+    right: -15px;
+    color: #252525;
+    z-index: 10;
+    background-color: #f7f7f7;
+    border-radius: 5px 0 0 5px;
+    text-align: right;
+    border: 1px solid #bda380;
+    display: block;
+    z-index: 9999999;
+  }
+
+
+  .serviceSideList-w ul {
+      width: 100%;
+  }
+
+  .serviceSideList-w ul li{
+      text-align: right;
+      margin: 10px 0;
+  }
+
+  .serviceSideList-w ul li a{
+    font-size: 15px;
+    transform: all 0.5s;
+    color: #bda380
+  }
+
+  .serviceSideList-w ul li a:hover{
+      color: #00a99d;
+  }
+
+
 .servicesMenu-w {
     width: 200px;
     padding: 20px 0;
@@ -95,14 +170,49 @@
     margin: 0 auto;
     display: block;
     line-height: 50px;
-    margin-left: 15px;
+    margin-left: 10px;
+    color: #00a99d;
 }
 
 .overLeft {
     left: -100px !important;
 }
 
+.changeItemShow{
+    display: block;
+}
+
+.cccont {
+    display: none;
+}
+
+.menuMobile-w {
+    background-color: transparent;
+    border: none;
+}
+
+.menuMobile-w i{
+    font-size: 40px;
+}
+
+.menuMobile-w::after {
+    display: none !important;
+}
+
+.dropDownMobile-w {
+    top: 60px !important; 
+    left:-100px !important;
+    text-align: right;
+    max-width: 210px;
+    overflow-x: auto;
+}
 
+.btn-outline-primary:not(:disabled):not(.disabled).active,
+ .btn-outline-primary:not(:disabled):not(.disabled):active,
+  .show>.btn-outline-primary.dropdown-toggle {
+      background-color: transparent;
+      border: none;
+  }
 
 /* start media query */ 
 @media(max-width: 767px) {

src/app/dashboard/service-item/service-item.component.html

@@ -3,14 +3,18 @@
   <div class="itemHeader-w">
     <div class="container">
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
+ 
+          <div ngbDropdown class="d-inline-block d-lg-none">
+            <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" ngbDropdownToggle><i class="fas fa-bars"></i></button>
+            <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
+              <button class="dropdown-item" (click)="goToHome()">الرئيسيه</button>
+              <button class="dropdown-item" *ngFor="let page of mobilePages; let i = index" (click)="getListPage(page)">{{page.name}}</button>
+            </div>
+          </div>
         
-          <button style="cursor:pointer" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav mr-auto" style="margin: 5px auto">
-              <!-- <li class="nav-item active" (click)="goToHome()"><i class="fas fa-home"></i></li> -->
+              <li class="nav-item" style="color: #00a99d; font-weight:bold;margin:7px;" (click)="goToHome()">الرئيسيه</li>
               <li class="nav-item active" *ngFor="let page of pages; let i = index">
                 <a class="nav-link" style="color: #00a99d; font-weight:bold"  [ngClass]="page.active == 0 ? '' : 'activeLink' " (click)="getListPage(page)">{{page.name}}</a>
               </li>
@@ -30,14 +34,19 @@
 
 
 
-  <div class="btn-group mr-3 headerServices">
-    <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-      <button class="btn btn-outline-primary" (mouseover)="mouseover=true" (mouseout)="mouseover=false" style="border-radius:50%"  ngbDropdownToggle></button>
-      <div class="dropdown-menu" ngbDropdownMenu style="top:36px; right:1px;text-align:right; padding: 5px;" *ngIf="mouseover">
-        <button class="dropdown-item" *ngFor="let service of services" style="text-align:right; padding:0; font-size:15px;cursor: pointer;" (click)="onGetService(service)">{{service.name}}</button>
-      </div>
-    </div> 
+
+
+  <div class="headerServices" (mouseover)="mouseOvered=true" [className]="mouseOvered ? 'showHeaderServices' : 'headerServices' ">
+      <i class="fas fa-home" style="margin-left:10px;"></i>
   </div>
+  
+  <div class="serviceSideList-w" (mouseout)="mouseOvered=false" [className]="mouseOvered ? 'showServiceSideList-w' : 'serviceSideList-w' ">
+    <ul class="list-unstyled">
+      <li *ngFor="let service of services"><a (click)="onGetService(service)">{{service.name}}</a></li>
+    </ul>
+  </div>
+  
+  
 
   <div class="listData-w text-center">
       <router-outlet></router-outlet>

src/app/dashboard/service-item/service-item.component.ts

@@ -19,9 +19,21 @@ export class ServiceItemComponent implements OnInit {
   mouseover: boolean;
   services = [];
   pages = [];
+  mobilePages = [];
   extraPages = [];
   defaultPageId: number;
   myInnerHeight = window.innerHeight;
+
+  isHovering = false;
+
+  mouseHovering() {
+      this.isHovering = true;
+      console.log(this.isHovering);
+  }
+  mouseLeaving() {
+      this.isHovering = false;
+      console.log(this.isHovering);
+  }
   
   constructor( private authService:AuthServiceService,
     private userSer: UserService, 
@@ -31,15 +43,7 @@ export class ServiceItemComponent implements OnInit {
     private authSer: AuthServiceService,
     private spinner: NgxSpinnerService) { }
 
-  // @HostListener('mouseover')
-  //   onMouseOver() {
-  //   this.mouseover = true;
-  // }
 
-  // @HostListener('mouseout')
-  //   onMouseOut() {
-  //   this.mouseover = false;
-  // }
 
   ngOnInit() {
 
@@ -72,6 +76,7 @@ export class ServiceItemComponent implements OnInit {
 
     this.userSer.getPagesPermetiotns(this.userId, this.servicesId).subscribe(
       (responce) => {
+        this.mobilePages = responce['pages'];
         console.log(responce['pages'].length);
         if(responce['pages'].length > 6) {
           for(let i = 0; i < 6 ; i++) {
@@ -84,7 +89,7 @@ export class ServiceItemComponent implements OnInit {
         } else {
           this.authSer.showMoreLinks = false;
           this.pages = responce['pages'];
-          this.pages[0].active = 1;
+          // this.pages[0].active = 1;
         }
         this.spinner.hide();
         console.log('extraaaaa' , this.extraPages);
@@ -96,21 +101,21 @@ export class ServiceItemComponent implements OnInit {
 
   //click on service in side button
   onGetService(service) {
+    this.mobilePages = [];
     if(service.id == 1) {
       //خدمه الصلاحيات
       this.userservice.getPagesPermetiotns(this.userId, service.id).subscribe(
         (responce) => {
           console.log(responce);
+          this.mobilePages = responce['pages'];
           this.pages = responce['pages'];
           this.authSer.showMoreLinks = false;
           console.log(this.pages);
           //this.pages[0].active = 1;
           if(this.pages[0].id == 1) {
-            this.pages[0].active = 1;
             console.log('/service/' + this.userId + '/' + service.id + '/users/' + this.pages[0].id);
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/users/' + this.pages[0].id]);
           }else if(this.pages[0].id == 2) {
-            this.pages[0].active = 1;
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/roles/' + this.pages[0].id]);
           } else if(this.pages[0].id == 3) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/departments/' + this.pages[0].id]);
@@ -130,6 +135,7 @@ export class ServiceItemComponent implements OnInit {
       this.userservice.getPagesPermetiotns(this.userId, service.id).subscribe(
         (responce) => {
           console.log(responce);
+          this.mobilePages = responce['pages'];
           if(responce['pages'].length > 6) {
             for(let i = 0; i < 6 ; i++) {
               this.pages[i] = responce['pages'][i];

src/app/dashboard/users/form-user/form-user.component.css

@@ -12,7 +12,7 @@
     border-radius: 20px;
 }
 
-input.ng-invalid.ng-touched {
+/* input.ng-invalid.ng-touched {
     border: 2px solid #ccc;
 }
 
@@ -22,12 +22,16 @@ input.ng-invalid {
 
 select.ng-invalid{
     border: 2px solid #ccc;
-}
+} */
 
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
 
 .imgProfile {
-    width: 70px;
-    height: 70px;
+    width: 100%;
     border-radius: 20px 20px 0 0;
     border-radius: 50%;
     border: 1px solid #ccc;
@@ -39,7 +43,6 @@ select.ng-invalid{
     position: relative;
     border-radius: 20px;
     margin: 30px auto;
-    float: right;
 }
 .iconUpload-w {
     width: 30px;
@@ -49,10 +52,10 @@ select.ng-invalid{
     display: inline-block;
     border-radius: 0 0 20px 20px;
     position: absolute;
-    right: 37px;
+    right: 40%;
     border: 1px solid #ccc;
     border-radius: 50%;
-    top: 10px;
+    bottom: 0;
 }
 
 .inputfile {

src/app/dashboard/users/form-user/form-user.component.html

@@ -1,198 +1,202 @@
 <div class="userForm-w">
   <div class="container">
+    
       <div class="row">
         <div class="col-12">
           <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w">خدمه الصلاحيات / </li>
-            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">{{typeFirstLink}} / </li>
+            <li class="headingText-w">خدمه الصلاحيات > </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">{{typeFirstLink}} > </li>
             <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}}  </li>
           </ul>
-          <hr class="hr">
         </div>
       </div>
-      <form [formGroup]="signupForm" (ngSubmit)="onSubmittedForm()">
-        <div class="row">
-          <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
-            <div class="form-group text-center imgContainer">
-                <img [src]="urlImg" class="imgProfile" height="200"> 
-                <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
-                <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-            </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="name" style="float:right">الأسم <span class="spanReqired-w">*</span></label>
-              <input type="text" id="name" placeholder="أدخل الأسم رباعي" class="form-control" formControlName="name" />
+
+      <div class="containerContent-w">
+        <form [formGroup]="signupForm" (ngSubmit)="onSubmittedForm()">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+              <div class="form-group text-center imgContainer">
+                  <img [src]="urlImg" class="imgProfile" height="200"> 
+                  <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                  <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="functional_number" style="float:right">الرقم الوظيفي <span class="spanReqired-w">*</span></label>
-              <input type="number" class="form-control" id="functional_number" formControlName="functional_number" />
-            </div>
-          </div> 
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-                <label for="identity" style="float:right">الهويه <span class="spanReqired-w">*</span></label>
-              <select class="form-control select" id="identity" formControlName="identity_type_id" (change)="getSelectedOptionText($event)">
-                <option *ngFor="let identity of identities" value="{{identity.id}}">{{identity.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="name" style="float:right">الأسم <span class="spanReqired-w">*</span></label>
+                <input type="text" id="name" placeholder="أدخل الأسم رباعي" class="form-control" formControlName="name" />
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id != 4">
-            <div class="form-group">
-              <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
-              <input type="phone" class="form-control" id="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
-              <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
-              <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
-              <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="functional_number" style="float:right">الرقم الوظيفي <span class="spanReqired-w">*</span></label>
+                <input type="number" class="form-control" id="functional_number" formControlName="functional_number" />
+              </div>
+            </div> 
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                  <label for="identity" style="float:right">الهويه <span class="spanReqired-w">*</span></label>
+                <select class="form-control select" id="identity" formControlName="identity_type_id" (change)="getSelectedOptionText($event)">
+                  <option *ngFor="let identity of identities" value="{{identity.id}}">{{identity.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id == 4">
-            <div class="form-group">
-              <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
-              <input type="phone" class="form-control" id="identityNumber" formControlName="identity_number" />
-              <span style="color:red">أدخل رقم جواز السفر </span>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id != 4">
+              <div class="form-group">
+                <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                <input type="phone" class="form-control" id="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
+                <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
+                <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
-              <select class="form-control" formControlName="nationality_id">
-                <option *ngFor="let country of countries; let i = index" [ngValue]="country.id">{{country.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id == 4">
+              <div class="form-group">
+                <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                <input type="phone" class="form-control" id="identityNumber" formControlName="identity_number" />
+                <span style="color:red">أدخل رقم جواز السفر </span>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
-            <div class="form-group">
-              <div class="custom-control custom-radio inlineBlock-w">
-                <input type="radio" class="custom-control-input" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
-                <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="nationality_id">
+                  <option *ngFor="let country of countries; let i = index" [ngValue]="country.id">{{country.name}}</option>
+                </select>
               </div>
-              
-              <div class="custom-control custom-radio inlineBlock-w">
-                <input type="radio" class="custom-control-input" id="defaultChecked" value="female" formControlName="gender" name="gender">
-                <label class="custom-control-label" for="defaultChecked" style="cursor: pointer; margin-right:30px">انثي</label>
+            </div>
+           
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                <input type="text" id="phone" class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
               </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
-              <input type="text" id="phone" class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                <input type="date" id="birthdate" class="form-control" formControlName="birthday" /> 
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
-              <input type="date" id="birthdate" class="form-control" formControlName="birthday" /> 
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
+                <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
-              <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
+                <input type="date" class="form-control" id="date_employment_hij" formControlName="date_of_employment_hij" />
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
-              <input type="date" class="form-control" id="date_employment_hij" formControlName="date_of_employment_hij" />
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
+                <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position"  />
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
-              <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position"  />
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">اسم الوظيفه</label>
+                <select class="form-control" formControlName="job_title_id">
+                  <option *ngFor="let job of jobTitils; let i = index" [ngValue]="job.id">{{job.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float:right">اسم الوظيفه</label>
-              <select class="form-control" formControlName="job_title_id">
-                <option *ngFor="let job of jobTitils; let i = index" [ngValue]="job.id">{{job.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">التخصص</label>
+                <select class="form-control" formControlName="specialization_id">
+                  <option *ngFor="let spec of specializations; let i = index" [ngValue]="spec.id">{{spec.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float:right">التخصص</label>
-              <select class="form-control" formControlName="specialization_id">
-                <option *ngFor="let spec of specializations; let i = index" [ngValue]="spec.id">{{spec.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">نوع العقد</label>
+                <select class="form-control" formControlName="contract_type_id">
+                  <option *ngFor="let contract of contracts; let i = index" [ngValue]="contract.id">{{contract.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float:right">نوع العقد</label>
-              <select class="form-control" formControlName="contract_type_id">
-                <option *ngFor="let contract of contracts; let i = index" [ngValue]="contract.id">{{contract.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">الملاك الوظيفي</label>
+                <select class="form-control" formControlName="staff_id">
+                  <option *ngFor="let staff of staffs; let i = index" [ngValue]="staff.id">{{staff.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float:right">الملاك الوظيفي</label>
-              <select class="form-control" formControlName="staff_id">
-                <option *ngFor="let staff of staffs; let i = index" [ngValue]="staff.id">{{staff.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="email" style="float:right">الإيميل <span class="spanReqired-w">*</span></label>
+                <input type="email" id="email" class="form-control" placeholder="الإيميل" appEnglishCharacters formControlName="email" />
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="email" style="float:right">الإيميل <span class="spanReqired-w">*</span></label>
-              <input type="email" id="email" class="form-control" placeholder="الإيميل" appEnglishCharacters formControlName="email" />
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="hideConfirmPassword">
+              <div class="form-group">
+                <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
+                <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="hideConfirmPassword">
-            <div class="form-group">
-              <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
-              <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w">*</span></label>
+                <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w">*</span></label>
-              <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showStatus">
+              <div class="form-group">
+                <label>الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="status">
+                  <option [ngValue]='1'>Active</option>
+                  <option [ngValue]='0'>Non Active</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showStatus">
-            <div class="form-group">
-              <label>الحاله <span class="spanReqired-w">*</span></label>
-              <select class="form-control" formControlName="status">
-                <option [ngValue]='1'>Active</option>
-                <option [ngValue]='0'>Non Active</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float: right;">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="status">
+                  <option [ngValue]='1'>Active</option>
+                  <option [ngValue]='0'>Non Active</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float: right;">الحاله <span class="spanReqired-w">*</span></label>
-              <select class="form-control" formControlName="status">
-                <option [ngValue]='1'>Active</option>
-                <option [ngValue]='0'>Non Active</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
+                  <option *ngFor="let admin of adminstration; let i = index" [ngValue]="admin.id">{{admin.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-            <div class="form-group">
-              <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
-              <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
-                <option *ngFor="let admin of adminstration; let i = index" [ngValue]="admin.id">{{admin.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showDepart">
+              <div class="form-group">
+                <label style="float:right">القسم <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="department_id">
+                  <option *ngFor="let department of departments; let i = index" [ngValue]="department.id">{{department.name}}</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showDepart">
-            <div class="form-group">
-              <label style="float:right">القسم <span class="spanReqired-w">*</span></label>
-              <select class="form-control" formControlName="department_id">
-                <option *ngFor="let department of departments; let i = index" [ngValue]="department.id">{{department.name}}</option>
-              </select>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+              <div class="form-group">
+                <div class="custom-control custom-radio inlineBlock-w">
+                  <input type="radio" class="custom-control-input" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
+                  <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
+                </div>
+                
+                <div class="custom-control custom-radio inlineBlock-w">
+                  <input type="radio" class="custom-control-input" id="defaultChecked" value="female" formControlName="gender" name="gender">
+                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer; margin-right:30px">انثي</label>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-        <button type="submit" [disabled]="!signupForm.valid" class="btn btn-success regesterBtn-w">حفظ</button>
-      </form>
+          <button type="submit" [disabled]="!signupForm.valid" class="btn btn-success regesterBtn-w">حفظ</button>
+        </form>
+      </div>
   </div>
 </div>

src/app/dashboard/users/form-user/form-user.component.ts

@@ -46,7 +46,7 @@ export class FormUserComponent implements OnInit {
   identity_type: number;
   number_identitiy:number;
   checkPageAppear: boolean  = true;
-  urlImg: string =  '../../assets/image/avatar.png';
+  urlImg: string =  '../../../../assets/image/Group 299.png';
 
 
 

src/app/dashboard/users/user-permission/user-permission.component.css

@@ -10,11 +10,13 @@
 
 .userPermission-w .permission {
     width: 100%;
+    min-height: 170px;
     display: inline-block;
     background-color: #f3f3f3;
     border-radius: 20px;
     padding: 20px 0;
     margin: 10px 0;
+    border: 1px solid #bda380;
 }
 
 .userPermission-w .permission .custom-control-label::before,

src/app/dashboard/users/user-permission/user-permission.component.html

@@ -1,32 +1,44 @@
 <div class="userPermission-w">
   <div class="container">
     
-    <h1 class="text-center">المجموعات</h1>
-    <hr>
     <div class="row">
-      <div class="col-12 col-sm-3 col-md-3" *ngFor="let role of roles; let i = index">
-        <div class="permission text-center">
-          <div class="custom-control custom-checkbox centerIneerItem">
-            <input type="checkbox" class="custom-control-input" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role.id' name="{{role.id}}" style="cursor: pointer;">
-            <label class="custom-control-label disblayBlock-w" for="{{role.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{role.role_name}}</label>
-          </div>
-        </div>
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه الصلاحيات > </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authService.perviousLocation()"> المستخدمين > </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px"> الصلاحيات </li>
+        </ul>
       </div>
     </div>
 
-    <!-- <h1 class="text-center" style="margin: 30px 0;">الصلاحيات</h1>
-    <hr> -->
-    <div class="row">
-      <div class="col-12 col-sm-6 col-md-6" *ngFor="let page of pages; let i=index">
-        <div class="permission text-center">
-          <h2>{{page.name}}</h2>
-          <div class="custom-control custom-checkbox centerIneerItem" *ngFor="let pagePermission of pages[i].permissions; let j=index" style="margin: 5px 0;">
-            <input type="checkbox" class="custom-control-input" id="{{pagePermission.id}}" [(ngModel)]="pagePermission.selected" [value]='pagePermission.id' name="{{pagePermission.id}}" style="cursor: pointer;">
-            <label class="custom-control-label disblayBlock-w" for="{{pagePermission.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{pagePermission.permission_name}}</label>
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-sm-3 col-md-3" *ngFor="let role of roles; let i = index">
+          <div class="permission text-center">
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role.id' name="{{role.id}}" style="cursor: pointer;">
+              <label class="custom-control-label disblayBlock-w" for="{{role.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{role.role_name}}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- <h1 class="text-center" style="margin: 30px 0;">الصلاحيات</h1>
+      <hr> -->
+      <div class="row">
+        <div class="col-12 col-sm-6 col-md-6" *ngFor="let page of pages; let i=index">
+          <div class="permission text-center">
+            <h2>{{page.name}}</h2>
+            <div class="custom-control custom-checkbox centerIneerItem" *ngFor="let pagePermission of pages[i].permissions; let j=index" style="margin: 5px 0;">
+              <input type="checkbox" class="custom-control-input" id="{{pagePermission.id}}" [(ngModel)]="pagePermission.selected" [value]='pagePermission.id' name="{{pagePermission.id}}" style="cursor: pointer;">
+              <label class="custom-control-label disblayBlock-w" for="{{pagePermission.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px"><span>{{pagePermission.permission_name}}</span></label>
+            </div>
           </div>
         </div>
       </div>
+      <button class="btn btn-success" style="float:right; margin: 20px 0;" (click)="onSubmitted()">حفظ</button>
+    
     </div>
-    <button class="btn btn-success" style="float:right; margin: 20px 0;" (click)="onSubmitted()">حفظ</button>
+
   </div>
 </div>

src/app/dashboard/users/user-report/user-report.component.html

@@ -1,36 +1,38 @@
 <div class="reprot">
   <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <button class="btn btn-success" style="float:right; margin: 10px 0;" (click)="onPrint()" *ngIf="authSer.showPrintBtn">طباعه</button>
-         <table class="table table-bordered text-center">
-          <thead>
-            <tr>
-              <th>إسم الموظف</th>
-              <th>إسم المجموعه</th>
-              <th>إسم الصفحه</th>
-              <th>نوع الصلاحيه</th>
-              <th>إسم الموظف مانح الصلاحيه</th>
-              <th>تاريخ المنح</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let data of reportData; let i = index">
-              <td><p>{{data['user'].name}}</p></td>
-              <td><p *ngFor="let role of data['roles']">{{role.role_name}}</p></td>
-              <td><p *ngFor="let role of data['roles']">
-                <span style="display:block; margin: 10px 0;" *ngFor="let page of role['pages']">
-                  {{page.name}}
-                  <span style="display:block" *ngFor="let p of page.permissions"><br></span>
-                </span>
-              </p></td>
-              <td><p *ngFor="let role of data['roles'][i].pages"><span style="display: block; margin-bottom: 6px;" *ngFor="let page of role['permissions']">{{page.permission_name}}</span></p></td>
-              <td><p *ngFor="let role of data['roles'][i].pages"><span style="display: block; margin-bottom: 6px;" *ngFor="let page of role['permissions']">{{page.asigned_by}}</span></p></td>
-              <td><p *ngFor="let role of data['roles'][i].pages"><span style="display: block; margin-bottom: 6px; font-size:14px" *ngFor="let page of role['permissions']">{{page.created_at}}</span></p></td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="containerContent-w">
+          <div class="row">
+              <div class="col-12">
+                <button class="btn btn-success" style="float:right; margin: 10px 0;" (click)="onPrint()" *ngIf="authSer.showPrintBtn">طباعه</button>
+                 <table class="table table-bordered text-center">
+                  <thead>
+                    <tr>
+                      <th>إسم الموظف</th>
+                      <th>إسم المجموعه</th>
+                      <th>إسم الصفحه</th>
+                      <th>نوع الصلاحيه</th>
+                      <th>إسم الموظف مانح الصلاحيه</th>
+                      <th>تاريخ المنح</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let data of reportData; let i = index">
+                      <td><p>{{data['user'].name}}</p></td>
+                      <td><p *ngFor="let role of data['roles']">{{role.role_name}}</p></td>
+                      <td><p *ngFor="let role of data['roles']">
+                        <span style="display:block; margin: 10px 0;" *ngFor="let page of role['pages']">
+                          {{page.name}}
+                          <span style="display:block" *ngFor="let p of page.permissions"><br></span>
+                        </span>
+                      </p></td>
+                      <td><p *ngFor="let role of data['roles'][i].pages"><span style="display: block; margin-bottom: 6px;" *ngFor="let page of role['permissions']">{{page.permission_name}}</span></p></td>
+                      <td><p *ngFor="let role of data['roles'][i].pages"><span style="display: block; margin-bottom: 6px;" *ngFor="let page of role['permissions']">{{page.asigned_by}}</span></p></td>
+                      <td><p *ngFor="let role of data['roles'][i].pages"><span style="display: block; margin-bottom: 6px; font-size:14px" *ngFor="let page of role['permissions']">{{page.created_at}}</span></p></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
       </div>
-    </div>
   </div>
 </div>

src/app/dashboard/users/users.component.css

@@ -29,3 +29,8 @@
     text-align: center;
 }
 
+
+@media(max-width: 767px) {
+    
+}
+

src/app/dashboard/users/users.component.html

@@ -3,76 +3,77 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w"> {{typeService}} / </li>
+          <li class="headingText-w"> {{typeService}} > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}}  </li>
         </ul>
-      <hr class="hr">
     </div>
   </div>
       
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAddUser()" *ngIf="authSer.showAddBtn">إنشاء</button>
-        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDeleteUsers()" *ngIf="authSer.showDeleteBtn">حذف</button>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="form-group">
-        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
-        <hr>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-      <div class="col-6">
-        <div class="form-group">
-          <span class="spanSelect-w">أظهر
-            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
-              <option value="20">20</option>
-            </select>
-            من العناصر
-          </span>
-        </div>
-      </div>
-      <div class="col-6">
-      
-      </div>
-    </div>
-
-  <table class="table table-bordered">
-    <thead class="headBackground-w">
-      <tr>
-        <th>
-          <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor:pointer"></label>
+  <div class="containerContent-w">
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+              <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAddUser()" *ngIf="authSer.showAddBtn"> <i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+              <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDeleteUsers()" *ngIf="authSer.showDeleteBtn"> <i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
           </div>
-        </th>
-        <th>الاسم</th>
-        <th>البريد الإلكتروني</th>
-        <th *ngIf="authSer.showEditBtn">تعديل</th>
-        <th *ngIf="authSer.showPermissionsBtn">الصلاحيات</th>
-        <!-- <th *ngIf="authSer.showReport">التقارير</th> -->
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let user of usersList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-        <td>
-          <div class="custom-control custom-checkbox centerIneerItem">
-            <input type="checkbox" class="custom-control-input" id="{{user.id}}" [(ngModel)]="user.selected" [value]='user' (change)="checkIfAllSelected()">
-            <label class="custom-control-label disblayBlock-w" for="{{user.id}}" style="color:#2a2a2a; cursor:pointer"></label>
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="form-group">
+              <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" (input)="filtterFunc($event)"/>
+              <hr>
+            </div>
           </div>
-        </td>
-        <td>{{user.name}}</td>
-        <td>{{user.email}}</td>
-        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(user.id)"><i class="fas fa-edit"></i></button></td>
-        <td *ngIf="authSer.showPermissionsBtn"><button type="button" class="btn btn-outline-secondary" (click)="onGetPermission(user.id)"><i class="fas fa-hand-paper"></i></button></td>
-        <!-- <td *ngIf="authSer.showReport"><button class="btn btn-outline-secondary" (click)="onGetReport(user.id)"><i class="fas fa-address-card"></i></button></td> -->
-      </tr>
-    </tbody>
-  </table>
-  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+        </div>
+      
+        <div class="row">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+              <div class="form-group">
+                <span class="spanSelect-w">
+                  <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="15">15</option>
+                    <option value="20">20</option>
+                  </select>
+                  من العناصر يتم عرضها 
+                </span>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            
+            </div>
+        </div>
+      
+        <table class="table table-bordered">
+          <thead class="headBackground-w">
+            <tr>
+              <th>
+                <div class="custom-control custom-checkbox">
+                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor:pointer"></label>
+                </div>
+              </th>
+              <th>الاسم</th>
+              <th>البريد الإلكتروني</th>
+              <th *ngIf="authSer.showEditBtn">تعديل</th>
+              <th *ngIf="authSer.showPermissionsBtn">الصلاحيات</th>
+              <!-- <th *ngIf="authSer.showReport">التقارير</th> -->
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let user of usersList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+              <td>
+                <div class="custom-control custom-checkbox centerIneerItem">
+                  <input type="checkbox" class="custom-control-input" id="{{user.id}}" [(ngModel)]="user.selected" [value]='user' (change)="checkIfAllSelected()">
+                  <label class="custom-control-label disblayBlock-w" for="{{user.id}}" style="color:#2a2a2a; cursor:pointer"></label>
+                </div>
+              </td>
+              <td>{{user.name}}</td>
+              <td>{{user.email}}</td>
+              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(user.id)"><i class="fas fa-edit"></i></button></td>
+              <td *ngIf="authSer.showPermissionsBtn"><button type="button" class="btn btn-outline-secondary" (click)="onGetPermission(user.id)"><i class="fas fa-hand-paper"></i></button></td>
+              <!-- <td *ngIf="authSer.showReport"><button class="btn btn-outline-secondary" (click)="onGetReport(user.id)"><i class="fas fa-address-card"></i></button></td> -->
+            </tr>
+          </tbody>
+        </table>
+        <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
 </div>

src/app/login/login.component.css

@@ -1,32 +1,36 @@
 .login-dashBoard {
     width: 100%;
     display: inline-block;
-    padding: 20px 0;
     margin-top: -6px;
     justify-content: center;
-    background-color: #ebeff5;
-    padding: 30px;
+    /* background-color: #ebeff5; */
+    background: url('../../assets/image/background_login.jpg') no-repeat top center;
+    background-size: cover;
     direction: rtl;
     font-family: 'Cairo', sans-serif;
 }
 
 
 .formContent-w {
-    width: 100%;
+    width: 90%;
     height: 100%;
-    background-color: #ffffff;
-    border-radius: 20px;
-    padding: 30px 0;
+    margin: 30px auto;
+    padding: 80px 0;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    opacity: 0.7;
 }
 
 .formContent-w h2 {
     text-align: center;
-    color: #252525;
+    color: #bda380;
+    font-size: 30px;
 }
 
 .formContent-w p {
     text-align: center;
-    color: #abb1e8;
+    color: #888;
+    font-weight: bold;
 }
 
 .formContent-w form {
@@ -41,6 +45,7 @@
     font-weight: 600;
     margin-right: 5px;
     float: right;
+    font-size: 18px;
 }
 
 .formContent-w form span {
@@ -51,6 +56,7 @@
     background-color: #fff;
     border: 2px solid #dadfe6;
     color: #252525;
+    font-size: 14px;
 }
 
 .formContent-w form a {

src/app/login/login.component.html

@@ -1,29 +1,33 @@
-<div class="login-dashBoard" [style.height.px]="myInnerHeight">
-  <div class="formContent-w">
-    <h2>تسجيل الدخول</h2>
-    <p>مرحباً ، قم بتسجيل الدخول الان</p>
+  <div class="login-dashBoard" [style.height.px]="myInnerHeight">
     <div class="container">
-      <div class="row">
-        <div class="col-12">
-          <form (ngSubmit)="onSubmitedForm()" #f="ngForm">
-            <div class="form-group">
-              <label for="email">رقم الهويه</label>
-              <input type="phone" id="email" class="form-control" appOnlyNumber name="identity_number" appEnglishCharacters ngModel required  #identity_number="ngModel" />
-              <span class="help-block" *ngIf="!identity_number.valid && identity_number.touched">من فضلك ، ادخل رقم الهويه صحيح</span>
+        <div class="formContent-w">
+            <h2>تسجيل الدخول</h2>
+            <p>مرحباً ، قم بتسجيل الدخول الان</p>
+            <div class="container">
+              <div class="row">
+                <div class="col-12">
+                  <form (ngSubmit)="onSubmitedForm()" #f="ngForm">
+                    <div class="form-group">
+                      <label for="email">رقم الهويه</label>
+                      <input type="phone" id="email" class="form-control" placeholder="رقم الهويه" appOnlyNumber name="identity_number" appEnglishCharacters ngModel required  #identity_number="ngModel" />
+                      <span class="help-block" *ngIf="!identity_number.valid && identity_number.touched">من فضلك ، ادخل رقم الهويه صحيح</span>
+                    </div>
+                    <div class="form-group">
+                        <label for="password"> كلمه المرور</label>
+                        <input type="password" id="password" class="form-control" placeholder="كلمه المرور"  name="password" ngModel required #password="ngModel"/>
+                        <span class="help-block" *ngIf="!password.valid && password.touched">من فضلك ، قم بادخال كود صحيح</span>
+                    </div>
+                    <div class="custom-control custom-checkbox">
+                      <a [routerLink]="['/signup']" class="signUp-w" style="float: left; margin-left:-10px">إنشاء حساب جديد</a>
+                      <a routerLink="/page-not-found" class="forgetPassword-w" style="margin-right: 10px">نسيت كلمه المرور ؟</a>
+                    </div>
+                    <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid">الدخول</button>
+                  </form>
+                </div>
+              </div>
             </div>
-            <div class="form-group">
-                <label for="password">الرقم السري</label>
-                <input type="password" id="password" class="form-control" name="password" ngModel required #password="ngModel"/>
-                <span class="help-block" *ngIf="!password.valid && password.touched">من فضلك ، قم بادخال كود صحيح</span>
-            </div>
-            <div class="custom-control custom-checkbox">
-              <a [routerLink]="['/signup']" class="signUp-w" style="float: left; margin-left:-10px">إنشاء حساب جديد</a>
-              <a routerLink="/page-not-found" class="forgetPassword-w" style="margin-right: 10px">نسيت كلمه المرور ؟</a>
-            </div>
-            <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid">الدخول</button>
-          </form>
-        </div>
-      </div>
+          </div>
     </div>
   </div>
-</div>
+
+

src/app/login/login.component.ts

@@ -27,9 +27,9 @@ export class LoginComponent implements OnInit {
   
 
   ngOnInit() {
-    this.authSer.showSearchHeader = false;
+    // this.authSer.showSearchHeader = false;
     this.authSer.notificationLogin = false;
-    this.authSer.showHeaderLogin = true;
+    // this.authSer.showHeaderLogin = true;
     this.authSer.showHeaderDashBoard = false;
     this.authSer.showDashboardHeader = true;
     this.spinner.hide();

src/app/regester/regester.component.css

@@ -6,11 +6,13 @@
     font-family: 'Cairo', sans-serif;
 }
 
-input {
-    font-size: 14px; 
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
 }
 
-input.ng-invalid.ng-touched {
+/* input.ng-invalid.ng-touched {
     border: 2px solid #ccc;
 }
 
@@ -20,7 +22,7 @@ input.ng-invalid {
 
 select.ng-invalid{
     border: 2px solid #ccc;
-}
+} */
 
 .imgProfile {
     width: 200px;
@@ -84,4 +86,32 @@ select.ng-invalid{
     margin: 40px 0 !important;
 }
 
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px 100px;
+    width: 90%;
+    margin: 0 auto
+}
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
 

src/app/regester/regester.component.html

@@ -1,6 +1,6 @@
-<div class="userForm-w" [style.height.px]="myInnerHeight">
+<div class="userForm-w" [style.min-height.px]="myInnerHeight">
     <div class="container">
-        <form [formGroup]="regesterForm" (ngSubmit)="onSubmittedForm()">
+        <form [formGroup]="regesterForm" (ngSubmit)="onSubmittedForm()" class="formStyle">
           <div class="row">
             <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
               <div class="form-group text-center imgContainer">
@@ -9,19 +9,19 @@
                   <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="name" style="float:right">الأسم <span class="spanReqired-w">*</span></label>
                 <input type="text" id="name" placeholder="أدخل الأسم رباعي" class="form-control" formControlName="name" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="functional_number" style="float:right"> الرقم الوظيفي <span class="spanReqired-w">*</span></label>
                 <input type="number" class="form-control" id="functional_number" placeholder="الرقم الوظيفي" formControlName="functional_number" />
               </div>
             </div> 
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                   <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
                 <select class="form-control select" id="identity" formControlName="identity_type_id" (change)="getSelectedOptionText($event)">
@@ -29,7 +29,7 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6" *ngIf="identity_id != 4">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="identity_id != 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
                 <input type="phone" class="form-control" placeholder="رقم الهويه" id="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
@@ -38,14 +38,14 @@
                 <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6" *ngIf="identity_id == 4">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="identity_id == 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
                 <input type="phone" class="form-control" placeholder="رقم الهويه" id="identityNumber" formControlName="identity_number" />
                 <span style="color:red">أدخل رقم جواز السفر </span>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
                 <select class="form-control" formControlName="nationality_id">
@@ -53,51 +53,37 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-              <div class="form-group">
-                <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
-                <div class="custom-control custom-radio inlineBlock-w">
-                  <input type="radio" class="custom-control-input" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
-                  <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
-                </div>
-                
-                <div class="custom-control custom-radio inlineBlock-w">
-                  <input type="radio" class="custom-control-input" id="defaultChecked" value="female" formControlName="gender" name="gender">
-                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer; margin-right:30px">انثي</label>
-                </div>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
                 <input type="text" id="phone" class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" formControlName="phone" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
                 <input type="date" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" formControlName="birthday" /> 
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
                 <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
                 <input type="date" class="form-control" id="date_employment_hij" formControlName="date_of_employment_hij" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
                 <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">اسم الوظيفه</label>
                 <select class="form-control" formControlName="job_title_id">
@@ -105,7 +91,7 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">التخصص</label>
                 <select class="form-control" formControlName="specialization_id">
@@ -113,7 +99,7 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">نوع العقد</label>
                 <select class="form-control" formControlName="contract_type_id">
@@ -121,7 +107,7 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">الملاك الوظيفي</label>
                 <select class="form-control" formControlName="staff_id">
@@ -129,25 +115,25 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="email" style="float:right">الإيميل <span class="spanReqired-w">*</span></label>
                 <input type="email" id="email" placeholder="الإيميل" class="form-control" appEnglishCharacters formControlName="email" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w">*</span></label>
                 <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
                 <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6" *ngIf="showStatus">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showStatus">
               <div class="form-group">
                 <label>الحاله</label>
                 <select class="form-control" formControlName="status">
@@ -157,7 +143,7 @@
                 <span class="help-block" *ngIf="!regesterForm.get('status').valid && regesterForm.get('status').touched" style="color:red">Please enter a status  </span>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">الاداره</label>
                 <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
@@ -166,7 +152,7 @@
                 <span class="help-block" *ngIf="!regesterForm.get('adminstration_id').valid && regesterForm.get('adminstration_id').touched" style="color:red">أدخل الاداره </span>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-6" *ngIf="showDepart">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showDepart">
               <div class="form-group">
                 <label style="float:right">القسم</label>
                 <select class="form-control" formControlName="department_id">
@@ -175,6 +161,20 @@
                 <span class="help-block" *ngIf="!regesterForm.get('department_id').valid && regesterForm.get('department_id').touched" style="color:red">أدخل القسم </span>
               </div>
             </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="form-group">
+                <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+                <div class="custom-control custom-radio inlineBlock-w">
+                  <input type="radio" class="custom-control-input" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
+                  <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
+                </div>
+                
+                <div class="custom-control custom-radio inlineBlock-w">
+                  <input type="radio" class="custom-control-input" id="defaultChecked" value="female" formControlName="gender" name="gender">
+                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer; margin-right:30px">انثي</label>
+                </div>
+              </div>
+            </div>
           </div>
           <button type="submit" [disabled]="!regesterForm.valid" class="btn btn-success regesterBtn-w">{{userProfileId ? 'حفظ' : 'سجل'}}</button>
         </form>

src/app/shared/auth-service.service.ts

@@ -39,7 +39,8 @@ export class AuthServiceService {
   arabicTemplate: boolean = true;
   arabicLanguage: boolean = true;
   englishLanguage:boolean = false;
-  currentDate: number = Date.now();
+  showArabicIcon:boolean = false;
+  showEnglishIcon:boolean = true;
 
   pathApi: string = 'http://hospital.rabbittec.com/back_end/api';
   pathImg: string = "http://hospital.rabbittec.com/back_end/public/";
@@ -88,7 +89,7 @@ export class AuthServiceService {
       return this.jwtHelper.isTokenExpired(token);
 
     }
-    return false;
+    return true;
   }
 
 
@@ -108,14 +109,29 @@ export class AuthServiceService {
     if(typeLang == 'ar') {
       this.arabicTemplate = true;
       this.arabicLanguage = true;
+      this.showArabicIcon = false;
+      this.showEnglishIcon = true;
       this.englishLanguage = false;
+
+      console.log('click AR , show Arabic', this.showArabicIcon);
+      console.log('click AR , show English', this.showEnglishIcon);
     } else if(typeLang == 'en'){
       this.arabicTemplate = false;
       this.arabicLanguage = false;
       this.englishLanguage = true;
+      this.showArabicIcon = true;
+      this.showEnglishIcon = false;
+      console.log('click EN , show Arabic', this.showArabicIcon);
+      console.log('click EN , show English', this.showEnglishIcon);
     }
   }
 
+
+  //get footer list 
+  onGetFooterData() {
+    return this.http.get(this.pathApi + '/get_footers_links');
+  }
+
    writeHijri(date, lang) {
     var date = date || new Date();
     lang = lang || 'en';

src/app/shared/internal-page.service.ts

@@ -9,17 +9,9 @@ export class InternalPageService {
 
   constructor(private http: HttpClient, private authSer: AuthServiceService) { }
 
-  parentsPage = [];
 
   getParentData() {
-    this.http.get(this.authSer.pathApi + '/main_menu_list').subscribe(
-      (responce) => {
-        this.parentsPage = responce['parents'];
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+    return  this.http.get(this.authSer.pathApi + '/main_menu_list') 
   }
 
   getSliderData() {
@@ -60,8 +52,8 @@ export class InternalPageService {
   }
 
   //get data of hospital page 
-  getHospitalCenterList() {
-    return this.http.get(this.authSer.pathApi + '/hospitals_centers_list');
+  getHospitalCenterList(typeGetData: string) {
+    return this.http.get(this.authSer.pathApi + '/' + typeGetData);//managements_list  '/hospitals_centers_list'
   }
 
   //get news data 
@@ -71,6 +63,7 @@ export class InternalPageService {
 
   //get Cir data 
   getCircularsData(currentPage: number, perPage: number, index: number) {
+    console.log('iiiiin reqqqqqqqqqqqqqqqqquuuuuuest');
     return this.http.get(this.authSer.pathApi + '/tabs_list_internal_gate/' + currentPage + '/' + perPage + '/' + index);
   }
 }

src/app/shorten.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'shorten'
+})
+export class ShortenPipe implements PipeTransform {
+
+  transform(value:any, limit:number){
+    if(value.length > limit){
+        return  value.substr(0,limit) + '.....';
+    }
+    return value;
+  }
+
+}

src/index.html

@@ -7,8 +7,10 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Dosis|Niramit" rel="stylesheet">
+  <!-- <link href="https://fonts.googleapis.com/css?family=Dosis|Niramit" rel="stylesheet"> -->
+  <!-- <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet"> -->
   <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
+
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 </head>
 <body>

src/styles.css

@@ -10,7 +10,7 @@
 /* You can add global styles to this file, and also import other style files */
 body {
     direction: rtl;
-    font-family: 'Cairo', sans-serif;
+    font-family:  'Cairo', sans-serif;
     color: #CAB59A;
 }
 
@@ -45,6 +45,27 @@ input:-webkit-autofill:active  {
 .marginTop-w {
     margin: 10px 0;
 }
+
+.butttonCreate {
+  width: 170px;
+  background-color: #007A71;
+  color: #fff;
+  direction: rtl;
+  text-align: right;
+}
+
+.butttonDelete {
+  width: 170px;
+  background-color: #E6646E;
+  color: #fff;
+  direction: rtl;
+  text-align: right;
+}
+
+.marginFontAowsome-w {
+  margin: 0 15px;
+  font-size: 12px;
+}
 /*
 input.ng-invalid {
   border: 1px solid red;
@@ -257,13 +278,13 @@ select.ng-invalid.ng-touched {
   }
 
   .headingText-w {
-    color: #bda380;
+    color: #e4d0b6;
     font-size: 18px;
     text-align: right;
     font-weight: bold;
   }
   .activeLi-w{
-    color: #252525;
+    color: #CAB59A;
     font-size: 15px;
     font-weight: 300px;
   }
@@ -283,18 +304,44 @@ select.ng-invalid.ng-touched {
 
   .selectButton-w{
     display: inline-block;
-    width: 100px;
+    width: 70px;
+    background-color: #f9f9f9;
+    color: #bda380;
   }
   .spanSelect-w{
     float: right;
-    color: #00a99d;
+    color: #bda380;
+    font-weight: bold;
   }
 
   .headBackground-w{
     background-color: #bda380;
     color: #fff;
   }
+  .headBackground-w th {
+    border: 1px solid #fff;
+  }
+
+  .table tbody tr:nth-child(even){
+    background-color: #CFCFCF;
+    color: #CAB59A;
+    font-weight: bold;
+  }
+  .table tbody tr:nth-child(odd){
+    background-color: #f5f2f2;
+    color: #CAB59A;
+    font-weight: bold;
+  }
+
+
+  .inputSearchTable-w{
+    border-radius: 10px;
+    border: 1px solid #bda380;
+    margin-top: 13px;
+  }
 
+  .table tbody tr:hover {background-color: #888;color: #fff}
+/*
   .table{
     border: 2px solid #ecdcc7;
   }
@@ -303,7 +350,7 @@ select.ng-invalid.ng-touched {
   }
   .table thead th {
     border: 2px solid #bda380;
-  }
+  } */
 
   .checkAll-w::before {
     background-color: #fff;
@@ -326,6 +373,39 @@ select.ng-invalid.ng-touched {
   .defaultHover-w:hover {
     background-color: blue;
   }
+
+  .contentBorder-w {
+    width: 100%;
+    min-height: 500px;
+    padding: 40px 20px;
+    background-color: #fff;
+    opacity: 0.7;
+    border: 1px solid #888;
+  }
+
+  .contentBorder-w {
+    border-top: 4px solid #bda380;
+  }
+
+  .containerContent-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px;
+    margin: 30px 0;
+    border: 1px solid #888;
+    border-top: 5px solid #bda380;
+    background-color: #fff;
+    opacity: 0.8;
+    overflow-x: auto;
+  }
+
+  .validateImageMsg{
+    position: absolute;
+    left:43%; 
+    bottom:0;
+    color: red
+  }
+  
   /* Responsive Design */
   @media all and (max-width: 240px) {
     .toast-container .toast.div {
@@ -369,6 +449,51 @@ select.ng-invalid.ng-touched {
     padding: 5px;
     border-radius: 5px;
   } */
+
+  .ngx-pagination li{
+    background-color: #fff;
+    border: 2px solid #cab599;
+    margin: 0 5px;
+  }
+
   .ngx-pagination .current {
-    background-color: #00a99d !important;
+    background-color: #ccc !important;
+    border: 2px solid #888;
+    color: #fff;
+  }
+
+  @media(max-width:767px){
+    .butttonCreate {
+      width: 130px;
+    }
+    
+    .butttonDelete {
+      width: 110px;
+    }
+    .marginFontAowsome-w {
+      margin: 0 10px;
+    }
+    .headingText-w{
+      font-size: 14px;
+    }
+
+    .validateImageMsg {
+      left: 30%;
+    }
+  }
+
+  @media(min-width:767px) and (max-width: 991px){
+    .butttonCreate {
+      width: 100px;
+      font-size: 12px;
+    }
+    
+    .butttonDelete {
+      width: 100px;
+      font-size: 12px;
+    }
+
+    .marginFontAowsome-w {
+      margin: 0 10px;
+    }
   }