created two new components

src/app/dashboard/absorpation-plan/absorpation-list/absorpation-list.component.ts

@@ -211,6 +211,7 @@ export class AbsorpationListComponent implements OnInit {
     }
 
     console.log(this.absorpationListIds);
+    
     if(this.absorpationListIds.length > 0) {
       const dialogRef = this.modal.alert()
       .size('sm')

src/app/dashboard/dashboard-routing.ts

@@ -1,3 +1,6 @@
+import { LocationAddComponent } from './definition-of-location/location-add/location-add.component';
+import { LocationListComponent } from './definition-of-location/location-list/location-list.component';
+import { DefinitionAddComponent } from './definition-of-classification/definition-add/definition-add.component';
 import { FinalTraineeReportComponent } from './final-trainee-report/final-trainee-report.component';
 import { ExistingReportComponent } from './reports-existing-vehicles/existing-report/existing-report.component';
 import { VehicleMaintenanceAddComponent } from './vehicle-maintenance/vehicle-maintenance-add/vehicle-maintenance-add.component';
@@ -201,7 +204,16 @@ const dashboardRouting: Routes = [
     {path: 'existingReportVehicle', component: ExistingReportComponent, canActivate: [AuthGuard]},
     {path: 'VehicleReport/:typeReport', component: VehicleMovementReportComponent, canActivate: [AuthGuard]},
     {path: 'finalAccerditationReprot', component: FinalTraineeReportComponent, canActivate: [AuthGuard]},
-    {path: 'definitionClassificationList/:listPageId', component: DefinitionListComponent, canActivate: [AuthGuard]}
+    {path: 'definitionClassificationList/:listPageId', component: DefinitionListComponent, canActivate: [AuthGuard]},
+    {path: 'definitionClassification/add', component: DefinitionAddComponent, canActivate: [AuthGuard]},
+    {path: 'definitionClassification/edit/:editPageId', component: DefinitionAddComponent, canActivate: [AuthGuard]},
+    {path: 'definitionLocationList/:locatioListPageId', component: LocationListComponent, canActivate: [AuthGuard]},
+    {path: 'definitionLocation/add', component: LocationAddComponent, canActivate: [AuthGuard]},
+    {path: 'definitionLocation/edit/:locationEditPageId', component: LocationAddComponent, canActivate: [AuthGuard]},
+
+
+
+
   ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -129,6 +129,9 @@ import { ExistingReportComponent } from './reports-existing-vehicles/existing-re
 import { VehicleMovementReportComponent } from './vehicle-movement-report/vehicle-movement-report/vehicle-movement-report.component';
 import { FinalTraineeReportComponent } from './final-trainee-report/final-trainee-report.component';
 import { DefinitionListComponent } from './definition-of-classification/definition-list/definition-list.component';
+import { DefinitionAddComponent } from './definition-of-classification/definition-add/definition-add.component';
+import { LocationListComponent } from './definition-of-location/location-list/location-list.component';
+import { LocationAddComponent } from './definition-of-location/location-add/location-add.component';
 
 
 @NgModule({
@@ -224,6 +227,9 @@ import { DefinitionListComponent } from './definition-of-classification/definiti
         VehicleMovementReportComponent,
         FinalTraineeReportComponent,
         DefinitionListComponent,
+        DefinitionAddComponent,
+        LocationListComponent,
+        LocationAddComponent,
     ],
     imports: [
         CommonModule,

src/app/dashboard/definition-of-classification/definition-add/definition-add.component.html

@@ -0,0 +1,63 @@
+<div class="addDepartment-w">
+
+    
+  <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w"> خدمه البلاغات </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
+          </ul>
+        </div>
+      </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float: right; margin-right: 5px"> النوع <span class="spanReqired-w">*</span></label>
+                      <select class="form-control" name="type" [ngModel]="formData.type"  (input)="onChangeType($event)" [disabled]="isEdit" required>
+                      <option *ngFor="let type of types" [value]="type.value">{{type.name}}</option>
+                  </select>
+                 </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4" *ngIf="valueType == 'sub' || check == true">
+                  <div class="form-group">
+                    <label style="float: right; margin-right: 5px"> الأب <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" name="parent_id" [ngModel]="formData.parent_id" required>
+                    <option *ngFor="let category of categories" [value]="category.id">{{category.name}}</option>
+                </select>
+               </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="code" style="float: right; margin-right: 5px">رمز التصنيف<span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="code" name="code" placeholder="رمز التصنيف" ngModel [ngModel]="formData.code" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-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" placeholder="اسم التصنيف" ngModel [ngModel]="formData.name" required/>
+                  </div>
+                </div>
+              <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="status">الحاله <span class="spanReqired-w">*</span></label>
+                  <select name="status" class="form-control" [ngModel]="formData.status">
+                    <option value="1">فعال</option>
+                    <option value="0">غير فعال</option>
+                  </select>
+                </div>
+              </div>
+              
+          </div>
+          <div class=" row col-6">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveDisabled">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+          </div>
+        </form>
+    </div>
+  </div>
+</div>

src/app/dashboard/definition-of-classification/definition-add/definition-add.component.ts

@@ -0,0 +1,145 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-definition-add',
+  templateUrl: './definition-add.component.html',
+  styleUrls: ['./definition-add.component.css']
+})
+export class DefinitionAddComponent implements OnInit {
+
+  constructor(private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    private authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  @ViewChild('f') definitionForm : NgForm;
+
+  typePage: string = '';
+  categories =[];
+  valueType: string = '';
+  checkSaveclick:boolean = false;
+  check : boolean = false;
+  isEdit: boolean = false;
+  types = [
+    {
+      name : 'تصنيف رئيسي',
+      value : 'main'
+    },
+    {
+      name : 'تصنيف فرعي',
+      value : 'sub'
+    }
+  ];
+
+  
+  editPageId: number;
+
+
+
+  formData = {
+    type : '',
+    status :'1',
+    code: '',
+    name: '',
+    parent_id: null,
+    // parent_name: ''
+  }
+
+
+  ngOnInit() {
+    this.http.get(this.authSer.pathApi + '/parent_categories_list').subscribe(
+      (response) => {
+        
+        this.categories = response['categories']
+        console.log('XXXX',this.categories);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.editPageId = +params['editPageId'];
+      }
+    );
+
+      if (this.editPageId) {
+        this.spinner.show();
+        this.isEdit = true;
+      this.typePage = 'تعديل';
+        this.dashBoardSer.getItemData(this.editPageId, 'definitionOfClassification' ).subscribe(
+          (response) => {
+            console.log('ssss', response);
+            this.formData.code  = response['category'].code;
+            this.formData.name  = response['category'].name;
+            this.formData.parent_id = response['category'].parent_id;
+            this.formData.status = response['category'].status;
+            if (this.formData.parent_id != null) {
+              this.formData.type = 'sub';
+              this.check = true;
+            } else {
+              this.formData.type = 'main';
+            }
+            // this.formData.parent_name = response['category'].parent_name;
+            // console.log(this.formData.parent_name );
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+      }else {
+        this.typePage = 'اضافة';
+      }
+
+  }
+  onChangeType(event){
+    this.valueType = event.target.value;
+    console.log(this.valueType)
+  }
+
+ 
+  onSubmitted() {
+    console.log('HERE',this.definitionForm.value);
+    if(this.editPageId) {
+      this.dashBoardSer.editItem(this.editPageId, this.definitionForm.value, 'definitionOfClassification').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+        }
+      )
+    } else {
+    this.dashBoardSer.addItem( this.definitionForm.value , 'definitionOfClassification').subscribe(
+      (responce) => {
+        console.log('ADD',responce);
+        this.toastr.success('تم الإضافه بنجاح');
+        this.checkSaveclick = false;
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.checkSaveclick = false;
+        this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+      }
+    );
+    }
+  }
+ 
+}

src/app/dashboard/definition-of-classification/definition-list/definition-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/definition-of-classification/definition-list/definition-list.component.html

@@ -1,3 +1,94 @@
-<p>
-  definition-list works!
-</p>
+<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="containerContent-w">
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث (رمز التصنيف	)" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <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 class="form-group" style="float: right; margin: 0 20px;">
+            <span class="spanSelect-w" style="
+            margin-top: -13px; ">
+              <select [ngModel]="filtterStatus" style="width:134px;" class="form-control selectButton-w" (input)="onGetValueFiltter($event)">
+                  <option value="all"> الكل </option>
+                  <option value="main"> رئيسي</option>
+                  <option value="sub">فرعي</option>
+                  
+              </select>
+                النوع
+            </span>
+          </div>
+        </div>
+        
+    </div>
+
+    <table class="table table-bordered" *ngIf="this.count != 0">
+      <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">
+            </div>
+          </th>
+          <th>رمز التصنيف</th>
+          <th>اسم التصنيف </th>
+          <th>الأب</th>
+          <th>فعال</th>
+
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+            </div>
+          </td>
+          <td>{{data.code}}</td>
+          <td>{{data.name}}</td>
+          <td>{{data.parent_id != null ? data.parent_name : '-'}}</td>
+          <td>{{data.status == '0' ? 'غير فعال' : data.status == '1' ? ' فعال' : 'not found'}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="col-12" *ngIf="this.count == 0" >
+    <!-- taaaaaaaaaaable -->
+    <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+
+  </div>
+  <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+  </div>
+</div>

src/app/dashboard/definition-of-classification/definition-list/definition-list.component.ts

@@ -14,6 +14,8 @@ import { ToastrService } from 'ngx-toastr';
   styleUrls: ['./definition-list.component.css']
 })
 export class DefinitionListComponent implements OnInit {
+  
+
 
   constructor(private http: HttpClient,
     private route: ActivatedRoute,
@@ -28,16 +30,17 @@ export class DefinitionListComponent implements OnInit {
     dataList = [];
     pages= [];
     pageId: number;
-    advertisingListIds = [];
+    Ids = [];
     count: number;
     perPagePagenation: number;
     currentPage:number = 1;
-    filtterStatus = '';
+    filtterStatus = 'all';
     selectedAll: any;
     userLoginId:number;
     serviceId:number;
     dataTableNumber: number = 5;
-
+    absorpationListIds = [];
+    dataListIds = [];
 
   ngOnInit() {
     //init values of permisions
@@ -56,13 +59,217 @@ export class DefinitionListComponent implements OnInit {
     //get the page id param and store it in local storage to active status
     this.route.params.subscribe(
       (parmas: Params) => {
-        this.pageId = parmas['listPageId'];
+        this.pageId =  +parmas['listPageId'];
         localStorage.setItem('pageIdActive', parmas['listPageId']);
       }
     );
+    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 == 51) {
+                  if(this.pages[i]['permissions'][0].name == 'define_categories') {
+                    this.authSer.showAddBtn = true;
+                    this.authSer.showEditBtn = true;
+                    this.authSer.showDeleteBtn = true;
+                  } else {
+                    console.log('no permissions');
+                  }
+                } else {
+                  console.log('no events');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+        (response) => {
+          console.log(response);
+          this.dataList = response['categories'];
+          this.count = response['count'];
+          this.perPagePagenation = response['per_page'];
+         
+        },
+        (error) => {
+          console.log(error);
+        }
+
+      );
+  }
+//make all checkbox of user checked 
+selectAll() {
+  for (var i = 0; i < this.absorpationListIds.length; i++) {
+    this.absorpationListIds[i].selected = this.selectedAll;
+  }
+}
+
+checkIfAllSelected() {
+  this.selectedAll = this.absorpationListIds.every(function(item: any) {
+    return item.selected == true;
+  });
+}
+
+ //filtter function
+ filtterFunc(data) {
+   this.dataList =[];
+  this.absorpationListIds = [];
+  console.log(data.target.value);
+  const dataSearch = data.target.value;     
+  this.currentPage = 1;
+  console.log('search curent page', this.currentPage);
+  console.log('search page id', this.pageId);
+  this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.dataList = responce['categories'];
+      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)
+    }
+  );
+};
+
+onPageChange(pagenationNumber) {
+  this.spinner.show();
+  this.dataList = [];
+  this.currentPage = pagenationNumber;
+  this.absorpationListIds = [];
+  console.log(pagenationNumber);
+  console.log(this.pageId);
+  this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.dataList  = responce['categories'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log('FFFFFF',this.absorpationListIds);
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+}
+ //determine the list count from select element 
+ onGetValue(event) {
+  this.spinner.show();
+  this.absorpationListIds = [];
+  this.dataTableNumber = event.target.value;
+  this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.absorpationListIds = responce['categories'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+};
+onGetValueFiltter(event) {
+  console.log(event.target.value)
+  this.spinner.show();
+  this.dataList = [];
+  const typeId = event.target.value;
+  this.filtterStatus = event.target.value;
+  console.log(this.filtterStatus);
+  this.http.get(this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.dataList = responce['categories'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+      console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
+    },
+    (error) => {
+      console.log(error);
+    }
+  );
+}
+
+onDelete() {
 
+  this.dataListIds = [];
+  for(let i = 0; i < this.dataList.length; i++) {
+    if(this.dataList[i].selected == true) {
+      this.dataListIds.push(this.dataList[i].id);
+    }
   }
 
 
+  console.log(this.dataListIds);
+
+  if(this.dataListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+        <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+        `)
+    .open();
+
+      dialogRef.result
+      .then( result =>
+        this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الحذف');
+            this.spinner.show();
+            this.dataList = [];
+             //get list data
+            this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.dataList = responce['categories'];
+                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('لم يتم إختيار أي عنصر للمسح !');
+  }
+};
+
+
+onAdd() {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'definitionClassification/add']);
+}
+
+onEdit(editId: number) {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'definitionClassification/edit/ ' + editId]);
+}
 
 }

src/app/dashboard/definition-of-location/location-add/location-add.component.html

@@ -0,0 +1,57 @@
+<div class="addDepartment-w">
+
+    
+  <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w"> خدمه البلاغات </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
+          </ul>
+        </div>
+      </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+            <div class="row">
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label style="float: right; margin-right: 5px"> النوع <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" name="type" [ngModel]="formData.type"  (input)="onChangeType($event)" [disabled]="isEdit" required>
+                    <option *ngFor="let type of types" [value]="type.value">{{type.name}}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4" *ngIf="valueType == 'sub' || check == true">
+                <div class="form-group">
+                    <label style="float: right; margin-right: 5px"> الأب <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" name="parent_id" [ngModel]="formData.parent_id" required>
+                      <option *ngFor="let location of locations" [value]="location.id">{{location.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-12 col-md-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" placeholder="اسم التصنيف" ngModel [ngModel]="formData.name" required/>
+                    </div>
+                  </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="status">الحاله <span class="spanReqired-w">*</span></label>
+                  <select name="status" class="form-control" [ngModel]="formData.status">
+                    <option value="1">فعال</option>
+                    <option value="0">غير فعال</option>
+                  </select>
+                </div>
+              </div>
+              
+          </div>
+          <div class=" row col-6">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveDisabled">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+          </div>
+        </form>
+    </div>
+  </div>
+</div>

src/app/dashboard/definition-of-location/location-add/location-add.component.ts

@@ -0,0 +1,145 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-location-add',
+  templateUrl: './location-add.component.html',
+  styleUrls: ['./location-add.component.css']
+})
+export class LocationAddComponent implements OnInit {
+
+  
+  constructor(private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    private authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  @ViewChild('f') definitionForm : NgForm;
+
+  
+  typePage: string = '';
+  locations =[];
+  valueType: string = '';
+  checkSaveclick:boolean = false;
+  check : boolean = false;
+  isEdit: boolean = false;
+  types = [
+    {
+      name : 'تصنيف رئيسي',
+      value : 'main'
+    },
+    {
+      name : 'تصنيف فرعي',
+      value : 'sub'
+    }
+  ];
+
+  
+  editPageId: number;
+
+
+
+  formData = {
+    parent_id: null,
+    type : '',
+    status : '1',
+    name: '',
+    // parent_name: ''
+  }
+  ngOnInit() {
+    this.http.get(this.authSer.pathApi + '/parent_locations_list').subscribe(
+      (response) => {
+        
+        this.locations = response['locations']
+        console.log('XXXX',response);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.editPageId = +params['locationEditPageId'];
+      }
+    );
+
+
+    if (this.editPageId) {
+      this.spinner.show();
+      this.isEdit = true;
+      this.typePage = 'تعديل';
+      this.dashBoardSer.getItemData(this.editPageId, 'definitionOfLocation' ).subscribe(
+        (response) => {
+          console.log('ssss', response);
+          this.formData.parent_id = response['location'].parent_id;
+          this.formData.name  = response['location'].name;
+          this.formData.status = response['location'].status;
+          if (this.formData.parent_id != null) {
+            this.formData.type = 'sub';
+            this.check = true;
+          } else {
+            this.formData.type = 'main';
+          }
+          // this.formData.parent_name = response['category'].parent_name;
+          // console.log(this.formData.parent_name );
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }else {
+      this.typePage = 'اضافة';
+    }
+
+
+
+
+  }
+
+  onChangeType(event){
+    this.valueType = event.target.value;
+    console.log(this.valueType);
+  }
+  onSubmitted() {
+    console.log('HERE',this.definitionForm.value);
+    if(this.editPageId) {
+      this.dashBoardSer.editItem(this.editPageId, this.definitionForm.value, 'definitionOfLocation').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+        }
+      )
+    } else {
+    this.dashBoardSer.addItem( this.definitionForm.value , 'definitionOfLocation').subscribe(
+      (responce) => {
+        console.log('ADD',responce);
+        this.toastr.success('تم الإضافه بنجاح');
+        this.checkSaveclick = false;
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.checkSaveclick = false;
+        this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+      }
+    );
+    }
+  }
+}

src/app/dashboard/definition-of-location/location-list/location-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/definition-of-location/location-list/location-list.component.html

@@ -0,0 +1,93 @@
+<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="containerContent-w">
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث (اسم التصنيف	)" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <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 class="form-group" style="float: right; margin: 0 20px;">
+            <span class="spanSelect-w" style="
+            margin-top: -13px; ">
+              <select [ngModel]="filtterStatus" style="width:134px;" class="form-control selectButton-w" (input)="onGetValueFiltter($event)">
+                  <option value="all"> الكل </option>
+                  <option value="main"> رئيسي</option>
+                  <option value="sub">فرعي</option>
+                  
+              </select>
+                النوع
+            </span>
+          </div>
+        </div>
+        
+    </div>
+
+    <table class="table table-bordered" *ngIf="this.count != 0">
+      <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">
+            </div>
+          </th>
+         
+          <th>اسم التصنيف </th>
+          <th>الأب</th>
+          <th>فعال</th>
+
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+            </div>
+          </td>
+          <td>{{data.name}}</td>
+          <td>{{data.parent_id != null ? data.parent_name : '-'}}</td>
+          <td>{{data.status == '0' ? 'غير فعال' : data.status == '1' ? ' فعال' : 'not found'}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="col-12" *ngIf="this.count == 0" >
+    <!-- taaaaaaaaaaable -->
+    <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+
+  </div>
+  <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+  </div>
+</div>

src/app/dashboard/definition-of-location/location-list/location-list.component.ts

@@ -0,0 +1,272 @@
+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-location-list',
+  templateUrl: './location-list.component.html',
+  styleUrls: ['./location-list.component.css']
+})
+export class LocationListComponent 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) { }
+
+    dataList = [];
+    pages= [];
+    pageId: number;
+    Ids = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = 'all';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    absorpationListIds = [];
+    dataListIds = [];
+
+  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;
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId =  +parmas['locatioListPageId'];
+          localStorage.setItem('pageIdActive', parmas['locatioListPageId']);
+        }
+      );
+
+      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 == 52) {
+                    if(this.pages[i]['permissions'][0].name == 'define_locations') {
+                      this.authSer.showAddBtn = true;
+                      this.authSer.showEditBtn = true;
+                      this.authSer.showDeleteBtn = true;
+                    } else {
+                      console.log('no permissions');
+                    }
+                  } else {
+                    console.log('no events');
+                  }
+                }
+                this.spinner.hide();
+              },
+              (error) => {console.log(error)}
+            );
+          }
+        );
+          console.log('current page',this.pageId)
+        this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+          (response) => {
+            console.log(response);
+            this.dataList = response['locations'];
+            this.count = response['count'];
+            this.perPagePagenation = response['per_page'];
+           
+          },
+          (error) => {
+            console.log(error);
+          }
+  
+        );
+
+  }
+//make all checkbox of user checked 
+selectAll() {
+  for (var i = 0; i < this.absorpationListIds.length; i++) {
+    this.absorpationListIds[i].selected = this.selectedAll;
+  }
+}
+
+checkIfAllSelected() {
+  this.selectedAll = this.absorpationListIds.every(function(item:any) {
+    return item.selected == true;
+  });
+}
+
+ //filtter function
+ filtterFunc(data) {
+  this.dataList =[];
+  this.absorpationListIds = [];
+  console.log(data.target.value);
+  const dataSearch = data.target.value;     
+  this.currentPage = 1;
+  console.log('search curent page', this.currentPage);
+  console.log('search page id', this.pageId);
+  this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.dataList = responce['locations'];
+      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)
+    }
+  );
+};
+
+onPageChange(pagenationNumber) {
+  this.spinner.show();
+  this.currentPage = pagenationNumber;
+  this.absorpationListIds = [];
+  console.log(pagenationNumber);
+  console.log(this.pageId);
+  this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.dataList = responce['locations'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      console.log('FFFFFF', this.absorpationListIds);
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+}
+ //determine the list count from select element 
+ onGetValue(event) {
+  this.spinner.show();
+  this.absorpationListIds = [];
+  this.dataTableNumber = event.target.value;
+  this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.absorpationListIds = responce['locations'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+};
+onGetValueFiltter(event) {
+  console.log(event.target.value)
+  this.spinner.show();
+  this.dataList = [];
+  const typeId = event.target.value;
+  this.filtterStatus = event.target.value;
+  console.log(this.filtterStatus);
+  this.http.get(this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.dataList = responce['locations'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+      console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
+    },
+    (error) => {
+      console.log(error);
+    }
+  );
+}
+
+onDelete() {
+
+  this.dataListIds = [];
+  for(let i = 0; i < this.dataList.length; i++) {
+    if(this.dataList[i].selected == true) {
+      this.dataListIds.push(this.dataList[i].id);
+    }
+  }
+
+
+  console.log(this.dataListIds);
+
+  if(this.dataListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+        <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+        `)
+    .open();
+
+      dialogRef.result
+      .then( result =>
+        this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الحذف');
+            this.spinner.show();
+            this.dataList = [];
+             //get list data
+            this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.dataList = responce['locations'];
+                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('لم يتم إختيار أي عنصر للمسح !');
+  }
+};
+onAdd() {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'definitionLocation/add']);
+}
+
+onEdit(editId: number) {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'definitionLocation/edit/ ' + editId]);
+}
+}

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

@@ -427,7 +427,12 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['VehicleReport/Movement'], {relativeTo: this.route});
     } else if(dataPage.id == 50) {
       this.router.navigate(['VehicleReport/General'], {relativeTo: this.route});
+    }else if(dataPage.id == 51) {
+      this.router.navigate(['definitionClassificationList/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 52) {
+      this.router.navigate(['definitionLocationList/' + dataPage.id], {relativeTo: this.route});
     }
+    
   }
 
   onAddUser() {

src/app/servicesItems/services.component.ts

@@ -218,6 +218,10 @@ getDataService(dataService){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/VehicleReport/Movement']);
           } else if(this.pages[0].id == 50) {
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/VehicleReport/General']);
+          }else if(this.pages[0].id == 51) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/definitionClassificationList']);
+          }else if(this.pages[0].id == 52) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/definitionLocationList']);
           }
         },
         (error) => {
@@ -233,6 +237,8 @@ getDataService(dataService){
           console.log(this.pages);
           if(this.pages[0].id == 51) {
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/definitionClassificationList/' + this.pages[0].id]);
+          }else  if(this.pages[0].id == 52) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/definitionLocationList/' + this.pages[0].id]);
           }
         },
         (error) => {

src/app/shared/dashboard.service.ts

@@ -101,6 +101,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/add_vehicle_movement', data);
       } else if(addType == 'vehicleMaintenance') {
         return this.http.post(this.authService.pathApi + '/add_vehicle_maintenance', data);
+      }else if(addType == 'definitionOfClassification') {
+        return this.http.post(this.authService.pathApi + '/add_category', data);
+      }else if(addType == 'definitionOfLocation') {
+        return this.http.post(this.authService.pathApi + '/add_location', data);
       }
     }
 
@@ -175,9 +179,13 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/edit_vehicle_movement', editData);
       } else if(editPageName == 'vehicleMaintenance') {
         return this.http.post(this.authService.pathApi + '/edit_vehicle_maintenance', editData);
+      }else if(editPageName == 'definitionOfClassification') {
+        return this.http.post(this.authService.pathApi + '/edit_category', editData);
+      }else if(editPageName == 'definitionOfLocation') {
+        return this.http.post(this.authService.pathApi + '/edit_location', editData);
       }
     }
-
+    
     //get item data
     getItemData(pageId: number, typeGetData:string) {
       console.log('wwwwwwwwwwwwwwwwwwwwwwwwwwww', pageId);
@@ -229,9 +237,12 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_vehicle_movement/' + pageId);
       } else if(typeGetData == 'maintenanceVehicle') {
         return this.http.get(this.authService.pathApi + '/get_vehicle_maintenance/' + pageId);
+      }else if(typeGetData == 'definitionOfClassification') {
+        return this.http.get(this.authService.pathApi + '/get_category/' + pageId);
+      }else if(typeGetData == 'definitionOfLocation') {
+        return this.http.get(this.authService.pathApi + '/get_location/' + pageId);
       }
   }
-
     //delete event
     deleteItem(dataIds, pageId) {
 
@@ -292,8 +303,13 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/delete_vehicle_maintenance', {'maintenances_id' : dataIds});
       } else if(pageId == 47) {
         return this.http.post(this.authService.pathApi + '/delete_vehicle_movement', {'movements_id' : dataIds});
+      }else if(pageId == 51) {
+        return this.http.post(this.authService.pathApi + '/delete_category', {'categories_id' : dataIds});
+      }else if(pageId == 52) {
+        return this.http.post(this.authService.pathApi + '/delete_location', {'locations_id' : dataIds});
       }
 
+
     };