src/app/External-Page/external-contact-us/external-contact-us.component.css

@@ -0,0 +1,16 @@
+.contactUs-w {
+    width: 100%;
+}
+
+
+.contactUs-w .containerContent-w {
+    border-top: 3px solid green !important;
+}
+
+
+
+@media(min-width: 1200px) {
+    .container {
+        width: 1200px !important;
+    }
+}

src/app/External-Page/external-contact-us/external-contact-us.component.html

@@ -0,0 +1,21 @@
+<div class="contactUs-w">
+  <div class="container">
+    <div class="containerContent-w">
+      <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+        <div class="row">
+          <div class="col-12">
+            <p [innerHTML]="contactUs.field"></p>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #englishTemplate>
+          <div class="row">
+            <div class="col-12">
+              <p [innerHTML]="contactUs.field_en"></p>
+            </div>
+          </div>
+      </ng-template>
+    </div>
+  </div>
+</div>

src/app/External-Page/external-contact-us/external-contact-us.component.ts

@@ -0,0 +1,54 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ExternalPageService } from './../../shared/external-page.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-external-contact-us',
+  templateUrl: './external-contact-us.component.html',
+  styleUrls: ['./external-contact-us.component.css']
+})
+export class ExternalContactUsComponent implements OnInit {
+
+  constructor(private externalService: ExternalPageService, 
+    private spinner: NgxSpinnerService,
+    private authSer:AuthServiceService) { 
+      this.spinner.show();
+    }
+  
+  contactUs = [];
+
+  ngOnInit() {
+
+    this.authSer.homeActivate = false;
+    //add active class in contact us menu header "active = 1"
+    this.externalService.getHeader().subscribe(
+      (responce) => {
+        this.externalService.headerMenus = responce['parents'];
+        for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+          if(this.externalService.headerMenus[i].id == 23) {
+            this.externalService.headerMenus[i].active = 1;
+          } else {
+            this.externalService.headerMenus[i].active = 0;
+          }
+        }
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.externalService.getContactUs().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.contactUs = responce['contact_us'];
+        console.log('contact uus', this.contactUs);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+}

src/app/External-Page/external-events-table/external-events-table.component.css

@@ -0,0 +1,43 @@
+.eventTable-w {
+    width: 100%;
+    padding-inline-end: 20px 0;
+}
+
+.eventTable-w table {
+    width: 100%
+}
+
+.containerContent-w {
+    border-top: 5px solid #049288 !important;
+}
+
+.table td, 
+.table th {
+    text-align: center !important;
+}
+
+.headBackground-w {
+    background-color: #049288 !important;
+}
+
+.table tbody tr:nth-child(odd),
+.table tbody tr:nth-child(even) {
+    color: #87c5c1 !important;      
+}
+
+.titleModal {
+    font-size: 17px;
+    color: #049288;
+}
+
+.modal-body p {
+    color: #888 !important;
+}
+
+
+
+@media(min-width: 1200px) {
+    .container {
+        width: 1200px;
+    }
+}

src/app/External-Page/external-events-table/external-events-table.component.html

@@ -0,0 +1,98 @@
+<div class="eventTable-w">
+  <div class="container">
+    <div class="containerContent-w">
+      <div class="row">
+        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+          <div class="col-12">
+            <table class="table table-bordered">
+              <thead class="headBackground-w">
+                <tr>
+                  <th>الحدث</th>
+                  <th>التاريخ</th>
+                  <th>تفاصيل الحدث</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let event of eventsData | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index">
+                  <td>{{event.name}}</td>
+                  <td>{{event.event_time}}</td>
+                  <td>
+                    <button type="button" class="btn" (click)="detailEvent(event)" data-toggle="modal" data-target="#exampleModalCenter">
+                      <i class="fas fa-plus"></i>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+              <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                    <br><br>
+                    <h5 class="modal-title titleModal" id="exampleModalLongTitle">تفاصيل الحدث</h5>
+                  </div>
+                  <div class="modal-body">
+                      <h2>{{eventDetail.title}}</h2>
+                      <p [innerHTML]="eventDetail.description"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+
+        <ng-template #englishTemplate>
+          <div class="col-12" style="direction:rtl">
+              <table class="table table-bordered">
+                <thead class="headBackground-w">
+                  <tr>
+                    <th>Event</th>
+                    <th>Date</th>
+                    <th>Detail Event</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let event of eventsData | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index">
+                    <td>{{event.name_en}}</td>
+                    <td>{{event.event_time}}</td>
+                    <td>
+                      <button type="button" class="btn" (click)="detailEvent(event)" data-toggle="modal" data-target="#exampleModalCenter">
+                        <i class="fas fa-plus"></i>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
+              <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float:left">
+                        <span aria-hidden="true">&times;</span>
+                      </button>
+                      <br><br>
+                      <h5 class="modal-title titleModal" id="exampleModalLongTitle" style="text-align:left;">Event Details</h5>
+                    </div>
+                    <div class="modal-body">
+                      <h2 style="text-align:left;">{{eventDetail.title_en}}</h2>
+                      <p style="text-align:left;" [innerHTML]="eventDetail.description_en"></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+          </div>
+        </ng-template>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+

src/app/External-Page/external-events-table/external-events-table.component.ts

@@ -0,0 +1,101 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-external-events-table',
+  templateUrl: './external-events-table.component.html',
+  styleUrls: ['./external-events-table.component.css']
+})
+
+
+export class ExternalEventsTableComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private http: HttpClient, 
+    private spinner: NgxSpinnerService,
+    private route: ActivatedRoute) { 
+      this.spinner.show();
+    }
+    
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    dataTableNumber: number = 5;
+    eventsData = [];
+    eventDetail = {
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+    }
+
+  ngOnInit() {
+    this.authSer.homeActivate = false;
+    console.log(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.dataTableNumber);
+    this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.dataTableNumber).subscribe(
+      (responce) => {
+        this.eventsData = responce['event_bar'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('eveeeents', this.eventsData);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+    //change page 
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.eventsData = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      
+      this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.perPagePagenation).subscribe(
+        (responce) => {
+          this.eventsData = responce['events'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('eveeeents', this.eventsData);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+
+    //determine the list count from select element 
+    onGetValue(event) {
+      this.spinner.show();
+      this.eventsData = [];
+      this.dataTableNumber = event.target.value;
+      this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.perPagePagenation).subscribe(
+        (responce) => {
+          this.eventsData = responce['events'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('eveeeents', this.eventsData);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+
+    detailEvent(eventData) {
+      console.log(eventData);
+      this.eventDetail.title = eventData.title;
+      this.eventDetail.title_en = eventData.title_en;
+      this.eventDetail.description = eventData.description;
+      this.eventDetail.description_en = eventData.description_en;
+    }
+
+}

src/app/External-Page/external-events/custom-date-formatter.provider.ts

@@ -0,0 +1,22 @@
+import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
+import { DatePipe } from '@angular/common';
+
+export class CustomDateFormatter extends CalendarDateFormatter {
+  // you can override any of the methods defined in the parent class
+
+  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEE', locale);
+  }
+
+  public monthViewTitle({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'MMM y', locale);
+  }
+
+  public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEE', locale);
+  }
+
+  public dayViewHour({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'HH:mm', locale);
+  }
+}

src/app/External-Page/external-events/external-events.component.html

@@ -62,6 +62,7 @@
       <p [innerHTML]="dataLecture.description"></p>
       <button class="btn btn-danger" (click)="closeDetailEvent()"><i class="fas fa-times-circle"></i></button>
     </div>
+    
   </div>
   
 

src/app/External-Page/external-events/external-events.component.ts

@@ -1,5 +1,8 @@
+import { CustomDateFormatter } from './custom-date-formatter.provider';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { HttpClient } from '@angular/common/http';
+import {CalendarDateFormatter } from 'angular-calendar';
+
 import { Component, OnInit,
   ChangeDetectionStrategy,
   ViewChild,
@@ -45,7 +48,12 @@ const colors: any = {
 @Component({
   selector: 'app-external-events',
   templateUrl: './external-events.component.html',
-  styleUrls: ['./external-events.component.css']
+  styleUrls: ['./external-events.component.css'],
+  providers: [
+    {
+      provide: CalendarDateFormatter,
+      useClass: CustomDateFormatter
+    }]
 })
 
 export class ExternalEventsComponent implements OnInit {

src/app/External-Page/external-hospital/external-hospital.component.css

@@ -0,0 +1,49 @@
+.hospitalContent-w .card-header {
+    background-color: #00a99d !important;
+    cursor: initial;
+}
+
+.hospitalContent-w .card-header button {
+    cursor: pointer;
+}
+
+.hospitalContent-w .card-body ul li{
+    cursor: pointer;
+    color: #888;
+    transition: all 0.5s;
+}
+
+
+
+.hospitalContent-w .card-body ul li:hover {
+    color: #00a99d;
+}
+
+.containerContent-w {
+    border-top: 5px solid #00a99d;
+}
+
+.hospitalContent-w .containerContent-w .information h2 {
+    color: #74c5bf;
+}
+
+.hospitalContent-w .containerContent-w .information p {
+    color: #bdb9b9;
+}
+
+.achievementsLang-w h2 {
+    color: #74c5bf;
+}
+
+.achievementsLang-w p {
+    color: #bdb9b9;
+}
+
+.testBody-w {
+    background-color: #f3f3f3;
+}
+@media screen and (min-width: 1200px) {
+    .container {
+        max-width: 1200px !important;
+    }
+}

src/app/External-Page/external-hospital/external-hospital.component.html

@@ -0,0 +1,81 @@
+<div class="hospitalContent-w">
+    <div class="container">
+      <div class="row">
+          <div class="containerContent-w">
+              <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+                <div class="row">
+                    <div class="col-6 col-md-3">
+                        <div class="recordsContent-w">
+                            <div id="accordion">
+                              <div class="card" *ngFor="let item of data; let i = index">
+                                <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                    <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                      <h4 class="panel-title">{{item.name}}</h4>
+                                    </button>
+                                </div>
+                            
+                                <div *ngFor="let field of item['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                  <div class="card-body testBody-w">
+                                      <ul class="list-unstyled">
+                                        <li (click)="showDescriptionDetails(field)"  [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
+                                            {{field.title}}
+                                        </li>
+                                      </ul>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-9">
+                      <div class="information">
+                        <h2>{{detailsField.title}}</h2>
+                        <p [innerHTML]="detailsField.description"></p>
+                      </div>
+                    </div>
+                </div>
+              </ng-template>
+  
+              <ng-template #englishTemplate>
+                <div class="container" style="direction:ltr">
+                  <div class="row">
+                      <div class="col-6 col-md-3">
+                          <div class="recordsContent-w">
+                              <div id="accordion">
+                                  <div class="card" *ngFor="let item of data; let i = index">
+                                      <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                      <h5 class="mb-0">
+                                          <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                          <h4 class="panel-title">{{item.name_en}}</h4>
+                                          </button>
+                                      </h5>
+                                      </div>
+                                  
+                                      <div *ngFor="let field of item['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                      <div class="card-body testBody-w">
+                                          <ul class="list-unstyled nestedMenu">
+                                              <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left; margin-left:10px;">
+                                                  {{field.title_en}}
+                                              </li>
+                                          </ul>
+                                      </div>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                      <div class="col-6 col-md-9">
+                        <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
+                          <h2>{{detailsField.title_en}}</h2>
+                          <p [innerHTML]="detailsField.description_en"></p>
+                        </div>
+                      </div>
+                  </div>
+                </div>
+              </ng-template>
+  
+          </div>
+      </div>
+    </div>
+  </div>
+  

src/app/External-Page/external-hospital/external-hospital.component.ts

@@ -0,0 +1,126 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ExternalPageService } from './../../shared/external-page.service';
+import { ExternalSerService } from './../../shared/external-ser.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-external-hospital',
+  templateUrl: './external-hospital.component.html',
+  styleUrls: ['./external-hospital.component.css']
+})
+export class ExternalHospitalComponent implements OnInit {
+
+  typePage: string = '';
+  data = [];
+  detailsField = {
+    title_en: '',
+    title: '',
+    description: '',
+    description_en: '',
+  }
+
+  constructor(private route: ActivatedRoute,
+    private authSer: AuthServiceService, 
+    private spinner: NgxSpinnerService,
+    private externalService: ExternalPageService) {
+      this.spinner.show();
+     }
+
+  ngOnInit() {
+    
+    this.authSer.homeActivate = false;
+    //catch params type from URL
+    this.route.params.subscribe(
+      (params:Params) => {
+        this.typePage = params['type_page'];
+      }
+    );
+
+
+    //get hospital or managaments data 
+    if(this.typePage == 'hospital') {
+
+      //to add class active if hospital route activate
+      this.externalService.getHospitalMangamentsData('hospital').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.data = responce['hospitals_centers'];
+          console.log('data hospital', this.data);
+          this.showDescriptionDetails(this.data[0].fields[0]);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+      this.externalService.getHeader().subscribe(
+        (responce) => {
+          this.externalService.headerMenus = responce['parents'];
+          for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+            if(this.externalService.headerMenus[i].id == 19) {
+              this.externalService.headerMenus[i].active = 1;
+            } else {
+              this.externalService.headerMenus[i].active = 0;
+            }
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } else if(this.typePage == 'managements') {
+      
+      //to add class active if mangaments route activate
+      this.externalService.getHeader().subscribe(
+        (responce) => {
+          this.externalService.headerMenus = responce['parents'];
+          for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+            if(this.externalService.headerMenus[i].id == 20) {
+              this.externalService.headerMenus[i].active = 1;
+            } else {
+              this.externalService.headerMenus[i].active = 0;
+            }
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+      this.externalService.getHospitalMangamentsData('managements').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.data = responce['managements'];
+          console.log('data mangaments', this.data);
+          this.showDescriptionDetails(this.data[0].fields[0]);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
+    }
+
+
+  }
+
+  //show data of filed if click
+  showDescriptionDetails(fieldData) {
+    console.log(fieldData);
+    this.detailsField = {
+      title: fieldData.title,
+      title_en: fieldData.title_en,
+      description: fieldData.description,
+      description_en: fieldData.description_en,
+    }
+
+    console.log(this.detailsField);
+  }
+
+}

src/app/External-Page/external-page-content/external-page-content.component.css

@@ -167,6 +167,11 @@ input,button {
     /* radial-gradient(0.5turn,#efeeee, #1db5ab, #1ba097); */
     background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
     margin: 10px 0;
+    transition: all 0.5s;
+}
+
+.externalServices-w .item:hover{
+    background: radial-gradient(farthest-corner at 129px 53px,     #4bcec7 0%, #00a99d 100%);
 }
 
 .externalServices-w .item img {
@@ -205,6 +210,7 @@ input,button {
     height: 214px;
     background-color: #fff;
     box-shadow: 0 1px 1px #ccc;
+    padding: 20px;
 }
 
 
@@ -327,7 +333,7 @@ input,button {
 
 .externalPageContentt-w .recordsContent-w .records .body {
     width: 100%;
-    height: 209px;
+    height: 285px;
     background-color: #fff;
     box-shadow: 0 1px 1px #ccc;
     padding: 2px 0;
@@ -371,12 +377,13 @@ input,button {
 
 .externalPageContentt-w .recordsContent-w .medical .body {
     width: 100%;
-    height: 209px;
+    height: 285px;
     background-color: #fff;
     box-shadow: 0 1px 1px #ccc;
 }
 
 
+
 .externalPageContentt-w .recordsContent-w .medical .body #demo2 {
     width: 100%;
     height: 100;
@@ -430,9 +437,12 @@ input,button {
     width: 100%;
 }
 
+
+
+
+
 .externalPageContentt-w .datePicker-w .body {
     width: 100%;
-    height: 250px;;
     background-color: #fff;
     box-shadow: 0 1px 1px #ccc;
 }
@@ -467,6 +477,98 @@ input,button {
 }
 
 
+    /* show 3 items */
+    .lectureService-w .carousel-inner .active,
+    .lectureService-w .carousel-inner .active + .carousel-item,
+    .lectureService-w .carousel-inner .active + .carousel-item + .carousel-item {
+        display: block;
+    }
+    
+    .lectureService-w .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
+    .lectureService-w .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
+    .lectureService-w .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
+        transition: none;
+    }
+    
+    .lectureService-w .carousel-inner .carousel-item-next,
+    .lectureService-w .carousel-inner .carousel-item-prev {
+      position: relative;
+      transform: translate3d(0, 0, 0);
+    }
+    
+    .lectureService-w .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
+        position: absolute;
+        top: 0;
+        right: -33.3333%;
+        z-index: -1;
+        display: block;
+        visibility: visible;
+    }
+    
+    /* left or forward direction */
+    .lectureService-w .active.carousel-item-left + .carousel-item-next.carousel-item-left,
+    .lectureService-w .carousel-item-next.carousel-item-left + .carousel-item,
+    .lectureService-w .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
+    .lectureService-w .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
+        position: relative;
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+    
+    /* farthest right hidden item must be abso position for animations */
+    .lectureService-w .carousel-inner .carousel-item-prev.carousel-item-right {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        display: block;
+        visibility: visible;
+    }
+    
+    /* right or prev direction */
+    .lectureService-w .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
+    .lectureService-w .carousel-item-prev.carousel-item-right + .carousel-item,
+    .lectureService-w .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
+    .lectureService-w .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
+        position: relative;
+        transform: translate3d(100%, 0, 0);
+        visibility: visible;
+        display: block;
+        visibility: visible;
+    }
+
+    .lectureService-w .carousel-control-prev, .carousel-control-next {
+        display: block !important;
+        margin: 25px 0;
+        color: #888;
+    }
+
+    .lectureService-w .carousel-control-prev {
+        margin-left: -26px;
+    }
+
+    .lectureService-w .carousel-control-next {
+        margin-right: -26px;
+    }
+
+    .lectureService-w #carouselExample .carousel-inner {
+        margin: 20px 0;
+    }
+    
+    .lectureService-w #carouselExample .carousel-inner .carousel-item img {
+        height: 70px !important;
+        border: 2px solid #007A71;
+    }
+
+    .lectureService-w #carouselExample2 .carousel-inner .carousel-item img {
+        height: 70px !important;
+        border: 2px solid #007A71;
+    }
+  
+
+  
+
+
 agm-map {
     height: 300px;
   }
@@ -484,3 +586,5 @@ agm-map {
         max-width: 1200px !important;
     }
 }
+
+

src/app/External-Page/external-page-content/external-page-content.component.html

@@ -6,19 +6,19 @@
             <div class="col-12">
               <div class="sliderNews-w">
                 <div id="demo" class="carousel slide" data-ride="carousel">
-                    <ul class="carousel-indicators">
-                        <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
-                    </ul>
-                    <div class="carousel-inner">
-                        <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
-                          <img src="{{authSer.pathImg + report['photo'].photo}}" />
-                          <div class="carousel-caption d-none d-md-block">
-                              <h5>{{report.title}}</h5>
-                              <p [innerHtml] = "report.description"></p>
-                              <button class="more">المزيد</button>
-                          </div>
+                  <ul class="carousel-indicators">
+                      <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                  </ul>
+                  <div class="carousel-inner">
+                      <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                        <img src="{{authSer.pathImg + report['photo'].photo}}" />
+                        <div class="carousel-caption d-none d-md-block">
+                            <h5>{{report.title}}</h5>
+                            <p [innerHtml] = "report.description"></p>
+                            <button class="more" (click)="goPageNew(report)">المزيد</button>
                         </div>
-                    </div>
+                      </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -29,9 +29,10 @@
                       <div class="carousel-inner">
                           <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                               <div class="carousel-caption">
-                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p> <button class="moreEvent-w">المزيد</button>
+                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p>
                               </div>   
                           </div>
+                          <button class="moreEvent-w" (click)="oneventTable()">المزيد</button>
                       </div>
                   </div> 
               </div>
@@ -59,20 +60,39 @@
                     <div class="advertisimentServices-w text-center">
                       <h1>خدمات إعلانيه</h1>
                       <div class="body">
-                        <!-- <owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
-                          <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
-                            <div>
-                              <img src="{{authSer.pathImg + image.photo}}"  style="width:50px; height:50px;"/>
-                            </div>
+                        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
+                          <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                              <div class="carousel-item col-md-4" *ngFor="let image of firstAdvertisiment;let i = index" [ngClass]="i == 0 ? 'active' : '' ">
+                                  <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + image.photo}}" alt="slide 1">
+                              </div>
                           </div>
-                        </owl-carousel> -->
-                        <!-- <owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
-                          <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
-                            <div>
-                              <img src="{{authSer.pathImg + image.photo}}" />
+                          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
+                              <i class="fa fa-chevron-left fa-lg text-muted"></i>
+                              <span class="sr-only">Previous</span>
+                          </a>
+                          <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
+                              <i class="fa fa-chevron-right fa-lg text-muted"></i>
+                              <span class="sr-only">Next</span>
+                          </a>
+                        </div>
+
+                        <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="9000">
+                          <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                            <div class="carousel-item col-md-4" *ngFor="let slide2 of secondAdvertisiment;let i = index" [ngClass]=" i == 0 ? 'active' : '' ">
+                                <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + slide2.photo}}" alt="slide 1">
                             </div>
                           </div>
-                        </owl-carousel> -->
+                          <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
+                              <i class="fa fa-chevron-left fa-lg text-muted"></i>
+                              <span class="sr-only">Previous</span>
+                          </a>
+                          <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
+                              <i class="fa fa-chevron-right fa-lg text-muted"></i>
+                              <span class="sr-only">Next</span>
+                          </a>
+                        </div>
+
+
                       </div>
                     </div>
                   </div>
@@ -159,14 +179,14 @@
               </div>
             </div>
 
-            <div class="col-12">
+            <!-- <div class="col-12">
               <div class="maps">
                 <h1>إتصل بنا</h1>
                 <agm-map [latitude]="lat" [longitude]="lng">
                     <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                   </agm-map>
               </div>
-            </div>
+            </div> -->
       
           </div>
         </div>
@@ -191,7 +211,7 @@
                         <div class="carousel-caption d-none d-md-block">
                             <h5>{{report.title_en}}</h5>
                             <p [innerHtml] = "report.description_en"></p>
-                            <button class="more">More</button>
+                            <button class="more" (click)="goPageNew(report)">More</button>
                         </div>
                       </div>
                   </div>
@@ -205,7 +225,7 @@
                     <div class="carousel-inner">
                         <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                             <div class="carousel-caption">
-                                <p> <img src="../../../assets/image/eventX.png" />  <span> event :</span>  {{event.name_en}}</p> <button class="moreEventEn-w">More </button>
+                                <p> <img src="../../../assets/image/eventX.png" />  <span> event :</span>  {{event.name_en}}</p> <button class="moreEventEn-w"  (click)="oneventTable()">More </button>
                             </div>   
                         </div>
                     </div>

src/app/External-Page/external-page-content/external-page-content.component.ts

@@ -1,18 +1,26 @@
+import { Subscription } from 'rxjs';
+import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { ExternalPageService } from './../../shared/external-page.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
 import {MapsAPILoader} from '@agm/core';
 import * as $ from 'jquery';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 @Component({
   selector: 'app-external-page-content',
   templateUrl: './external-page-content.component.html',
   styleUrls: ['./external-page-content.component.css']
 })
-export class ExternalPageContentComponent implements OnInit {
+export class ExternalPageContentComponent implements OnInit, OnDestroy, AfterContentInit {
 
   constructor(private externalService: ExternalPageService, 
-    private authSer:AuthServiceService) { }
+    private spinner: NgxSpinnerService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private authSer:AuthServiceService) { 
+      this.spinner.show();
+    }
 
   reports = [];
   events = [];
@@ -27,9 +35,9 @@ export class ExternalPageContentComponent implements OnInit {
   lat: number;
   lng: number;
 
-  firstAdvertisiment = [] //[1,2,3,4,5,6,7,8,9].map((i)=> `https://picsum.photos/640/480?image=${i}`);
-  //myCarouselImages =[1,2,3,4,5,6].map((i)=>`https://picsum.photos/640/480?image=${i}`);
-  //firstAdvertisiment = [];
+  contentSubscription:Subscription;
+
+  firstAdvertisiment = [];
   mySlideOptions={items: 3, dots: false, nav: true};
   myCarouselOptions={items: 3, dots: true, nav: true};
 
@@ -37,8 +45,22 @@ export class ExternalPageContentComponent implements OnInit {
 
   ngOnInit() {
 
+    this.authSer.homeActivate = true;
+
+
+    //to make class active is "0"
+    this.externalService.getHeader().subscribe(
+      (responce) => {
+        console.log('Header', responce);
+        this.externalService.headerMenus = responce['parents'];
+        for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+          this.externalService[i].active = 0;
+        }
+      }
+    );
+
     //get content data of external pages
-    this.externalService.getContentData().subscribe(
+   this.contentSubscription =  this.externalService.getContentData().subscribe(
       (responce) => {
         console.log(responce);
         this.reports = responce['data'].reports;
@@ -59,15 +81,34 @@ export class ExternalPageContentComponent implements OnInit {
         this.lat = responce['data']['reach_map'].latitude;
         this.lng = responce['data']['reach_map'].longitude;
         console.log('fiiiiiiiiiiiiiiiiiiiii' , this.firstAdvertisiment);
+        this.spinner.hide();
       },
       (error) => {
         console.log(error);
       }
     );
 
+  }
 
+
+  goPageNew(reprotData) {
+    console.log(reprotData);
+    this.router.navigate( ['ExternalPage/newPage/' + reprotData.id]);
+  }
+
+  oneventTable() {
+    this.router.navigate(['/ExternalPage/EventsTable']);
+  }
+
+  ngOnDestroy() {
+    this.contentSubscription.unsubscribe();
+  }
+
+  ngAfterContentInit() {
+    // $(document).ready(function(){
+    //   $('.carousel').carousel(); 
+    // })
   }
 
-  
 
 }

src/app/External-Page/external-page-header/external-page-header.component.css

@@ -488,26 +488,58 @@ input,button {
 
   .menuHeader-w {
       margin: 0 auto;
+      height: 70px;
   }
 
   .menuHeaderEn-w {
       margin: 0 auto;
       direction: ltr;
+      height: 70px;
   }
 
   .menuHeaderEn-w li a {
       float: left;
       margin: 0 15px;
+      color: #049288 !important;
+      transition: all 0.5s;
   }
 
   .menuHeader-w li a {
       font-size: 18px;
+      color: #049288;
+      transition: all 0.5s;
   }
 
-  .menuHeader-w li a img {
+  .menuHeader-w li a img,
+  .menuHeaderEn-w li a img{
       width: 30px;
+      margin: 0 5px;
   }
 
+  .menuHeaderEn-w li, .menuHeader-w li {
+    padding: 10px 0;
+    transition: all 0.5s;
+  }
+
+  .menuHeaderEn-w li:hover {
+    background-color: #02635c;
+    color: #fff !important;
+  }
+
+  .menuHeaderEn-w li:hover a {
+      color: #fff !important;
+  }
+
+  .menuHeader-w li:hover {
+    background-color: #02635c;
+    color: #fff !important;
+  }
+
+  .menuHeader-w li:hover a {
+      color: #fff !important;
+  }
+
+
   .buttonMobileHeader-w {
       margin: 15px;
   }

src/app/External-Page/external-page-header/external-page-header.component.html

@@ -97,7 +97,13 @@
                         
                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul class="navbar-nav mr-auto menuHeader-w">
-                                <li class="nav-item" *ngFor="let menu of headerMenus" style="position: relative;">
+                                <li class="nav-item" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
+                                    <a class="nav-link">
+                                        <i class="fa fa-home" style="font-size: 23px;margin:0 5px;"></i> الرئيسيه
+                                    </a>
+                                </li>
+
+                                <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
                                     <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
                                        <img src="{{authSer.pathImg + menu.photo}}" /> {{menu.name}}
                                     </a>
@@ -105,8 +111,10 @@
                                         <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name}}</a>
                                     </div>
                                 </li>
+
                             </ul>
                         </div>
+
                     </nav>
                 </div>
             </div>
@@ -214,9 +222,14 @@
                     
                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul class="navbar-nav mr-auto menuHeaderEn-w">
-                                <li class="nav-item" *ngFor="let menu of headerMenus" style="position: relative;">
+                                <li class="nav-item" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
+                                    <a class="nav-link">
+                                        <i class="fa fa-home" style="font-size: 23px;margin:0 5px;"></i> Home
+                                    </a>
+                                </li>
+                                <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
                                     <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
-                                        {{menu.name_en}}
+                                        <img src="{{authSer.pathImg + menu.photo}}" /> {{menu.name_en}} 
                                     </a>
                                     <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
                                         <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name_en}}</a>

src/app/External-Page/external-page-header/external-page-header.component.ts

@@ -16,7 +16,6 @@ export class ExternalPageHeaderComponent implements OnInit {
     
     currentDate: any = Date.now();//ararbic date 
     currentEnglishDate: any = Date.now(); //english date
-    headerMenus = []; //header data 
 
   ngOnInit() {
 
@@ -25,22 +24,34 @@ export class ExternalPageHeaderComponent implements OnInit {
     this.authSer.setLocalLang(); //set languages icons
     this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar', 'header');
 
+    this.authSer.footerData = [];
+
+    this.authSer.onGetFooterData('internal').subscribe(
+      (responce) => {
+        this.authSer.footerData = responce['footer'];
+        console.log(this.authSer.footerData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    
+
     //get header data 
     this.externalService.getHeader().subscribe(
       (responce) => {
         console.log(responce);
-        this.headerMenus = responce['parents'];
-        console.log('menu data' , this.headerMenus);
+        this.externalService.headerMenus = responce['parents'];
+        console.log('menu data' , this.externalService.headerMenus);
       },
       (error) => {
         console.log(error);
       }
     );
+  }
 
-
-
-
-
+  goToHome() {
+    this.router.navigate(['/ExternalPage/home']);
   }
 
 

src/app/External-Page/external-page.module.ts

@@ -1,3 +1,4 @@
+import { SharedModule } from './../shared/shared.module';
 import { ExternalEventsComponent } from './external-events/external-events.component';
 import { ExternalPageService } from './../shared/external-page.service';
 import { ExternalPageRoutingModule } from './external-routing-module';
@@ -12,19 +13,32 @@ import { AgmCoreModule } from '@agm/core';
 import { OwlModule } from 'ngx-owl-carousel';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { ExternalHospitalComponent } from './external-hospital/external-hospital.component';
+import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
+import { NewPageComponent } from './new-page/new-page.component';
+import { ExternalEventsTableComponent } from './external-events-table/external-events-table.component';
+import {NgxPaginationModule} from 'ngx-pagination';
+//import { CeiboShare } from 'ng2-social-share';
 
 
 @NgModule({
     declarations: [ExternalPageHeaderComponent,
         ExternalPageContentComponent,
         ExternalPageComponent,
-        ExternalEventsComponent
+        ExternalEventsComponent,
+        ExternalHospitalComponent,
+        ExternalContactUsComponent,
+        NewPageComponent,
+        ExternalEventsTableComponent,
+        //CeiboShare,
     ],
     imports: [
         CommonModule,
         FormsModule,
         OwlModule,
+        NgxPaginationModule,
         SlickCarouselModule,
+        SharedModule,
         AgmCoreModule.forRoot({
             apiKey: 'AIzaSyAxlgymaua-8BszEryfQIOr9PLKrtEqU2I'
           }),

src/app/External-Page/external-routing-module.ts

@@ -1,3 +1,7 @@
+import { ExternalEventsTableComponent } from './external-events-table/external-events-table.component';
+import { NewPageComponent } from './new-page/new-page.component';
+import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
+import { ExternalHospitalComponent } from './external-hospital/external-hospital.component';
 import { ExternalPageContentComponent } from './external-page-content/external-page-content.component';
 import { ExternalPageComponent } from './external-page/external-page.component';
 import { NgModule } from '@angular/core';
@@ -8,6 +12,10 @@ import { RouterModule, Routes } from '@angular/router';
 const externalPageRoutes: Routes = [
     {path: 'ExternalPage' , component: ExternalPageComponent, children:[
         {path: 'home', component: ExternalPageContentComponent},
+        {path: 'contactUs', component: ExternalContactUsComponent},
+        {path: 'EventsTable', component: ExternalEventsTableComponent},
+        {path: 'newPage/:reportId', component: NewPageComponent},
+        {path: ':type_page', component: ExternalHospitalComponent},
     ]},
 ];
 

src/app/External-Page/new-page/new-page.component.css

@@ -0,0 +1,214 @@
+.newPage-w {
+    width: 100%;
+}
+
+.newPage-w .containerContent-w {
+    border-top: 5px solid #007a71;
+}
+
+.newPage-w .containerContent-w .firstReport-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .firstReport-w h2 {
+    font-size: 18px;
+    color: #007a71;
+    text-align: right;
+    margin: 10px 0;
+}
+
+.newPage-w .containerContent-w .firstReport-w h2 span {
+    font-size: 15px;
+    color: #888;
+}
+
+.newPage-w .containerContent-w .firstReport-w .img {
+    width: 100%;
+    height: 400px;
+    margin-top: 20px;
+}
+
+.newPage-w .containerContent-w .firstReport-w .reprtDetail-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .firstReport-w .reprtDetail-w .dateReport-w {
+    width: 100%;
+    padding: 10px;
+}
+
+.newPage-w .containerContent-w .firstReport-w .reprtDetail-w .dateReport-w p {
+    font-size: 17px;
+    color: #ccc;
+}
+
+.newPage-w .containerContent-w .firstReport-w .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.newPage-w .containerContent-w .descriptionBody-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .descriptionBody-w h2 {
+    text-align: right;
+    font-size: 17px;
+    color: #007a71;
+    margin: 10px 0;
+}
+
+.newPage-w .containerContent-w .descriptionBody-w p {
+    text-align: right;
+    font-size: 15px;
+    color: #888;
+}
+
+.newPage-w .containerContent-w .imagesBody-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .imagesBody-w .imageNews {
+    width: 100%;
+    height: 300px;
+}
+
+.newPage-w .containerContent-w .imagesBody-w .imageNews img {
+    width: 100%;
+    height: 100%;
+}
+
+.inside_links{
+    width: 100%;
+overflow: hidden;
+margin-top: 70px;
+display: block;
+}
+
+.inside_links ul{
+  display: block;
+width: 100%;
+padding: 0px;
+}
+
+.inside_links ul li{
+display: block;
+width: 100%;
+height: 65px;
+}
+
+.inside_links ul li span{
+display: block;
+float: right;
+margin: 1px 4px 0px 0px;
+}
+.eninside_links ul li span{
+ float: left !important;
+}
+.eninside_links ul li a img{
+ float: left !important;
+}
+.inside_links ul li a img{
+  display: block;
+width: 30px;
+float: right;
+height: 30px;
+margin: 15px 10px 0px 10px;
+filter: invert(65%);
+}
+
+.inside_links ul li a{
+display: block;
+float: right;
+color: #755a07;
+line-height: 62px;
+margin: 0px 2px 2px 0px;
+width: 100%;
+background-color: #e6e6e6;
+height: 65px;
+border-bottom: 1px solid #ceb79d96;
+transition: all 0.5s;
+}
+.inside_links ul li a:hover{
+    background: linear-gradient(1turn,#e6ded5cc, #e6e6e6, #e6e6e6);
+}
+
+.saredLinks-w {
+    width: 50%;
+    float: left;
+    display: inline-block;
+    padding: 10px 0;
+}
+
+.saredLinks-w li {
+    display: inline-block;
+    margin: 0 5px;
+}
+
+.saredLinks-w li button {
+    width: 30px;
+    height: 30px;
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.5s;
+	border-radius: 3px;
+}
+
+.saredLinks-w li button:hover {
+    transform: rotate(180deg);
+}
+
+.saredLinks-w li .facebook {
+    background-color: #3b5a97;
+}
+
+.saredLinks-w li .twitter {
+    background-color: #21a1f2;
+}
+
+.saredLinks-w li .linkedin {
+    background-color: #0676b5;
+}
+
+.saredLinks-w li .googleplus {
+    background-color: #e21414;
+}
+
+.saredLinks-w li .whatsapp{
+    background-color: #4fc248;
+}
+
+.saredLinks-w li .whatsapp a {
+    color: #fff;
+    text-decoration: none;
+}
+
+
+@media(max-width:767px){
+    .inside_links{
+		display: none !important;
+    }
+    .saredLinks-w li button{
+        margin: 5px 0;
+    }
+}
+
+@media(min-width:767px) and (max-width: 991px) {
+    .saredLinks-w li button{
+        margin: 5px 0;
+    }
+}
+
+
+@media(min-width: 1200px) {
+    .container {
+        width: 1200px;
+    }
+}

src/app/External-Page/new-page/new-page.component.html

@@ -0,0 +1,191 @@
+<div class="newPage-w">
+  <div class="container">
+      <div class="containerContent-w">
+        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+            <div class="row">
+
+              <div class="col-12 col-sm-12 col-md-9">
+                <div class="firstReport-w">
+                  <h2> {{reportData.title}} <span>{{reportData.created_at}}</span> </h2>
+                  <div class="img">
+                    <img src="{{authSer.pathImg + singleImg.photo}}" />
+                  </div>
+                  <div class="reprtDetail-w">
+                    <div class="row">
+                      <div class="col-6">
+                        <div class="socialMedia-w">
+                          <ul class="list-unstyled saredLinks-w" style="float:right;">
+                            <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
+                            <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
+                            <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
+                            <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
+                            <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-3">
+                <div class="items inside_links">
+                  <!-- <ul>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286652.png" />
+                        <span>صحه المريض</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286545.png" />
+                        <span> التدريب والتعليم</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286575.png" />
+                        <span>الموظفين</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1548286592.png" />
+                        <span>التوظيف</span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1547465492.png" />
+                        <span>نظام البلاغات -OVR </span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286494.png" />
+                        <span> دليل المجمع</span>
+                      </a>
+                    </li>
+                  </ul> -->
+                </div>
+              </div>
+
+              <div class="col-12">
+                <div class="descriptionBody-w">
+                  <p [innerHTML]="reportData.description"></p>
+                </div>
+              </div>
+
+              <div class="col-12">
+                <div class="imagesBody-w">
+                  <div class="row">
+                    <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
+                      <div class="imageNews">
+                        <img src="{{authSer.pathImg + image.photo}}"> 
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+        </ng-template>
+
+        <ng-template #englishTemplate>
+          <div class="row" style="direction:ltr">
+            <div class="col-12 col-sm-12 col-md-8">
+              <div class="firstReport-w">
+                <h2 style="text-align:left"> {{reportData.title_en}} <span>{{reportData.created_at}}</span>  </h2>
+                <div class="img">
+                  <img src="{{authSer.pathImg + singleImg.photo}}" />
+                </div>
+                <div class="reprtDetail-w">
+                  <div class="row">
+                    <div class="col-6">
+                      <div class="socialMedia-w">
+                        <ul class="list-unstyled saredLinks-w" style="text-align: left; direction: ltr;float: left !important;width:100%">
+                          <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
+                          <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
+                          <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
+                          <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
+                          <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="items inside_links eninside_links">
+                  <!-- <ul>
+                    <li>
+                      
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286652.png" />
+                        <span>Pharmacy Library</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286545.png" />
+                        <span>User Guide</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286575.png" />
+                        <span>Employee Handbook</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1548286592.png" />
+                        <span>Initiatives </span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1547465492.png" />
+                        <span> OVR System </span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286494.png" />
+                        <span>Medical Library</span>
+                      </a>
+                    </li>
+                  </ul> -->
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="descriptionBody-w">
+                <p style="text-align:left" [innerHTML]="reportData.description_en"></p>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="imagesBody-w">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
+                    <div class="imageNews">
+                      <img src="{{authSer.pathImg + image.photo}}"> 
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </ng-template>
+      </div>
+  </div>
+</div>

src/app/External-Page/new-page/new-page.component.ts

@@ -0,0 +1,73 @@
+import { HttpClient } from '@angular/common/http';
+import { ActivatedRoute, Params } from '@angular/router';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-new-page',
+  templateUrl: './new-page.component.html',
+  styleUrls: ['./new-page.component.css']
+})
+export class NewPageComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private http: HttpClient,
+    private spinner: NgxSpinnerService,
+    private route:ActivatedRoute) { 
+      this.spinner.show();
+    }
+
+    reportId: number;
+    reportData = {
+      created_at: '',
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+      photos: [],
+    };
+
+    singleImg = {
+      photo: '',
+    };
+
+  ngOnInit() {
+    
+    this.authSer.homeActivate = false;
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.reportId = params['reportId'];
+      }
+    );
+
+    this.http.get(this.authSer.pathApi + '/get_report/' + this.reportId).subscribe(
+      (responce) => {
+        console.log(responce);
+        const singleDataImg = responce['report']['photos'].splice(responce['report']['photos'].indexOf(responce['report']['photos'][0]) , 1);
+        console.log('single image data' , singleDataImg);
+        this.singleImg.photo = singleDataImg[0].photo;
+        console.log('single image ', this.singleImg.photo);
+
+        console.log('responnnnnce' , responce['report']);
+
+        this.reportData.created_at = responce['report'].created_at;
+        this.reportData.title = responce['report'].title;
+        this.reportData.title_en = responce['report'].title_en;
+        this.reportData.description = responce['report'].description;
+        this.reportData.description_en = responce['report'].description_en;
+        for(let i = 1; i < responce['report']['photos'].length; i++) {
+          this.reportData.photos.push(responce['report']['photos'][i]);
+        }
+        console.log('dddddddddddddddddddd', this.reportData);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+}

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

@@ -69,7 +69,7 @@
     width: 100%;
     padding: 6px 0;
     border-bottom: 1px solid #ccc;
-    margin-left: 50px;
+    margin: 0 10px;
     transition: all 0.5s;
 }
 
@@ -120,7 +120,7 @@
     width: 100%;
     padding: 6px 0;
     border-bottom: 1px solid #ccc;
-    margin-right: 50px;
+    margin-right: 0 10px;
     transition: all 0.5s;
 }
 

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

@@ -7,20 +7,20 @@
                   <div class="col-6 col-md-3">
                       <div class="recordsContent-w">
                           <!-- <ul class="list-unstyled">
-                            <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
+                            <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
                                 {{hospital.name}}
-                                <div *ngIf="i == expandedIndex">  
+                                <div *ngIf="i == expandedIndex">
                                     <div class="containetttt" *ngFor="let field of hospital['fields']">
                                       <ul class="list-unstyled nestedMenu">
                                         <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
-                                          {{field.title}} 
+                                          {{field.title}}
                                         </li>
                                       </ul>
-                                    </div>  
-                                </div>                                  
+                                    </div>
+                                </div>
                             </li>
                           </ul> -->
-                          <div class="accordion nothome" id="accordionExample">
+                          <!-- <div class="accordion" id="accordionExample">
                               <div class="panel-group testGroup-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
                                   <div class="panel panel-default">
                                       <div class="panel-heading accordion-toggle collapsed" [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
@@ -30,15 +30,34 @@
                                           <div class="panel-body testBody-w">
                                               <ul class="list-unstyled nestedMenu">
                                                 <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
-                                                  {{field.title}} 
+                                                  {{field.title}}
                                                 </li>
                                               </ul>
                                           </div>
                                       </div>
                                   </div>
                               </div>
+                          </div> -->
+                          
+                          <div id="accordion">
+                            <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
+                              <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                  <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                    <h4 class="panel-title">{{hospital.name}}</h4>
+                                  </button>
+                              </div>
+                          
+                              <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                <div class="card-body testBody-w">
+                                    <ul class="list-unstyled">
+                                        <li (click)="showDescriptionDetails(field)"  [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
+                                            {{field.title}}
+                                        </li>
+                                    </ul>
+                                </div>
+                              </div>
+                            </div>
                           </div>
-                        
                       </div>
                   </div>
                   <div class="col-6 col-md-9">
@@ -46,16 +65,16 @@
                       <h2>{{detailsField.title}}</h2>
                       <p [innerHTML]="detailsField.description"></p>
                     </div>
-                  </div> 
+                  </div>
               </div>
             </ng-template>
-    
+
             <ng-template #englishTemplate>
               <div class="container" style="direction:ltr">
                 <div class="row">
                     <div class="col-6 col-md-3">
                         <div class="recordsContent-w">
-                            <div class="accordion nothome" id="accordionExample">
+                            <!-- <div class="accordion nothome" id="accordionExample">
                                 <div class="panel-group testGroupEn-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
                                     <div class="panel panel-default">
                                         <div class="panel-headingEn accordion-toggle collapsed"  [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
@@ -65,26 +84,48 @@
                                             <div class="panel-body testBodyEn-w">
                                                 <ul class="list-unstyled nestedMenu">
                                                   <li (click)="showDescriptionDetails(field)">
-                                                    {{field.title_en}} 
+                                                    {{field.title_en}}
                                                   </li>
                                                 </ul>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+                            </div> -->
+
+                            <div id="accordion">
+                                <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
+                                    <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                    <h5 class="mb-0">
+                                        <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                        <h4 class="panel-title">{{hospital.name_en}}</h4>
+                                        </button>
+                                    </h5>
+                                    </div>
+                                
+                                    <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                    <div class="card-body testBody-w">
+                                        <ul class="list-unstyled nestedMenu">
+                                            <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left">
+                                                {{field.title_en}}
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    </div>
+                                </div>
                             </div>
                             <!-- <ul class="list-unstyled">
-                              <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
-                                  {{hospital.name_en}}  
-                                  <div *ngIf="i == expandedIndex">  
+                              <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
+                                  {{hospital.name_en}}
+                                  <div *ngIf="i == expandedIndex">
                                       <div class="containetttt" c>
                                         <ul class="list-unstyled nestedMenu">
                                           <li (click)="showDescriptionDetails(field)">
-                                            {{field.title_en}} 
+                                            {{field.title_en}}
                                           </li>
                                         </ul>
-                                      </div>  
-                                  </div>                                  
+                                      </div>
+                                  </div>
                               </li>
                             </ul> -->
                         </div>
@@ -94,11 +135,11 @@
                         <h2>{{detailsField.title_en}}</h2>
                         <p>{{detailsField.description_en}}</p>
                       </div>
-                    </div> 
+                    </div>
                 </div>
               </div>
             </ng-template>
-            
+
         </div>
     </div>
   </div>

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

@@ -17,7 +17,6 @@ export class HospitalContentComponent implements OnInit {
               private route: ActivatedRoute,
               private spinner: NgxSpinnerService,
               private authSer:AuthServiceService) { 
-                this.spinner.show();
               }
 
   hospitalCenters = [];
@@ -41,6 +40,8 @@ export class HospitalContentComponent implements OnInit {
 
 
   ngOnInit() {
+    
+    this.spinner.show();
     this.authSer.homeActivate = false;
     this.expandedIndex = 0;
     this.route.params.subscribe(
@@ -115,7 +116,7 @@ export class HospitalContentComponent implements OnInit {
           console.log(error);
         }
       );
-
+      
     }
   }
 
@@ -147,8 +148,4 @@ export class HospitalContentComponent implements OnInit {
     this.expandedIndex = -1;
   }
 
-
-
-
-
 }

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

@@ -793,6 +793,31 @@ input,button {
     display: inline-block;
 }
 
+.tabs .card {
+    border: 0;
+}
+
+.tabs .recods .card-header{
+    padding: 0;
+    overflow: hidden;
+}
+
+.tabs .recods .card-header h4 {
+    font-size: 15px;
+}
+
+.tabs .recods .card-header h5 button {
+    cursor: pointer;
+}
+
+.tabs .recods .card-body {
+    padding: 0;
+}
+.testBody-w p {
+    text-align: right;
+    font-size: 15px;
+    padding: 5px 10px;
+  }
 .tabs .recods .headerRecords-w {
     width: 100%;
     display: inline-block;

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

@@ -211,19 +211,20 @@
                                 <div class="headerRecords-w">
                                     إحصائيات عامه - إنجازات
                                 </div>
-                                <div class="recordsContent-w">
-                                    <div class="accordion" id="accordionExample">
-                                        <div class="panel-group testGroup-w" *ngFor="let achiev of achievements; let i = index"  id="accordion">
-                                            <div class="panel panel-default">
-                                                <div class="panel-heading accordion-toggle collapsed" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
-                                                    <h4 class="panel-title">{{achiev.title}}</h4>
-                                                </div>
-                                                <div id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
-                                                    <div class="panel-body testBody-w">
-                                                        <p [innerHTML]="achiev.description"></p>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                <div id="accordion">
+                                    <div class="card" *ngFor="let achiev of achievements; let i = index">
+                                        <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                        <h5 class="mb-0">
+                                            <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                            <h4 class="panel-title">{{achiev.title}}</h4>
+                                            </button>
+                                        </h5>
+                                        </div>
+                                    
+                                        <div [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                        <div class="card-body testBody-w">
+                                            <p [innerHTML]="achiev.description"></p>
+                                        </div>
                                         </div>
                                     </div>
                                 </div>
@@ -446,17 +447,20 @@
                             General Statistics - Achievements
                         </div>
                         <div class="recordsContent-w">
-                            <div class="accordion" id="accordionExample">
-                                <div class="panel-group testGroupEn-w" *ngFor="let achiev of achievements; let i = index"  id="accordion">
-                                    <div class="panel panel-default">
-                                        <div class="panel-headingEn accordion-toggle collapsed" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
-                                            <h4 class="panel-title">{{achiev.title_en}}</h4>
-                                        </div>
-                                        <div id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
-                                            <div class="panel-body testBodyEn-w">
-                                                <p [innerHTML]="achiev.description_en"></p>
-                                            </div>
-                                        </div>
+                            <div id="accordion">
+                                <div class="card" *ngFor="let achiev of achievements; let i = index">
+                                    <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                    <h5 class="mb-0">
+                                        <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                        <h4 class="panel-title">{{achiev.title_en}}</h4>
+                                        </button>
+                                    </h5>
+                                    </div>
+                                
+                                    <div [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                    <div class="card-body testBody-w">
+                                        <p [innerHTML]="achiev.description_en" style="text-align:left !important"></p>
+                                    </div>
                                     </div>
                                 </div>
                             </div>

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

@@ -101,9 +101,9 @@ export class InternalPageContentComponent implements OnInit {
   ngOnInit() {
    //console.log(this.checkTokenExpire);
        //get profile data
+       this.spinner.show();
     this.userservice.getUserDataProfile();
     this.authSer.homeActivate = true;
-    this.spinner.show();
     
     this.internalService.getParentData().subscribe(
       (responce) => {
@@ -111,7 +111,6 @@ export class InternalPageContentComponent implements OnInit {
         for(let i = 0; i < this.authSer.parentsPage.length; i++) {
           this.authSer.parentsPage[i].active = 0;
         }
-        this.spinner.hide();
       },
       (error) => {
         console.log(error);
@@ -163,7 +162,12 @@ export class InternalPageContentComponent implements OnInit {
           description: responce['data']['main_ad'].description,
           description_en: responce['data']['main_ad'].description_en,
         }
-        this.spinner.hide();
+
+        if(this.achievements.length > 0) {
+          this.spinner.hide();
+        }
+        
+
       },
       (error) => {
         console.log(error);

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

@@ -178,6 +178,10 @@ input,button {
     text-align: right;
 }
 
+.logoHeader-w .leftLogo-w {
+    text-align: left;
+}
+
 .logoHeader-w .rightLogo-w img {
     margin-top: 15px;
     margin-right:15px

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

@@ -28,7 +28,18 @@ export class InternalPageHeaderComponent implements OnInit {
   showActiveBackground: boolean = false;
      
   ngOnInit() {
+   
+     this.authSer.footerData = [];
 
+    this.authSer.onGetFooterData('internal').subscribe(
+      (responce) => {
+        this.authSer.footerData = responce['footer'];
+        console.log(this.authSer.footerData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
 
     this.authSer.setLocalLang();
     console.log('tooooken', this.authSer.isAuthenticated());
@@ -76,6 +87,9 @@ export class InternalPageHeaderComponent implements OnInit {
   }
 
 
+  
+
+
 
 
 

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

@@ -13,7 +13,6 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { FormsModule } from '@angular/forms';
 import {NgxPaginationModule} from 'ngx-pagination';
 import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
-import { CeiboShare } from 'ng2-social-share';
 import { CarouselModule } from 'ngx-owl-carousel-o';
 
 import { InternalPageHeaderComponent } from './internal-page-header/internal-page-header.component';
@@ -23,7 +22,9 @@ import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the modu
 import { CircularsPageComponent } from './circulars-page/circulars-page.component';
 
 import { NgxSpinnerModule } from 'ngx-spinner';
+import { SharedModule } from '../shared/shared.module';
 
+//import { CeiboShare } from 'ng2-social-share';
 
 @NgModule({
     declarations: [
@@ -35,7 +36,7 @@ import { NgxSpinnerModule } from 'ngx-spinner';
         CircularsPageComponent,
         EventsDateComponent,
         NewsPagesComponent,
-        CeiboShare,
+        //CeiboShare,
     ],
     imports: [
         CommonModule,
@@ -45,6 +46,7 @@ import { NgxSpinnerModule } from 'ngx-spinner';
         JwSocialButtonsModule,
         CarouselModule,
         NgxSpinnerModule,
+        SharedModule,
         NgbModule.forRoot(),
         FlatpickrModule.forRoot(),
         CalendarModule.forRoot({

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

@@ -13,7 +13,7 @@ import { LoginComponent } from './../login/login.component';
 
 
 const internalPageRoutes: Routes = [
-        {path: '' , component: InternalPageComponent, children:[
+        {path: 'InternalPage' , component: InternalPageComponent, children:[
         {path: 'home', component: InternalPageContentComponent},
         {path:'circulars', component: CircularsPageComponent},
         {path: 'events', component: EventsDateComponent},

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

@@ -22,7 +22,7 @@
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-11" style="margin-left: auto;margin-right: auto;">
                   
-                   <ul class="list-unstyled saredLinks-w">
+                   <ul class="list-unstyled saredLinks-w" style="float:right">
                       <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
                       <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
                       <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
@@ -54,7 +54,6 @@
 					<div class="col-12 col-sm-12 col-md-12 inside_links">
 						<ul>
 							<li>
-								
 								<a href="service.link">
 									 <img src="http://kfmc.info/back_end/public/uploads/1548286652.png" />
 									<span>مكتبة الصيدلية</span>
@@ -94,8 +93,6 @@
 							</li>
 						</ul>
 					</div>
-			
-				
 				</div>
 			
 			

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

@@ -3,7 +3,7 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
 import { NgxSpinnerService } from 'ngx-spinner';
-import { CeiboShare } from 'ng2-social-share';
+//import { CeiboShare } from 'ng2-social-share';
 
 
 @Component({
@@ -11,9 +11,12 @@ import { CeiboShare } from 'ng2-social-share';
   templateUrl: './news-page.component.html',
   styleUrls: ['./news-page.component.css'],
 })
+
 export class NewsPageComponent implements OnInit {
+
   public repoUrl = '';
   public imageUrl = '';
+  
   constructor(private route: ActivatedRoute, 
     private authSer:AuthServiceService, 
     private spinner: NgxSpinnerService,
@@ -40,6 +43,7 @@ export class NewsPageComponent implements OnInit {
     );
 
     this.repoUrl = this.authSer.pathApi + '/get_report/' + this.newsId;
+
     //get news data 
     this.internalService.getNewsData(this.newsId).subscribe(
       (responce) => {
@@ -55,7 +59,8 @@ export class NewsPageComponent implements OnInit {
       (error) => {
         console.log(error);
       }
-    )
+    );
+
   }
 
 }

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { ServicesComponent } from './servicesItems/services.component';
 import { ExternalPageModule } from './External-Page/external-page.module';
-//import { InternalPageModule } from './Internal-Page/internal-page.module';
+import { InternalPageModule } from './Internal-Page/internal-page.module';
 import { DashBoardModule } from './dashboard/dashboard.module';
 
 import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
@@ -61,10 +61,9 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
 
 import { Ng2CarouselamosModule } from 'ng2-carouselamos';
 import { NumberDerictiveDirective } from './number-derictive.directive';
-import { EnglishCharactersDirective } from './shared/english-characters.directive';
+//import { EnglishCharactersDirective } from './shared/english-characters.directive';
 import { OnlyNumberDirective } from './shared/only-number.directive';
-
-
+import {SharedModule} from './shared/shared.module';
 //registerLocaleData(localeAr, 'ar');
 
 
@@ -84,8 +83,8 @@ import { OnlyNumberDirective } from './shared/only-number.directive';
     PageNotFoundComponent,
     //CeiboShare,
     NumberDerictiveDirective,
-    EnglishCharactersDirective,
-    OnlyNumberDirective,
+    //EnglishCharactersDirective,
+    //OnlyNumberDirective,
   ],
   imports: [
     BrowserModule,
@@ -94,8 +93,9 @@ import { OnlyNumberDirective } from './shared/only-number.directive';
     HttpModule,
     HttpClientModule,
     DashBoardModule,
-    //InternalPageModule,
+    InternalPageModule,
     ExternalPageModule,
+    SharedModule,
     AppRoutingModule,
     SlideMenuModule,
     NgxSpinnerModule,

src/app/dashboard/dashboard.module.ts

@@ -1,3 +1,15 @@
+import { AddAdvertisingServiceComponent } from './advertising-services/add-advertising-service/add-advertising-service.component';
+import { AdvertisingServicesListComponent } from './advertising-services/advertising-services-list/advertising-services-list.component';
+import { AddStatisticComponent } from './statistics/add-statistic/add-statistic.component';
+import { AddExternalAchievementComponent } from './external-achievements/add-external-achievement/add-external-achievement.component';
+import { AddEventCalendarComponent } from './event-calendars/add-event-calendar/add-event-calendar.component';
+import { EventCalendarsListComponent } from './event-calendars/event-calendars-list/event-calendars-list.component';
+import { AddVisitingTimeComponent } from './visiting-times/add-visiting-time/add-visiting-time.component';
+import { AddContactUsComponent } from './contact-us/add-contact-us/add-contact-us.component';
+import { ContactUsListComponent } from './contact-us/contact-us-list/contact-us-list.component';
+import { AddBarEventComponent } from './bar-events/add-bar-event/add-bar-event.component';
+import { BarEventsListComponent } from './bar-events/bar-events-list/bar-events-list.component';
+import { SharedModule } from './../shared/shared.module';
 import { EventsComponent } from './events/events.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -78,23 +90,11 @@ import { RoleReportComponent } from './roles/role-report/role-report.component';
 import { ReportListComponent } from './report-list/report-list.component';
 
 import { UserService } from '../shared/user.service';
-import { BarEventsListComponent } from './bar-events/bar-events-list/bar-events-list.component';
-import { AddBarEventComponent } from './bar-events/add-bar-event/add-bar-event.component';
-
-import { NumberDirective } from './number.directive';
-import { EnglishDirective } from './english.directive';
-import { ContactUsListComponent } from './contact-us/contact-us-list/contact-us-list.component';
-import { AddContactUsComponent } from './contact-us/add-contact-us/add-contact-us.component';
 import { VisitingTimesListComponent } from './visiting-times/visiting-times-list/visiting-times-list.component';
-import { AddVisitingTimeComponent } from './visiting-times/add-visiting-time/add-visiting-time.component';
-import { EventCalendarsListComponent } from './event-calendars/event-calendars-list/event-calendars-list.component';
-import { AddEventCalendarComponent } from './event-calendars/add-event-calendar/add-event-calendar.component';
 import { ExternalAchievementsListComponent } from './external-achievements/external-achievements-list/external-achievements-list.component';
-import { AddExternalAchievementComponent } from './external-achievements/add-external-achievement/add-external-achievement.component';
 import { StatisticsListComponent } from './statistics/statistics-list/statistics-list.component';
-import { AddStatisticComponent } from './statistics/add-statistic/add-statistic.component';
-import { AdvertisingServicesListComponent } from './advertising-services/advertising-services-list/advertising-services-list.component';
-import { AddAdvertisingServiceComponent } from './advertising-services/add-advertising-service/add-advertising-service.component';
+// import { NumberDirective } from './number.directive';
+// import { EnglishDirective } from './english.directive';
 
 
 
@@ -147,8 +147,6 @@ import { AddAdvertisingServiceComponent } from './advertising-services/add-adver
         AddAdverComponent,
         BarEventsListComponent,
         AddBarEventComponent,
-        NumberDirective,
-        EnglishDirective,
         ContactUsListComponent,
         AddContactUsComponent,
         VisitingTimesListComponent,
@@ -168,6 +166,7 @@ import { AddAdvertisingServiceComponent } from './advertising-services/add-adver
         JwSocialButtonsModule,
         NgxPaginationModule,
         AlifeFileToBase64Module,
+        SharedModule,
         NgbModule.forRoot(),
         ModalModule.forRoot(),
         FormsModule,

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

@@ -64,20 +64,11 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{event.id}}" [(ngModel)]="event.selected" [value]='event' (change)="checkIfAllSelected();">
-              <!-- <label class="custom-control-label disblayBlock-w" for="{{event.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
             </div>
           </td>
           <td>{{event.name}}</td>
           <td>
             {{event.ranking}}
-            <!-- <select class="form-control" [ngModel]="event.ranking" (change)="changeRanking($event, event.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>{{event.display_location == 'both' ? 'كلاهما' : event.display_location == 'internal' ? 'الصفحه الداخليه' : event.display_location == 'external' ? 'الصفحه الخارجيه' : 'No'}}</td>
           <td>{{event.type == '0' ? 'التعازي' : event.type == '1' ? 'التهاني' : 'No'}}</td>

src/app/dashboard/events/events.component.ts

@@ -149,28 +149,28 @@ export class EventsComponent implements OnInit {
     );
   };
 
-     //change page 
-     onPageChange(pagenationNumber) {
-      this.spinner.show();
-      this.currentPage = pagenationNumber;
-      this.eventsList = [];
-      //console.log(pagenationNumber);
-      //console.log(this.pageId);
-      this.eventService.getEventsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.eventsList = responce['events'];
-          this.count = responce['count'];
-          this.perPagePagenation = responce['per_page'];
-          console.log(this.eventsList);
-          this.spinner.hide();
-        },
-        (error) => {
-          console.log(error);
-          this.spinner.hide();
-        }
-      );
-    }
+    //change page 
+    onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.eventsList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.eventService.getEventsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.eventsList = responce['events'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.eventsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
 
   changeRanking(event, id) {
     const data = {

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
@@ -26,7 +27,7 @@ export class AddExternalComponent implements OnInit {
   checkSaveClick:boolean = false;
   typeLink: string = '';
   externalId: number;
-
+  serviceId: number;
   external = {
     name: '',
     name_en: '',
@@ -40,6 +41,7 @@ export class AddExternalComponent implements OnInit {
     private location: Location,
     private route: ActivatedRoute,
     private authSer: AuthServiceService,
+    private dashBoardService: DashboardService,
     private authService: AuthServiceService,
     private externalService: ExternalSerService) { }
 
@@ -53,6 +55,13 @@ export class AddExternalComponent implements OnInit {
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
     this.external.status = "1";
+
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.serviceId = params['serviceID'];
+      }
+    );
+
     this.route.params.subscribe(
       (params: Params) => {
         if(params['typeExternalMode'] == 'edit') {
@@ -60,7 +69,7 @@ export class AddExternalComponent implements OnInit {
           this.typeMode = true;
           this.typeLink = 'تعديل';
           this.externalId = params['editExternalId'];
-          this.externalService.getExternalData(this.externalId).subscribe(
+          this.dashBoardService.getItemData(this.externalId, 'externalService').subscribe(
             (responce) => {
               console.log(responce['external_service']);
               this.external.name = responce['external_service'].name;
@@ -77,7 +86,7 @@ export class AddExternalComponent implements OnInit {
             (error) => {
               console.log(error);
             }
-          )
+          );
         } else {
           this.typeLink = 'أنشاء جديد';
         }
@@ -108,8 +117,10 @@ export class AddExternalComponent implements OnInit {
 
  //on submitted
  onSubmitted() {
-   this.checkSaveClick = true;
+
+  this.checkSaveClick = true;
   const formData = this.externalFormData.value;
+
   if(this.checkChangeImage){
     formData['photo'] = this.imageBase64;
     formData['photo_type'] = this.photoType[1];
@@ -119,6 +130,7 @@ export class AddExternalComponent implements OnInit {
     this.photoEdit = false;
     console.log(formData);
   }
+
   if(this.typeMode){
     if((this.photoType[1] != 'png' && this.photoType[1] != 'gif') && this.photoEdit == true) {
       this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
@@ -127,19 +139,35 @@ export class AddExternalComponent implements OnInit {
       this.toastr.warning('قم باختيار صوره !');
       this.checkSaveClick = false;
     } else {
-      this.externalService.editExternal(formData, this.externalId).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.toastr.success('تمت التعديل بنجاح');
-          this.location.back();
-          this.checkSaveClick = true;
-        },
-        (error) => {
-          console.log(error);
-          this.checkSaveClick = false;
-          this.toastr.error('خطأ في التعديل !');
-        }
-      );
+      if(this.serviceId == 6) {
+        this.dashBoardService.editItem( this.externalId, formData, 'internalServiceExternalPage').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+            this.checkSaveClick = true;
+          },
+          (error) => {
+            console.log(error);
+            this.checkSaveClick = false;
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      } else if(this.serviceId == 2) {
+        this.dashBoardService.editItem( this.externalId, formData, 'externalServiceExternalPage').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+            this.checkSaveClick = true;
+          },
+          (error) => {
+            console.log(error);
+            this.checkSaveClick = false;
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      }
     }
   } else {
     if(this.photoType[1] != 'png' && this.photoType[1] != 'gif') {
@@ -149,19 +177,37 @@ export class AddExternalComponent implements OnInit {
       this.toastr.warning('قم باختيار صوره !');
       this.checkSaveClick = false;
     } else {
-      this.externalService.addExternal(formData).subscribe(
-        (responce) => {
-          console.log(responce);
+
+      if(this.serviceId == 6){
+        this.dashBoardService.addItem(formData, 'internalServiceExternalPage').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت الاضافه بنجاح');
+            this.location.back();
+            this.checkSaveClick = true;
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الحفظ !');
+            this.checkSaveClick = false;
+          }
+        );
+      } else if(this.serviceId == 2){
+        console.log(formData);
+        this.dashBoardService.addItem(formData, 'externalServiceExternalPage').subscribe(
+          (responce) => {
           this.toastr.success('تمت الاضافه بنجاح');
           this.location.back();
-          this.checkSaveClick = true;
-        },
-        (error) => {
-          console.log(error);
-          this.toastr.error('خطأ في الحفظ !');
-          this.checkSaveClick = false;
-        }
-      );
+          this.checkSaveClick = true
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الحفظ !');
+            this.checkSaveClick = false;
+          }
+        );
+      }
+
     }
   }
  }

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { Modal } from 'ngx-modialog/plugins/bootstrap';
 import { HttpClient } from '@angular/common/http';
 import { ExternalSerService } from './../../../shared/external-ser.service';
@@ -37,6 +38,7 @@ export class ExternalListComponent implements OnInit {
     private externalService: ExternalSerService,
     private spinner: NgxSpinnerService,
     private modal: Modal,
+    private dashBoardService: DashboardService,
     private authSer: AuthServiceService) { }
 
   ngOnInit() {
@@ -70,21 +72,41 @@ export class ExternalListComponent implements OnInit {
           (responce) => {
             console.log(responce);
             this.pages = responce['pages'];
-            for(let i = 0; i< this.pages.length; i++) {
-              if(this.pages[i].id == 7) {
-                for(let j = 0; j < this.pages[i].permissions.length; j++) {
-                  if(this.pages[i].permissions[j].name == 'add_external_service'){
-                    this.authSer.showAddBtn = true;
+            if(this.serviceId == 6) {
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 7) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_external_service'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_external_service'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_external_services'){
+                      this.authSer.showDeleteBtn = true;
+                    }
                   }
-                  if(this.pages[i].permissions[j].name == 'edit_external_service'){
-                    this.authSer.showEditBtn = true;
-                  }
-                  if(this.pages[i].permissions[j].name == 'delete_external_services'){
-                    this.authSer.showDeleteBtn = true;
+                }else {
+                  console.log('no events');
+                }
+              }
+            } else if(this.serviceId == 2){
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 19) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_external_service_ex'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_external_service_ex'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_external_services_ex'){
+                      this.authSer.showDeleteBtn = true;
+                    }
                   }
+                }else {
+                  console.log('no events');
                 }
-              }else {
-                console.log('no events');
               }
             }
             this.spinner.hide();
@@ -95,7 +117,7 @@ export class ExternalListComponent implements OnInit {
     );
 
     //get list data 
-    this.externalService.getExternalsList(this.externalId, this.currentPage ,this.dataTableNumber).subscribe(
+    this.dashBoardService.getListData(this.externalId, this.currentPage ,this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.externalsList = responce['external_services'];
@@ -133,7 +155,7 @@ export class ExternalListComponent implements OnInit {
     this.currentPage = 1;
     console.log('search curent page', this.currentPage);
     console.log('search page id', this.externalId);
-    this.externalService.getDataUSerSearchBar(dataSearch, this.externalId, this.currentPage, this.dataTableNumber).subscribe(
+    this.dashBoardService.getDataUSerSearchBar(dataSearch, this.externalId, this.currentPage, this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.externalsList = responce['external_services'];
@@ -155,7 +177,7 @@ export class ExternalListComponent implements OnInit {
       this.externalsList = [];
       //console.log(pagenationNumber);
       //console.log(this.pageId);
-      this.externalService.getExternalsList(this.externalId, pagenationNumber, this.dataTableNumber).subscribe(
+      this.dashBoardService.getListData(this.externalId, pagenationNumber, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.externalsList = responce['external_services'];
@@ -203,7 +225,7 @@ export class ExternalListComponent implements OnInit {
     this.spinner.show();
     this.externalsList = [];
     this.dataTableNumber = event.target.value;
-    this.externalService.getExternalsList(this.externalId, this.currentPage, this.dataTableNumber).subscribe(
+    this.dashBoardService.getListData(this.externalId, this.currentPage, this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.externalsList = responce['external_services'];
@@ -238,13 +260,13 @@ export class ExternalListComponent implements OnInit {
       .open();
         dialogRef.result
         .then( result => 
-          this.externalService.deleteEvent(this.externalsListIds).subscribe(
+          this.dashBoardService.deleteItem(this.externalsListIds, this.externalId).subscribe(
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
               this.spinner.show();
               this.externalsList = [];
-              this.externalService.getExternalsList(this.externalId, this.currentPage ,this.dataTableNumber).subscribe(
+              this.dashBoardService.getListData(this.externalId, this.currentPage ,this.dataTableNumber).subscribe(
                 (responce) => {
                   console.log(responce);
                   this.externalsList = responce['external_services'];
@@ -283,5 +305,4 @@ export class ExternalListComponent implements OnInit {
     this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'externalService/edit/' + editEventID]);
   }
   
-
 }

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

@@ -4,8 +4,8 @@
     <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">{{serviceName}} </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>
       </div>

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { FooterService } from './../../../shared/footer.service';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -24,6 +25,9 @@ export class AddFooterComponent implements OnInit {
   photoEdit: boolean = true;
   typeLink: string = '';
   externalId: number;
+  serviceId: number;
+
+  serviceName: string = '';
 
   footer = {
     name: '',
@@ -38,6 +42,7 @@ export class AddFooterComponent implements OnInit {
     private location: Location,
     private authSer: AuthServiceService,
     private route: ActivatedRoute,
+    private dashBoardService: DashboardService,
     private footerService: FooterService) { }
 
   ngOnInit() {
@@ -53,6 +58,17 @@ export class AddFooterComponent implements OnInit {
     this.authSer.showHeaderDashBoard = true;
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
+
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.serviceId = params['serviceID'];
+        if(this.serviceId == 2) {
+          this.serviceName = 'خدمه إداره الصفحه الخارجيه';
+        } else if (this.serviceId == 6) {
+          this.serviceName = 'خدمه إداره المحتوي';
+        }
+      }
+    );
     
     this.route.params.subscribe(
       (params: Params) => {
@@ -61,7 +77,7 @@ export class AddFooterComponent implements OnInit {
           this.spinner.show();
           this.typeMode = true;
           this.externalId = params['editFooterId'];
-          this.footerService.getFooterData(this.externalId).subscribe(
+          this.dashBoardService.getItemData(this.externalId, 'footer').subscribe(
             (responce) => {
               console.log(responce['footer']);
               this.footer.name = responce['footer'].name;
@@ -83,7 +99,8 @@ export class AddFooterComponent implements OnInit {
           this.typeLink = 'إنشاء جديد';
         }
       }
-    )
+    );
+
   }
 
 
@@ -126,17 +143,31 @@ export class AddFooterComponent implements OnInit {
     } else if(this.imageBase64 == '' && this.photoEdit == true){
       this.toastr.warning('قم باختيار صوره !');
     } else {
-      this.footerService.editFooter(formData, this.externalId).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.toastr.success('تمت التعديل بنجاح');
-          this.location.back();
-        },
-        (error) => {
-          console.log(error);
-          this.toastr.error('خطأ في التعديل !');
-        }
-      );
+      if(this.serviceId == 2) {
+        this.dashBoardService.editItem( this.externalId, formData, 'internalFooter').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      } else if(this.serviceId == 6){
+        this.dashBoardService.editItem( this.externalId, formData, 'externalFooter').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      }
     }
   } else {
     if(this.photoType[1] != 'png') {
@@ -146,17 +177,31 @@ export class AddFooterComponent implements OnInit {
     } else {
       // formData['photo'] = this.imageBase64;
       // formData['photo_type'] = this.photoType[1];
-      this.footerService.addFooter(formData).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.toastr.success('تمت الاضافه بنجاح');
-          this.location.back();
-        },
-        (error) => {
-          console.log(error);
-          this.toastr.error('خطأ في الحفظ !');
-        }
-      );
+      if(this.serviceId == 2) {
+        this.dashBoardService.addItem(formData, 'externalFooter').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت الاضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الحفظ !');
+          }
+        );
+      } else if(this.serviceId == 6){
+        this.dashBoardService.addItem(formData, 'internalFooter').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت الاضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الحفظ !');
+          }
+        );
+      }
     }
   }
   

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

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-12">
       <ul class="list-unstyled titileLi-w">
-        <li class="headingText-w">خدمه إداره المحتوي > </li>
+        <li class="headingText-w">{{serviceName}}</li>
         <li class="headingText-w activeLi-w" style="margin-right:5px"> إدارة الفوتر</li>
       </ul>
     </div>

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { Modal } from 'ngx-modialog/plugins/bootstrap';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { NgxSpinnerService } from 'ngx-spinner';
@@ -30,12 +31,16 @@ export class FooterListComponent implements OnInit {
   dataTableNumber: number = 5;
   pages = [];
 
+  serviceName: string = '';
+
+
   constructor(private route: ActivatedRoute, 
     private router: Router, 
     private userSer: UserService,
     private http: HttpClient,
     private modal: Modal,
     private toastr: ToastrService,
+    private dashboardService: DashboardService,
     private footerService: FooterService,
     private spinner: NgxSpinnerService,
     private authSer: AuthServiceService) { }
@@ -54,6 +59,7 @@ export class FooterListComponent implements OnInit {
     this.authSer.showHeaderDashBoard = true;
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
+
     
     this.route.params.subscribe(
       (params: Params) => {
@@ -67,6 +73,11 @@ export class FooterListComponent implements OnInit {
     (params:Params) => {
         this.userLoginId = params['userID'];
         this.serviceId = params['serviceID'];
+        if(this.serviceId == 6) {
+          this.serviceName = 'خدمه إداره المحتوي';
+        } else if(this.serviceId == 2) {
+          this.serviceName = 'خدمه إداره الصفحه الخارجيه';
+        }
         this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
           (responce) => {
             console.log(responce);
@@ -84,7 +95,20 @@ export class FooterListComponent implements OnInit {
                     this.authSer.showDeleteBtn = true;
                   }
                 }
-              }else {
+              } else if(this.pages[i].id == 29) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_footer_ex'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_footer_ex'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_footers_ex'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }
+              else {
                 console.log('no events');
               }
             }
@@ -96,7 +120,7 @@ export class FooterListComponent implements OnInit {
     );
 
     //get list data 
-    this.footerService.getFooterList(this.footerId, this.currentPage ,this.dataTableNumber).subscribe(
+    this.dashboardService.getListData(this.footerId, this.currentPage ,this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.footerList = responce['footers'];
@@ -134,7 +158,7 @@ export class FooterListComponent implements OnInit {
     this.currentPage = 1;
     console.log('search curent page', this.currentPage);
     console.log('search page id', this.footerId);
-    this.footerService.getDataUSerSearchBar(dataSearch, this.footerId, this.currentPage, this.dataTableNumber).subscribe(
+    this.dashboardService.getDataUSerSearchBar(dataSearch, this.footerId, this.currentPage, this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.footerList = responce['footers'];
@@ -156,7 +180,7 @@ export class FooterListComponent implements OnInit {
       this.footerList = [];
       //console.log(pagenationNumber);
       //console.log(this.pageId);
-      this.footerService.getFooterList(this.footerId, pagenationNumber, this.dataTableNumber).subscribe(
+      this.dashboardService.getListData(this.footerId, pagenationNumber, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.footerList = responce['footers'];
@@ -177,7 +201,7 @@ export class FooterListComponent implements OnInit {
     this.spinner.show();
     this.footerList = [];
     this.dataTableNumber = event.target.value;
-    this.footerService.getFooterList(this.footerId, this.currentPage, this.dataTableNumber).subscribe(
+    this.dashboardService.getListData(this.footerId, this.currentPage, this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.footerList = responce['footers'];
@@ -196,7 +220,6 @@ export class FooterListComponent implements OnInit {
 
 
   onDelete() {
-    this.footerListIds = [];
     for(let i = 0; i < this.footerList.length; i++) {
       if(this.footerList[i].selected == true) {
         this.footerListIds.push(this.footerList[i].id);
@@ -205,6 +228,7 @@ export class FooterListComponent implements OnInit {
 
     console.log(this.footerListIds);
     if(this.footerListIds.length > 0) {
+      this.footerListIds = [];
       const dialogRef = this.modal.alert()
       .size('sm')
       .showClose(true)
@@ -216,13 +240,13 @@ export class FooterListComponent implements OnInit {
   
         dialogRef.result
         .then( result => 
-          this.footerService.deleteFooter(this.footerListIds).subscribe(
+          this.dashboardService.deleteItem(this.footerListIds, this.footerId).subscribe(
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
               this.spinner.show();
               this.footerList = [];
-              this.footerService.getFooterList(this.footerId, this.currentPage, this.dataTableNumber).subscribe(
+              this.dashboardService.getListData(this.footerId, this.currentPage, this.dataTableNumber).subscribe(
                 (responce) => {
                   console.log(responce);
                   this.footerList = responce['footers'];

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

@@ -4,7 +4,7 @@
     <div class="row">
       <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي </li>
+          <li class="headingText-w">{{servicesType}} </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>
@@ -19,14 +19,14 @@
                 <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"/>
+                        <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"/>
+                      <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">
@@ -34,6 +34,15 @@
                         <button class="btn btn-secondary rightW" type="button" style="margin-top:33px" (click)="onAddTitle()">أضف المزيد من العناوين </button>
                     </div>
                   </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showAppearance">
+                    <div class="form-group">
+                      <label style="float: right; margin: 5px 0">الظهور<span class="spanReqired-w">*</span></label>
+                      <select class="form-control" formControlName="display_location" id="displayLocation">
+                        <option value="internal">داخليه</option>
+                        <option value="external">خارجيه</option>
+                      </select>
+                    </div>
+                  </div>
                 </div>
               
                 <div formArrayName="fields" *ngFor="let titleControl of addHospitalForm.get('fields').controls; let i = index" style="padding: 20px 0;">
@@ -66,30 +75,28 @@
                       </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 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 class="col-6">
-                            <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid || checkSaveClick">حفظ</button>
-                            <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin: 33px 10px;">إلغاء</button>
-
-                        </div>
+                      <div class="col-12">
+                        <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)" *ngIf="i == 0 ? false : true">حذف</button>
+                      </div>
       
                     </div>
-          
-                    <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)" *ngIf="i == 0 ? false : true">حذف</button>
                   </div>
                 </div>
-      
-      
+
+                <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid || checkSaveClick">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin: 33px 10px;">إلغاء</button>
+                
               </form>
             </div>
-          </div>
+        </div>
     </div>
   </div>
 </div>

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -23,6 +24,7 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
     private spinner: NgxSpinnerService,
     private toastr: ToastrService, 
     private authSer: AuthServiceService,
+    private dashboardService: DashboardService,
     private location: Location) { }
 
   addHospitalForm: FormGroup;
@@ -32,12 +34,16 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
   typePageEdit: string = '';
   typeCreatePage: string = '';
   typeLink = 'إنشاء جديد';
+  showAppearance: boolean = false;
   typeFirstLink: string;
+  servicesType: string = '';
   typeId: number;
   editSubscription: Subscription;
   typeCreateSubscription: Subscription;
   fieldsData = [];
   
+  serviceID:number;
+
   ngOnInit() {
     //show / hide notification search in header
     this.authSer.notificationLogin = true;
@@ -48,19 +54,39 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
     this.authSer.internalHeader = false;
     
     //init form data 
-    this.addHospitalForm = new FormGroup({
-      name: new FormControl(null , Validators.required),
-      name_en: new FormControl(null , Validators.required),
-      fields: this.formBuilder.array([ this.createItem() ])
-    });
+    
+
+    //set side navigation bar 
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.serviceID = params['serviceID'];
+        if(params['serviceID'] == 2) {
+          this.servicesType = 'خدمه إداره الصفحه الخارجيه';
+        } else if(params['serviceID'] == 6) {
+          this.servicesType = 'خدمه إداره المحتوي';
+        }
+      }
+    );
 
     this.typeCreateSubscription = this.route.params.subscribe(
       (params: Params) => {
         this.typeCreatePage = params['typeAdd'];
         if(this.typeCreatePage == 'Hospital') {
           this.typeFirstLink = 'المستشفيات والمراكز';
+          this.showAppearance = true;
+          this.addHospitalForm = new FormGroup({
+            name: new FormControl(null , Validators.required),
+            name_en: new FormControl(null , Validators.required),
+            display_location: new FormControl(null, Validators.required),
+            fields: this.formBuilder.array([ this.createItem() ])
+          });
         } else if(this.typeCreatePage == 'Management') {
           this.typeFirstLink = 'الإدارات';
+          this.addHospitalForm = new FormGroup({
+            name: new FormControl(null , Validators.required),
+            name_en: new FormControl(null , Validators.required),
+            fields: this.formBuilder.array([ this.createItem() ])
+          });
         }
       }
     );
@@ -69,18 +95,21 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
     this.editSubscription =  this.route.params.subscribe(
         (params: Params) => {
           if(params['typeHospitalMode'] == 'edithos') {
+            this.spinner.show();
             this.typeLink = 'تعديل';
             this.typeFirstLink = 'المستشفيات والمراكز';
+            this.showAppearance = true;
             this.addHospitalForm = new FormGroup({
               name: new FormControl(null , Validators.required),
               name_en: new FormControl(null , Validators.required),
+              display_location: new FormControl(null, Validators.required),
               fields: this.formBuilder.array([])
             });
             this.spinner.show();
             this.typeMode = true;
             this.typePageEdit = 'edithos';
-            this.typeId = params['editTypePageId'];
-            this.hospitalService.getHospitalData(this.typeId, 'edithos').subscribe(
+            this.typeId = +params['editTypePageId'];
+            this.dashboardService.getItemData(this.typeId, 'hospital').subscribe(
               (responce) => {
                 console.log('responcce', responce);
                 this.fieldsData = responce['hospital_center'].fields;
@@ -88,6 +117,7 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
                 this.addHospitalForm.patchValue({
                   name: responce['hospital_center'].name,
                   name_en: responce['hospital_center'].name_en,
+                  display_location: responce['hospital_center'].display_location,
                 });
                   this.fields = this.addHospitalForm.get('fields') as FormArray;
                   for(let i = 0; i < this.fieldsData.length; i++) {
@@ -107,6 +137,7 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
               }
             );
           } else if (params['typeHospitalMode'] == 'editman') {
+            this.spinner.show();
             this.typeLink = 'تعديل';
             this.typeFirstLink = 'الإدارات';
             this.addHospitalForm = new FormGroup({
@@ -114,11 +145,13 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
               name_en: new FormControl(null , Validators.required),
               fields: this.formBuilder.array([])
             });
-            this.spinner.show();
             this.typeMode = true;
             this.typePageEdit = "editman";
-            this.typeId = params['editTypePageId'];
-            this.hospitalService.getHospitalData(this.typeId, 'editman').subscribe(
+            this.typeId = +params['editTypePageId'];
+
+            this.typeId = +params['editTypePageId'];
+
+            this.dashboardService.getItemData(this.typeId, 'managament').subscribe(
               (responce) => {
                 console.log('responcce', responce);
                 this.fieldsData = responce['management'].fields;
@@ -172,7 +205,6 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
 
   //submitted form
   onSubmitted() {
-
     this.checkSaveClick = true;
     console.log(this.addHospitalForm.value);
     const formHospitalData = this.addHospitalForm.value;
@@ -183,26 +215,8 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
         this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
         this.checkSaveClick = false;
       } else {
-        this.hospitalService.addHospital(formHospitalData, 'hospital').subscribe(
-          (responce) => {
-            this.checkSaveClick = false;
-            console.log(responce);
-            this.toastr.success('تم الاضافه بنجاح');
-            this.location.back();
-          },
-          (error) => {
-            this.checkSaveClick = false;
-            this.toastr.error('خطأ في الإنشاء');
-            console.log(error);
-          }
-        );
-      }
-    } else if(this.typeCreatePage == 'Management') {
-      if(formHospitalData.fields[0].title == '' || formHospitalData.fields[0].description == '') {
-          this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
-          this.checkSaveClick = false;
-        } else {
-          this.hospitalService.addHospital(formHospitalData, 'management').subscribe(
+        if(this.serviceID == 6) {
+          this.dashboardService.addItem(formHospitalData, 'internalHospital').subscribe(
             (responce) => {
               this.checkSaveClick = false;
               console.log(responce);
@@ -211,11 +225,61 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
             },
             (error) => {
               this.checkSaveClick = false;
-              this.toastr.error('خطأ في الاضافه');
+              this.toastr.error('خطأ في الإنشاء');
+              console.log(error);
+            }
+          );
+        } else if(this.serviceID == 2) {
+          this.dashboardService.addItem(formHospitalData, 'externalHospital').subscribe(
+            (responce) => {
+              this.checkSaveClick = false;
+              console.log(responce);
+              this.toastr.success('تم الاضافه بنجاح');
+              this.location.back();
+            },
+            (error) => {
+              this.checkSaveClick = false;
+              this.toastr.error('خطأ في الإنشاء');
               console.log(error);
             }
           );
         }
+      }
+    } else if(this.typeCreatePage == 'Management') {
+      if(formHospitalData.fields[0].title == '' || formHospitalData.fields[0].description == '') {
+          this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
+          this.checkSaveClick = false;
+        } else {
+          if(this.serviceID == 6) {
+            this.dashboardService.addItem(formHospitalData, 'internalManagement').subscribe(
+              (responce) => {
+                this.checkSaveClick = false;
+                console.log(responce);
+                this.toastr.success('تم الاضافه بنجاح');
+                this.location.back();
+              },
+              (error) => {
+                this.checkSaveClick = false;
+                this.toastr.error('خطأ في الاضافه');
+                console.log(error);
+              }
+            );
+          } else if(this.serviceID == 2) {
+            this.dashboardService.addItem(formHospitalData, 'externalManagement').subscribe(
+              (responce) => {
+                this.checkSaveClick = false;
+                console.log(responce);
+                this.toastr.success('تم الاضافه بنجاح');
+                this.location.back();
+              },
+              (error) => {
+                this.checkSaveClick = false;
+                this.toastr.error('خطأ في الاضافه');
+                console.log(error);
+              }
+            );
+          }
+        }
     }
 
     if(this.typeMode) {
@@ -225,34 +289,62 @@ export class AddHospitalComponent implements OnInit, OnDestroy {
           this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
           this.checkSaveClick = false;
         } else {
-          this.hospitalService.editHospital(this.typeId, formHospitalData, 'hospital').subscribe(
-            (responce) => {
-              this.checkSaveClick = false;
-              console.log(responce);
-              this.toastr.success('تم التعديل بنجاح ');
-            }, (error) => {
-              this.checkSaveClick = false;
-              console.log(error);
-              this.toastr.error('فشل التعديل !');
-            }
-          );
+          if(this.serviceID == 6) {
+            this.dashboardService.editItem(this.typeId, formHospitalData, 'internalHospital').subscribe(
+              (responce) => {
+                this.checkSaveClick = false;
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح ');
+              }, (error) => {
+                this.checkSaveClick = false;
+                console.log(error);
+                this.toastr.error('فشل التعديل !');
+              }
+            );
+          } else if(this.serviceID == 2) {
+            this.dashboardService.editItem(this.typeId, formHospitalData, 'externalHospital').subscribe(
+              (responce) => {
+                this.checkSaveClick = false;
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح ');
+              }, (error) => {
+                this.checkSaveClick = false;
+                console.log(error);
+                this.toastr.error('فشل التعديل !');
+              }
+            );
+          }
         }
       } else if(this.typePageEdit == 'editman'){
         if(formHospitalData.fields[0].title == '' || formHospitalData.fields[0].description == '') {
           this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
           this.checkSaveClick = false;
         } else {
-          this.hospitalService.editHospital(this.typeId, formHospitalData, 'management').subscribe(
-            (responce) => {
-              this.checkSaveClick = false;
-              console.log(responce);
-              this.toastr.success('تم التعديل بنجاح ');
-            }, (error) => {
-              this.checkSaveClick = false;
-              console.log(error);
-              this.toastr.error('فشل التعديل !');
-            }
-          )
+          if(this.serviceID == 6) {
+            this.dashboardService.editItem(this.typeId, formHospitalData, 'internalManagement').subscribe(
+              (responce) => {
+                this.checkSaveClick = false;
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح ');
+              }, (error) => {
+                this.checkSaveClick = false;
+                console.log(error);
+                this.toastr.error('فشل التعديل !');
+              }
+            );
+          } else if(this.serviceID == 2) {
+            this.dashboardService.editItem(this.typeId, formHospitalData, 'externalManagement').subscribe(
+              (responce) => {
+                this.checkSaveClick = false;
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح ');
+              }, (error) => {
+                this.checkSaveClick = false;
+                console.log(error);
+                this.toastr.error('فشل التعديل !');
+              }
+            );
+          }
         }
       }
     }

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { Modal } from 'ngx-modialog/plugins/bootstrap';
 import { UserService } from './../../../shared/user.service';
 import { AuthServiceService } from './../../../shared/auth-service.service';
@@ -21,7 +22,10 @@ export class HospitalListComponent implements OnInit {
     private spinner: NgxSpinnerService,
     private toastr: ToastrService,
     private modal: Modal,
-    private hospitalService: HospitalService) { }
+    private dashboardService: DashboardService,
+    private hospitalService: HospitalService) {
+      this.spinner.show();
+     }
 
   dataList = [];
   dataListIds = [];
@@ -41,7 +45,6 @@ export class HospitalListComponent implements OnInit {
 
   ngOnInit() {
 
-    this.spinner.show();
 
     //init the values of permision boolean
    this.authSer.showAddBtn = false;
@@ -63,11 +66,14 @@ export class HospitalListComponent implements OnInit {
           this.typeLink = 'المستشفيات والمراكز';
           this.typeServices = 'خدمه إداره المحتوي';
         } else if(this.pageId == 10) {
-          this.typeLink = 'الإدرات';
+          this.typeLink = 'الإدارات';
           this.typeServices = 'خدمه الصلاحيات';
         } else if(this.pageId == 30) {
           this.typeLink = 'المستشفيات والمراكز';
           this.typeServices = 'خدمه إداره الصفحه الخارجيه';
+        } else if(this.pageId == 31) {
+          this.typeServices = 'خدمه إداره الصفحه الخارجيه';
+          this.typeLink = 'الإدارات';
         }
       }
     );
@@ -78,7 +84,7 @@ export class HospitalListComponent implements OnInit {
         this.userLoginId = params['userID'];
         this.serviceId = params['serviceID'];
         if(this.pageId == 6 || this.pageId == 30) {
-          this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+          this.dashboardService.getListData(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
             (responce) => {
               console.log(responce);
               this.dataList = responce['hospital_centers'];
@@ -126,8 +132,9 @@ export class HospitalListComponent implements OnInit {
             },
             (error) => {console.log(error)}
           );
-        } else if(this.pageId == 10) {
-          this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+        } else if(this.pageId == 10 || this.pageId == 31) {
+          
+          this.dashboardService.getListData(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
             (responce) => {
               console.log(responce);
               this.dataList = responce['managements'];
@@ -138,6 +145,7 @@ export class HospitalListComponent implements OnInit {
               console.log(error);
             }
           );
+
           this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
             (responce) => {
               this.pages = responce['pages'];
@@ -155,7 +163,20 @@ export class HospitalListComponent implements OnInit {
                       this.authSer.showDeleteBtn = true;
                     }
                   }
-                }else {
+                } else if(this.pageId == 31) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_management_ex'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_management_ex'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_managements_ex'){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }
+                else {
                   console.log('no roles');
                 }
               }
@@ -183,6 +204,7 @@ export class HospitalListComponent implements OnInit {
 
     //deleted function
     onDelete() {
+      
       this.dataListIds = [];
       for(let i = 0; i < this.dataList.length; i++) {
         if(this.dataList[i].selected == true) {
@@ -203,13 +225,13 @@ export class HospitalListComponent implements OnInit {
       .open();
         dialogRef.result
             .then( result => 
-              this.hospitalService.deleteDatas(this.dataListIds, this.pageId).subscribe(
+              this.dashboardService.deleteItem(this.dataListIds, this.pageId).subscribe(
                 (responce) => {
                   console.log(responce);
                   this.toastr.success('تم الحذف');
                   this.spinner.show();
                   this.dataList = [];
-                  if(this.pageId == 10) {
+                  if(this.pageId == 10, this.pageId == 31) {
                     this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
                       (responce) => {
                         console.log(responce);
@@ -236,7 +258,6 @@ export class HospitalListComponent implements OnInit {
                       }
                     );
                   }
-                
                 },
                 (error) => {
                   console.log(error);
@@ -259,7 +280,7 @@ export class HospitalListComponent implements OnInit {
     console.log('search curent page', this.currentPage);
     console.log('search page id', this.pageId);
     if(this.pageId == 6 || this.pageId == 30){
-      this.hospitalService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      this.dashboardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.dataList = responce['hospital_centers'];
@@ -272,8 +293,8 @@ export class HospitalListComponent implements OnInit {
           console.log(error)
         }
       );
-    } else if(this.pageId == 7) {
-      this.hospitalService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    } else if(this.pageId == 10 || this.pageId == 31) {
+      this.dashboardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.dataList = responce['managements'];
@@ -295,7 +316,7 @@ export class HospitalListComponent implements OnInit {
     this.dataList = [];
     this.dataTableNumber = event.target.value;
     if(this.pageId == 6 || this.pageId == 30) {
-      this.hospitalService.getHospitalsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      this.dashboardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.dataList = responce['hospital_centers'];
@@ -308,8 +329,8 @@ export class HospitalListComponent implements OnInit {
           this.spinner.hide();
         }
       );
-    } else if(this.pageId == 10) {
-      this.hospitalService.getHospitalsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    } else if(this.pageId == 10 || this.pageId == 31) {
+      this.dashboardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.dataList = responce['managements'];
@@ -329,16 +350,16 @@ export class HospitalListComponent implements OnInit {
   onAdd() {
     if(this.pageId == 6 || this.pageId == 30) {
       this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/add/Hospital']);
-    } else if(this.pageId == 10) {
+    } else if(this.pageId == 10 || this.pageId == 31) {
       this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/add/Management']);
     }
   }
 
   //on edit hospital 
   onEdit(hospitalIndex:number) {
-    if(this.pageId == 6){
+    if(this.pageId == 6 || this.pageId == 30){
       this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'Hospital/' + 'edithos/' + hospitalIndex]);
-    } else if(this.pageId == 10){
+    } else if(this.pageId == 10 || this.pageId == 31){
       this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'Management/' + 'editman/' + hospitalIndex]);
     }
   }

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

@@ -14,64 +14,40 @@
         <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 *ngFor="let section of sectionLinks">
+                <li *ngFor="let section of authSer.footerData['links_section']">
                   <a href="{{section.link}}" target="_blank">{{section.name}}</a>
                 </li>
             </ul>
           </div>
 			
-			 <div class="col-12">
-				  <div class="copyRights">
-                <p class="rights">كافة الحقوق محفوظة لمجمع الملك فيصل الطبي بصحة الطائف 2018</p>
+          <div class="col-12">
+            <div class="copyRights">
+              <p class="rights">كافة الحقوق محفوظة لمجمع الملك فيصل الطبي بصحة الطائف 2018</p>
             </div>
-				 
-          <div class="linksSection-w text-center" style="margin-top:0 !important;">
+          
+            <div class="linksSection-w text-center" style="margin-top:0 !important;">
               <ul class="list-unstyled">
-                  <li *ngFor="let socialMedia of socialLinks">
+                  <li *ngFor="let socialMedia of authSer.footerData['socials_section']">
                     <a href="{{socialMedia.link}}"><img src="{{authSer.pathImg +socialMedia.photo}}" /></a>
                   </li>
               </ul>
             </div>
-           
-        </div>
+          </div>
 			
         </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 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 class="leftFooter-w text-center">
+            <ul class="list-unstyled">
+              <li *ngFor="let award of authSer.footerData['awards_section']">
+                <img src="{{authSer.pathImg + award.photo }}" />
+              </li>
+            </ul>
+          </div>
         </div>
 
-
-
-        <div class="col-12 col-sm-6 col-md-3">
-          
-        </div> -->
-
       </div>
 
     </div>
-
   </div>
-
 </div>

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

@@ -15,18 +15,18 @@ export class FooterComponent implements OnInit {
   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);
-      }
-    )
+    // 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.html

@@ -4,7 +4,7 @@
       <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">{{servicesName}} </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>
@@ -43,13 +43,6 @@
                     
                     <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="1">1</option>
@@ -79,7 +72,29 @@
                       </select>
                     </div>
 
-                    <div class="col-6">
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <label for="link_type" style="float: right; margin-right: 5px"> نوع الرابط <span class="spanReqired-w">*</span></label>
+                      <select class="form-control" name="link_type" (input)="linkTypeValue($event)" [ngModel]="menu.link_type" required>
+                        <option value="internal">داخلي</option>
+                        <option value="external">خارجي</option>
+                      </select>
+                    </div>
+                    
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin: 10px 0;" *ngIf="menu.link_type == 'external'">
+                      <div class="form-group">
+                        <label for="link2" style="float: right; margin-right: 5px">الرابط <span class="spanReqired-w">*</span></label>
+                          <input type="text" class="form-control" placeholder="الرابط" id="link" name="link2" ngModel [ngModel]="menu.link2" #link="ngModel" required/>
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin: 10px 0;" *ngIf="menu.link_type == 'internal'">
+                      <label for="link" style="float: right; margin-right: 5px">الصفحات الخارجيه <span class="spanReqired-w">*</span> </label>
+                      <select class="form-control" name="link" [ngModel]="menu.link" required>
+                        <option *ngFor="let page of internalPages" [value]="page.id">{{page.name}}</option>
+                      </select>
+                    </div>
+
+                    <div class="col-12">
                         <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
                         <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
                     </div>

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

@@ -1,3 +1,5 @@
+import { HttpClient } from '@angular/common/http';
+import { DashboardService } from './../../../shared/dashboard.service';
 import { MainMenuService } from './../../../shared/main-menu.service';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -24,19 +26,27 @@ export class AddMenuComponent implements OnInit {
   typeMode: boolean = false;
   photoEdit: boolean = true;
   checkSaveClick:boolean = false;
+  servicesName:string = '';
   typeLink: string = '';
   menuId: number;
+  serviceId: number;
   parentList = [];
 
+  internalPages = [];
+
   menu = {
     name: '',
     name_en: '',
     parent_id: '',
     link: '',
+    link2: '',
     status: '',
     ranking: '',
+    link_type: '',
   };
 
+  linkTypeCahnge: string = '';
+
 
 
   constructor(private toastr: ToastrService, 
@@ -45,6 +55,8 @@ export class AddMenuComponent implements OnInit {
     private route: ActivatedRoute,
     private authSer: AuthServiceService,
     private authService: AuthServiceService,
+    private dashBoardService: DashboardService,
+    private http: HttpClient,
     private menuService: MainMenuService, ) { 
       this.spinner.show();
     }
@@ -59,13 +71,25 @@ export class AddMenuComponent implements OnInit {
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
     this.menu.status = '1';
+
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.serviceId = params['serviceID'];
+        if(this.serviceId == 6) {
+          this.servicesName = 'خدمه إداره المحتوي';
+        } else if(this.serviceId == 2) {
+          this.servicesName = 'خدمه أدراه الصفحه الخارجيه';
+        }
+      }
+    );
+
     this.route.params.subscribe(
       (params: Params) => {
         if(params['typeMenuMode'] == 'edit') {
           this.typeMode = true;
           this.typeLink = 'تعديل';
           this.menuId = params['editMenuId'];
-          this.menuService.getMenuData(this.menuId).subscribe(
+          this.dashBoardService.getItemData(this.menuId, 'mainMenu').subscribe(
             (responce) => {
               console.log(responce);
               console.log(responce['menu']);
@@ -75,6 +99,9 @@ export class AddMenuComponent implements OnInit {
               this.menu.status = responce['menu'].status;
               this.menu.ranking = responce['menu'].ranking;
               this.menu.parent_id = responce['menu'].parent_id ? responce['menu'].parent_id : '';
+              this.menu.link_type = responce['menu'].link_type;
+              this.menu.link = responce['menu'].link ? responce['menu'].link : '';
+              this.menu.link2 = responce['menu'].link2 ? responce['menu'].link2 : '';  
               if(responce['menu'].photo) {
                 this.checkValidImg = false;
                 this.urlImg = this.authService.pathImg + responce['menu'].photo;
@@ -92,6 +119,15 @@ export class AddMenuComponent implements OnInit {
       }
     );
 
+
+    //get external pages 
+    this.http.get(this.authSer.pathApi + '/system_pages_list').subscribe(
+      (responce) => {
+        console.log('external pagesssssssssssssssss' , responce);
+        this.internalPages = responce['pages'];
+      }
+    )
+
     this.menuService.getParentList().subscribe(
       (responce) => {
         console.log('parents' , responce);
@@ -100,7 +136,8 @@ export class AddMenuComponent implements OnInit {
       (error) => {
         console.log(error);
       }
-    )
+    );
+
   };
 
 
@@ -124,10 +161,16 @@ export class AddMenuComponent implements OnInit {
   }
  }
 
+ linkTypeValue(linkTypeVal) {
+   console.log(linkTypeVal);
+  this.menu.link_type = linkTypeVal.target.value;
+ }
+
  //on submitted
  onSubmitted() {
    this.checkSaveClick = true;//to make save disabled after one click
   const formData = this.externalFormData.value;
+  console.log(formData);
   if(this.checkChangeImage){
     formData['photo'] = this.imageBase64;
     formData['photo_type'] = this.photoType[1];
@@ -142,38 +185,70 @@ export class AddMenuComponent implements OnInit {
       this.toastr.warning('قم باختيار صوره !');
       this.checkSaveClick = false;
     } else {
-      this.menuService.editMenu(formData, this.menuId).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.toastr.success('تمت التعديل بنجاح');
-          this.location.back();
-          this.checkSaveClick = false;
-        },
-        (error) => {
-          this.checkSaveClick = false;
-          console.log(error);
-          this.toastr.error('خطأ في التعديل !');
-        }
-      );
+      if(this.serviceId == 6) {
+        this.dashBoardService.editItem( this.menuId, formData, 'internalMenu').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+            this.checkSaveClick = false;
+          },
+          (error) => {
+            this.checkSaveClick = false;
+            console.log(error);
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      } else if(this.serviceId == 2) {
+        this.dashBoardService.editItem( this.menuId, formData, 'externalMenu').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+            this.checkSaveClick = false;
+          },
+          (error) => {
+            this.checkSaveClick = false;
+            console.log(error);
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      }
     }
   } else {
     if(this.imageBase64 == ''){
       this.toastr.warning('قم باختيار صوره !');
       this.checkSaveClick = false;
     } else {
-      this.menuService.addMain(formData).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.toastr.success('تمت الاضافه بنجاح');
-          this.location.back();
-          this.checkSaveClick = false;
-        },
-        (error) => {
-          console.log(error);
-          this.checkSaveClick = false;
-          this.toastr.error('خطأ في الحفظ !');
-        }
-      );
+      if(this.serviceId == 6){
+        this.dashBoardService.addItem(formData, 'internalMainMenu').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت الاضافه بنجاح');
+            this.location.back();
+            this.checkSaveClick = false;
+          },
+          (error) => {
+            console.log(error);
+            this.checkSaveClick = false;
+            this.toastr.error('خطأ في الحفظ !');
+          }
+        );
+      } else if(this.serviceId == 2){
+        this.dashBoardService.addItem(formData, 'externalMainMenu').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت الاضافه بنجاح');
+            this.location.back();
+            this.checkSaveClick = false;
+          },
+          (error) => {
+            console.log(error);
+            this.checkSaveClick = false;
+            this.toastr.error('خطأ في الحفظ !');
+          }
+        );
+      }
     }
   }
  }

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

@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي > </li>
+          <li class="headingText-w">{{servicesName}} </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">القائمه الرئيسيه</li>
         </ul>
     </div>

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

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { MainMenuService } from './../../../shared/main-menu.service';
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
@@ -29,15 +30,16 @@ export class MainListComponent implements OnInit {
   serviceId:number;
   dataTableNumber: number = 5;
   pages = [];
+  servicesName: string = '';
 
   constructor(private route: ActivatedRoute, 
     private router: Router, 
     private userSer: UserService,
     private http: HttpClient,
     private toastr: ToastrService,
-    private mainService: MainMenuService,
     private spinner: NgxSpinnerService,
     private modal: Modal,
+    private dashBoardService: DashboardService,
     private authSer: AuthServiceService) { }
 
   ngOnInit() {
@@ -54,6 +56,8 @@ export class MainListComponent implements OnInit {
     this.authSer.showHeaderDashBoard = true;
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
+
+    
     
     this.route.params.subscribe(
       (params: Params) => {
@@ -67,6 +71,13 @@ export class MainListComponent implements OnInit {
     (params:Params) => {
         this.userLoginId = params['userID'];
         this.serviceId = params['serviceID'];
+
+        if(this.serviceId == 6) {
+          this.servicesName = 'خدمه إداره المحتوي';
+        } else if(this.serviceId == 2){
+          this.servicesName = 'خدمه إداره الصفحه الخارجيه';
+        }
+
         this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
           (responce) => {
             console.log(responce);
@@ -84,6 +95,18 @@ export class MainListComponent implements OnInit {
                     this.authSer.showDeleteBtn = true;
                   }
                 }
+              } else if(this.pages[i].id == 18) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_external_menu'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_external_menu'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_external_menus'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
               }else {
                 console.log('no events');
               }
@@ -96,7 +119,7 @@ export class MainListComponent implements OnInit {
     );
 
     //get list data 
-    this.mainService.getMainList(this.menuId, this.currentPage ,this.dataTableNumber).subscribe(
+    this.dashBoardService.getListData(this.menuId, this.currentPage ,this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.menuList = responce['menus'];
@@ -134,7 +157,7 @@ export class MainListComponent implements OnInit {
     this.currentPage = 1;
     console.log('search curent page', this.currentPage);
     console.log('search page id', this.menuId);
-    this.mainService.getDataUSerSearchBar(dataSearch, this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+    this.dashBoardService.getDataUSerSearchBar(dataSearch, this.menuId, this.currentPage, this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.menuList = responce['menus'];
@@ -156,7 +179,7 @@ export class MainListComponent implements OnInit {
       this.menuList = [];
       //console.log(pagenationNumber);
       //console.log(this.pageId);
-      this.mainService.getMainList(this.menuId, pagenationNumber, this.dataTableNumber).subscribe(
+      this.dashBoardService.getListData(this.menuId, pagenationNumber, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.menuList = responce['menus'];
@@ -172,39 +195,39 @@ export class MainListComponent implements OnInit {
       );
     }
 
-  changeRanking(event, id) {
-    const data = {
-      id: id,
-      ranking: event.target.value,
-    };
-    console.log(data);
-    this.http.post(this.authSer.pathApi + '/rank_menu', data).subscribe(
-      (responce) => {
-        console.log(responce);
-        this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
-          (responce) => {
-            console.log(responce);
-            this.count = responce['count'];
-            this.perPagePagenation = responce['per_page'];
-            this.menuList = responce['menus'];
-            console.log(this.menuList);
-            this.spinner.hide();
-          },
-          (error) => {
-            console.log(error);
-          }
-        )
-      },
-      (error) => {console.log(error)},
-    );
-  };
+  // changeRanking(event, id) {
+  //   const data = {
+  //     id: id,
+  //     ranking: event.target.value,
+  //   };
+  //   console.log(data);
+  //   this.http.post(this.authSer.pathApi + '/rank_menu', data).subscribe(
+  //     (responce) => {
+  //       console.log(responce);
+  //       this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+  //         (responce) => {
+  //           console.log(responce);
+  //           this.count = responce['count'];
+  //           this.perPagePagenation = responce['per_page'];
+  //           this.menuList = responce['menus'];
+  //           console.log(this.menuList);
+  //           this.spinner.hide();
+  //         },
+  //         (error) => {
+  //           console.log(error);
+  //         }
+  //       )
+  //     },
+  //     (error) => {console.log(error)},
+  //   );
+  // };
 
   //determine the list count from select element 
   onGetValue(event) {
     this.spinner.show();
     this.menuList = [];
     this.dataTableNumber = event.target.value;
-    this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+    this.dashBoardService.getListData(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.menuList = responce['menus'];
@@ -241,13 +264,13 @@ export class MainListComponent implements OnInit {
   
         dialogRef.result
         .then( result => 
-          this.mainService.deleteMain(this.menuListIds).subscribe(
+          this.dashBoardService.deleteItem(this.menuListIds, this.menuId).subscribe(
               (responce) => {
                 console.log(responce);
                 this.toastr.success('تم الحذف');
                 this.spinner.show();
                 this.menuList = [];
-                this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+                this.dashBoardService.getListData(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
                   (responce) => {
                     console.log(responce);
                     this.count = responce['count'];
@@ -271,19 +294,6 @@ export class MainListComponent implements OnInit {
     } else {
       this.toastr.warning('لم يتم أختيار أي عنصر للحذف !');
     }
-
-    
-    // this.mainService.deleteMain(this.menuListIds).subscribe(
-    //   (responce) => {
-    //     console.log(responce);
-    //     this.toastr.success('تم الحذف');
-    //     window.location.reload();
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //     this.spinner.hide();
-    //   },
-    // );
   };
 
   //add function

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

@@ -4,7 +4,7 @@
     <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">{{serviceName}}</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>

src/app/dashboard/news/add-news/add-news.component.ts

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { HttpClient } from '@angular/common/http';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { NgxSpinnerService } from 'ngx-spinner';
@@ -29,9 +30,10 @@ export class AddNewsComponent implements OnInit {
   checkSaveClick: boolean = false;
   photoEdit:boolean = false;
   checkAddMode: boolean = false;
-  
+  serviceName: string = '';
   mainPhotoDefault: string = '../../../../assets/image/Group 408.png';
   mainPhotoPath: string = '';
+  serviceId: number;
   
 
   new = {
@@ -76,6 +78,7 @@ export class AddNewsComponent implements OnInit {
     private route: ActivatedRoute,
     private http: HttpClient, 
     private authService: AuthServiceService,
+    private dashBoardService: DashboardService,
     private spineer: NgxSpinnerService) { }
 
   ngOnInit() {
@@ -87,6 +90,17 @@ export class AddNewsComponent implements OnInit {
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
     this.new.status = '1';
+
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.serviceId = params['serviceID'];
+        if(this.serviceId == 13) {
+          this.serviceName = 'خدمه إداره المحتوي';
+        } else if(this.serviceId == 2) {
+          this.serviceName = ' خدمه إداره الصفحه الخارجيه';
+        }
+      }
+    )
     
     this.route.params.subscribe(
       (params: Params) => {
@@ -96,7 +110,7 @@ export class AddNewsComponent implements OnInit {
           this.spineer.show();
           this.typeMode = true;
           this.newId = params['editNewId'];
-          this.newService.getNewData(this.newId).subscribe(
+          this.dashBoardService.getItemData(this.newId, 'news').subscribe(
             (responce) => {
               console.log(responce);
               const newData = responce['report'];
@@ -205,24 +219,6 @@ export class AddNewsComponent implements OnInit {
  }
 
 
-
-//  deleteImg(index, data) {
-//    if(this.typeMode) {
-//     this.images.splice(index , 1);
-//     this.http.get(this.authSer.pathApi + '/delete_report_photo/' + data.id).subscribe(
-//       (responce) => {
-//         console.log(responce);
-//       },
-//       (error) => {
-//         console.log(error);
-//       }
-//     );
-//    } else {
-//      this.images.splice(index,1);
-//    }
- 
-//  }
-
  deleteMainImg() {
    this.mainPhotoPath = '';
  }
@@ -261,17 +257,32 @@ export class AddNewsComponent implements OnInit {
 
         console.log(formData);
 
-        this.newService.editNew(formData, this.newId).subscribe(
-          (responce) => {
-            console.log(responce);
-            this.toastr.success('تمت التعديل بنجاح');
-            this.location.back();
-          },
-          (error) => {
-            console.log(error);
-            this.toastr.error('خطأ في التعديل !');
-          }
-        );
+        if(this.serviceId == 2) {
+          this.dashBoardService.editItem(this.newId, formData,'externalNew').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تمت التعديل بنجاح');
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              this.toastr.error('خطأ في التعديل !');
+            }
+          );
+        } else if(this.serviceId == 6){
+          this.dashBoardService.editItem(this.newId, formData, 'internalNew').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تمت التعديل بنجاح');
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              this.toastr.error('خطأ في التعديل !');
+            }
+          );
+        }
+    
     } else {
       if(this.images[0].base64 == ''){
         this.toastr.warning('قم باختيار الصوره الرئيسيه !');
@@ -299,19 +310,37 @@ export class AddNewsComponent implements OnInit {
 
         console.log(formData);
 
-        this.newService.addNew(formData).subscribe(
-          (responce) => {
-            console.log(responce);
-            this.toastr.success('تمت الاضافه بنجاح');
-            this.location.back();
-            this.checkSaveClick = false;
-          },
-          (error) => {
-            this.checkSaveClick = true;
-            console.log(error);
-            this.toastr.error('خطأ في الحفظ !');
-          }
-        );
+        if(this.serviceId == 6) {
+          this.dashBoardService.addItem(formData, 'internalNews').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تمت الاضافه بنجاح');
+              this.location.back();
+              this.checkSaveClick = false;
+            },
+            (error) => {
+              this.checkSaveClick = true;
+              console.log(error);
+              this.toastr.error('خطأ في الحفظ !');
+            }
+          );
+        } else if(this.serviceId == 2) {
+          this.dashBoardService.addItem(formData, 'externalNews').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تمت الاضافه بنجاح');
+              this.location.back();
+              this.checkSaveClick = false;
+            },
+            (error) => {
+              this.checkSaveClick = true;
+              console.log(error);
+              this.toastr.error('خطأ في الحفظ !');
+            }
+          );
+        }
+
+     
 
       }
     }

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

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي > </li>
+          <li class="headingText-w">{{serviceName}} </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">الأخبار</li>
         </ul>
     </div>

src/app/dashboard/news/news-list/news-list.component.ts

@@ -1,3 +1,4 @@
+import { DashboardService } from './../../../shared/dashboard.service';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { HttpClient } from '@angular/common/http';
 import { UserService } from './../../../shared/user.service';
@@ -22,6 +23,7 @@ export class NewsListComponent implements OnInit {
     private toastr: ToastrService,
     private newService: NewService,
     private modal: Modal,
+    private dashBoardService: DashboardService,
     private spinner: NgxSpinnerService,
     private authSer: AuthServiceService) { }
 
@@ -37,6 +39,7 @@ export class NewsListComponent implements OnInit {
   userLoginId:number;
   serviceId:number;
   dataTableNumber: number = 5;
+  serviceName: string = '';
   pages = [];
 
 
@@ -75,6 +78,11 @@ export class NewsListComponent implements OnInit {
     (params:Params) => {
         this.userLoginId = params['userID'];
         this.serviceId = params['serviceID'];
+        if(this.serviceId == 2) {
+          this.serviceName = 'خدمه إداره الصفحه الخارجيه';
+        } else if(this.serviceId == 6) {
+          this.serviceName = 'خدمه إداره المحتوي';
+        }
         this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
           (responce) => {
             console.log(responce);
@@ -92,6 +100,18 @@ export class NewsListComponent implements OnInit {
                     this.authSer.showDeleteBtn = true;
                   }
                 }
+              } else if(this.pages[i].id == 20) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_report_ex'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_report_ex'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_reports_ex'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
               }else {
                 console.log('no events');
               }
@@ -104,7 +124,7 @@ export class NewsListComponent implements OnInit {
     );
 
     //get list data 
-    this.newService.getnewsList(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+    this.dashBoardService.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
       (responce) => {
         console.log(responce);
         this.newsList = responce['reports'];  
@@ -145,7 +165,7 @@ export class NewsListComponent implements OnInit {
       console.log(data.target.value);
       const dataSearch = data.target.value;     
       this.currentPage = 1;
-      this.newService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      this.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.newsList = responce['reports'];
@@ -167,7 +187,7 @@ export class NewsListComponent implements OnInit {
         this.newsList = [];
         //console.log(pagenationNumber);
         //console.log(this.pageId);
-        this.newService.getnewsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+        this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
           (responce) => {
             console.log(responce);
             this.newsList = responce['reports'];
@@ -215,7 +235,7 @@ export class NewsListComponent implements OnInit {
       this.spinner.show();
       this.newsList = [];
       this.dataTableNumber = event.target.value;
-      this.newService.getnewsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
           this.newsList = responce['reports'];
@@ -232,7 +252,6 @@ export class NewsListComponent implements OnInit {
     
     onDelete() {
 
-      this.newsListIds = [];
       for(let i = 0; i < this.newsList.length; i++) {
         if(this.newsList[i].selected == true) {
           this.newsListIds.push(this.newsList[i].id);
@@ -242,7 +261,7 @@ export class NewsListComponent implements OnInit {
       console.log(this.newsListIds);
 
       if(this.newsListIds.length > 0) {
-        this.newsList =[];
+        this.spinner.show();
         const dialogRef = this.modal.alert()
         .size('sm')
         .showClose(true)
@@ -254,12 +273,12 @@ export class NewsListComponent implements OnInit {
         dialogRef.result
         .then( result =>  
           
-          this.newService.deleteNew(this.newsListIds).subscribe(
+          this.dashBoardService.deleteItem(this.newsListIds, this.pageId).subscribe(
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              this.spinner.show();
-              this.newService.getnewsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+              this.newsList =[];
+              this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
                 (responce) => {
                   console.log(responce);
                   this.newsList = responce['reports'];

src/app/dashboard/number.directive.ts

@@ -1,30 +0,0 @@
-import { Directive, HostListener, ElementRef } from '@angular/core';
-
-@Directive({
-  selector: '[appNumber]'
-})
-export class NumberDirective {
-
-
-
-  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
-
-  private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
-
-  constructor(private el: ElementRef) {
-  }
-
-  @HostListener('keydown', [ '$event' ])
-  onKeyDown(event: KeyboardEvent) {
-      // Allow Backspace, tab, end, and home keys
-      if (this.specialKeys.indexOf(event.key) !== -1) {
-          return;
-      }
-      let current: string = this.el.nativeElement.value;
-      let next: string = current.concat(event.key);
-      if (next && !String(next).match(this.regex) || next.length > 10) {
-          event.preventDefault();
-      }
-  }
-
-}

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

@@ -39,7 +39,7 @@
 
 
   <div class="headerServices" (mouseover)="mouseOvered=true" [className]="mouseOvered ? 'showHeaderServices' : 'headerServices' ">
-      <i class="fas fa-home" style="margin-left:10px;"></i>
+      <i class="fas fa-home" style="margin-left:10px; margin-right:20px"></i>
   </div>
 
   <div class="serviceSideList-w" (mouseover)="mouseOvered=true" (mouseout)="mouseOvered=false" [className]="mouseOvered ? 'showServiceSideList-w' : 'serviceSideList-w' ">

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

@@ -163,7 +163,7 @@ export class ServiceItemComponent implements OnInit {
           } else if(this.pages[0].id == 9) {
             console.log('/service/' + this.userId + '/' + service.id + '/joinUs/' + this.pages[0].id);
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/joinUs/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 7) {
+          } else if(this.pages[0].id == 7 || this.pages[0].id == 19) {
             console.log('/service/' + this.userId + '/' + service.id + '/externalsList/' + this.pages[0].id);
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/externalsList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 11) {
@@ -171,15 +171,15 @@ export class ServiceItemComponent implements OnInit {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/achievementsList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 12) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/tabs/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 13) {
+          } else if(this.pages[0].id == 13, this.pages[0].id == 20) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/newsList/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 16) {
+          } else if(this.pages[0].id == 16 || this.pages[0].id == 29) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/footerList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 14) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/internalServicesList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 15) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/lecturesList/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 17) {
+          } else if(this.pages[0].id == 17 || this.pages[0].id == 18) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/mainMenuList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 24) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/advertisimentList/' + this.pages[0].id]);
@@ -239,29 +239,29 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['sections/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 5) {
       this.router.navigate(['reports'], {relativeTo: this.route});
-    } else if(dataPage.id == 6) {
+    } else if(dataPage.id == 6 || dataPage.id == 30) {
       this.router.navigate(['hospitalsList/' + dataPage.id], {relativeTo: this.route});
-    } else if(dataPage.id == 10){
+    } else if(dataPage.id == 10 || dataPage.id == 31){
       this.router.navigate(['mangementList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 8) {
       this.router.navigate(['eventsList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 9){
       this.router.navigate(['joinUs/' + dataPage.id], {relativeTo: this.route});
-    } else if(dataPage.id == 7) {
+    } else if(dataPage.id == 7 || dataPage.id == 19) {
       this.router.navigate(['externalsList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 11) {
       this.router.navigate(['achievementsList/' + dataPage.id], {relativeTo: this.route});
     }else if(dataPage.id == 12) {
       this.router.navigate(['tabs/' + dataPage.id], {relativeTo: this.route});
-    } else if(dataPage.id == 13) {
+    } else if(dataPage.id == 13 || dataPage.id == 20) {
       this.router.navigate(['newsList/' + dataPage.id], {relativeTo: this.route});
-    } else if(dataPage.id == 16) {
+    } else if(dataPage.id == 16 || dataPage.id == 29) {
       this.router.navigate(['footerList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 14) {
       this.router.navigate(['internalServicesList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 15) {
       this.router.navigate(['lecturesList/' + dataPage.id], {relativeTo: this.route});
-    } else if(dataPage.id == 17) {
+    } else if(dataPage.id == 17 || dataPage.id == 18){
       this.router.navigate(['mainMenuList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 24) {
       this.router.navigate(['advertisimentList/' + dataPage.id], {relativeTo: this.route});

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

@@ -69,7 +69,7 @@
             <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="البريد الإلكتروني" appEnglish formControlName="email" />
+                <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglishCharacters formControlName="email" />
                 <span class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
               </div>
             </div>
@@ -77,7 +77,7 @@
             <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" appNumber class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+                <input type="text" id="phone" appOnlyNumber class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
               </div>
             </div>
 

src/app/servicesItems/services.component.ts

@@ -11,7 +11,8 @@ import { NgxSpinnerService } from 'ngx-spinner';
   templateUrl: './services.component.html',
   styleUrls: ['./sercices.component.css']
 })
-export class ServicesComponent implements OnInit, OnDestroy {
+
+export class ServicesComponent implements OnInit {
 
   idUser: number; //id user
   myInnerHeight = window.innerHeight;
@@ -88,76 +89,71 @@ getDataService(dataService){
     (error) => {console.log(error)}
   );
 
-} else if(dataService.id == 6 || dataService.id == 2 ) {
-  //خدمه اداره المحتوي
-  this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
-  (responce) => {
-    console.log(responce);
-    this.pages = responce['pages'];
-    console.log(this.pages);
-    if(this.pages[0].id == 6) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 10) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/mangementList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/mangementList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 8){
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/eventsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/eventsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 9) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/joinUs/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/joinUs/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 7) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/externalsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/externalsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 11) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/achievementsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/achievementsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 12) {
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/tabs/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 13) {
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/newsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 16) {
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/footerList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 14) {
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/internalServicesList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 15){
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/lecturesList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 17) {
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/mainMenuList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 30) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 21) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/barEventsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/barEventsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 32) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/contactUsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/contactUsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 23) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/visitingTimesList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/visitingTimesList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 25) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/eventCalendarsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/eventCalendarsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 27) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/externalAchievementsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/externalAchievementsList/' + this.pages[0].id]);
-    } else if(this.pages[0].id == 26) {
-      console.log('/service/' + this.idUser + '/' + dataService.id + '/statisticsList/' + this.pages[0].id);
-      this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/statisticsList/' + this.pages[0].id]);
+    } else if(dataService.id == 6 || dataService.id == 2) {
+      //خدمه اداره المحتوي
+      this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.pages = responce['pages'];
+          console.log(this.pages);
+          if(this.pages[0].id == 6 || this.pages[0].id == 30) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 10 || this.pages[0].id == 31) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/mangementList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/mangementList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 8){
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/eventsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/eventsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 9) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/joinUs/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/joinUs/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 7 || this.pages[0] == 19) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/externalsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/externalsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 11) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/achievementsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/achievementsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 12) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/tabs/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 13 || this.pages[0].id == 20) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/newsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 16 || this.pages[0].id == 29) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/footerList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 14) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/internalServicesList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 15){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/lecturesList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 17 || this.pages[0].id == 18) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/mainMenuList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 21) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/barEventsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/barEventsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 22) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/advertisingList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/advertisingList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 32) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/contactUsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/contactUsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 23) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/visitingTimesList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/visitingTimesList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 25) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/eventCalendarsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/eventCalendarsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 27) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/externalAchievementsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/externalAchievementsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 26) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/statisticsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/statisticsList/' + this.pages[0].id]);
+          }
+          this.spinner.hide();
+        },
+        (error) => {console.log(error)}
+      );
     }
-    this.spinner.hide();
-  },
-  (error) => {console.log(error)}
-);
-} 
-
+  }
 
-}
-
-ngOnDestroy() {
-  this.subscriptionUSer.unsubscribe();
-}
 
 }

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

@@ -62,6 +62,8 @@ export class AuthServiceService {
   cachedRequests: Array<HttpRequest<any>> = [];
   notificationLogin: boolean = true;
   parentsPage = [];
+
+  footerData=[];
   
 
   dataLoginUser = {};
@@ -168,8 +170,12 @@ export class AuthServiceService {
 
 
   //get footer list 
-  onGetFooterData() {
-    return this.http.get(this.pathApi + '/get_footers_links');
+  onGetFooterData(typePageFooter:string) {
+    if(typePageFooter == 'external') {
+      return this.http.get(this.pathApi + '/get_footers_links/1');
+    } else if(typePageFooter == 'internal' || 'dashboard') {
+      return this.http.get(this.pathApi + '/get_footers_links');
+    }
   }
 
    writeHijri(date, lang, type) {

src/app/shared/dashboard.service.ts

@@ -16,117 +16,202 @@ export class DashboardService {
     private authService: AuthServiceService,
     private spinner: NgxSpinnerService) { }
 
-    //get hospitals list
-    getListData(pageId: number, currentPage: number, dataTableNumber: number){
-    this.spinner.show();
-    console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
-    return this.http.get(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+     //get hospitals list 
+     getListData(pageId: number, currentPage: number, dataTableNumber: number){
+      this.spinner.show();
+      console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+      return this.http.get(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+    }
+  
+     //get data user from searchBar 
+     getDataUSerSearchBar(data, pageId, pagenationNumber, dataTableNumber) {
+      console.log('url', this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
+       return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
+    }
+  
+    //addEvent
+    addItem(data, addType) {
+      if(addType == 'advertisiment'){
+        return this.http.post(this.authService.pathApi + '/add_main_ad' , data);
+      } else if(addType == 'internalHospital') {
+        return this.http.post(this.authService.pathApi + '/add_hospitals_centers' , data);
+      } else if(addType == 'externalHospital') {
+        return this.http.post(this.authService.pathApi + '/add_hospitals_centers_ex' , data);
+      } else if(addType == 'internalManagement') {
+        return this.http.post(this.authService.pathApi + '/add_management' , data);
+      } else if(addType == 'externalManagement') {
+        return this.http.post(this.authService.pathApi + '/add_management_ex' , data);
+      } else if(addType == 'internalMainMenu') {
+        return this.http.post(this.authService.pathApi + '/add_menu' , data);
+      } else if(addType == 'externalMainMenu') {
+        return this.http.post(this.authService.pathApi + '/add_external_menu' , data);
+      } else if(addType == 'internalServiceExternalPage') {
+        return this.http.post(this.authService.pathApi + '/add_external_service' , data);
+      } else if(addType == 'externalServiceExternalPage') {
+        return this.http.post(this.authService.pathApi + '/add_external_service_ex' , data);
+      } else if(addType == 'internalNews') {
+        return this.http.post(this.authService.pathApi + '/add_report' , data);
+      } else if(addType == 'externalNews') {
+        return this.http.post(this.authService.pathApi + '/add_report_ex' , data);
+      } else if(addType == 'internalFooter') {
+        return this.http.post(this.authService.pathApi + '/add_footer' , data);
+      } else if(addType == 'externalFooter') {
+        return this.http.post(this.authService.pathApi + '/add_footer_ex' , data);
+      } else if(addType == 'barEvent') {
+        return this.http.post(this.authService.pathApi + '/add_event_bar', data);
+      } else if(addType == 'visitingTime') {
+        return this.http.post(this.authService.pathApi + '/add_visiting_time', data);
+      } else if(addType == 'eventCalendar') {
+        return this.http.post(this.authService.pathApi + '/add_event_calendar', data);
+      } else if(addType == 'externalAchievement') {
+        return this.http.post(this.authService.pathApi + "/add_external_achievement", data);
+      } else if(addType == 'statistic') {
+        return this.http.post(this.authService.pathApi + "/add_statistic", data);
+      } else if(addType == 'advertising') {
+        return this.http.post(this.authService.pathApi + "/add_advertising_service", data);
+      }
+    }
+  
+    //edit event
+    editItem(editId,dataEdit,editPageName){
+      const editData = dataEdit;
+      console.log(editId);
+      console.log(editPageName);
+      editData['id'] = editId;
+      console.log(dataEdit);
+
+      if(editPageName == 'advertisiment') {
+        return this.http.post(this.authService.pathApi + '/edit_main_ad', editData);
+      } else if(editPageName == 'internalHospital') {
+        return this.http.post(this.authService.pathApi + '/edit_hospitals_centers', editData);
+      } else if(editPageName == 'externalHospital') {
+        return this.http.post(this.authService.pathApi + '/edit_hospitals_centers_ex', editData);
+      } else if(editPageName == 'internalManagement') {
+        return this.http.post(this.authService.pathApi + '/edit_management' , dataEdit);
+      } else if(editPageName == 'externalManagement') {
+        return this.http.post(this.authService.pathApi + '/edit_management_ex' , dataEdit);
+      } else if(editPageName == 'internalMenu') {
+        return this.http.post(this.authService.pathApi + '/edit_menu' , dataEdit);
+      } else if(editPageName == 'externalMenu') {
+        return this.http.post(this.authService.pathApi + '/edit_external_menu' , dataEdit);
+      } else if(editPageName == 'internalServiceExternalPage') {
+        return this.http.post(this.authService.pathApi + '/edit_external_service' , dataEdit);
+      } else if(editPageName == 'externalServiceExternalPage') {
+        return this.http.post(this.authService.pathApi + '/edit_external_service_ex' , dataEdit);
+      } else if(editPageName == 'internalNew') {
+        return this.http.post(this.authService.pathApi + '/edit_report' , dataEdit);
+      } else if(editPageName == 'externalNew') {
+        return this.http.post(this.authService.pathApi + '/edit_report_ex' , dataEdit);
+      } else if(editPageName == 'internalFooter') {
+        return this.http.post(this.authService.pathApi + '/edit_footer', dataEdit);
+      } else if(editPageName == 'externalFooter') {
+        return this.http.post(this.authService.pathApi + '/edit_footer_ex', dataEdit);
+      }else if(editPageName == 'barEvent') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_event_bar', editData);
+      } else if(editPageName == 'contactUs') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_contact_us', editData);
+      } else if(editPageName == 'visitingTime') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_visiting_time', editData);
+      } else if(editPageName == 'eventCalendar') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_event_calendar', editData);
+      } else if(editPageName == 'externalAchievement') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_external_achievement', editData);
+      } else if(editPageName == 'statistic') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_statistic', editData);
+      } else if(editPageName == 'advertising') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_advertising_service', editData);
+      }
+    }
+  
+    //get event data
+    getItemData(pageId: number, typeGetData:string) {
+      console.log('wwwwwwwwwwwwwwwwwwwwwwwwwwww', pageId);
+      if(typeGetData == 'advertisiment') {
+        return this.http.get(this.authService.pathApi + '/get_main_ad/' + pageId);
+      } else if(typeGetData == 'hospital') {
+        return this.http.get(this.authService.pathApi + '/get_hospitals_centers/' + pageId);
+      } else if(typeGetData == 'managament') {
+        return this.http.get(this.authService.pathApi + '/get_management/' + pageId);
+      } else if(typeGetData == 'mainMenu') {
+        return this.http.get(this.authService.pathApi + '/get_menu/' + pageId);
+      } else if(typeGetData == 'externalService') {
+        return this.http.get(this.authService.pathApi + '/get_external_service/' + pageId);
+      } else if(typeGetData == 'news') {
+        return this.http.get(this.authService.pathApi + '/get_report/' + pageId);
+      } else if(typeGetData == 'footer') {
+        return this.http.get(this.authService.pathApi + '/get_footer/' + pageId);
+      }else if(typeGetData == 'barEvent') {
+        return this.http.get(this.authService.pathApi + '/get_event_bar/' + pageId);
+      } else if(typeGetData == 'contactUs') {
+        return this.http.get(this.authService.pathApi + '/get_contact_us/' + pageId);
+      } else if(typeGetData == 'visitingTime') {
+        return this.http.get(this.authService.pathApi + '/get_visiting_time/' + pageId);
+      } else if(typeGetData == 'eventCalendar') {
+        return this.http.get(this.authService.pathApi + '/get_event_calendar/' + pageId);
+      } else if(typeGetData == 'externalAchievement') {
+        return this.http.get(this.authService.pathApi + '/get_external_achievement/' + pageId);
+      } else if(typeGetData == 'statistic') {
+        return this.http.get(this.authService.pathApi + '/get_statistic/' + pageId);
+      } else if(typeGetData == 'advertising') {
+        return this.http.get(this.authService.pathApi + '/get_advertising_service/' + pageId);
+      }
   }
+  
+    //delete event 
+    deleteItem(dataIds, pageId) {
+      
+      console.log(dataIds);
+      console.log(pageId);
+
+      if(pageId == 24) {
+        return this.http.post(this.authService.pathApi + '/delete_main_ads' , {'ads_id' : dataIds});
+      } else if(pageId == 10) {
+        return this.http.post(this.authService.pathApi + '/delete_managements' , {'managements_id' : dataIds});
+      } else if(pageId == 31) {
+        return this.http.post(this.authService.pathApi + '/delete_managements_ex' , {'managements_id' : dataIds});
+      } else if(pageId == 6) {
+        return this.http.post(this.authService.pathApi + '/delete_hospitals_centers' , {'hospitals_centers_id' : dataIds});
+      } else if(pageId == 30) {
+        return this.http.post(this.authService.pathApi + '/delete_hospitals_centers_ex' , {'hospitals_centers_id' : dataIds});
+      } else if(pageId == 17) {
+        return this.http.post(this.authService.pathApi + '/delete_menus' , {'menus_id' : dataIds});
+      } else if(pageId == 18) {
+        return this.http.post(this.authService.pathApi + '/delete_external_menus' , {'menus_id' : dataIds});
+      } else if(pageId == 19) {
+        return this.http.post(this.authService.pathApi + '/delete_external_services_ex' , {'external_services_id' : dataIds});
+      } else if(pageId == 7) {
+        return this.http.post(this.authService.pathApi + '/delete_external_services' , {'external_services_id' : dataIds});
+      } else if(pageId == 20) {
+        return this.http.post(this.authService.pathApi + '/delete_reports_ex' , {'reports_id' : dataIds});
+      } else if(pageId == 13) {
+        return this.http.post(this.authService.pathApi + '/delete_reports' , {'reports_id' : dataIds});
+      } else if(pageId == 16) {
+        return this.http.post(this.authService.pathApi + '/delete_footers' , {'footers_id' : dataIds});
+      } else if(pageId == 29) {
+        return this.http.post(this.authService.pathApi + '/delete_footers_ex' , {'footers_id' : dataIds});
+      } else if (pageId == 21){
+        return this.http.post(this.authService.pathApi + '/delete_event_bars' , {'event_bars_id' : dataIds});
+      } else if (pageId == 23){
+        return this.http.post(this.authService.pathApi + '/delete_visiting_times' , {'visiting_times_id' : dataIds});
+      } else if (pageId == 25){
+        return this.http.post(this.authService.pathApi + '/delete_event_calendars' , {'event_calendars_id' : dataIds});
+      } else if (pageId == 27){
+        return this.http.post(this.authService.pathApi + '/delete_external_achievements' , {'external_achievements_id' : dataIds});
+      } else if (pageId == 26){
+        return this.http.post(this.authService.pathApi + '/delete_statistics' , {'statistics_id' : dataIds});
+      } else if (pageId == 22){
+        return this.http.post(this.authService.pathApi + '/delete_advertising_services' , {'advertising_services_id' : dataIds});
+      }
+    
+    };
 
-  //get data user from searchBar
-  getDataUSerSearchBar(data, pageId, pagenationNumber, dataTableNumber) {
-  console.log('url', this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
-  return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
-}
-
-//addEvent
-addItem(data, addType) {
-
-if(addType == 'advertisiment'){
-  return this.http.post(this.authService.pathApi + '/add_main_ad' , data);
-} else if(addType == 'barEvent') {
-  return this.http.post(this.authService.pathApi + '/add_event_bar', data);
-} else if(addType == 'visitingTime') {
-  return this.http.post(this.authService.pathApi + '/add_visiting_time', data);
-} else if(addType == 'eventCalendar') {
-  return this.http.post(this.authService.pathApi + '/add_event_calendar', data);
-} else if(addType == 'externalAchievement') {
-  return this.http.post(this.authService.pathApi + "/add_external_achievement", data);
-} else if(addType == 'statistic') {
-  return this.http.post(this.authService.pathApi + "/add_statistic", data);
-} else if(addType == 'advertising') {
-  return this.http.post(this.authService.pathApi + "/add_advertising_service", data);
-}
-}
-
-//edit event
-editItem(dataEdit,editId,editPageName){
-const editData = dataEdit;
-editData.id = editId;
-
-if(editPageName == 'advertisiment') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_main_ad', editData);
-} else if(editPageName == 'barEvent') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_event_bar', editData);
-} else if(editPageName == 'contactUs') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_contact_us', editData);
-} else if(editPageName == 'visitingTime') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_visiting_time', editData);
-} else if(editPageName == 'eventCalendar') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_event_calendar', editData);
-} else if(editPageName == 'externalAchievement') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_external_achievement', editData);
-} else if(editPageName == 'statistic') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_statistic', editData);
-} else if(editPageName == 'advertising') {
-  console.log(editData);
-  return this.http.post(this.authService.pathApi + '/edit_advertising_service', editData);
-}
-}
-
-//get event data
-getItemData(pageId: number, typeGetData:string) {
-console.log('wwwwwwwwwwwwwwwwwwwwwwwwwwww', pageId);
-if(typeGetData == 'advertisiment') {
-  return this.http.get(this.authService.pathApi + '/get_main_ad/' + pageId);
-} else if(typeGetData == 'barEvent') {
-  return this.http.get(this.authService.pathApi + '/get_event_bar/' + pageId);
-} else if(typeGetData == 'contactUs') {
-  return this.http.get(this.authService.pathApi + '/get_contact_us/' + pageId);
-} else if(typeGetData == 'visitingTime') {
-  return this.http.get(this.authService.pathApi + '/get_visiting_time/' + pageId);
-} else if(typeGetData == 'eventCalendar') {
-  return this.http.get(this.authService.pathApi + '/get_event_calendar/' + pageId);
-} else if(typeGetData == 'externalAchievement') {
-  return this.http.get(this.authService.pathApi + '/get_external_achievement/' + pageId);
-} else if(typeGetData == 'statistic') {
-  return this.http.get(this.authService.pathApi + '/get_statistic/' + pageId);
-} else if(typeGetData == 'advertising') {
-  return this.http.get(this.authService.pathApi + '/get_advertising_service/' + pageId);
-}
-}
-
-//delete event
-deleteItem(dataIds, pageId) {
-
-console.log(dataIds,pageId);
-
-if(pageId == 24) {
-  return this.http.post(this.authService.pathApi + '/delete_main_ads' , {'ads_id' : dataIds});
-} else if (pageId == 21){
-  return this.http.post(this.authService.pathApi + '/delete_event_bars' , {'event_bars_id' : dataIds});
-} else if (pageId == 23){
-  return this.http.post(this.authService.pathApi + '/delete_visiting_times' , {'visiting_times_id' : dataIds});
-} else if (pageId == 25){
-  return this.http.post(this.authService.pathApi + '/delete_event_calendars' , {'event_calendars_id' : dataIds});
-} else if (pageId == 27){
-  return this.http.post(this.authService.pathApi + '/delete_external_achievements' , {'external_achievements_id' : dataIds});
-} else if (pageId == 26){
-  return this.http.post(this.authService.pathApi + '/delete_statistics' , {'statistics_id' : dataIds});
-} else if (pageId == 22){
-  return this.http.post(this.authService.pathApi + '/delete_advertising_services' , {'advertising_services_id' : dataIds});
-}
-
-
-
-};
 
 
 }

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

@@ -9,14 +9,33 @@ export class ExternalPageService {
   constructor(private http: HttpClient, 
     private authSer: AuthServiceService) { }
 
+    headerMenus = []; //header data 
+
+
 
   //get header data 
   getHeader(){
-    return this.http.get(this.authSer.pathApi + '/main_menu_list');
+    return this.http.get(this.authSer.pathApi + '/main_menu_list/1');
   }
 
   //get content data 
   getContentData() {
     return this.http.get(this.authSer.pathApi + '/external_page/1');
   }
+  
+  //get hospital or mangament data 
+  getHospitalMangamentsData(typeRequest:string) {
+    if(typeRequest == 'hospital') {
+      return this.http.get(this.authSer.pathApi + '/hospitals_centers_list/1'); 
+    } else if(typeRequest == 'managements') {
+      return this.http.get(this.authSer.pathApi + '/managements_list/1');
+    }
+  }
+
+  //get contact us data 
+  getContactUs() {
+    return this.http.get(this.authSer.pathApi + '/get_contact_us/1');
+  }
+
+  
 }

src/app/shared/external-ser.service.ts

@@ -29,7 +29,7 @@ export class ExternalSerService {
 
   //delete data 
   deleteEvent(externalsIds) {
-      return this.http.post(this.authService.pathApi + '/delete_external_services' , {'external_services_id' : externalsIds});
+    return this.http.post(this.authService.pathApi + '/delete_external_services' , {'external_services_id' : externalsIds});
   };
 
   //add external 

src/app/shared/hospital.service.ts

@@ -36,7 +36,6 @@ export class HospitalService {
       this.spinner.show();
         console.log(datasIds);
         return this.http.post(this.authService.pathApi + '/delete_managements' , {'managements_id' : datasIds});
-      
     }
   }
 

src/app/shared/shared.module.ts

@@ -0,0 +1,23 @@
+import { EnglishCharactersDirective } from './english-characters.directive';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OnlyNumberDirective } from './only-number.directive';
+import { CeiboShare } from 'ng2-social-share';
+
+
+@NgModule({
+  declarations: [
+    OnlyNumberDirective,
+    EnglishCharactersDirective,
+    CeiboShare,
+  ],
+  exports: [
+    CommonModule,
+    OnlyNumberDirective,
+    EnglishCharactersDirective,
+    CeiboShare
+  ]
+})
+
+export class SharedModule {
+}

src/index.html

@@ -12,9 +12,6 @@
   <!-- <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" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
-  
   <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>
@@ -27,7 +24,6 @@
           integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
           integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> -->
-          <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
-          <script src="//unpkg.com/slick-carousel@1.8.1/slick/slick.js"></script>
+
 </body>
 </html>

src/styles.css

@@ -402,6 +402,15 @@ table .btn{
     background-color: #007A71 !important;
   }
 
+  .activeExternalLink {
+    color: #fff !important;
+    background-color: #007A71 !important;
+  }
+
+  .activeExternalLink a {
+    color: #fff !important;
+  }
+
   .spanReqired-w {
     color: red;
   }
@@ -464,11 +473,7 @@ width: 100%;
     background-color: #fff;
     border: 1px solid #f7f7f7;
   }
-  .testBody-w p {
-    text-align: right;
-    font-size: 15px;
-    padding: 5px 10px;
-  }
+  
 
   .testBodyEn-w p {
     text-align: left;
@@ -495,8 +500,11 @@ width: 100%;
     cursor: pointer;
   }
 
+  .cal-cell-top {
+    height: 50px !important;
+  }
+
 
- 
   /* .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu,
   .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu.IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-3uCBSbQNVNf2QjqHe1rfb6 {
     width: 150px;
@@ -612,24 +620,84 @@ width: 100%;
 }
 
 /* .cal-month-view .cal-day-cell {
-  height: 50px !important;
+  min-height: 50px !important;
 }
 
 .cal-month-view .cal-day-cell {
-  height: 50px !important;
+  min-height: 50px !important;
 }
 
 .cal-month-view .cal-day-cell {
-  height: 50px !important;
-}
+  min-height: 50px !important;
+} */
 
 .cal-month-view .cal-days .cal-cell-row {
   height: 50px;
 }
   
 .cal-month-view .cal-day-cell {
-  height: 50px !important;
-} */
+  min-height: 50px !important;
+}
+
+.cal-month-view .cal-cell-top {
+  min-height: 50px !important;
+}
+
+.cal-events {
+  margin: 0 !important;
+}
+
+.cal-day-badge {
+  margin-top: 0 !important;
+  margin-left: 0 !important;
+}
+
+.cal-day-number {
+  font-size: 15px !important;
+  color: #252525;
+}
+
+.cal-month-view .cal-day-cell.cal-out-month .cal-day-number {
+  opacity: 0.7 !important;
+}
+
+.cal-day-badge {
+  padding: 2px 5px !important;
+  font-size: 10px !important;
+  text-align: initial !important;
+  float: left !important;
+  margin: 5px !important; 
+}
+
+.popUp {
+  width: 720px;
+  border: 1px solid #fff;
+  background-color: #fff;
+  box-shadow: 0px 2px 5px #252525;
+  border-radius: 5px;
+  margin: 0 auto;
+  text-align: left;
+  padding: 10px;
+  position: fixed;
+  top: 0;
+  left: 25%;
+  z-index: 999999999999999999;
+}
+
+.eventContent-w h1 {
+  font-size: 18px;
+}
+
+.eventContent-w p {
+  text-align: center;
+  font-size: 16px;
+}
+
+.eventContent-w button {
+  position: absolute;
+  top: 0;
+  right: 0px;
+}
 
   /* .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu,
   .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu.IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-3uCBSbQNVNf2QjqHe1rfb6 {
@@ -917,6 +985,27 @@ height: 7px !important;
     background-color: transparent;
 }
 
+.hospitalContent-w .card-header {
+  background-color: #967853 !important;
+  border: 0px !important;
+  padding: 0;
+  cursor: pointer;
+}
+
+.hospitalContent-w .card-header h5 button {
+  cursor: pointer;
+}
+
+.hospitalContent-w .card-header h4 {
+  color: #fff;
+  font-size: 15px;
+}
+
+.hospitalContent-w .card-body {
+  padding: 0;
+}
+
+
 
 
 
@@ -934,6 +1023,15 @@ height: 7px !important;
     color: #fff !important;
   }
 
+  .homeExternalActive {
+    background-color: #007A71 !important;
+    color: #fff !important;
+  }
+
+  .homeExternalActive a {
+    color: #fff !important;
+  }
+
 }
 /* ------pink-----*/
 @media screen and (min-width: 992px) and (max-width: 1200px) {
@@ -946,6 +1044,17 @@ height: 7px !important;
     background-color: #a2835d !important;
     color: #fff !important;
   }
+
+  .homeExternalActive {
+    background-color: #007A71 !important;
+    color: #fff !important;
+  }
+
+
+  .homeExternalActive a {
+    color: #fff !important;
+  }
+
 	
 }
 /* ------yellow-----*/
@@ -1009,6 +1118,16 @@ height: 7px !important;
     background-color: #a2835d !important;
     color: #fff !important;
   }
+
+  .homeExternalActive {
+    background-color: #007A71 !important;
+    color: #fff !important;
+  }
+
+
+  .homeExternalActive a {
+    color: #fff !important;
+  }
   
   
 }