dashBoard except map

src/app/dashboard/advertisiment/advertisiment.component.ts

@@ -15,7 +15,7 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class AdvertisimentComponent implements OnInit {
 
-  constructor(private http: HttpClient, 
+  constructor(private http: HttpClient,
     private route: ActivatedRoute,
     private router: Router,
     private modal: Modal,
@@ -25,91 +25,91 @@ export class AdvertisimentComponent implements OnInit {
     private toastr: ToastrService,
     private dashboardSer: DashboardService) { }
 
-  advertisimentsList = [];
-  pages= [];
-  pageId: number;
-  advertisimentsListIds = [];
-  count: number;
-  perPagePagenation: number;
-  currentPage:number = 1;
-  filtterStatus = '';
-  selectedAll: any;
-  userLoginId:number;
-  serviceId:number;
-  dataTableNumber: number = 5;
+    advertisimentsList = [];
+    pages= [];
+    pageId: number;
+    advertisimentsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
 
-  ngOnInit() {
-    //init values of permisions
-    this.authSer.showAddBtn = false;
-    this.authSer.showDeleteBtn = false;
-    this.authSer.showEditBtn = false;
-    this.authSer.showPermissionsBtn = false;
-     //show / hide notification search in header
-     this.authSer.notificationLogin = true;
-     this.authSer.showSearchHeader = false;
-     this.authSer.showHeaderLogin = false;
-     this.authSer.showHeaderDashBoard = true;
-     this.authSer.showDashboardHeader = true;
-     this.authSer.internalHeader = false;
-           //to show / hide permissions
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
 
-  this.route.parent.params.subscribe(
-    (params:Params) => {
-        this.userLoginId = params['userID'];
-        this.serviceId = params['serviceID'];
-        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
-          (responce) => {
-            console.log(responce);
-            this.pages = responce['pages'];
-            for(let i = 0; i< this.pages.length; i++) {
-              if(this.pages[i].id == 24) {
-                for(let j = 0; j < this.pages[i].permissions.length; j++) {
-                  if(this.pages[i].permissions[j].name == 'add_main_ad'){
-                    this.authSer.showAddBtn = true;
-                  }
-                  if(this.pages[i].permissions[j].name == 'edit_main_ad'){
-                    this.authSer.showEditBtn = true;
-                  }
-                  if(this.pages[i].permissions[j].name == 'delete_main_ads'){
-                    this.authSer.showDeleteBtn = true;
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 24) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_main_ad'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_main_ad'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_main_ads'){
+                      this.authSer.showDeleteBtn = true;
+                    }
                   }
+                }else {
+                  console.log('no events');
                 }
-              }else {
-                console.log('no events');
               }
-            }
-            this.spinner.hide();
-          },
-          (error) => {console.log(error)}
-        );
-      }
-    );
-    
-    
-    
-    this.route.params.subscribe(
-      (parmas: Params) => {
-        this.pageId = parmas['adverId'];
-      }
-    );
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
 
 
-    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
-      (responce) => {
-        console.log(responce);
-        this.advertisimentsList = responce['main_ads'];
-        this.count = responce['count'];
-        this.perPagePagenation = responce['per_page'];
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
 
-  }
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['adverId'];
+        }
+      );
+
 
-   //make all checkbox of user checked 
-   selectAll() {
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.advertisimentsList = responce['main_ads'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    }
+
+    //make all checkbox of user checked
+    selectAll() {
     for (var i = 0; i < this.advertisimentsList.length; i++) {
       this.advertisimentsList[i].selected = this.selectedAll;
     }
@@ -121,120 +121,120 @@ export class AdvertisimentComponent implements OnInit {
     });
   };
 
-      //filtter function
-      filtterFunc(data) {
-        this.advertisimentsList = [];
-        console.log(data.target.value);
-        const dataSearch = data.target.value;     
-        this.currentPage = 1;
-        console.log('search curent page', this.currentPage);
-        this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
-          (responce) => {
-            console.log(responce);
-            this.advertisimentsList = responce['main_ads'];
-            this.count = responce['count'];
-            this.perPagePagenation = responce['per_page'];
-            console.log('filtter count', this.count);
-            console.log('filtter perPagePAgenation', this.perPagePagenation);
-          },
-          (error) => {
-            console.log(error)
-          }
-        );
-      };
-    
-      //change page 
-      onPageChange(pagenationNumber) {
-        this.spinner.show();
-        this.currentPage = pagenationNumber;
-        this.advertisimentsList = [];
-        //console.log(pagenationNumber);
-        //console.log(this.pageId);
-        this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
-          (responce) => {
-            console.log(responce);
-            this.advertisimentsList = responce['main_ads'];
-            this.count = responce['count'];
-            this.perPagePagenation = responce['per_page'];
-            console.log(this.advertisimentsList);
-            this.spinner.hide();
-          },
-          (error) => {
-            console.log(error);
-            this.spinner.hide();
-          }
-        );
-      };
+  //filtter function
+  filtterFunc(data) {
+  this.advertisimentsList = [];
+  console.log(data.target.value);
+  const dataSearch = data.target.value;
+  this.currentPage = 1;
+  console.log('search curent page', this.currentPage);
+  this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.advertisimentsList = responce['main_ads'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log('filtter count', this.count);
+      console.log('filtter perPagePAgenation', this.perPagePagenation);
+    },
+    (error) => {
+      console.log(error)
+    }
+  );
+};
 
-      //determine the list count from select element 
-  onGetValue(event) {
-    this.spinner.show();
-    this.advertisimentsList = [];
-    this.dataTableNumber = event.target.value;
-    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
-      (responce) => {
-        console.log(responce);
-        this.advertisimentsList = responce['main_ads'];
-        this.count = responce['count'];
-        this.perPagePagenation = responce['per_page'];
-        this.spinner.hide();
-      },
-      (error) => {
-        console.log(error);
-        this.spinner.hide();
-      }
-    );
+//change page
+onPageChange(pagenationNumber) {
+this.spinner.show();
+this.currentPage = pagenationNumber;
+this.advertisimentsList = [];
+//console.log(pagenationNumber);
+//console.log(this.pageId);
+this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+(responce) => {
+  console.log(responce);
+  this.advertisimentsList = responce['main_ads'];
+  this.count = responce['count'];
+  this.perPagePagenation = responce['per_page'];
+  console.log(this.advertisimentsList);
+  this.spinner.hide();
+},
+(error) => {
+  console.log(error);
+  this.spinner.hide();
+}
+);
+};
+
+//determine the list count from select element
+onGetValue(event) {
+this.spinner.show();
+this.advertisimentsList = [];
+this.dataTableNumber = event.target.value;
+this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+  (responce) => {
+    console.log(responce);
+    this.advertisimentsList = responce['main_ads'];
+    this.count = responce['count'];
+    this.perPagePagenation = responce['per_page'];
+    this.spinner.hide();
+  },
+  (error) => {
+    console.log(error);
+    this.spinner.hide();
   }
+);
+}
 
-  onDelete() {
+onDelete() {
 
-    this.advertisimentsListIds = [];
-    for(let i = 0; i < this.advertisimentsList.length; i++) {
-      if(this.advertisimentsList[i].selected == true) {
-        this.advertisimentsListIds.push(this.advertisimentsList[i].id);
-      }
+  this.advertisimentsListIds = [];
+  for(let i = 0; i < this.advertisimentsList.length; i++) {
+    if(this.advertisimentsList[i].selected == true) {
+      this.advertisimentsListIds.push(this.advertisimentsList[i].id);
     }
+  }
 
-    console.log(this.advertisimentsListIds);
+  console.log(this.advertisimentsListIds);
 
-    if(this.advertisimentsListIds.length > 0) {
-      const dialogRef = this.modal.alert()
-      .size('sm')
-      .showClose(true)
-      .title('تأكيد الحذف')
-      .body(`
-          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
-          `)
+  if(this.advertisimentsListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+      <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+      `)
       .open();
-  
-        dialogRef.result
-        .then( result => 
-          this.dashboardSer.deleteItem(this.advertisimentsListIds, this.pageId).subscribe(
-            (responce) => {
-              console.log(responce);
-              this.toastr.success('تم الحذف');
-              this.spinner.show();
-              this.advertisimentsList = [];
-              this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
-                (responce) => {
-                  console.log(responce);
-                  this.advertisimentsList = responce['main_ads'];
-                  this.count = responce['count'];
-                  this.perPagePagenation = responce['per_page'];
-                  this.spinner.hide();
-                },
-                (error) => {
-                  console.log(error);
-                  this.spinner.hide();
-                }
-              );
-            },
-            (error) => {
-              console.log(error);
-              this.spinner.hide();
+
+      dialogRef.result
+      .then( result =>
+        this.dashboardSer.deleteItem(this.advertisimentsListIds, this.pageId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الحذف');
+            this.spinner.show();
+            this.advertisimentsList = [];
+            this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.advertisimentsList = responce['main_ads'];
+                this.count = responce['count'];
+                this.perPagePagenation = responce['per_page'];
+                this.spinner.hide();
               },
-            )
-        );
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              }
+            );
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          },
+        )
+      );
     } else {
       this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
     }
@@ -243,16 +243,16 @@ export class AdvertisimentComponent implements OnInit {
 
   //add function
   onAdd() {
-    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/add');
-    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/add']);
-  }
+  console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/add');
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/add']);
+}
 
-  //edit function
-   onEdit(editTabID) {
-    localStorage.setItem('editAdevIdStorage', editTabID);
-    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/edit/']);
-    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/edit/');
-  };
+//edit function
+onEdit(editTabID) {
+localStorage.setItem('editAdevIdStorage', editTabID);
+this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/edit/']);
+console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/edit/');
+};
 
 
 

src/app/dashboard/advertising-services/add-advertising-service/add-advertising-service.component.css

@@ -0,0 +1,93 @@
+.imgProfile {
+    width: 200px;
+    height: 200px;
+    border: 1px solid #ccc;
+    border-radius: 20px 20px 0 0;
+}
+
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: -8px;
+    left: 43%;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+input {
+    font-size: 13px !important;
+}
+
+input,select {
+    font-size: 12px;
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.regesterBtn-w {
+    width: 200px;
+    display: block;
+    margin:  20px auto;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}

src/app/dashboard/advertising-services/add-advertising-service/add-advertising-service.component.html

@@ -0,0 +1,104 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+              <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                <div class="form-group text-center imgContainer">
+                    <img [src]="urlImg" class="imgProfile" height="200">
+                    <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                    <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                </div>
+                <!-- <span class="validateImageMsg" *ngIf="checkValidImg">must be in 'png' format</span> -->
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الإسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="advertising.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الإسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="advertising.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="position" style="float: right; margin-right: 5px">صف العرض <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="position" ngModel [ngModel]="advertising.position" id="position" required>
+                  <option value="first_row">الصف الأول</option>
+                  <option value="second_row">الصف الثاني </option>
+                </select>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="type" style="float: right; margin-right: 5px">نوع الخدمة <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="type" ngModel [ngModel]="advertising.type" id="type" required>
+                  <option value="link">رابط</option>
+                  <option value="content">محتوي </option>
+                </select>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="link" style="float: right; margin-right: 5px"> الرابط <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="link" name="link" ngModel [ngModel]="advertising.link" #name="ngModel" />
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> المحتوي باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description" [ngModel]="advertising.description" >
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px">المحتوي باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description_en" [ngModel]="advertising.description_en" >
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" ngModel [ngModel]="advertising.status" id="status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/advertising-services/add-advertising-service/add-advertising-service.component.ts

@@ -0,0 +1,162 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-add-advertising-service',
+  templateUrl: './add-advertising-service.component.html',
+  styleUrls: ['./add-advertising-service.component.css']
+})
+export class AddAdvertisingServiceComponent implements OnInit {
+
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+
+    urlImg: string =  '../../assets/image/avatar.png';
+    imageBase64: string = '';
+    photoType: string = '';
+    checkChangeImage: boolean = false;
+    checkValidImg: boolean = true;
+    typeMode: boolean = false;
+    photoEdit: boolean = true;
+    checkSaveClick:boolean = false;
+    typeLink: string = '';
+    advertisingId: number;
+    checkDisabledSave:boolean = false;
+
+
+    advertising = {
+      name: '',
+      name_en: '',
+      position: '',
+      type: '',
+      link: '',
+      description: '',
+      description_en: '',
+      status: 1,
+    };
+
+
+    ngOnInit() {
+
+
+      this.route.params.subscribe(
+        (params: Params) => {
+          console.log(params)
+          if(params['typeAdvertising'] == 'add'){
+            this.typeMode = false;
+            this.typeLink = 'إنشاء خدمة إعلانية';
+          } else if(params['typeAdvertising'] == 'edit') {
+            this.spinner.show();
+            this.typeMode = true;
+            this.advertisingId = parseInt(params.advertisingId);
+            this.typeLink = 'تعديل خدمة إعلانية';
+            this.dashboardSer.getItemData(this.advertisingId, 'advertising').subscribe(
+              (responce) => {
+                console.log(responce);
+                this.advertising = responce['advertising_service'];
+                console.log(this.advertising);
+                if(responce['advertising_service'].photo) {
+                  this.checkValidImg = false;
+                  this.urlImg = this.authSer.pathImg + responce['advertising_service'].photo;
+                }
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+
+          } else {
+            this.toastr.warning('Catch Error Go To Home !');
+          }
+        }
+      );
+
+
+    }//ngOnInit
+
+
+
+    onFileChanges(event) {
+      console.log(event);
+      this.imageBase64 = event[0].base64;
+      this.photoType = event[0].type.split('/');
+      console.log(this.photoType[1]);
+      this.checkChangeImage = true;
+      this.checkValidImg = false;
+    }
+
+    getUrl(event) {
+      if (event.target.files && event.target.files[0]) {
+        var reader = new FileReader();
+        reader.readAsDataURL(event.target.files[0]); // read file as data url
+        reader.onload = (event) => { // called once readAsDataURL is completed
+        this.urlImg = event.target['result'];
+      }
+    }
+  }
+
+  onSubmitted() {
+    this.checkSaveClick = true;
+    const formData = this.dataForm.value;
+    if(this.checkChangeImage){
+      formData['photo'] = this.imageBase64;
+      formData['photo_type'] = this.photoType[1];
+    } else {
+      delete formData.photo;
+      delete formData.photo_type;
+      this.photoEdit = false;
+    }
+    console.log(formData);
+    if(this.typeMode) {
+
+      this.dashboardSer.editItem(formData, this.advertisingId, 'advertising').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.checkDisabledSave = false;
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.checkDisabledSave = false;
+          this.toastr.error(' خطأ في التعديل !');
+        }
+      );
+    } else {
+
+      this.dashboardSer.addItem(formData,'advertising').subscribe(
+        (responce) => {
+          this.toastr.success('تم الاضافه بنجاح');
+          this.checkDisabledSave = false;
+          console.log(responce);
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.checkDisabledSave = false;
+          this.toastr.error('خطأ في الاضافه');
+        }
+      );
+    }
+  }
+
+
+
+
+
+}

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

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

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

@@ -0,0 +1,256 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-advertising-services-list',
+  templateUrl: './advertising-services-list.component.html',
+  styleUrls: ['./advertising-services-list.component.css']
+})
+export class AdvertisingServicesListComponent implements OnInit {
+
+    constructor(private http: HttpClient,
+      private route: ActivatedRoute,
+      private router: Router,
+      private modal: Modal,
+      private userSer: UserService,
+      private spinner: NgxSpinnerService,
+      private authSer: AuthServiceService,
+      private toastr: ToastrService,
+      private dashboardSer: DashboardService) { }
+
+      advertisingList = [];
+      pages= [];
+      pageId: number;
+      advertisingListIds = [];
+      count: number;
+      perPagePagenation: number;
+      currentPage:number = 1;
+      filtterStatus = '';
+      selectedAll: any;
+      userLoginId:number;
+      serviceId:number;
+      dataTableNumber: number = 5;
+
+      ngOnInit() {
+        //init values of permisions
+        this.authSer.showAddBtn = false;
+        this.authSer.showDeleteBtn = false;
+        this.authSer.showEditBtn = false;
+        this.authSer.showPermissionsBtn = false;
+        //show / hide notification search in header
+        this.authSer.notificationLogin = true;
+        this.authSer.showSearchHeader = false;
+        this.authSer.showHeaderLogin = false;
+        this.authSer.showHeaderDashBoard = true;
+        this.authSer.showDashboardHeader = true;
+        this.authSer.internalHeader = false;
+        //to show / hide permissions
+
+        this.route.parent.params.subscribe(
+          (params:Params) => {
+            this.userLoginId = params['userID'];
+            this.serviceId = params['serviceID'];
+            this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.pages = responce['pages'];
+                for(let i = 0; i< this.pages.length; i++) {
+                  if(this.pages[i].id == 22) {
+                    for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                      if(this.pages[i].permissions[j].name == "add_advertising_service"){
+                        this.authSer.showAddBtn = true;
+                      }
+                      if(this.pages[i].permissions[j].name == "edit_advertising_service"){
+                        this.authSer.showEditBtn = true;
+                      }
+                      if(this.pages[i].permissions[j].name == "delete_advertising_services"){
+                        this.authSer.showDeleteBtn = true;
+                      }
+                    }
+                  }else {
+                    console.log('no advertising services ');
+                  }
+                }
+                this.spinner.hide();
+              },
+              (error) => {console.log(error)}
+            );
+          }
+        );
+
+        this.route.params.subscribe(
+          (parmas: Params) => {
+            this.pageId = parmas['advertisingListIds'];
+          }
+        );
+
+        this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.advertisingList = responce['advertising_services'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+
+      } //ngOnInit
+
+
+                  //make all checkbox of user checked
+                  selectAll() {
+                  for (var i = 0; i < this.advertisingList.length; i++) {
+                    this.advertisingList[i].selected = this.selectedAll;
+                  }
+                };
+
+                checkIfAllSelected() {
+                  this.selectedAll = this.advertisingList.every(function(item:any) {
+                    return item.selected == true;
+                  });
+                };
+
+                //filtter function
+                filtterFunc(data) {
+                this.advertisingList = [];
+                console.log(data.target.value);
+                const dataSearch = data.target.value;
+                this.currentPage = 1;
+                console.log('search curent page', this.currentPage);
+                this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.advertisingList = responce['advertising_services'];
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    console.log('filtter count', this.count);
+                    console.log('filtter perPagePAgenation', this.perPagePagenation);
+                  },
+                  (error) => {
+                    console.log(error)
+                  }
+                );
+              };
+
+              //change page
+              onPageChange(pagenationNumber) {
+              this.spinner.show();
+              this.currentPage = pagenationNumber;
+              this.advertisingList = [];
+              //console.log(pagenationNumber);
+              //console.log(this.pageId);
+              this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.advertisingList = responce['advertising_services'];
+                this.count = responce['count'];
+                this.perPagePagenation = responce['per_page'];
+                console.log(this.advertisingList);
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              }
+              );
+              };
+
+
+              //determine the list count from select element
+              onGetValue(event) {
+              this.spinner.show();
+              this.advertisingList = [];
+              this.dataTableNumber = event.target.value;
+              this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.advertisingList = responce['advertising_services'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
+              }
+
+              onDelete() {
+
+                this.advertisingListIds = [];
+                for(let i = 0; i < this.advertisingList.length; i++) {
+                  if(this.advertisingList[i].selected == true) {
+                    this.advertisingListIds.push(this.advertisingList[i].id);
+                  }
+                }
+
+                console.log(this.advertisingListIds);
+
+                if(this.advertisingListIds.length > 0) {
+                  const dialogRef = this.modal.alert()
+                  .size('sm')
+                  .showClose(true)
+                  .title('تأكيد الحذف')
+                  .body(`
+                    <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+                    `)
+                    .open();
+
+                    dialogRef.result
+                    .then( result =>
+                      this.dashboardSer.deleteItem(this.advertisingListIds, this.pageId).subscribe(
+                        (responce) => {
+                          console.log(responce);
+                          this.toastr.success('تم الحذف');
+                          this.spinner.show();
+                          this.advertisingList = [];
+                          this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                            (responce) => {
+                              console.log(responce);
+                              this.advertisingList = responce['advertising_services'];
+                              this.count = responce['count'];
+                              this.perPagePagenation = responce['per_page'];
+                              this.spinner.hide();
+                            },
+                            (error) => {
+                              console.log(error);
+                              this.spinner.hide();
+                            }
+                          );
+                        },
+                        (error) => {
+                          console.log(error);
+                          this.spinner.hide();
+                        },
+                      )
+                    );
+                  } else {
+                    this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+                  }
+                };
+
+                //add function
+                onAdd() {
+                console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addAdvertising');
+                this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addAdvertising']);
+              }
+
+              //edit function
+              onEdit(editTabID) {
+              // localStorage.setItem('editeventCalendarIdStorage', editTabID);
+              this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertising/edit/' + editTabID]);
+              console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertising/edit/' + editTabID);
+              };
+
+}

src/app/dashboard/bar-events/add-bar-event/add-bar-event.component.css

@@ -0,0 +1,3 @@
+#description{
+  text-align-last: center;
+  }

src/app/dashboard/bar-events/add-bar-event/add-bar-event.component.html

@@ -0,0 +1,89 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> العنوان باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="barEvent.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name_en" style="float: right; margin-right: 5px">العنوان باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="barEvent.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> الوصف باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description" [ngModel]="barEvent.description" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px">الوصف باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description_en" [ngModel]="barEvent.description_en" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-4" >
+                <label for="event_time" style="float: right;margin-right: 5px"> وقت الحدث <span class="spanReqired-w">*</span></label>
+
+                <div class="hjri_time" *ngIf='bindingDateSplit && typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
+                </div>
+                <div class="hjri_time" *ngIf='!typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" ></app-higri-date>
+                </div>
+                <!-- <div class="form-group">
+                  <label for="lecture_end" style="float: right;margin-right: 5px"> وقت الحدث <span class="spanReqired-w">*</span></label>
+                  <input type="datetime-local" class="form-control" name="end_time" [ngModel]="barEvent.end_time" id="lecture_end" required />
+                </div> -->
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" [ngModel]="barEvent.status" id="status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/bar-events/add-bar-event/add-bar-event.component.ts

@@ -0,0 +1,136 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+
+@Component({
+  selector: 'app-add-bar-event',
+  templateUrl: './add-bar-event.component.html',
+  styleUrls: ['./add-bar-event.component.css']
+})
+export class AddBarEventComponent implements OnInit {
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+    typeMode:boolean = false; //default false for create page
+    typeLink: string;
+    barEventId:number;
+    checkDisabledSave:boolean = false;
+
+    barEvent = {
+      name: '',
+      name_en: '',
+      description: '',
+      description_en: '',
+      status: 1,
+    };
+
+    higriDateVal = "";
+    bindingDateSplit:any;
+
+
+  ngOnInit() {
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeEventBar'] == 'add'){
+          this.typeMode = false;
+          this.typeLink = 'إنشاء حدث';
+        } else if(params['typeEventBar'] == 'edit') {
+          this.spinner.show();
+          this.typeMode = true;
+         this.barEventId = parseInt(localStorage.getItem('editbarEventIdStorage'));
+         //alert(this.barEventId);
+          this.typeLink = 'تعديل حدث';
+          this.dashboardSer.getItemData(this.barEventId, 'barEvent').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.barEvent = responce['event'];
+              console.log(this.barEvent);
+              const date = responce['event'].event_time.split('-');
+
+              this.bindingDateSplit = {
+                year: parseInt(date[0]),
+                month: parseInt(date[1]),
+                day: parseInt(date[2])
+              };
+
+              this.higriDateVal = this.bindingDateSplit.year + '-' + this.bindingDateSplit.month + '-' + this.bindingDateSplit.day;
+
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+
+        } else {
+          this.toastr.warning('Catch Error Go To Home !');
+        }
+      }
+    );
+
+
+  }//ngOnInit
+
+  //get value date from child component
+  public getDate(date: any):void {
+    console.log( date);
+    this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
+    console.log('higrii date', this.higriDateVal);
+  }
+
+  onSubmitted() {
+    this.checkDisabledSave = true;
+    const dataFormEventBar = this.dataForm.value;
+    dataFormEventBar['event_time']  = this.higriDateVal;
+    console.log(dataFormEventBar);
+
+
+
+    if(this.typeMode) {
+
+      this.dashboardSer.editItem(dataFormEventBar, this.barEventId, 'barEvent').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.checkDisabledSave = false;
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.checkDisabledSave = false;
+          this.toastr.error(' خطأ في التعديل !');
+        }
+      );
+    } else {
+
+      this.dashboardSer.addItem(dataFormEventBar,'barEvent').subscribe(
+        (responce) => {
+          this.toastr.success('تم الاضافه بنجاح');
+          this.checkDisabledSave = false;
+          console.log(responce);
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.checkDisabledSave = false;
+          this.toastr.error('خطأ في الاضافه');
+        }
+      );
+    }
+  }
+
+}

src/app/dashboard/bar-events/bar-events-list/bar-events-list.component.html

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

src/app/dashboard/bar-events/bar-events-list/bar-events-list.component.ts

@@ -0,0 +1,255 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-bar-events-list',
+  templateUrl: './bar-events-list.component.html',
+  styleUrls: ['./bar-events-list.component.css']
+})
+
+export class BarEventsListComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+    barEventsList = [];
+    pages= [];
+    pageId: number;
+    barEventsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 21) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == "add_event_bar"){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "edit_event_bar"){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "delete_event_bars"){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no events');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['barEventId'];
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.barEventsList = responce['events'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } //end ngOnInit
+
+    //make all checkbox of user checked
+    selectAll() {
+    for (var i = 0; i < this.barEventsList.length; i++) {
+      this.barEventsList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.barEventsList.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+
+  //filtter function
+  filtterFunc(data) {
+  this.barEventsList = [];
+  console.log(data.target.value);
+  const dataSearch = data.target.value;
+  this.currentPage = 1;
+  console.log('search curent page', this.currentPage);
+  this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.barEventsList = responce['events'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log('filtter count', this.count);
+      console.log('filtter perPagePAgenation', this.perPagePagenation);
+    },
+    (error) => {
+      console.log(error)
+    }
+  );
+};
+
+//change page
+onPageChange(pagenationNumber) {
+this.spinner.show();
+this.currentPage = pagenationNumber;
+this.barEventsList = [];
+//console.log(pagenationNumber);
+//console.log(this.pageId);
+this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+(responce) => {
+  console.log(responce);
+  this.barEventsList = responce['events'];
+  this.count = responce['count'];
+  this.perPagePagenation = responce['per_page'];
+  console.log(this.barEventsList);
+  this.spinner.hide();
+},
+(error) => {
+  console.log(error);
+  this.spinner.hide();
+}
+);
+};
+
+
+//determine the list count from select element
+onGetValue(event) {
+this.spinner.show();
+this.barEventsList = [];
+this.dataTableNumber = event.target.value;
+this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+  (responce) => {
+    console.log(responce);
+    this.barEventsList = responce['events'];
+    this.count = responce['count'];
+    this.perPagePagenation = responce['per_page'];
+    this.spinner.hide();
+  },
+  (error) => {
+    console.log(error);
+    this.spinner.hide();
+  }
+);
+}
+
+onDelete() {
+
+  this.barEventsListIds = [];
+  for(let i = 0; i < this.barEventsList.length; i++) {
+    if(this.barEventsList[i].selected == true) {
+      this.barEventsListIds.push(this.barEventsList[i].id);
+    }
+  }
+
+  console.log(this.barEventsListIds);
+
+  if(this.barEventsListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+      <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+      `)
+      .open();
+
+      dialogRef.result
+      .then( result =>
+        this.dashboardSer.deleteItem(this.barEventsListIds, this.pageId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الحذف');
+            this.spinner.show();
+            this.barEventsList = [];
+            this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.barEventsList = responce['events'];
+                this.count = responce['count'];
+                this.perPagePagenation = responce['per_page'];
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              }
+            );
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          },
+        )
+      );
+    } else {
+      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+    }
+  };
+
+  //add function
+  onAdd() {
+  console.log('service/' + this.userLoginId + '/' + this.serviceId + '/barEvent/add');
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/barEvent/add']);
+}
+
+//edit function
+onEdit(editTabID) {
+localStorage.setItem('editbarEventIdStorage', editTabID);
+this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/barEvent/edit/']);
+console.log('service/' + this.userLoginId + '/' + this.serviceId + '/barEvent/edit/');
+};
+
+}

src/app/dashboard/contact-us/add-contact-us/add-contact-us.component.html

@@ -0,0 +1,53 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> المحتوي باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="field" [ngModel]="contactUs.field" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px">المحتوي باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="field_en" [ngModel]="contactUs.field_en" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/contact-us/add-contact-us/add-contact-us.component.ts

@@ -0,0 +1,90 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+
+@Component({
+  selector: 'app-add-contact-us',
+  templateUrl: './add-contact-us.component.html',
+  styleUrls: ['./add-contact-us.component.css']
+})
+export class AddContactUsComponent implements OnInit {
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+    typeMode:boolean = false; //default false for create page
+    typeLink: string;
+    contactUsId:number;
+    checkDisabledSave:boolean = false;
+
+    contactUs = {
+      field: '',
+      field_en: '',
+    };
+
+
+
+  ngOnInit() {
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeContactUs'] == 'edit') {
+          this.spinner.show();
+          this.typeMode = true;
+         this.contactUsId = parseInt(localStorage.getItem('editcontactUsIdStorage'));
+          this.typeLink = 'تعديل محتوي الصفحة';
+          this.dashboardSer.getItemData(this.contactUsId, 'contactUs').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.contactUs = responce['contact_us'];
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+
+        } else {
+          this.toastr.warning('Catch Error Go To Home !');
+        }
+      }
+    );
+
+
+  } //ngOnInit
+
+  onSubmitted() {
+    this.checkDisabledSave = true;
+    const dataFormContactUs = this.dataForm.value;
+    if(this.typeMode) {
+
+      this.dashboardSer.editItem(dataFormContactUs, this.contactUsId, 'contactUs').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.checkDisabledSave = false;
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.checkDisabledSave = false;
+          this.toastr.error(' خطأ في التعديل !');
+        }
+      );
+    }
+  }
+
+
+}

src/app/dashboard/contact-us/contact-us-list/contact-us-list.component.html

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

src/app/dashboard/contact-us/contact-us-list/contact-us-list.component.ts

@@ -0,0 +1,127 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-contact-us-list',
+  templateUrl: './contact-us-list.component.html',
+  styleUrls: ['./contact-us-list.component.css']
+})
+export class ContactUsListComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+    contacUsList = [];
+    pages= [];
+    pageId: number;
+    contacUsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 32) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == "edit_contact_us"){
+                      this.authSer.showEditBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no contact_us');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['contactUsId'];
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.contacUsList = responce['contact_us'];
+          this.contacUsList[0].field = this.contacUsList[0].field.substring(0,50) + '........';
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } //ngOnInit
+
+          //make all checkbox of user checked
+          selectAll() {
+          for (var i = 0; i < this.contacUsList.length; i++) {
+            this.contacUsList[i].selected = this.selectedAll;
+          }
+        };
+
+        checkIfAllSelected() {
+          this.selectedAll = this.contacUsList.every(function(item:any) {
+            return item.selected == true;
+          });
+        };
+
+
+      //edit function
+      onEdit(editTabID) {
+      // localStorage.setItem('editcontactUsIdStorage', editTabID);
+
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/contactUs/edit/' + editTabID]);
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/contactUs/edit/' + editTabID);
+      };
+
+
+
+  }

src/app/dashboard/dashboard-routing.ts

@@ -40,6 +40,20 @@ import { UserReportComponent } from './users/user-report/user-report.component';
 import { RoleReportComponent } from './roles/role-report/role-report.component';
 import { ReportListComponent } from './report-list/report-list.component';
 import { EventsComponent } from './events/events.component';
+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 { 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';
 
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -96,9 +110,28 @@ const dashboardRouting: Routes = [
     {path: 'userreport/:reportUserId', component: UserReportComponent, canActivate: [AuthGuard]},
     {path: 'roleReport/:roleReportId', component: RoleReportComponent, canActivate: [AuthGuard]},
     {path: 'userInRoleReport/:userRoleReportId', component: RoleReport2Component, canActivate: [AuthGuard]},
-    {path: 'reportList/:reportName', component: ReportListComponent},
-    {path: 'advertisimentList/:adverId', component: AdvertisimentComponent},
-    {path: 'advertisiment/:typeAdver', component: AddAdverComponent},
+    {path: 'reportList/:reportName', component: ReportListComponent , canActivate: [AuthGuard]},
+    {path: 'advertisimentList/:adverId', component: AdvertisimentComponent , canActivate: [AuthGuard]},
+    {path: 'advertisiment/:typeAdver', component: AddAdverComponent , canActivate: [AuthGuard]},
+    {path: 'barEventsList/:barEventId', component: BarEventsListComponent , canActivate: [AuthGuard]},
+    {path: 'barEvent/:typeEventBar', component: AddBarEventComponent , canActivate: [AuthGuard]},
+    {path: 'contactUsList/:contactUsId', component: ContactUsListComponent , canActivate: [AuthGuard]},
+    {path: 'contactUs/:typeContactUs/:contactId', component: AddContactUsComponent , canActivate: [AuthGuard]},
+    {path: 'visitingTimesList/:visitingTimesId', component: VisitingTimesListComponent , canActivate: [AuthGuard]},
+    {path: 'visitingTime/:typeVisitingTime/:visitingTimeId', component: AddVisitingTimeComponent , canActivate: [AuthGuard]},
+    {path: 'eventCalendarsList/:eventCalendarsId', component: EventCalendarsListComponent , canActivate: [AuthGuard]},
+    {path: 'addEventCalendar', component: AddEventCalendarComponent, canActivate: [AuthGuard] },
+    {path: 'eventCalendar/:typeEventCalendar/:eventCalendarId', component: AddEventCalendarComponent , canActivate: [AuthGuard]},
+    {path: 'externalAchievementsList/:externalAchievementsListIds', component: ExternalAchievementsListComponent , canActivate: [AuthGuard]},
+    {path: 'addExternalAchievement', component: AddExternalAchievementComponent, canActivate: [AuthGuard] },
+    {path: 'externalAchievement/:typeExternalAchievement/:externalAchievementId', component: AddExternalAchievementComponent , canActivate: [AuthGuard]},
+    {path: 'statisticsList/:statisticsListIds', component: StatisticsListComponent , canActivate: [AuthGuard]},
+    {path: 'addStatistic', component: AddStatisticComponent, canActivate: [AuthGuard] },
+    {path: 'statistic/:typeStatistic/:statisticId', component: AddStatisticComponent , canActivate: [AuthGuard]},
+    {path: 'advertisingList/:advertisingListIds', component: AdvertisingServicesListComponent , canActivate: [AuthGuard]},
+    {path: 'addAdvertising', component: AddAdvertisingServiceComponent, canActivate: [AuthGuard] },
+    {path: 'advertising/:typeAdvertising/:advertisingId', component: AddAdvertisingServiceComponent , canActivate: [AuthGuard]},
+
   ]},
 ];
 
@@ -114,4 +147,4 @@ const dashboardRouting: Routes = [
 
 export class DashBoardRouting {
 
-}
+}

src/app/dashboard/dashboard.module.ts

@@ -1,3 +1,14 @@
+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';
@@ -79,6 +90,9 @@ import { RoleReportComponent } from './roles/role-report/role-report.component';
 import { ReportListComponent } from './report-list/report-list.component';
 
 import { UserService } from '../shared/user.service';
+import { VisitingTimesListComponent } from './visiting-times/visiting-times-list/visiting-times-list.component';
+import { ExternalAchievementsListComponent } from './external-achievements/external-achievements-list/external-achievements-list.component';
+import { StatisticsListComponent } from './statistics/statistics-list/statistics-list.component';
 // import { NumberDirective } from './number.directive';
 // import { EnglishDirective } from './english.directive';
 
@@ -131,9 +145,20 @@ import { UserService } from '../shared/user.service';
         HigriDateComponent,
         AdvertisimentComponent,
         AddAdverComponent,
-        // NumberDirective,
-        // EnglishDirective,
-        //NumberDerictiveDirective,
+        BarEventsListComponent,
+        AddBarEventComponent,
+        ContactUsListComponent,
+        AddContactUsComponent,
+        VisitingTimesListComponent,
+        AddVisitingTimeComponent,
+        EventCalendarsListComponent,
+        AddEventCalendarComponent,
+        ExternalAchievementsListComponent,
+        AddExternalAchievementComponent,
+        StatisticsListComponent,
+        AddStatisticComponent,
+        AdvertisingServicesListComponent,
+        AddAdvertisingServiceComponent,
     ],
     imports: [
         CommonModule,
@@ -162,7 +187,7 @@ import { UserService } from '../shared/user.service';
         ExternalSerService,
         AchievementsService,
         InternalSerService,
-        DashboardService, 
+        DashboardService,
     ],
 })
 

src/app/dashboard/event-calendars/add-event-calendar/add-event-calendar.component.html

@@ -0,0 +1,81 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> العنوان باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="title" ngModel [ngModel]="eventCalendar.title" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name_en" style="float: right; margin-right: 5px">العنوان باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" name="title_en" ngModel [ngModel]="eventCalendar.title_en" #name="ngModel" required/>
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> الوصف باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description" ngModel [ngModel]="eventCalendar.description" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px">الوصف باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description_en" ngModel [ngModel]="eventCalendar.description_en" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-4" >
+                <label for="event_time" style="float: right;margin-right: 5px"> وقت الحدث <span class="spanReqired-w">*</span></label>
+                <div class="form-group">
+                  <input class="form-control" type="date" id="start" name="event_time" ngModel [ngModel]="eventCalendar.event_time" required >
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" ngModel [ngModel]="eventCalendar.status" id="status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/event-calendars/add-event-calendar/add-event-calendar.component.ts

@@ -0,0 +1,119 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-add-event-calendar',
+  templateUrl: './add-event-calendar.component.html',
+  styleUrls: ['./add-event-calendar.component.css']
+})
+export class AddEventCalendarComponent implements OnInit {
+
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+    typeMode:boolean = false; //default false for create page
+    typeLink: string;
+    eventCalendarId:number;
+    checkDisabledSave:boolean = false;
+
+    eventCalendar = {
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+      event_time: '',
+      status: 1,
+    };
+
+    ngOnInit() {
+
+      this.route.params.subscribe(
+        (params: Params) => {
+          console.log(params)
+          if(params['typeEventCalendar'] == 'add'){
+            this.typeMode = false;
+            this.typeLink = 'إنشاء حدث';
+          } else if(params['typeEventCalendar'] == 'edit') {
+            this.spinner.show();
+            this.typeMode = true;
+           this.eventCalendarId = parseInt(params.eventCalendarId);
+            this.typeLink = 'تعديل حدث';
+            this.dashboardSer.getItemData(this.eventCalendarId, 'eventCalendar').subscribe(
+              (responce) => {
+                console.log(responce);
+                this.eventCalendar = responce['event_calendar'];
+                console.log(this.eventCalendar);
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+
+          } else {
+            this.toastr.warning('Catch Error Go To Home !');
+          }
+        }
+      );
+
+
+    }//ngOnInit
+
+
+
+      onSubmitted() {
+        this.checkDisabledSave = true;
+        const dataFormEventBar = this.dataForm.value;
+        console.log(dataFormEventBar);
+
+
+
+        if(this.typeMode) {
+
+          this.dashboardSer.editItem(dataFormEventBar, this.eventCalendarId, 'eventCalendar').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم التعديل بنجاح ');
+              this.checkDisabledSave = false;
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              this.checkDisabledSave = false;
+              this.toastr.error(' خطأ في التعديل !');
+            }
+          );
+        } else {
+
+          this.dashboardSer.addItem(dataFormEventBar,'eventCalendar').subscribe(
+            (responce) => {
+              this.toastr.success('تم الاضافه بنجاح');
+              this.checkDisabledSave = false;
+              console.log(responce);
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              this.checkDisabledSave = false;
+              this.toastr.error('خطأ في الاضافه');
+            }
+          );
+        }
+      }
+
+
+
+}

src/app/dashboard/event-calendars/event-calendars-list/event-calendars-list.component.html

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

src/app/dashboard/event-calendars/event-calendars-list/event-calendars-list.component.ts

@@ -0,0 +1,256 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-event-calendars-list',
+  templateUrl: './event-calendars-list.component.html',
+  styleUrls: ['./event-calendars-list.component.css']
+})
+export class EventCalendarsListComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+    eventCalendarsList = [];
+    pages= [];
+    pageId: number;
+    eventCalendarsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 25) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == "add_event_calendar"){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "edit_event_calendar"){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "delete_event_calendars"){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no event calendars');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['eventCalendarsId'];
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.eventCalendarsList = responce['event_calendars'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } //ngOnInit
+
+    //make all checkbox of user checked
+    selectAll() {
+    for (var i = 0; i < this.eventCalendarsList.length; i++) {
+      this.eventCalendarsList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.eventCalendarsList.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+
+  //filtter function
+  filtterFunc(data) {
+  this.eventCalendarsList = [];
+  console.log(data.target.value);
+  const dataSearch = data.target.value;
+  this.currentPage = 1;
+  console.log('search curent page', this.currentPage);
+  this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.eventCalendarsList = responce['event_calendars'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log('filtter count', this.count);
+      console.log('filtter perPagePAgenation', this.perPagePagenation);
+    },
+    (error) => {
+      console.log(error)
+    }
+  );
+};
+
+//change page
+onPageChange(pagenationNumber) {
+this.spinner.show();
+this.currentPage = pagenationNumber;
+this.eventCalendarsList = [];
+//console.log(pagenationNumber);
+//console.log(this.pageId);
+this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+(responce) => {
+  console.log(responce);
+  this.eventCalendarsList = responce['event_calendars'];
+  this.count = responce['count'];
+  this.perPagePagenation = responce['per_page'];
+  console.log(this.eventCalendarsList);
+  this.spinner.hide();
+},
+(error) => {
+  console.log(error);
+  this.spinner.hide();
+}
+);
+};
+
+
+//determine the list count from select element
+onGetValue(event) {
+this.spinner.show();
+this.eventCalendarsList = [];
+this.dataTableNumber = event.target.value;
+this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+  (responce) => {
+    console.log(responce);
+    this.eventCalendarsList = responce['event_calendars'];
+    this.count = responce['count'];
+    this.perPagePagenation = responce['per_page'];
+    this.spinner.hide();
+  },
+  (error) => {
+    console.log(error);
+    this.spinner.hide();
+  }
+);
+}
+
+onDelete() {
+
+  this.eventCalendarsListIds = [];
+  for(let i = 0; i < this.eventCalendarsList.length; i++) {
+    if(this.eventCalendarsList[i].selected == true) {
+      this.eventCalendarsListIds.push(this.eventCalendarsList[i].id);
+    }
+  }
+
+  console.log(this.eventCalendarsListIds);
+
+  if(this.eventCalendarsListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+      <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+      `)
+      .open();
+
+      dialogRef.result
+      .then( result =>
+        this.dashboardSer.deleteItem(this.eventCalendarsListIds, this.pageId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الحذف');
+            this.spinner.show();
+            this.eventCalendarsList = [];
+            this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.eventCalendarsList = responce['event_calendars'];
+                this.count = responce['count'];
+                this.perPagePagenation = responce['per_page'];
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              }
+            );
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          },
+        )
+      );
+    } else {
+      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+    }
+  };
+
+  //add function
+  onAdd() {
+  console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addEventCalendar');
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addEventCalendar']);
+}
+
+//edit function
+onEdit(editTabID) {
+// localStorage.setItem('editeventCalendarIdStorage', editTabID);
+this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/eventCalendar/edit/' + editTabID]);
+console.log('service/' + this.userLoginId + '/' + this.serviceId + '/eventCalendar/edit/' + editTabID);
+};
+
+
+}

src/app/dashboard/external-achievements/add-external-achievement/add-external-achievement.component.html

@@ -0,0 +1,99 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الإسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="externalAchievement.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الإسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="externalAchievement.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> المحتوي باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description" ngModel [ngModel]="externalAchievement.description" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12" style="margin:20px 0">
+                <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px">المحتوي باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description_en" ngModel [ngModel]="externalAchievement.description_en" required>
+                  </quill-editor>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4" >
+                <label for="achievement_time" style="float: right;margin-right: 5px"> تاريخ الإنجاز<span class="spanReqired-w">*</span></label>
+
+                <div class="hjri_time" *ngIf='bindingDateSplit && typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
+                </div>
+                <div class="hjri_time" *ngIf='!typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" ></app-higri-date>
+                </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]="externalAchievement.ranking" id="ranking" required>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="10000">المزيد</option>
+                  </select>
+                  <!-- <span *ngIf="!name.valid && name.touched"></span>  -->
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" ngModel [ngModel]="externalAchievement.status" id="status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/external-achievements/add-external-achievement/add-external-achievement.component.ts

@@ -0,0 +1,136 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-add-external-achievement',
+  templateUrl: './add-external-achievement.component.html',
+  styleUrls: ['./add-external-achievement.component.css']
+})
+export class AddExternalAchievementComponent implements OnInit {
+
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+    typeMode:boolean = false; //default false for create page
+    typeLink: string;
+    externalAchievementId:number;
+    checkDisabledSave:boolean = false;
+
+    externalAchievement = {
+      name: '',
+      name_en: '',
+      achievement_time: '',
+      description: '',
+      description_en: '',
+      ranking: '',
+      status: 1,
+    };
+
+    higriDateVal = "";
+    bindingDateSplit:any;
+    ngOnInit() {
+
+      this.route.params.subscribe(
+        (params: Params) => {
+          console.log(params)
+          if(params['typeExternalAchievement'] == 'add'){
+            this.typeMode = false;
+            this.typeLink = 'إنشاء إنجاز';
+          } else if(params['typeExternalAchievement'] == 'edit') {
+            this.spinner.show();
+            this.typeMode = true;
+           this.externalAchievementId = parseInt(params.externalAchievementId);
+            this.typeLink = 'تعديل إنجاز';
+            this.dashboardSer.getItemData(this.externalAchievementId, 'externalAchievement').subscribe(
+              (responce) => {
+                console.log(responce);
+                this.externalAchievement = responce['external_achievement'];
+                const date = responce['external_achievement'].achievement_time.split('-');
+
+                this.bindingDateSplit = {
+                  year: parseInt(date[0]),
+                  month: parseInt(date[1]),
+                  day: parseInt(date[2])
+                };
+
+                this.higriDateVal = this.bindingDateSplit.year + '-' + this.bindingDateSplit.month + '-' + this.bindingDateSplit.day;
+
+                console.log(this.externalAchievement);
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+
+          } else {
+            this.toastr.warning('Catch Error Go To Home !');
+          }
+        }
+      );
+
+
+    }//ngOnInit
+
+    //get value date from child component
+    public getDate(date: any):void {
+      console.log( date);
+      this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
+      console.log('higrii date', this.higriDateVal);
+    }
+
+          onSubmitted() {
+            this.checkDisabledSave = true;
+            const dataFormEventBar = this.dataForm.value;
+            dataFormEventBar['achievement_time']  = this.higriDateVal;
+            console.log(dataFormEventBar);          
+
+            if(this.typeMode) {
+
+              this.dashboardSer.editItem(dataFormEventBar, this.externalAchievementId, 'externalAchievement').subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.toastr.success('تم التعديل بنجاح ');
+                  this.checkDisabledSave = false;
+                  this.location.back();
+                },
+                (error) => {
+                  console.log(error);
+                  this.checkDisabledSave = false;
+                  this.toastr.error(' خطأ في التعديل !');
+                }
+              );
+            } else {
+
+              this.dashboardSer.addItem(dataFormEventBar,'externalAchievement').subscribe(
+                (responce) => {
+                  this.toastr.success('تم الاضافه بنجاح');
+                  this.checkDisabledSave = false;
+                  console.log(responce);
+                  this.location.back();
+                },
+                (error) => {
+                  console.log(error);
+                  this.checkDisabledSave = false;
+                  this.toastr.error('خطأ في الاضافه');
+                }
+              );
+            }
+          }
+
+
+
+}

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

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

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

@@ -0,0 +1,256 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-external-achievements-list',
+  templateUrl: './external-achievements-list.component.html',
+  styleUrls: ['./external-achievements-list.component.css']
+})
+export class ExternalAchievementsListComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+    externalAchievementsList = [];
+    pages= [];
+    pageId: number;
+    externalAchievementsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 27) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == "add_external_achievement"){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "edit_external_achievement"){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "delete_external_achievements"){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no achievements ');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['externalAchievementsListIds'];
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.externalAchievementsList = responce['external_achievements'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } //ngOnInit
+
+
+        //make all checkbox of user checked
+        selectAll() {
+        for (var i = 0; i < this.externalAchievementsList.length; i++) {
+          this.externalAchievementsList[i].selected = this.selectedAll;
+        }
+      };
+
+      checkIfAllSelected() {
+        this.selectedAll = this.externalAchievementsList.every(function(item:any) {
+          return item.selected == true;
+        });
+      };
+
+      //filtter function
+      filtterFunc(data) {
+      this.externalAchievementsList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.externalAchievementsList = responce['external_achievements'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+    };
+
+    //change page
+    onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.externalAchievementsList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.externalAchievementsList = responce['external_achievements'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log(this.externalAchievementsList);
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+    );
+    };
+
+
+    //determine the list count from select element
+    onGetValue(event) {
+    this.spinner.show();
+    this.externalAchievementsList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.externalAchievementsList = responce['external_achievements'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    }
+
+    onDelete() {
+
+      this.externalAchievementsListIds = [];
+      for(let i = 0; i < this.externalAchievementsList.length; i++) {
+        if(this.externalAchievementsList[i].selected == true) {
+          this.externalAchievementsListIds.push(this.externalAchievementsList[i].id);
+        }
+      }
+
+      console.log(this.externalAchievementsListIds);
+
+      if(this.externalAchievementsListIds.length > 0) {
+        const dialogRef = this.modal.alert()
+        .size('sm')
+        .showClose(true)
+        .title('تأكيد الحذف')
+        .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+          .open();
+
+          dialogRef.result
+          .then( result =>
+            this.dashboardSer.deleteItem(this.externalAchievementsListIds, this.pageId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.externalAchievementsList = [];
+                this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.externalAchievementsList = responce['external_achievements'];
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                    this.spinner.hide();
+                  }
+                );
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              },
+            )
+          );
+        } else {
+          this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+        }
+      };
+
+      //add function
+      onAdd() {
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addExternalAchievement');
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addExternalAchievement']);
+    }
+
+    //edit function
+    onEdit(editTabID) {
+    // localStorage.setItem('editeventCalendarIdStorage', editTabID);
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/externalAchievement/edit/' + editTabID]);
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/externalAchievement/edit/' + editTabID);
+    };
+
+}

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

@@ -66,7 +66,7 @@
                       <option value="0">غير فعال</option>
                     </select>
                   </div>
-                 
+
                   <div class="col-6">
                     <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>

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

@@ -34,11 +34,11 @@ export class ServiceItemComponent implements OnInit {
       this.isHovering = false;
       console.log(this.isHovering);
   }
-  
+
   constructor( private authService:AuthServiceService,
-    private userSer: UserService, 
-    private router: Router, 
-    private route: ActivatedRoute, 
+    private userSer: UserService,
+    private router: Router,
+    private route: ActivatedRoute,
     private userservice: UserService,
     private authSer: AuthServiceService,
     private spinner: NgxSpinnerService) { }
@@ -83,7 +83,7 @@ export class ServiceItemComponent implements OnInit {
             this.pages[i] = responce['pages'][i];
           }
           for(let i = 6; i < responce['pages'].length; i++) {
-            this.extraPages.push(responce['pages'][i]); 
+            this.extraPages.push(responce['pages'][i]);
           }
           this.authSer.showMoreLinks = true;
         } else {
@@ -142,7 +142,7 @@ export class ServiceItemComponent implements OnInit {
               this.pages[i] = responce['pages'][i];
             }
             for(let i = 6; i < responce['pages'].length; i++) {
-              this.extraPages.push(responce['pages'][i]); 
+              this.extraPages.push(responce['pages'][i]);
             }
             this.authSer.showMoreLinks = true;
           } else {
@@ -186,6 +186,27 @@ export class ServiceItemComponent implements OnInit {
           } else if(this.pages[0].id == 30) {
             console.log('/service/' + this.userId + '/' + service.id + '/hospitalsList/' + this.pages[0].id);
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/hospitalsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 21) {
+            console.log('/service/' + this.userId + '/' + service.id + '/barEventsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/barEventsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 32) {
+            console.log('/service/' + this.userId + '/' + service.id + '/contactUsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/contactUsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 23) {
+            console.log('/service/' + this.userId + '/' + service.id + '/visitingTimesList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/visitingTimesList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 25) {
+            console.log('/service/' + this.userId + '/' + service.id + '/eventCalendarsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/eventCalendarsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 27) {
+            console.log('/service/' + this.userId + '/' + service.id + '/externalAchievementsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/externalAchievementsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 26) {
+            console.log('/service/' + this.userId + '/' + service.id + '/statisticsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/statisticsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 22) {
+            console.log('/service/' + this.userId + '/' + service.id + '/advertisingList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/advertisingList/' + this.pages[0].id]);
           }
           this.spinner.hide();
         },
@@ -206,6 +227,7 @@ export class ServiceItemComponent implements OnInit {
        this.pages[i].active = 0;
       }
     }
+
     console.log(dataPage);
     if(dataPage.id == 1) {
       this.router.navigate(['users/' + dataPage.id], {relativeTo: this.route});
@@ -243,6 +265,20 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['mainMenuList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 24) {
       this.router.navigate(['advertisimentList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 21) {
+      this.router.navigate(['barEventsList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 32) {
+      this.router.navigate(['contactUsList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 23) {
+      this.router.navigate(['visitingTimesList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 25) {
+      this.router.navigate(['eventCalendarsList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 27) {
+      this.router.navigate(['externalAchievementsList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 26) {
+      this.router.navigate(['statisticsList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 22) {
+      this.router.navigate(['advertisingList/' + dataPage.id], {relativeTo: this.route});
     }
   }
 
@@ -253,5 +289,5 @@ export class ServiceItemComponent implements OnInit {
   goToHome() {
     this.router.navigate(['services/' + this.userId]);
   }
-  
+
 }

src/app/dashboard/statistics/add-statistic/add-statistic.component.html

@@ -0,0 +1,82 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الإسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="statistic.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الإسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="statistic.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> رقم الإحصائية<span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="value" name="value" ngModel [ngModel]="statistic.value" #name="ngModel" required/>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label style="float:right">الشهر <span class="spanReqired-w">*</span></label>
+                  <!-- <select class="form-control"  ngModel [ngModel]="statistic.month_id">
+                    <option value="1">فعال</option>
+                    <option value="0">غير فعال</option>
+                    <option *ngFor="let month of months; let i = index" [value]="month.id">{{month.name}}</option>
+                  </select> -->
+                  <input type="text" class="form-control" id="month_id" name="month_id" ngModel [ngModel]="statistic.month_id" #name="ngModel" required/>
+
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> السنة<span class="spanReqired-w">*</span></label>
+                  <input type="number" class="form-control" placeholder="2019"  min="1950" max="2099" step="1"  id="year" name="year" ngModel [ngModel]="statistic.year" #name="ngModel" required/>
+                </div>
+              </div>
+
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" ngModel [ngModel]="statistic.status" id="status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/statistics/add-statistic/add-statistic.component.ts

@@ -0,0 +1,127 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-add-statistic',
+  templateUrl: './add-statistic.component.html',
+  styleUrls: ['./add-statistic.component.css']
+})
+export class AddStatisticComponent implements OnInit {
+
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+
+    months = [];
+    typeMode:boolean = false; //default false for create page
+    typeLink: string;
+    statisticId:number;
+    checkDisabledSave:boolean = false;
+
+    statistic = {
+      name: '',
+      name_en: '',
+      value: '',
+      month_id: '',
+      year: '',
+      status: 1,
+    };
+
+
+    ngOnInit() {
+
+      //get adminstration
+      this.userSer.getMonth().subscribe(
+        (responce) => {
+          console.log(responce);
+          this.months = responce['months'];
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+
+      this.route.params.subscribe(
+        (params: Params) => {
+          console.log(params)
+          if(params['typeStatistic'] == 'add'){
+            this.typeMode = false;
+            this.typeLink = 'إنشاء احصائية';
+          } else if(params['typeStatistic'] == 'edit') {
+            this.spinner.show();
+            this.typeMode = true;
+           this.statisticId = parseInt(params.statisticId);
+            this.typeLink = 'تعديل احصائية';
+            this.dashboardSer.getItemData(this.statisticId, 'statistic').subscribe(
+              (responce) => {
+                console.log(responce);
+                this.statistic = responce['statistic'];
+                console.log(this.statistic);
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+
+          } else {
+            this.toastr.warning('Catch Error Go To Home !');
+          }
+        }
+      );
+
+
+    }//ngOnInit
+
+    onSubmitted() {
+      this.checkDisabledSave = true;
+      const dataFormEventBar = this.dataForm.value;
+      console.log(dataFormEventBar);
+
+      if(this.typeMode) {
+
+        this.dashboardSer.editItem(dataFormEventBar, this.statisticId, 'statistic').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح ');
+            this.checkDisabledSave = false;
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.checkDisabledSave = false;
+            this.toastr.error(' خطأ في التعديل !');
+          }
+        );
+      } else {
+
+        this.dashboardSer.addItem(dataFormEventBar,'statistic').subscribe(
+          (responce) => {
+            this.toastr.success('تم الاضافه بنجاح');
+            this.checkDisabledSave = false;
+            console.log(responce);
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.checkDisabledSave = false;
+            this.toastr.error('خطأ في الاضافه');
+          }
+        );
+      }
+    }
+
+}

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

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

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

@@ -0,0 +1,257 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-statistics-list',
+  templateUrl: './statistics-list.component.html',
+  styleUrls: ['./statistics-list.component.css']
+})
+export class StatisticsListComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+    statisticsList = [];
+    pages= [];
+    pageId: number;
+    statisticsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 26) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == "add_statistic"){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "edit_statistic"){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "delete_statistics"){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no statistics ');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['statisticsListIds'];
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.statisticsList = responce['statistics'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } //ngOnInit
+
+
+
+            //make all checkbox of user checked
+            selectAll() {
+            for (var i = 0; i < this.statisticsList.length; i++) {
+              this.statisticsList[i].selected = this.selectedAll;
+            }
+          };
+
+          checkIfAllSelected() {
+            this.selectedAll = this.statisticsList.every(function(item:any) {
+              return item.selected == true;
+            });
+          };
+
+          //filtter function
+          filtterFunc(data) {
+          this.statisticsList = [];
+          console.log(data.target.value);
+          const dataSearch = data.target.value;
+          this.currentPage = 1;
+          console.log('search curent page', this.currentPage);
+          this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.statisticsList = responce['statistics'];
+              this.count = responce['count'];
+              this.perPagePagenation = responce['per_page'];
+              console.log('filtter count', this.count);
+              console.log('filtter perPagePAgenation', this.perPagePagenation);
+            },
+            (error) => {
+              console.log(error)
+            }
+          );
+        };
+
+        //change page
+        onPageChange(pagenationNumber) {
+        this.spinner.show();
+        this.currentPage = pagenationNumber;
+        this.statisticsList = [];
+        //console.log(pagenationNumber);
+        //console.log(this.pageId);
+        this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.statisticsList = responce['statistics'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.statisticsList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+        );
+        };
+
+
+        //determine the list count from select element
+        onGetValue(event) {
+        this.spinner.show();
+        this.statisticsList = [];
+        this.dataTableNumber = event.target.value;
+        this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.statisticsList = responce['statistics'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+        }
+
+        onDelete() {
+
+          this.statisticsListIds = [];
+          for(let i = 0; i < this.statisticsList.length; i++) {
+            if(this.statisticsList[i].selected == true) {
+              this.statisticsListIds.push(this.statisticsList[i].id);
+            }
+          }
+
+          console.log(this.statisticsListIds);
+
+          if(this.statisticsListIds.length > 0) {
+            const dialogRef = this.modal.alert()
+            .size('sm')
+            .showClose(true)
+            .title('تأكيد الحذف')
+            .body(`
+              <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+              `)
+              .open();
+
+              dialogRef.result
+              .then( result =>
+                this.dashboardSer.deleteItem(this.statisticsListIds, this.pageId).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.toastr.success('تم الحذف');
+                    this.spinner.show();
+                    this.statisticsList = [];
+                    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                      (responce) => {
+                        console.log(responce);
+                        this.statisticsList = responce['statistics'];
+                        this.count = responce['count'];
+                        this.perPagePagenation = responce['per_page'];
+                        this.spinner.hide();
+                      },
+                      (error) => {
+                        console.log(error);
+                        this.spinner.hide();
+                      }
+                    );
+                  },
+                  (error) => {
+                    console.log(error);
+                    this.spinner.hide();
+                  },
+                )
+              );
+            } else {
+              this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+            }
+          };
+
+          //add function
+          onAdd() {
+          console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addStatistic');
+          this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addStatistic']);
+        }
+
+        //edit function
+        onEdit(editTabID) {
+        // localStorage.setItem('editeventCalendarIdStorage', editTabID);
+        this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/statistic/edit/' + editTabID]);
+        console.log('service/' + this.userLoginId + '/' + this.serviceId + '/statistic/edit/' + editTabID);
+        };
+
+}

src/app/dashboard/visiting-times/add-visiting-time/add-visiting-time.component.html

@@ -0,0 +1,66 @@
+<div class="addHospital-w">
+  <div class="container">
+    <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 activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+      </div>
+    </div>
+    <div class="containerContent-w">
+
+      <div class="row">
+        <div class="col-12">
+
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> العنوان باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="visitingTime.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name_en" style="float: right; margin-right: 5px">العنوان باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="visitingTime.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" [ngModel]="visitingTime.status" id="status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4" >
+                <label for="event_time" style="float: right;margin-right: 5px"> موعد البدء <span class="spanReqired-w">*</span></label>
+                <input  class="form-control" type="time" name="open_time" ngModel [ngModel]="visitingTime.open_time">
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4" >
+                <label for="event_time" style="float: right;margin-right: 5px"> موعد الانتهاء <span class="spanReqired-w">*</span></label>
+                <input  class="form-control" type="time" name="close_time" ngModel [ngModel]="visitingTime.close_time">
+              </div>
+
+
+
+              <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
+            </div>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/visiting-times/add-visiting-time/add-visiting-time.component.ts

@@ -0,0 +1,96 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-add-visiting-time',
+  templateUrl: './add-visiting-time.component.html',
+  styleUrls: ['./add-visiting-time.component.css']
+})
+export class AddVisitingTimeComponent implements OnInit {
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer:UserService,
+    private authSer:AuthServiceService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private dashboardSer: DashboardService,
+    private location: Location,
+    private route:ActivatedRoute) { }
+    typeMode:boolean = false; //default false for create page
+    typeLink: string;
+    visitingTimeId:number;
+    checkDisabledSave:boolean = false;
+
+    visitingTime = {
+      name: '',
+      name_en: '',
+      open_time: '',
+      close_time: '',
+      status: 1,
+    };
+
+    ngOnInit() {
+      this.route.params.subscribe(
+        (params: Params) => {
+          if(params['typeVisitingTime'] == 'add'){
+            this.typeMode = false;
+            this.typeLink = 'إنشاء موعد';
+          } else if(params['typeVisitingTime'] == 'edit') {
+            this.spinner.show();
+            this.typeMode = true;
+           this.visitingTimeId = parseInt(localStorage.getItem('editvisitingTimeIdStorage'));
+            this.typeLink = 'تعديل موعد';
+            this.dashboardSer.getItemData(this.visitingTimeId, 'visitingTime').subscribe(
+              (responce) => {
+                console.log(responce);
+                this.visitingTime = responce['visiting_time'];
+                console.log(this.visitingTime);
+
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+
+          } else {
+            this.toastr.warning('Catch Error Go To Home !');
+          }
+        }
+      );
+
+
+    }//ngOnInit
+
+
+    onSubmitted() {
+      this.checkDisabledSave = true;
+      const dataFormContactUs = this.dataForm.value;
+
+      console.log(dataFormContactUs)
+      if(this.typeMode) {
+
+        this.dashboardSer.editItem(dataFormContactUs, this.visitingTimeId, 'visitingTime').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح ');
+            this.checkDisabledSave = false;
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.checkDisabledSave = false;
+            this.toastr.error(' خطأ في التعديل !');
+          }
+        );
+      }
+    }
+
+}

src/app/dashboard/visiting-times/visiting-times-list/visiting-times-list.component.html

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

src/app/dashboard/visiting-times/visiting-times-list/visiting-times-list.component.ts

@@ -0,0 +1,256 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-visiting-times-list',
+  templateUrl: './visiting-times-list.component.html',
+  styleUrls: ['./visiting-times-list.component.css']
+})
+export class VisitingTimesListComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+    visitingTimesList = [];
+    pages= [];
+    pageId: number;
+    visitingTimesListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+
+    ngOnInit() {
+      //init values of permisions
+      this.authSer.showAddBtn = false;
+      this.authSer.showDeleteBtn = false;
+      this.authSer.showEditBtn = false;
+      this.authSer.showPermissionsBtn = false;
+      //show / hide notification search in header
+      this.authSer.notificationLogin = true;
+      this.authSer.showSearchHeader = false;
+      this.authSer.showHeaderLogin = false;
+      this.authSer.showHeaderDashBoard = true;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.internalHeader = false;
+      //to show / hide permissions
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 23) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == "add_visiting_time"){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "edit_visiting_time"){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == "delete_visiting_times"){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no events');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId = parmas['visitingTimesId'];
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.visitingTimesList = responce['visiting_times'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } //end ngOnInit
+
+
+        //make all checkbox of user checked
+        selectAll() {
+        for (var i = 0; i < this.visitingTimesList.length; i++) {
+          this.visitingTimesList[i].selected = this.selectedAll;
+        }
+      };
+
+      checkIfAllSelected() {
+        this.selectedAll = this.visitingTimesList.every(function(item:any) {
+          return item.selected == true;
+        });
+      };
+
+      //filtter function
+      filtterFunc(data) {
+      this.visitingTimesList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.visitingTimesList = responce['visiting_times'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+    };
+
+    //change page
+    onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.visitingTimesList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.visitingTimesList = responce['visiting_times'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log(this.visitingTimesList);
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+    );
+    };
+
+
+    //determine the list count from select element
+    onGetValue(event) {
+    this.spinner.show();
+    this.visitingTimesList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.visitingTimesList = responce['visiting_times'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    }
+
+    onDelete() {
+
+      this.visitingTimesListIds = [];
+      for(let i = 0; i < this.visitingTimesList.length; i++) {
+        if(this.visitingTimesList[i].selected == true) {
+          this.visitingTimesListIds.push(this.visitingTimesList[i].id);
+        }
+      }
+
+      console.log(this.visitingTimesListIds);
+
+      if(this.visitingTimesListIds.length > 0) {
+        const dialogRef = this.modal.alert()
+        .size('sm')
+        .showClose(true)
+        .title('تأكيد الحذف')
+        .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+          .open();
+
+          dialogRef.result
+          .then( result =>
+            this.dashboardSer.deleteItem(this.visitingTimesListIds, this.pageId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.visitingTimesList = [];
+                this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.visitingTimesList = responce['visiting_times'];
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                    this.spinner.hide();
+                  }
+                );
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              },
+            )
+          );
+        } else {
+          this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+        }
+      };
+
+      //add function
+      onAdd() {
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/visitingTime/add');
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/visitingTime/add']);
+    }
+
+    //edit function
+    onEdit(editTabID) {
+    alert(editTabID)
+    localStorage.setItem('editvisitingTimeIdStorage', editTabID);
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/visitingTime/edit/'+ editTabID]);
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/visitingTime/edit/'+ editTabID);
+    };
+
+}

src/app/servicesItems/services.component.ts

@@ -12,7 +12,7 @@ import { NgxSpinnerService } from 'ngx-spinner';
   styleUrls: ['./sercices.component.css']
 })
 
-export class ServicesComponent implements OnInit, OnDestroy {
+export class ServicesComponent implements OnInit {
 
   idUser: number; //id user
   myInnerHeight = window.innerHeight;
@@ -20,74 +20,74 @@ export class ServicesComponent implements OnInit, OnDestroy {
   pages = [];
 
   subscriptionUSer: Subscription;
-  constructor(private authService: AuthServiceService, 
-    private userservice: UserService, 
-    private route: ActivatedRoute, 
+  constructor(private authService: AuthServiceService,
+    private userservice: UserService,
+    private route: ActivatedRoute,
     private http: HttpClient, private router: Router,
     private spinner: NgxSpinnerService) { }
 
-  ngOnInit() {
-    this.spinner.show();//spinner
-    //show / hide notification search in header
-    this.authService.notificationLogin = true;
-    this.authService.showSearchHeader = false;
-    this.authService.showHeaderLogin = false;
-    this.authService.showHeaderDashBoard = true;
-    this.authService.showDashboardHeader = true;
-    this.authService.internalHeader = false;
+    ngOnInit() {
+      this.spinner.show();//spinner
+      //show / hide notification search in header
+      this.authService.notificationLogin = true;
+      this.authService.showSearchHeader = false;
+      this.authService.showHeaderLogin = false;
+      this.authService.showHeaderDashBoard = true;
+      this.authService.showDashboardHeader = true;
+      this.authService.internalHeader = false;
 
-    console.log(this.authService.isAuthenticated());
-    //get profile data
-    this.userservice.getUserDataProfile();
-    
-    //catch id user
-    this.subscriptionUSer =  this.route.params.subscribe(
-        (params: Params) => {
-          this.idUser = params['id'];
-        }
-      );
+      console.log(this.authService.isAuthenticated());
+      //get profile data
+      this.userservice.getUserDataProfile();
 
-      //get rules of users
-      this.userservice.getServicesData(this.idUser).subscribe(
-        (responce) => { 
-          this.services = responce['services'];
-          console.log(this.services);
-          this.spinner.hide();
-        },
-        (error) => {console.log(error)}
-      );
-  }
+      //catch id user
+      this.subscriptionUSer =  this.route.params.subscribe(
+      (params: Params) => {
+        this.idUser = params['id'];
+      }
+    );
 
-  getDataService(dataService){
+    //get rules of users
+    this.userservice.getServicesData(this.idUser).subscribe(
+    (responce) => {
+      this.services = responce['services'];
+      console.log(this.services);
+      this.spinner.hide();
+    },
+    (error) => {console.log(error)}
+  );
+}
 
-    console.log('dataServiccce', dataService);
-    console.log(dataService.id);
-    console.log(this.idUser);
+getDataService(dataService){
 
-    if(dataService.id == 1) {
-      //خدمه الصلاحيات
-      this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
-        (responce) => {
-          console.log(responce);
-        this.pages = responce['pages'];
-        //this.pages[0].active = 1;
-          console.log(this.pages);
-          if(this.pages[0].id == 1) {
-            console.log('/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id);
-            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id]);
-          }else if(this.pages[0].id == 2) {
-            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/roles/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 3) {
-            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/departments/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 4) {
-            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/sections/' + this.pages[0].id]);
-          } else if(this.pages[0].id == 5) {
-            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reports/' + this.pages[0].id]);
-          }
-          this.spinner.hide();
-        },
-        (error) => {console.log(error)}
-      );
+  console.log('dataServiccce', dataService);
+  console.log(dataService.id);
+  console.log(this.idUser);
+
+  if(dataService.id == 1) {
+    //خدمه الصلاحيات
+    this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.pages = responce['pages'];
+      //this.pages[0].active = 1;
+      console.log(this.pages);
+      if(this.pages[0].id == 1) {
+        console.log('/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id);
+        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id]);
+      }else if(this.pages[0].id == 2) {
+        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/roles/' + this.pages[0].id]);
+      } else if(this.pages[0].id == 3) {
+        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/departments/' + this.pages[0].id]);
+      } else if(this.pages[0].id == 4) {
+        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/sections/' + this.pages[0].id]);
+      } else if(this.pages[0].id == 5) {
+        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reports/' + this.pages[0].id]);
+      }
+      this.spinner.hide();
+    },
+    (error) => {console.log(error)}
+  );
 
     } else if(dataService.id == 6 || dataService.id == 2) {
       //خدمه اداره المحتوي
@@ -126,6 +126,27 @@ export class ServicesComponent implements OnInit, OnDestroy {
             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();
         },
@@ -134,8 +155,6 @@ export class ServicesComponent implements OnInit, OnDestroy {
     } 
   }
 
-  ngOnDestroy() {
-    this.subscriptionUSer.unsubscribe();
-  }
 
 }
+

src/app/shared/dashboard.service.ts

@@ -11,8 +11,8 @@ import { AuthServiceService } from './auth-service.service';
 
 export class DashboardService {
 
-  constructor(private http: HttpClient, 
-    private toastr: ToastrService, 
+  constructor(private http: HttpClient,
+    private toastr: ToastrService,
     private authService: AuthServiceService,
     private spinner: NgxSpinnerService) { }
 
@@ -57,6 +57,18 @@ export class DashboardService {
         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);
       }
     }
   
@@ -94,6 +106,27 @@ export class DashboardService {
         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);
       }
     }
   
@@ -114,6 +147,20 @@ export class DashboardService {
         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);
       }
   }
   
@@ -149,9 +196,22 @@ export class DashboardService {
         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});
       }
     
     };
 
 
+
 }

src/app/shared/user.service.ts

@@ -12,21 +12,21 @@ export class UserService {
 
   constructor(private http: HttpClient,
       private authService: AuthServiceService,
-      private toastr: ToastrService, 
+      private toastr: ToastrService,
       private spinner: NgxSpinnerService) { }
 
-  
-  //get profile data 
+
+  //get profile data
   getUserDataProfile() {
     this.http.get(this.authService.pathApi + '/profile').subscribe(
-      (responce) => { 
-        this.authService.setDataUser(responce); 
+      (responce) => {
+        this.authService.setDataUser(responce);
       },
       (error) => {console.log(error)},
     );
   }
 
-  //get services data user 
+  //get services data user
   getServicesData(id) {
     return this.http.get(this.authService.pathApi + '/get_user_services/' + id);
   }
@@ -42,6 +42,11 @@ export class UserService {
     return this.http.get(this.authService.pathApi + '/adminstrations_list');
   }
 
+  //get month
+  getMonth(){
+    return this.http.get(this.authService.pathApi + '/months_list');
+  }
+
   getDepartments(adminstrationId) {
     return this.http.get(this.authService.pathApi + '/admin_departments/' + adminstrationId);
   }
@@ -51,7 +56,7 @@ export class UserService {
     return this.http.get(this.authService.pathApi + '/countries_list');
   }
 
-  //get list data of page 
+  //get list data of page
   getPageData(id:number, currentPage, dataPageNumber) {
     console.log(this.authService.pathApi + '/page_list/' + id + '/' + currentPage + '/' + dataPageNumber + '/all');
     return this.http.get(this.authService.pathApi + '/page_list/' + id + '/' + currentPage + '/' + dataPageNumber + '/all');
@@ -70,12 +75,12 @@ export class UserService {
   getStaff(){
     return this.http.get(this.authService.pathApi + '/staff_list');
   }
-  //get specialization 
+  //get specialization
   getSpecialization() {
     return this.http.get(this.authService.pathApi + '/specialization_list');
   }
 
-  //add user 
+  //add user
   addUser(userForm, typePage: string){
     if(typePage == 'user'){
       return this.http.post(this.authService.pathApi + '/add_user', userForm);
@@ -87,9 +92,9 @@ export class UserService {
   //get user data
   onGetUserData(idUser:number, typePage: string){
     if(typePage == 'editUs') {
-      return this.http.get(this.authService.pathApi + '/get_user/' + idUser); 
+      return this.http.get(this.authService.pathApi + '/get_user/' + idUser);
     } else if(typePage == 'editJo') {
-      return this.http.get(this.authService.pathApi + '/get_join_us_user/' + idUser); 
+      return this.http.get(this.authService.pathApi + '/get_join_us_user/' + idUser);
     }
   }
 
@@ -107,51 +112,51 @@ export class UserService {
     return this.http.post(this.authService.pathApi + '/edit_profile', dataProfile);
   }
 
-  //get data of pagenation 
+  //get data of pagenation
   getUserListPagenation(pageNumber:number , pageId: number) {
     const page = pageNumber;
     const pageID = pageId;
     return this.http.get(this.authService.pathApi + '/page_list/' + pageID + '/' + page);
   }
 
-  //get data user from searchBar 
+  //get data user from searchBar
   getDataUSerSearchBar(data, pageId, pagenationNumber, dataPageNumber) {
     console.log('url', this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataPageNumber + '/all/' + data);
      return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataPageNumber + '/all/' + data);
   }
 
-  //delete user 
+  //delete user
   deleteUser(userIds, typePageId) {
     if(typePageId == 1){
       console.log(userIds);
       return this.http.post(this.authService.pathApi + '/delete_user' , {'users_id' : userIds});
-      
+
     } else if(typePageId == 9) {
       console.log(userIds);
       return this.http.post(this.authService.pathApi + '/delete_join_us_users' , {'users_id' : userIds});
     }
-    
+
   }
 
-  //get permission list 
+  //get permission list
   getPermissionList() {
     return this.http.get(this.authService.pathApi + '/permissions_list');
   }
 
-  //get roles list 
+  //get roles list
   getRolesList() {
    return this.http.get(this.authService.pathApi + '/roles_list');
   }
 
-  //get report data 
+  //get report data
   onGetReportData(user_id:number) {
     return this.http.get(this.authService.pathApi + '/report_user_permissions/' + user_id);
   }
 
-  //get indetities 
+  //get indetities
   onGetIdentities() {
     return this.http.get(this.authService.pathApi + '/identities_list');
   }
 
-  
+
 }