trainee service

src/app/External-Page/event-details/event-details.component.ts

@@ -15,7 +15,8 @@ export class EventDetailsComponent implements OnInit {
   eventData: any;
 
   ngOnInit() {
-   this.eventData = JSON.parse(localStorage.getItem('eventData'));
+    this.authSer.homeActivate = false;
+    this.eventData = JSON.parse(localStorage.getItem('eventData'));
     console.log(this.eventData);
     this.eventData.start = this.eventData.start.split('T')[0];
   }

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

@@ -2,8 +2,8 @@ input,button {
     outline: none;
 }
 .dropdown-menu {
-    top: -6px;
-    right: 10px !important;
+    top: -11px !important;
+    right: -37px !important;
     border-radius: 2px !important;
     width: 245px;
     background-color: #ffffffe0;

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

@@ -68,4 +68,10 @@ export class ExternalPageHeaderComponent implements OnInit {
     this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
   }
 
+  //log out function
+  onLogout() { 
+    localStorage.clear();
+    this.router.navigate(['login']);
+  }
+
 }

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

@@ -26,6 +26,25 @@
                     </div>
                   </div>
                 </div>
+
+                <div class="col-12">
+                  <div class="descriptionBody-w">
+                    <p [innerHTML]="reportData.description"></p>
+                  </div>
+                </div>
+    
+                <div class="col-12">
+                  <div class="imagesBody-w">
+                    <div class="row">
+                      <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
+                        <div class="imageNews">
+                          <img src="{{authSer.pathImg + image.photo}}"> 
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
               </div>
 
               <div class="col-12 col-sm-12 col-md-3">
@@ -33,7 +52,7 @@
                   <ul>
                     <li *ngFor="let externalSer of externalService; let i = index">
                       <a href="{{externalSer.link}}">
-                          <img src="{{authSer.pathImg + externalSer.photo}}" />
+                        <img src="{{authSer.pathImg + externalSer.photo}}" />
                         <span>{{externalSer.name}}</span>
                       </a>
                     </li>
@@ -41,23 +60,7 @@
                 </div>
               </div>
 
-              <div class="col-12">
-                <div class="descriptionBody-w">
-                  <p [innerHTML]="reportData.description"></p>
-                </div>
-              </div>
-
-              <div class="col-12">
-                <div class="imagesBody-w">
-                  <div class="row">
-                    <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
-                      <div class="imageNews">
-                        <img src="{{authSer.pathImg + image.photo}}"> 
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+           
 
             </div>
         </ng-template>

src/app/app-routing.module.ts

@@ -1,3 +1,5 @@
+import { AllRequestsComponent } from './trainning-service/all-requests/all-requests.component';
+import { AddRequestComponent } from './trainning-service/add-request/add-request.component';
 import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
@@ -6,6 +8,7 @@ import { RegesterComponent } from './regester/regester.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { AuthGuardService as AuthGuard } from './shared/auth-guard.service';
 import { ServicesComponent } from './servicesItems/services.component';
+import { TrainningServicesComponent } from './trainning-service/trainning-services/trainning-services.component';
 
 
 const routes: Routes = [
@@ -13,6 +16,10 @@ const routes: Routes = [
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: RegesterComponent},
   {path: 'services/:id', component: ServicesComponent, canActivate: [AuthGuard]},
+  {path: 'addRequest/:visitorId', component: AddRequestComponent, canActivate: [AuthGuard]},
+  {path: 'editRequest/:visitorId/:requestId', component: AddRequestComponent, canActivate: [AuthGuard]},
+  {path: 'allRequests/:visitorID', component: AllRequestsComponent, canActivate: [AuthGuard]}, 
+  {path: 'trainingServices/:visitorId/:trainningServicesId', component: TrainningServicesComponent, canActivate:[AuthGuard]},
   {path: 'service/:userID/:serviceID', loadChildren: './dashboard/dashboard.module#DashBoardModule', canLoad: [AuthGuard]},
   {path: 'InternalPage' , loadChildren: './Internal-Page/internal-page.module#InternalPageModule'},
   {path: 'ExternalPage', loadChildren: './External-Page/external-page.module#ExternalPageModule'},

src/app/app.module.ts

@@ -53,6 +53,9 @@ import { Ng2CarouselamosModule } from 'ng2-carouselamos';
 import { NumberDerictiveDirective } from './number-derictive.directive';
 import { OnlyNumberDirective } from './shared/only-number.directive';
 import {SharedModule} from './shared/shared.module';
+import { AddRequestComponent } from './trainning-service/add-request/add-request.component';
+import { AllRequestsComponent } from './trainning-service/all-requests/all-requests.component';
+import { TrainningServicesComponent } from './trainning-service/trainning-services/trainning-services.component';
 
 
 @NgModule({
@@ -65,6 +68,9 @@ import {SharedModule} from './shared/shared.module';
     ServicesComponent,
     PageNotFoundComponent,
     NumberDerictiveDirective,
+    AddRequestComponent,
+    AllRequestsComponent,
+    TrainningServicesComponent,
   ],
   imports: [
     BrowserModule,

src/app/dashboard/absorpation-plan/absorpation-add/absorpation-add.component.html

@@ -0,0 +1,87 @@
+<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">
+                <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]="absorpation.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="startDate" style="float:right" >تاريخ البدايه <span class="spanReqired-w">*</span></label>
+                  <div *ngIf='bindingDateSplitStart && typeMode'>
+                    <app-higri-date (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart"></app-higri-date>
+                  </div>
+                  <div *ngIf='!typeMode'>
+                    <app-higri-date (onDatePicked)="getDate($event, 'start')" ></app-higri-date>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="endDate" style="float:right" >تاريخ الإنتهاء <span class="spanReqired-w">*</span></label>
+                  <div *ngIf='bindingDateSplitEnd && typeMode'>
+                    <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd"> </app-end-higri-date>
+                  </div>
+                  <div *ngIf='!typeMode'>
+                    <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" ></app-end-higri-date>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="department" style="float:right" >الأقسام <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" id="department" [ngModel]="absorpation.department_id" name="department_id" ngModel>
+                    <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="status" style="float:right" >الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" id="status" [ngModel]="absorpation.status" name="status" ngModel>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="status" style="float:right" >العدد <span class="spanReqired-w">*</span></label>
+                <input type="number" class="form-control" id="count" name="count" min="0" [ngModel]="absorpation.count" ngModel required>
+              </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>
+              </div>
+  
+            </div>
+          </form>
+  
+        </div>
+      </div>
+    </div>
+    </div>
+  </div>
+  

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

@@ -0,0 +1,171 @@
+import { ActivatedRoute, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-absorpation-add',
+  templateUrl: './absorpation-add.component.html',
+  styleUrls: ['./absorpation-add.component.css']
+})
+export class AbsorpationAddComponent implements OnInit {
+
+  constructor(private http: HttpClient, 
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService) { }
+
+  absorpation = {
+    name: '',
+    status: '',
+    department_id: '',
+    count: null,
+  }
+
+  @ViewChild('f') formData: NgForm;
+
+  startDate;
+  endDate: string = '';
+  checkSaveclick: boolean = false;
+  typeMode: boolean = false;
+  typeLink: string = '';
+  departments= [];
+  obsId: number;
+  bindingDateSplitStart;
+  bindingDateSplitEnd;
+
+  ngOnInit() {
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.obsId = params['absorpationEditId'];
+        if(this.obsId) {
+          this.typeMode = true;
+          this.typeLink = 'تعديل';
+        } else {
+          this.typeLink = 'إضافه';
+        }
+      }
+    );
+
+    //edit mode 
+    if(this.obsId) {
+      this.dashBoardSer.getItemData(this.obsId, 'absorpation').subscribe(
+        (responce) => {
+          console.log('data get item', responce);
+          this.absorpation.name = responce['absorpation_plan'].name;
+          this.absorpation.count = responce['absorpation_plan'].count;
+          this.absorpation.status = responce['absorpation_plan'].status;
+          this.absorpation.department_id = responce['absorpation_plan'].department_id;
+          this.startDate = responce['absorpation_plan'].start_date;
+          this.endDate = responce['absorpation_plan'].end_date;
+          console.log('start date edit', this.startDate);
+          console.log('end date edit', this.endDate);
+         this.bindingDateSplitStart = {
+           year: parseInt(responce['absorpation_plan'].start_date.split('-')[0]),
+           month: parseInt(responce['absorpation_plan'].start_date.split('-')[1]),
+           day: parseInt(responce['absorpation_plan'].start_date.split('-')[2]),
+         }
+         this.bindingDateSplitEnd = {
+          year: parseInt(responce['absorpation_plan'].end_date.split('-')[0]),
+          month: parseInt(responce['absorpation_plan'].end_date.split('-')[1]),
+          day: parseInt(responce['absorpation_plan'].end_date.split('-')[2]),
+        }
+         console.log(this.bindingDateSplitStart);
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+    
+    this.http.get(this.authSer.pathApi + '/training_adminstration_departments').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.departments = responce['departments'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+    //get value date from child component 
+    public getDate(date: any , type: string):void {
+      console.log( date);
+      if(type == 'start') {
+        this.startDate = date.year + '-' + date.month + '-' + date.day;
+        console.log('start date', this.startDate);
+      } else if(type == 'end') {
+        this.endDate = date.year + '-' + date.month + '-' + date.day;
+        console.log('end date', this.endDate);
+      } else {
+        console.log('not type recieved !');
+      }
+    }
+
+
+    onSubmitted() {
+
+      const data = this.formData.value;
+      data['start_date'] = this.startDate;
+      data['end_date'] = this.endDate;
+      
+      const startDateData = this.startDate.split('-');
+      const endDateData = this.endDate.split('-');
+      console.log(startDateData);
+      console.log(endDateData);
+      console.log(data);
+
+      if(this.typeMode) {
+        if(startDateData[0] > endDateData[0] || startDateData[1] > endDateData[1] || startDateData[2] > endDateData[2]) {
+          this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+          this.checkSaveclick = false;
+        } else {
+          this.dashBoardSer.editItem(this.obsId ,data , 'absorpation').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تمت الإضافه بنجاح');
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              this.toastr.success('خطأ في الإضافه !');
+            }
+          );
+        }
+      } else {
+        if(startDateData[0] > endDateData[0] || startDateData[1] > endDateData[1] || startDateData[2] > endDateData[2]) {
+          this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+          this.checkSaveclick = false;
+        } else {
+          this.dashBoardSer.addItem(data , 'absorpation').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تمت الإضافه بنجاح');
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              this.toastr.success('خطأ في الإضافه !');
+            }
+          );
+        }
+      }
+
+    
+
+    }
+
+
+
+}

src/app/dashboard/absorpation-plan/absorpation-list/absorpation-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/absorpation-plan/absorpation-list/absorpation-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" style="cursor: pointer;">{{servicesName}} </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">
+                <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+                من العناصر يتم عرضها 
+              </span>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          
+          </div>
+        </div>
+        
+        <table class="table table-bordered">
+            <thead class="headBackground-w">
+              <tr>
+                <th>
+                  <div class="custom-control custom-checkbox">
+                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
+                  </div>
+                </th>
+                <th> إسم القسم</th>
+                <th>تاريخ الإبتداء</th>
+                <th *ngIf="authSer.showEditBtn">تعديل</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let data of absorpationList | 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();">
+                  </div>
+                </td>
+                <td>{{data.name}}</td>
+                <td> {{data.start_date}}</td>
+                <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+              </tr>
+            </tbody>
+          </table>
+          <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+    </div>
+  </div>
+  

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

@@ -0,0 +1,265 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { MainMenuService } from './../../../shared/main-menu.service';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { UserService } from '../../../shared/user.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { Overlay } from 'ngx-modialog';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+
+@Component({
+  selector: 'app-absorpation-list',
+  templateUrl: './absorpation-list.component.html',
+  styleUrls: ['./absorpation-list.component.css']
+})
+export class AbsorpationListComponent implements OnInit {
+
+  pageId: number;
+  absorpationList = [];
+  absorpationListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+  servicesName: string = '';
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private modal: Modal,
+    private dashBoardService: DashboardService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+    
+    this.spinner.show();
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = 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(
+      (params: Params) => {
+        this.pageId = params['absorpationListId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.servicesName = 'خدمه التدريب';
+
+        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 == 34) {
+                if(this.pages[i]['permissions'][0].name == 'absorption_plan') {
+                  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)}
+        );
+      }
+
+    );
+
+    //get list data 
+    this.dashBoardService.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.absorpationList = responce['absorption_plans'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.absorpationList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.absorpationList.length; i++) {
+      this.absorpationList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.absorpationList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.absorpationList = [];
+    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.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.absorpationList = responce['absorption_plans'];
+        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 pagenation
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.absorpationList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.absorpationList = responce['absorption_plans'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.absorpationList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.absorpationList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.absorpationList = responce['absorption_plans'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+  
+  onDelete() {
+
+    this.absorpationListIds = [];
+    for(let i = 0; i < this.absorpationList.length; i++) {
+      if(this.absorpationList[i].selected == true) {
+        this.absorpationListIds.push(this.absorpationList[i].id);
+      }
+    }
+
+    console.log(this.absorpationListIds);
+    if(this.absorpationListIds.length > 0) {
+      const dialogRef = this.modal.alert()
+      .size('sm')
+      .showClose(true)
+      .title('تأكيد الحذف')
+      .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+      .open();
+  
+        dialogRef.result
+        .then( result => 
+          this.dashBoardService.deleteItem(this.absorpationListIds, this.pageId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.absorpationList = [];
+                this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.absorpationList = responce['absorption_plans'];
+                    console.log(this.absorpationList);
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                  }
+                )
+              },
+              (error) => {
+                console.log(error);
+                this.toastr.error('حدث خطأ رجاء الانتظار وحاول ثانيه');
+                this.spinner.hide();
+              }
+          )
+        );
+    } else {
+      this.toastr.warning('لم يتم أختيار أي عنصر للحذف !');
+    }
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/absorpation/Add');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/absorpation/Add']);
+  }
+
+  //edit function
+   onEdit(editId) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/absorpation/edit/' + editId]);
+  }
+
+}

src/app/dashboard/dashboard-routing.ts

@@ -1,3 +1,4 @@
+import { AbsorpationListComponent } from './absorpation-plan/absorpation-list/absorpation-list.component';
 import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-add.component';
 import { MapComponent } from './map/map.component';
 import { NgModule } from '@angular/core';
@@ -57,6 +58,9 @@ import { AddStatisticComponent } from './statistics/add-statistic/add-statistic.
 import { AdvertisingServicesListComponent } from './advertising-services/advertising-services-list/advertising-services-list.component';
 import { AddAdvertisingServiceComponent } from './advertising-services/add-advertising-service/add-advertising-service.component';
 import { SupervisorListComponent } from './supervisor/supervisor-list/supervisor-list.component';
+import { AbsorpationAddComponent } from './absorpation-plan/absorpation-add/absorpation-add.component';
+import { TrainnerDataListComponent } from './trainner-data/trainner-data-list/trainner-data-list.component';
+import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trainner-data-add.component';
 
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -138,6 +142,12 @@ const dashboardRouting: Routes = [
     {path: 'supervisorList/:superVisorId', component: SupervisorListComponent},
     {path: 'superVisor/Add', component: SupervisorAddComponent},
     {path: 'superVisor/edit/:superEditId', component: SupervisorAddComponent},
+    {path: 'absorpationList/:absorpationListId', component: AbsorpationListComponent},
+    {path: 'absorpation/Add', component: AbsorpationAddComponent},
+    {path: 'absorpation/edit/:absorpationEditId', component: AbsorpationAddComponent},
+    {path: 'trainnerList/:trainnerListId', component: TrainnerDataListComponent},
+    {path: 'trainer/add', component: TrainnerDataAddComponent},
+    {path: 'trainer/edit/:trainnerEditId', component: TrainnerDataAddComponent}
   ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -1,3 +1,4 @@
+import { EndHigriDateComponent } from './../end-higri-date/end-higri-date.component';
 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';
@@ -100,6 +101,10 @@ import { MapComponent } from './map/map.component';
 import { AgmCoreModule } from '@agm/core';
 import { SupervisorListComponent } from './supervisor/supervisor-list/supervisor-list.component';
 import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-add.component';
+import { AbsorpationListComponent } from './absorpation-plan/absorpation-list/absorpation-list.component';
+import { AbsorpationAddComponent } from './absorpation-plan/absorpation-add/absorpation-add.component';
+import { TrainnerDataListComponent } from './trainner-data/trainner-data-list/trainner-data-list.component';
+import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trainner-data-add.component';
 
 
 @NgModule({
@@ -147,6 +152,7 @@ import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-a
         AddJoinUsComponent,
         ShortenPipe,
         HigriDateComponent,
+        EndHigriDateComponent,
         AdvertisimentComponent,
         AddAdverComponent,
         BarEventsListComponent,
@@ -166,6 +172,10 @@ import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-a
         MapComponent,
         SupervisorListComponent,
         SupervisorAddComponent,
+        AbsorpationListComponent,
+        AbsorpationAddComponent,
+        TrainnerDataListComponent,
+        TrainnerDataAddComponent,
     ],
     imports: [
         CommonModule,

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

@@ -49,7 +49,6 @@
           <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>

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

@@ -46,7 +46,7 @@
                                 </button>
                                 <button class="dropdown-item" style="cursor: pointer;" (click)="onInternalPage()">
                                     <i class="fas fa-solar-panel"></i>
-                                    <span> البوابه الداخليه</span>
+                                    <span> البوابه الخارجيه</span>
                                 </button>
                                 <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
                                     <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>

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

@@ -69,7 +69,7 @@ export class HeaderComponent implements OnInit {
   }
 
   onInternalPage() {
-    this.router.navigate(['/InternalPage/home']);
+    this.router.navigate(['/ExternalPage']);
   }
 
 

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

@@ -97,11 +97,13 @@
                   </div>
                 </div>
               </div>
+
               <div class="col-12">
                 <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
                 <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
               </div>
             </div>
+            
           </form>
 
         </div>

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

@@ -27,9 +27,8 @@
                 </div>
               </div>
             </ul>
-          </div>
-
-          
+          </div>   
+                 
         </nav>
     </div>
   </div>

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

@@ -222,6 +222,10 @@ export class ServiceItemComponent implements OnInit {
           console.log(responce);
           if(this.pages[0].id == 33) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/supervisorList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 34) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/absorpationList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 40) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/trainnerList/' + this.pages[0].id]);
           }
         },
         (error) => {
@@ -298,7 +302,11 @@ export class ServiceItemComponent implements OnInit {
     } else if(dataPage.id == 28) {
       this.router.navigate(['map/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 33) {
-      this.router.navigate(['supervisorList/' + this.pages[0].id], {relativeTo: this.route});
+      this.router.navigate(['supervisorList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 34) {
+      this.router.navigate(['absorpationList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 40) {
+      this.router.navigate(['trainnerList/' + dataPage.id], {relativeTo: this.route});
     }
   }
 

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

@@ -60,6 +60,9 @@ export class SupervisorAddComponent implements OnInit {
       (responce) => {
         console.log(responce);
         this.departments = responce['departments'];
+        if(this.departments.length == 0) {
+          this.toastr.warning('جميع الأقسام لديها مشرفين !');
+        }
       },
       (error) => {
         console.log(error);
@@ -103,6 +106,9 @@ export class SupervisorAddComponent implements OnInit {
       (responce) => {
         console.log(responce);
         this.supervisorList = responce['users'];
+        if(this.supervisorList.length == 0) {
+          this.toastr.warning('  القسم ليس لديه مستخدمين !');
+        }
       },
       (error) => {
         console.log(error);

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

@@ -18,29 +18,29 @@
         </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)"/>
+            <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">
-                <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 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">

src/app/dashboard/trainner-data/trainner-data-add/trainner-data-add.component.css

@@ -0,0 +1,288 @@
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+.userForm-w form {
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 20px;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
+.imgProfile {
+    width: 100%;
+    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;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .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;
+}
+
+
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    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;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .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;
+}
+
+
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+.titileLi-w {
+    margin: 0 65px;
+}
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+
+
+

src/app/dashboard/trainner-data/trainner-data-add/trainner-data-add.component.html

@@ -0,0 +1,159 @@
+<div class="userForm-w">
+    <div class="container">
+      
+        <div class="row">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w">خدمه لتدريب </li>
+              <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">بيانات المتدربين</li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}}  </li>
+            </ul>
+          </div>
+        </div>
+  
+        <div class="containerContent-w">
+          <form [formGroup]="signupForm" (ngSubmit)="onSubmittedForm()">
+            <div class="row">
+              
+              <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                <div class="form-group text-center imgContainer">
+                    <img [src]="urlImg" class="imgProfile" height="200"> 
+                    <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                    <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float:right">الأسم <span class="spanReqired-w">*</span></label>
+                  <input type="text" id="name" placeholder="أدخل الأسم رباعي" class="form-control" formControlName="name" />
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" formControlName="nationality_id" style="padding:0 5px">
+                    <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.country_arName}}</option>
+                  </select>
+                </div>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                    <label for="identity" style="float:right">الهويه <span class="spanReqired-w">*</span></label>
+                  <select class="form-control select" id="identity" formControlName="identity_type_id" (change)="getSelectedOptionText($event)">
+                    <option *ngFor="let identity of identities" value="{{identity.id}}">{{identity.name}}</option>
+                  </select>
+                </div>
+              </div>
+     
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id != 4">
+                <div class="form-group">
+                  <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                  <input type="phone" class="form-control" placeholder="رقم الهويه"d="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
+                  <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                  <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
+                  <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id == 4">
+                <div class="form-group">
+                  <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                  <input type="phone" class="form-control" id="identityNumber" formControlName="identity_number" />
+                  <span style="color:red">أدخل رقم جواز السفر </span>
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                  <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglishCharacters formControlName="email" />
+                  <span class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                  <input type="text" id="phone" appOnlyNumber class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w" *ngIf="checkRequiredSpan">*</span></label>
+                  <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="hideConfirmPassword">
+                <div class="form-group">
+                  <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
+                  <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
+                </div>
+              </div>
+  
+              
+              
+             
+             
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                  <input type="date" [max]="authSer.end" id="birthdate" class="form-control" formControlName="birthday" /> 
+                </div>
+              </div>
+  
+             
+  
+  
+  
+             
+              
+            
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label style="float: right;">الحاله <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" formControlName="status">
+                    <option value='1'>فعال</option>
+                    <option value='0'>غير فعال</option>
+                  </select>
+                </div>
+              </div>
+  
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showDepart">
+                <div class="form-group">
+                  <label style="float:right">القسم <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" formControlName="department_id">
+                    <option *ngFor="let department of departments; let i = index" [value]="department.id">{{department.name}}</option>
+                  </select>
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+                <div class="form-group">
+                  <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                    <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
+                    <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
+                  </div>
+                  
+                  <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                    <input type="radio" class="custom-control-input customStyleInput" id="defaultChecked" value="female" formControlName="gender" name="gender">
+                    <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12">
+                  <button type="submit" [disabled]="!signupForm.valid || checkSaveDisabled" class="btn btn-success rightW">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+            </div>
+          </form>
+        </div>
+    </div>
+  </div>
+  

src/app/dashboard/trainner-data/trainner-data-add/trainner-data-add.component.ts

@@ -0,0 +1,307 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { NgForm, FormGroup, FormControl, Validators } from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
+import { UserService } from '../../../shared/user.service';
+import { Location } from '@angular/common';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-trainner-data-add',
+  templateUrl: './trainner-data-add.component.html',
+  styleUrls: ['./trainner-data-add.component.css']
+})
+export class TrainnerDataAddComponent implements OnInit {
+
+  
+
+  constructor(private userSer: UserService,
+    private spineer: NgxSpinnerService,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService,
+    private dashBoardSer: DashboardService,
+    private location: Location,
+    private toastr: ToastrService) {
+      this.spineer.show();
+     }
+
+countries = []; //nationality
+identities = []; //الهويه
+traineeID: number; //trianer id to edit mode 
+traineeForm: NgForm;
+typeMode: boolean = false;
+hideConfirmPassword: boolean = true; //hide confirm passowrd
+checkChangeImage: boolean = false; //check change image profile
+typeLink: string = ''; //create or edit word in view 
+imageBase64: string = '';
+photoType: string = '';
+identity_id: number = 0;
+identity_type: number;
+number_identitiy:number;
+checkRequiredSpan:boolean = true;
+urlImg: string =  '../../../../assets/image/avatar.png';
+checkSaveDisabled:boolean = false;
+end:any;
+signupForm: FormGroup; //form object group
+
+
+ngOnInit() {
+
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+     //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;
+    
+    //get profile data
+    this.userSer.getUserDataProfile();
+
+   
+
+    
+
+    //get nationality
+    this.userSer.getNationality().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.countries = responce['countries'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get identites
+    this.userSer.onGetIdentities().subscribe(
+    (responce) => {
+      this.identities = responce['identities'];
+    },
+    (error) => {
+      console.log(error);
+    }
+  );
+
+
+
+  this.route.params.subscribe(
+    (params: Params) => {
+      this.traineeID = params['trainnerEditId'];
+      if(this.traineeID) {
+        this.spineer.show();
+        this.typeLink = 'تعديل';
+        this.typeMode = true;
+        this.hideConfirmPassword = false;
+        this.signupForm = new FormGroup({
+          name: new FormControl(null, Validators.required),
+          type: new FormControl('1'),
+          identity_type_id: new FormControl(null, [Validators.required]),
+          identity_number: new FormControl(null, Validators.required),
+          email: new FormControl(null, [Validators.required,Validators.email]),
+          password: new FormControl(null, [Validators.minLength(6)]),
+          password_confirmation: new FormControl(null, [Validators.minLength(6)]),
+          gender: new FormControl(null, Validators.required),
+          birthday: new FormControl(null, Validators.required),
+          nationality_id: new FormControl(null, Validators.required),
+          phone: new FormControl(null, Validators.required),
+          status: new FormControl(null , Validators.required),
+        });
+
+        this.dashBoardSer.getItemData(this.traineeID, 'trainee').subscribe(
+          (responce) => {
+            console.log(responce);      
+            this.signupForm.patchValue(
+              {
+                name: responce['user'].name,
+                type: responce['user'].type,
+                email: responce['user'].email,
+                phone: responce['user'].phone,
+                gender: responce['user'].gender,
+                birthday: responce['user'].birthday,
+                nationality_id: responce['user'].nationality_id,
+                status: responce['user'].status,
+                identity_type_id: responce['user'].identity_type_id,
+                identity_number: responce['user'].identity_number,
+              }
+            );
+            this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : this.urlImg;
+            this.spineer.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      } else {
+        this.typeLink = 'إضافه';
+        this.signupForm = new FormGroup({
+          name: new FormControl(null, Validators.required),
+          type: new FormControl('1'),
+          identity_type_id: new FormControl(null, [Validators.required]),
+          identity_number: new FormControl(null, Validators.required),
+          email: new FormControl(null, [Validators.required,Validators.email]),
+          password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+          password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+          gender: new FormControl(null, Validators.required),
+          birthday: new FormControl(null, Validators.required),
+          nationality_id: new FormControl(null, Validators.required),
+          phone: new FormControl(null, Validators.required),
+          status: new FormControl(null , Validators.required),
+        });
+      }
+    }
+  )
+
+ 
+
+
+
+}
+
+
+
+
+
+
+
+
+
+//submitted form
+onSubmittedForm() {
+  this.checkSaveDisabled = true;
+  const userData = this.signupForm.value;  
+  if(this.checkChangeImage) {
+    userData['photo'] = this.imageBase64;
+    userData['photo_type'] = this.photoType[1];
+  }
+
+  console.log(userData);
+  if(this.typeMode) {
+    if(this.signupForm.get('password').value != this.signupForm.get('password_confirmation').value){
+      this.toastr.warning('من فضلك تأكد أن كلمه المرور هي نفس تأكيد كلمه المرور ');
+      this.checkSaveDisabled = false;
+    } else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
+      this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+      this.checkSaveDisabled = false;
+    } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
+      this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+      this.checkSaveDisabled = false;
+    } else if(this.signupForm.get('phone').value.substring(0,2) != '05') {
+      this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+      this.checkSaveDisabled = false;
+    } else {
+      this.dashBoardSer.editItem(this.traineeID, userData, 'trainee').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح');
+          this.location.back();
+          this.checkSaveDisabled = true;
+        },
+        (error) => {
+          console.log(error);
+          this.checkSaveDisabled = false;
+          if(error.error['error'].email) {
+            this.toastr.warning('الايميل تم التسجيل به من قبل !');
+          } else if(error.error['error'].identity_number) {
+            this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+          } else {
+            this.toastr.error('خطأ في السيرفر سيتم معالجته لاحقاً');
+          }
+        }
+      );
+    }
+  } else {
+    if(this.signupForm.get('password').value != this.signupForm.get('password_confirmation').value){
+      this.toastr.warning('من فضلك تأكد أن كلمه المرور هي نفس تأكيد كلمه المرور ');
+      this.checkSaveDisabled = false;
+    } else if(this.imageBase64 == ''){
+      this.toastr.warning('قم بإختيار صوره المستخدم !');
+      this.checkSaveDisabled = false;
+    } else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
+      this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+      this.checkSaveDisabled = false;
+    } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
+      this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+      this.checkSaveDisabled = false;
+    } else if(this.signupForm.get('phone').value.substring(0,2) != '05') {
+      this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+      this.checkSaveDisabled = false;
+    } else {
+      this.dashBoardSer.addItem(userData, 'trainee').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم الاضافه بنجاح');
+          this.location.back();
+          this.checkSaveDisabled = true;
+        },
+        (error) => {
+          console.log(error);
+          this.checkSaveDisabled = false;
+          if(error.error['error'].email) {
+            this.toastr.warning('الايميل تم التسجيل به من قبل !');
+          } else if(error.error['error'].identity_number) {
+            this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+          }
+        }
+      );
+    }
+  }
+};
+
+getSelectedOptionText(event){
+  console.log(event.target.value);
+  this.identity_id = event.target.value;
+  this.identity_type = event.target.value;
+}
+
+onFileChanges(event) {
+  console.log(event);
+  this.imageBase64 = event[0].base64;
+  this.photoType = event[0].type.split('/');
+  console.log(this.photoType[1]);
+  console.log(this.imageBase64);
+  this.checkChangeImage = true;
+}
+
+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'];
+  }
+}
+}
+
+//identitiy input change 
+onIdentitiyChange(event) {
+  if(event.length >= 10) {
+    this.identity_id = 0;
+  } else {
+    this.identity_id = this.identity_type;
+  }
+}
+
+  //validatiors return funcrtion 
+  get password() {
+    return this.signupForm.get('password');
+  }
+
+  //validatiors return funcrtion 
+  get phone() {
+    return this.signupForm.get('phone');
+  }
+  
+  get repeatPassword() {
+    return this.signupForm.get('password_confirmation');
+  }
+
+
+}

src/app/dashboard/trainner-data/trainner-data-list/trainner-data-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/trainner-data/trainner-data-list/trainner-data-list.component.html

@@ -0,0 +1,80 @@
+<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">
+                <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 trainner of trainnersData | 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="{{trainner.id}}" [(ngModel)]="trainner.selected" [value]='trainner' (change)="checkIfAllSelected();">
+                  <label class="custom-control-label disblayBlock-w" for="{{trainner.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                </div>
+              </td>
+              <td>{{trainner.name}}</td>
+              <td>{{trainner.email}}</td>
+              <td>{{trainner.type == 1 ? 'زائر' : 'موظف'}}</td>
+              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(trainner.id)"><i class="fas fa-edit"></i></button></td>
+            </tr>
+          </tbody>
+        </table>
+        <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($trainner)"></pagination-controls>
+</div>

src/app/dashboard/trainner-data/trainner-data-list/trainner-data-list.component.ts

@@ -0,0 +1,251 @@
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { UserService } from './../../../shared/user.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+
+@Component({
+  selector: 'app-trainner-data-list',
+  templateUrl: './trainner-data-list.component.html',
+  styleUrls: ['./trainner-data-list.component.css']
+})
+export class TrainnerDataListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private modal: Modal,
+    private dashBoardService: DashboardService) { }
+
+  pageId: number;
+
+
+  pages= [];
+  trainnersData = [];
+  trainnersListIds = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+
+  ngOnInit() {
+
+    this.spinner.show();
+    //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.userId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userId, 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 == 40) {
+                  if(this.pages[i]['permissions'][0].name == 'trainees') {
+                    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)}
+          );
+        }
+      );
+
+    //get id in edit mode 
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['trainnerListId'];
+        this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.trainnersData = responce['users'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+      }
+    );
+
+  }
+
+  //make all checkbox of user checked
+  selectAll() {
+    for (var i = 0; i < this.trainnersData.length; i++) {
+      this.trainnersData[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.trainnersData.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+  
+  //filtter function
+  filtterFunc(data) {
+  this.trainnersData = [];
+  console.log(data.target.value);
+  const dataSearch = data.target.value;
+  this.currentPage = 1;
+  console.log('search curent page', this.currentPage);
+  this.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.trainnersData = responce['users'];
+      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.trainnersData = [];
+  //console.log(pagenationNumber);
+  //console.log(this.pageId);
+  this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+  (responce) => {
+    console.log(responce);
+    this.trainnersData = responce['users'];
+    this.count = responce['count'];
+    this.perPagePagenation = responce['per_page'];
+    console.log(this.trainnersData);
+    this.spinner.hide();
+  },
+  (error) => {
+    console.log(error);
+    this.spinner.hide();
+   }
+  );
+};
+  
+  
+//determine the list count from select element
+onGetValue(event) {
+  this.spinner.show();
+  this.trainnersData = [];
+  this.dataTableNumber = event.target.value;
+  this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.trainnersData = responce['users'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+}
+
+onDelete() {
+
+  this.trainnersListIds = [];
+  for(let i = 0; i < this.trainnersData.length; i++) {
+    if(this.trainnersData[i].selected == true) {
+      this.trainnersListIds.push(this.trainnersData[i].id);
+    }
+  }
+
+  console.log(this.trainnersListIds);
+  if(this.trainnersListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+        <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+        `)
+    .open();
+
+      dialogRef.result
+      .then( result => 
+        this.dashBoardService.deleteItem(this.trainnersListIds, this.pageId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم الحذف');
+              this.spinner.show();
+              this.trainnersData = [];
+              this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.trainnersData = responce['users'];
+                  console.log(this.trainnersData);
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                }
+              )
+            },
+            (error) => {
+              console.log(error);
+              this.toastr.error('حدث خطأ رجاء الانتظار وحاول ثانيه');
+              this.spinner.hide();
+            }
+        )
+      );
+  } else {
+    this.toastr.warning('لم يتم أختيار أي عنصر للحذف !');
+  }
+};
+
+//add function
+onAdd() {
+  console.log('service/' + this.userId + '/' + this.serviceId + '/trainer/add');
+  this.router.navigate(['service/' + this.userId + '/' + this.serviceId + '/trainer/add']);
+}
+
+//edit function
+ onEdit(editId) {
+  this.router.navigate(['service/' + this.userId + '/' + this.serviceId + '/trainer/edit/' + editId]);
+}
+
+}

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

@@ -232,13 +232,13 @@ export class FormUserComponent implements OnInit {
               
               this.getDepartment();
               this.spineer.hide();
-              this.spineer.hide();
             },
             (error) => {console.log(error)},
           );
         }
       }
     );
+    
     //user form json
     if(!this.typeMode){
       //creating user create form

src/app/end-higri-date/end-higri-date.component.css

@@ -0,0 +1,17 @@
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
+.calendar {
+    position: absolute;
+    left: 16px;
+    top: 32px;
+    border: none;
+}
+
+ngb-datepicker-navigation-select>.custom-select {
+    padding: 0% !important;
+    height:0 !important;
+}

src/app/end-higri-date/end-higri-date.component.html

@@ -0,0 +1,11 @@
+<input class="form-control" 
+    (ngModelChange)="onSearchChange($event)" 
+    placeholder="yyyy-mm-dd"
+    name="dp" 
+    [(ngModel)]="endModel" 
+    ngbDatepicker #d="ngbDatepicker" />
+            
+<div class="input-group-append">
+    <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"><i class="fas fa-calendar-minus"></i></button>
+</div>
+

src/app/end-higri-date/end-higri-date.component.ts

@@ -0,0 +1,66 @@
+import { Component, Injectable, OnInit, EventEmitter, Output, Input } from '@angular/core';
+
+import {
+  NgbDate,NgbDateStruct, NgbCalendar, NgbCalendarIslamicUmalqura, NgbDatepickerI18n
+} from '@ng-bootstrap/ng-bootstrap';
+
+const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
+const MONTHS = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر', 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان', 'رمضان', 'شوال',
+  'ذو القعدة', 'ذو الحجة'];
+
+  @Injectable()
+  export class IslamicI18n extends NgbDatepickerI18n {
+    getWeekdayShortName(weekday: number) {
+      return WEEKDAYS[weekday - 1];
+    }
+
+    getMonthShortName(month: number) {
+      return MONTHS[month - 1];
+    }
+
+    getMonthFullName(month: number) {
+      return MONTHS[month - 1];
+    }
+
+    getDayAriaLabel(date: NgbDateStruct): string {
+      return `${date.day}-${date.month}-${date.year}`;
+    }
+}
+
+@Component({
+  selector: 'app-end-higri-date',
+  templateUrl: './end-higri-date.component.html',
+  styleUrls: ['./end-higri-date.component.css'],
+  providers: [
+    {provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura},
+    {provide: NgbDatepickerI18n, useClass: IslamicI18n}
+  ]
+})
+export class EndHigriDateComponent implements OnInit {
+
+  @Output() onDatePicked: EventEmitter<NgbDate> = new EventEmitter<NgbDate>();
+  @Input() myEndDate;
+  endModel: NgbDateStruct;
+
+
+  ngOnInit() {
+    this.endModel = this.myEndDate;
+    console.log('moooodeeeeeeeeel' , this.myEndDate);
+  }
+
+
+
+  constructor(private calendar: NgbCalendar) {}
+ 
+ 
+ 
+
+  onSearchChange(date) {
+    this.onDatePicked.emit(date);
+  }
+ 
+ 
+
+
+
+}

src/app/higri-date/higri-date.component.ts

@@ -36,10 +36,12 @@ const MONTHS = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخ
     {provide: NgbDatepickerI18n, useClass: IslamicI18n}
   ]
 })
+
 export class HigriDateComponent implements OnInit {
   
   @Output() onDatePicked: EventEmitter<NgbDate> = new EventEmitter<NgbDate>();
   @Input() myDate;
+  @Input() myDate2;
   model: NgbDateStruct;
 
 
@@ -65,5 +67,4 @@ export class HigriDateComponent implements OnInit {
     console.log(event);
   }
 
-
 }

src/app/login/login.component.ts

@@ -45,18 +45,19 @@ export class LoginComponent implements OnInit {
     this.authSer.login(dataForm).subscribe(
       (responce: Response) => {
         localStorage.setItem('token', responce['token']);
+        localStorage.setItem('userType', responce['user'].type);
         const id = responce['user'].id;
         console.log(id);
         this.authSer.setDataUser(responce);
         this.loginFormData.reset();
-        //this.router.navigate(['/services/' + id]);
-        this.location.back();
+        this.router.navigate(['/services/' + id]);
+        // this.location.back();
       },
       (error) => {
         console.log(error);
         this.toastr.error( 'حدث خطأ' ,' تأكد من رقم الهويه او كلمه المرور ');
       }
-    )
+    );
   }
 
 

src/app/servicesItems/services.component.ts

@@ -18,6 +18,7 @@ export class ServicesComponent implements OnInit {
   myInnerHeight = window.innerHeight;
   services = [];
   pages = [];
+  userType: number = null; //visitor or employee
 
   subscriptionUSer: Subscription;
   constructor(private authService: AuthServiceService,
@@ -41,6 +42,7 @@ export class ServicesComponent implements OnInit {
       console.log(this.authService.isAuthenticated());
       //get profile data
       this.userservice.getUserDataProfile();
+      this.userType = parseInt(localStorage.getItem('userType')); 
 
       //catch id user
       this.subscriptionUSer =  this.route.params.subscribe(
@@ -157,7 +159,7 @@ getDataService(dataService){
         },
         (error) => {console.log(error)}
       );
-    }  else if(dataService.id == 3) {
+    }  else if(dataService.id == 3 && this.userType == 0) {
       
       this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
         (responce) => {
@@ -166,6 +168,11 @@ getDataService(dataService){
           if(this.pages[0].id == 33) {
             console.log('/service/' + this.idUser + '/' + dataService.id + '/supervisorList/' + this.pages[0].id);
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/supervisorList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 34) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/absorpationList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/absorpationList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 40) {
+            console.log('trainnngg data !');
           }
         },
         (error) => {
@@ -173,7 +180,10 @@ getDataService(dataService){
         }
       );
       
-     }
+     } else if(dataService.id == 3 && this.userType == 1) {
+       console.log('trainingServices/' + this.idUser + '/' + dataService.id);
+       this.router.navigate(['trainingServices/' + this.idUser + '/' + dataService.id]);
+     } 
   }
 
 

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

@@ -70,6 +70,7 @@ export class AuthServiceService {
   
 
   dataLoginUser = {};
+  
   //login function
   login(dataForm) {
     console.log(dataForm);

src/app/shared/dashboard.service.ts

@@ -19,14 +19,22 @@ export class DashboardService {
      //get hospitals list
      getListData(pageId: number, currentPage: number, dataTableNumber: number){
       this.spinner.show();
-      console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
-      return this.http.get(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+      console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + pageId);
+      if(pageId == 40) {
+        return this.http.get(this.authService.pathApi +'/page_list/1' + '/' + currentPage + '/' + dataTableNumber + '/all');
+      } else {
+        return this.http.get(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+      }
     }
 
      //get data user from searchBar
      getDataUSerSearchBar(data, pageId, pagenationNumber, dataTableNumber) {
       console.log('url', this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
-       return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
+      if(pageId == 40) {
+        return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/1/' + data);
+      } else {
+        return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
+      }
     }
 
     //addEvent
@@ -71,6 +79,12 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + "/add_advertising_service", data);
       } else if(addType == 'supervisor') {
         return this.http.post(this.authService.pathApi + "/asign_supervisor_to_department", data);
+      } else if(addType == 'absorpation') {
+        return this.http.post(this.authService.pathApi + "/add_absorpation_plan", data);
+      } else if(addType == 'request') {
+        return this.http.post(this.authService.pathApi + "/add_request", data);
+      } else if(addType == 'trainee') {
+        return this.http.post(this.authService.pathApi + "/add_user", data);
       }
     }
 
@@ -129,10 +143,16 @@ export class DashboardService {
       } else if(editPageName == 'advertising') {
         console.log(editData);
         return this.http.post(this.authService.pathApi + '/edit_advertising_service', editData);
+      } else if(editPageName == 'absorpation') {
+        return this.http.post(this.authService.pathApi + '/edit_absorpation_plan', editData);
+      } else if(editPageName == 'trainee') {
+        return this.http.post(this.authService.pathApi + '/edit_user', editData);
+      } else if(editPageName == 'request') {
+        return this.http.post(this.authService.pathApi + '/edit_request_for_trainee', editData);
       }
     }
 
-    //get event data
+    //get item data
     getItemData(pageId: number, typeGetData:string) {
       console.log('wwwwwwwwwwwwwwwwwwwwwwwwwwww', pageId);
       if(typeGetData == 'advertisiment') {
@@ -165,6 +185,10 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_advertising_service/' + pageId);
       } else if(typeGetData == 'supervisor') {
         return this.http.get(this.authService.pathApi + '/get_department/' + pageId);
+      } else if(typeGetData == 'absorpation') {
+        return this.http.get(this.authService.pathApi + '/get_absorpation_plan/' + pageId);
+      } else if(typeGetData == 'trainee') {
+        return this.http.get(this.authService.pathApi + '/get_user/' + pageId);
       }
   }
 
@@ -214,6 +238,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/delete_advertising_services' , {'advertising_services_id' : dataIds});
       } else if(pageId == 33) {
         return this.http.post(this.authService.pathApi + '/un_asign_supervisor_to_department', {'departments_id' : dataIds})
+      } else if(pageId == 34) {
+        return this.http.post(this.authService.pathApi + '/delete_absorpation_plans', {'absorpation_plans_id' : dataIds})
+      } else if(pageId == 40) {
+        return this.http.post(this.authService.pathApi + '/delete_user', {'users_id' : dataIds})
       }
 
     };

src/app/trainning-service/add-request/add-request.component.css

@@ -0,0 +1,70 @@
+.addRequest-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.addRequest-w h2 {
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+.addRequest-w h2 span {
+    font-size: 17px;
+    color: red;
+    margin: 0 5px;
+}
+
+.addRequest-w .itemFile-w {
+    width: 100%;
+    height: 150px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    margin: 20px 0;
+}
+
+.addRequest-w .itemFile-w span {
+    position: absolute;
+    left: 32px;
+    top: 83px;
+}
+
+.imgProfile {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+}
+
+.imgContainer {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px 0;
+    border: 1px solid #ccc;
+}
+
+
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    width: 100%;
+    margin: 10px 0;
+    padding: 0 10px;
+}

src/app/trainning-service/add-request/add-request.component.html

@@ -0,0 +1,142 @@
+<div class="addRequest-w">
+  <div class="container">
+      <div class="row" style="margin-bottom:8px;">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w" style="cursor: pointer;" (click)="authService.perviousLocation()">خدمه التدريب</li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px">إضافه طلب</li>
+          </ul>
+        </div>
+      </div>
+
+    <div class="contentBorder-w">
+      <div class="row">
+
+        <div class="col-12">
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label>نوع الطلب</label>
+                <select class="form-control selectStyle-w" name="type" (input)="changeType($event)" [ngModel]="dataForm.type" required>
+                  <option value="trainees">إختيار بين متدربين</option>
+                  <option value="fellowship">زماله(البورد السعودي) </option>
+                  <option value="university_administrators">مشرفي الجامعات</option>
+                </select>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="specialize">اسم التخصص</label>
+                <input type="text" placeholder="نوع الطلب" class="form-control" name="specialization_name" [ngModel]="dataForm.specialization_name" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="specialize">التخصص الدقيق</label>
+                <input type="text" placeholder="التخصص الدقيق" class="form-control" name="specific_specialization" [ngModel]="dataForm.specific_specialization" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="specialize">الجامعه</label>
+                <input type="text" placeholder="الجامعه" class="form-control" name="university" [ngModel]="dataForm.university" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="specialize">المستوي</label>
+                <input type="text" placeholder="المستوي" class="form-control" name="level" [ngModel]="dataForm.level" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="specialize">الفتره التدريبيه</label>
+                <input type="text" placeholder="الفتره التدريبيه" class="form-control" name="training_period" [ngModel]="dataForm.training_period" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
+              <div class="form-group">
+                <label for="specialize">رقم التسجيل</label>
+                <input type="number" placeholder="رقم التسجيل" class="form-control" name="registration_number" [ngModel]="dataForm.registration_number"/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
+              <div class="form-group">
+                <label for="specialize">رقم البطاقه الهينه</label>
+                <input type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" [ngModel]="dataForm.authority_card_number"/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
+              <div class="form-group">
+                <label for="specialize"> البطاقه الوظيفي</label>
+                <input type="number" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" [ngModel]="dataForm.functional_number"/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
+              <div class="form-group">
+                <label for="specialize">نوع التعاقد</label>
+                <input type="text" placeholder="نوع التعاقد" class="form-control" name="contract_type" [ngModel]="dataForm.contract_type"/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
+              <div class="form-group">
+                <label for="specialize">الجهه التابع لها المتدرب</label>
+                <input type="text" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" [ngModel]="dataForm.organization_affiliated_with"/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
+              <h2>أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2>
+              <hr>
+              <div class="row">
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="department1">القسم الأول</label>
+                    <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [ngModel]="dataForm.department1">
+                      <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="department2">القسم الثاني</label>
+                    <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [ngModel]="dataForm.department2">
+                      <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="form-group">
+                    <label for="department3">القسم الثالث</label>
+                    <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [ngModel]="dataForm.department3">
+                      <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12">
+               <div class="row">
+                 <div class="col-12">
+                  <button type="button" class="btn btn-default" (click)="plusImage()">إضافه مرفق</button>
+                 </div>
+                 <div class="col-12 col-sm-12 col-md-3 col-lg-3" *ngFor="let file of files; let i = index">
+                   <div class="itemFile-w">
+                     <input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}">
+                     <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" />
+                     <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                     <span>{{file.nameFile}}</span>
+                     <button (click)="onDeleteFile(file,i)" class="btn btn-danger" *ngIf="i==0 ? false: true">حذف</button>
+                   </div>
+                 </div>
+               </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authService.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/trainning-service/add-request/add-request.component.ts

@@ -0,0 +1,347 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { DashboardService } from './../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-add-request',
+  templateUrl: './add-request.component.html',
+  styleUrls: ['./add-request.component.css']
+})
+export class AddRequestComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private dashBoardSer: DashboardService,
+    private spiner: NgxSpinnerService,
+    private authService: AuthServiceService) { }
+
+  visitorId: number;
+  departments = [];
+  departmentsId = [];
+  checkSaveClick: boolean = false;
+  requestId: number;
+
+  @ViewChild('f') addRequestFrom: NgForm;
+
+
+  dataForm = {
+    type: '',
+    specialization_name: '',
+    specific_specialization: '',
+    university: '',
+    level: '',
+    training_period: '',
+    registration_number: '',
+    authority_card_number: '',
+    functional_number: '',
+    contract_type: '',
+    organization_affiliated_with: '',
+    department1: '',
+    department2: '',
+    department3: '',
+  }
+  
+  files = [{
+    title : '',
+    file: '',
+    file_type: '',
+    nameFile: '',
+  }]
+
+  attachments_ids = []; //for edit mode;
+
+  ngOnInit() {
+
+    this.authService.checkExternalFooter = false;
+    this.authService.arabicTemplate = true; //to make footer is arabic all time
+    //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;
+
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.visitorId = +params['visitorId'];
+      }
+    );
+
+    //get id of request in edit mode
+    this.route.params.subscribe(
+    (params: Params) => {
+      this.requestId = params['requestId'];
+      if(this.requestId) {
+        this.spiner.show();
+        this.http.get(this.authService.pathApi + '/get_request/' + this.requestId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.dataForm.type = responce['data']['request'].type;
+            this.dataForm.specialization_name = responce['data']['request'].specialization_name;
+            this.dataForm.specific_specialization = responce['data']['request'].specific_specialization;
+            this.dataForm.university = responce['data']['request'].university;
+            this.dataForm.level = responce['data']['request'].level;
+            this.dataForm.training_period = responce['data']['request'].training_period;
+
+            if(responce['data']['request'].departments.length > 0) {
+              if(responce['data']['request'].departments[0].department_id) {
+                this.dataForm.department1 = responce['data']['request'].departments[0].department_id;
+              }
+              if(responce['data']['request'].departments[1].department_id) {
+                this.dataForm.department2 = responce['data']['request'].departments[1].department_id;
+              }
+              if(responce['data']['request'].departments[2].department_id) {
+                this.dataForm.department3 = responce['data']['request'].departments[2].department_id;
+              }
+            }
+
+            if(responce['data']['request'].attachments.length > 0) {
+              for(let i = 0; i < responce['data']['request'].attachments.length; i++) {
+                this.attachments_ids.push(responce['data']['request'].attachments[i].id);
+              }
+              console.log('attachements ids', this.attachments_ids);
+            } else {
+              console.log('no attachements user add !');
+            }
+
+            this.spiner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      }
+    }
+  );
+
+    this.http.get(this.authService.pathApi + '/training_adminstration_departments').subscribe(
+      (responce) => {
+        this.departments = responce['departments'];
+        console.log(this.departments);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+
+
+ plusImage() {
+   this.files.push({
+     title: '',
+     file: '',
+     file_type: '',
+     nameFile: '',
+   });
+   console.log(this.files);
+ }
+
+ onFileChanges(event, index:number) {
+   console.log(event);
+   console.log(index);
+   this.files[index].nameFile = event[0].name.substring(0,20) + '....';
+   this.files[index].file = event[0].base64;
+   this.files[index].file_type = event[0].type.split('/')[1];
+   console.log(this.files);
+ }
+
+ onDeleteFile(fileData, index:number) {
+   console.log(fileData);
+   console.log(index);
+   this.files.splice(index , 1);
+ }
+
+ changeDepartment(event, typeSelect) {
+   console.log(event.target.value);
+   if(typeSelect == 1) {
+    this.departmentsId[0] = event.target.value;
+   } else if(typeSelect == 2) {
+    this.departmentsId[1] = event.target.value;
+   } else if(typeSelect == 3) {
+    this.departmentsId[2] = event.target.value;
+   }
+
+  
+   
+    console.log(this.departmentsId);
+    for(let i = 0; i < this.departmentsId.length; i++) {
+      if(this.departmentsId[i] == this.departmentsId[i+1]) {
+        this.toastr.warning('يوجد أقسام متشابهه ، يجب أن تكون جميه الاقسام مختلفه');
+        this.checkSaveClick = true;
+        break;
+      } else {
+        this.checkSaveClick = false;
+      }
+    }
+ }
+
+ changeType(event) {
+   this.dataForm.type = event.target.value;
+   console.log(this.dataForm.type);
+ }
+
+ onSubmitted() {
+
+  //remove fileName from files and remove file is empty 
+    for(let i = 0; i < this.files.length; i++) {
+     delete this.files[i].nameFile;
+     if(this.files[i].file_type){
+      this.files[i].file_type = this.files[i].file_type.toLowerCase();
+     }
+     if(this.files[i].file == '') {
+      //this.files.splice(this.files.indexOf(this.files[i], 1));
+      console.log('empty number ' , i);  
+      this.files.splice(i , 1);
+     }
+    }
+    
+    console.log(this.files);
+    this.addRequestFrom.value['attachments'] = this.files;
+
+    //store departments in object save
+    this.addRequestFrom.value['departments_ids'] = [];
+
+    if(this.addRequestFrom.value['department1']) {
+      console.log('1');
+      this.addRequestFrom.value['departments_ids'].push(this.addRequestFrom.value['department1']);
+      //delete this.addRequestFrom.value['department1'];
+    }
+    if(this.addRequestFrom.value['department2']) {
+     console.log('2');
+     this.addRequestFrom.value['departments_ids'].push(this.addRequestFrom.value['department2']);
+     //delete this.addRequestFrom.value['department2'];
+   }
+   if(this.addRequestFrom.value['department3']) {
+     console.log('3');
+     this.addRequestFrom.value['departments_ids'].push(this.addRequestFrom.value['department3']);
+     //delete this.addRequestFrom.value['department3'];
+   }
+
+
+   if(this.requestId) {
+    //edit mode
+    if(this.addRequestFrom.value['departments_ids'].length == 0 ) {
+      this.toastr.warning('من فضلك ، قم بإختيار قسم كحد أدني !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['registration_number'] == '') {
+      this.toastr.warning('قم بإختيار رقم التسجيل !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['authority_card_number'] == '') {
+      this.toastr.warning('قم بإختيار  رقم البطاقه الهنيه !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['functional_number'] == '') {
+      this.toastr.warning('قم بإختيار الرقم الوظيفي!');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['contract_type'] == '') {
+      this.toastr.warning('قم بإختيار نوع العقد !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['organization_affiliated_with'] == '') {
+      this.toastr.warning('الجهه التابع لها المتدرب !');
+    } else if(this.addRequestFrom.value['attachments'].length > 0){
+      for(let i = 0; i < this.addRequestFrom.value['attachments'].length; i++) {
+        if(this.addRequestFrom.value['attachments'][i].file_type != 'pdf' || this.addRequestFrom.value['attachments'][i].title == "") {
+          this.toastr.warning(  ' ان يكون صيغه الملف ' +  'PDF' + (i+1) );
+        }
+      }
+        delete this.addRequestFrom.value['department1'];
+        delete this.addRequestFrom.value['department2'];
+        delete this.addRequestFrom.value['department3'];
+        console.log('successsss edit ' , this.addRequestFrom.value);
+        // this.dashBoardSer.addItem(this.addRequestFrom.value,'request').subscribe(
+        //   (responce) => {
+        //     console.log(responce);
+        //     this.toastr.success('تم التعديل بنحاج');
+        //   },
+        //   (error) => {
+        //     console.log(error);
+        //     this.toastr.error('خطأ في التعديل !');
+        //   }
+        // );
+    } else {
+        delete this.addRequestFrom.value['department1'];
+        delete this.addRequestFrom.value['department2'];
+        delete this.addRequestFrom.value['department3'];
+        console.log('successsss edit ' , this.addRequestFrom.value);
+        // this.dashBoardSer.editItem(this.requestId, this.addRequestFrom.value,'request').subscribe(
+        //   (responce) => {
+        //     console.log(responce);
+        //     this.toastr.success('تم التعديل بنحاج');
+        //   },
+        //   (error) => {
+        //     console.log(error);
+        //     console.log(error.error['error']);
+        //     if(error.error['error'] == 'can not add new request untill old one done') {
+        //       this.toastr.warning('لا يمكن التعديل طلب جديد ، حتي يتم إجراءات علي الطلب السابق ، شكراً');
+        //     } else {
+        //       this.toastr.error('يوجد مشكله في السرفر ، سيتم معالجتها لاحقاً');
+        //     }
+        //   }
+        // );
+    }
+   } else {
+     
+    this.addRequestFrom.value['user_id'] = this.visitorId;//add id of user in object
+    //add mode
+    if(this.addRequestFrom.value['departments_ids'].length == 0 ) {
+      this.toastr.warning('من فضلك ، قم بإختيار قسم كحد أدني !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['registration_number'] == '') {
+      this.toastr.warning('قم بإختيار رقم التسجيل !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['authority_card_number'] == '') {
+      this.toastr.warning('قم بإختيار  رقم البطاقه الهنيه !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['functional_number'] == '') {
+      this.toastr.warning('قم بإختيار الرقم الوظيفي!');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['contract_type'] == '') {
+      this.toastr.warning('قم بإختيار نوع العقد !');
+    } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['organization_affiliated_with'] == '') {
+      this.toastr.warning('الجهه التابع لها المتدرب !');
+    } else if(this.addRequestFrom.value['attachments'].length > 0){
+      for(let i = 0; i < this.addRequestFrom.value['attachments'].length; i++) {
+        if(this.addRequestFrom.value['attachments'][i].file_type != 'pdf' || this.addRequestFrom.value['attachments'][i].title == "") {
+          this.toastr.warning(  ' ان يكون صيغه الملف ' +  'PDF' + (i+1) );
+        }
+      }
+      delete this.addRequestFrom.value['department1'];
+        delete this.addRequestFrom.value['department2'];
+        delete this.addRequestFrom.value['department3'];
+        console.log('successsss save ' , this.addRequestFrom.value);
+        this.dashBoardSer.addItem(this.addRequestFrom.value,'request').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الإضافه بنحاج');
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الإضافه !');
+          }
+        );
+    } else {
+        delete this.addRequestFrom.value['department1'];
+        delete this.addRequestFrom.value['department2'];
+        delete this.addRequestFrom.value['department3'];
+        console.log('successsss save ' , this.addRequestFrom.value);
+        this.dashBoardSer.addItem(this.addRequestFrom.value,'request').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الإضافه بنحاج');
+          },
+          (error) => {
+            console.log(error);
+            console.log(error.error['error']);
+            if(error.error['error'] == 'can not add new request untill old one done') {
+              this.toastr.warning('لا يمكن إضافه طلب جديد ، حتي يتم إجراءات علي الطلب السابق ، شكراً');
+            } else {
+              this.toastr.error('يوجد مشكله في السرفر ، سيتم معالجتها لاحقاً');
+            }
+          }
+        );
+    }
+   }
+
+ }
+
+}

src/app/trainning-service/all-requests/all-requests.component.css

@@ -0,0 +1,32 @@
+.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/trainning-service/all-requests/all-requests.component.html

@@ -0,0 +1,44 @@
+<div class="container">
+  
+    <div class="row">
+      <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w" style="cursor: pointer;" (click)="authSer.perviousLocation()">خدمه التدريب</li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px">طلباتي</li>
+          </ul>
+      </div>
+    </div>
+  
+    <div class="containerContent-w">
+    
+        <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">
+                  </div>
+                </th> -->
+                <th> إسم التخصص</th>
+                <th> اسم التخصص الدقيق</th>
+                <th>الجامعه</th>
+                <th>تعديل</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let data of requests; let i = index " style="text-align:center">
+                <!-- <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();">
+                  </div>
+                </td> -->
+                <td>{{data.specialization_name}}</td>
+                <td> {{data.specific_specialization}}</td>
+                <td>{{data.university}}</td>
+                <td *ngIf=" data.status == 'pending' "><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+              </tr>
+            </tbody>
+          </table>
+    </div>
+  </div>
+  

src/app/trainning-service/all-requests/all-requests.component.ts

@@ -0,0 +1,70 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+
+@Component({
+  selector: 'app-all-requests',
+  templateUrl: './all-requests.component.html',
+  styleUrls: ['./all-requests.component.css']
+})
+export class AllRequestsComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+    private spinner: NgxSpinnerService, 
+    private router: Router,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService) { }
+
+    requests = [];
+    count: number;
+    visitorId: number;
+  
+
+  ngOnInit() {
+    this.spinner.show();
+
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.visitorId = +params['visitorID'];
+      }
+    );
+
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = 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.http.get(this.authSer.pathApi + '/get_my_requests').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.requests = responce['requests'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+  onEdit(requestId: number) {
+    console.log(requestId);
+    console.log('editRequest/' + this.visitorId + '/' + requestId);
+    this.router.navigate(['editRequest/' + this.visitorId + '/' + requestId]);
+  }
+
+
+
+  
+
+
+}

src/app/trainning-service/trainning-services/trainning-services.component.css

@@ -0,0 +1,92 @@
+.dashboard {
+    width: 100%;
+    margin-top: -5px;
+    padding: 40px 0;
+}
+
+.dashboard h1{
+    text-align: right;
+    font-size: 18px;
+    margin: 10px 0;
+    padding: 10px 0;
+}
+
+.dashboardItem-w {
+    width: 90%;
+    height: 180px;
+    background-color: #f1f1f1;
+    border-radius: 10px;
+    color: #bda380;
+    border: 1px solid #bda380;
+    border-top: 0;
+    font-family: 'Cairo', sans-serif;
+    transition: all 05s;
+}
+
+.dashboardItem-w:hover img {
+    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+    filter: grayscale(100%);
+}
+
+.dashboardItem-w:hover h1 {
+    color: #cdcdcd;
+}
+
+.dashboardItem-w h1 {
+    font-size: 15px;
+    margin: 5px 0;
+    padding: 20px;
+    background-color: #bda380;
+    color: #fff;
+    border-radius: 5px 5px 0 0;
+    font-weight: bold;
+}
+/* .mainFooter-w {
+    width: 100%;
+    height: 288px;
+    background: url('../assets/image/footer.png') no-repeat center center;
+    background-size: cover;
+    margin-top: -13px;
+    position: relative;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+} */
+
+.serviceIcon-w {
+    width: 50px;
+    margin: 30px auto;
+    height: 50px;
+}
+
+.serviceIcon-w img{
+    width: 100%;
+    height: 100%;
+    transition: all 0.5s;
+}
+
+
+@media(max-width: 767px){
+    .dashboardItem-w {
+        width: 100%;
+    }
+
+    .dashboardItem-w h1 {
+        font-size: 9px;
+    } 
+}
+
+@media(min-width: 768px) and (max-width: 991px) {
+    .dashboardItem-w {
+        width: 100%;
+    }
+    .dashboardItem-w h1 {
+        font-size: 16px;
+    }
+}
+
+/* @media(min-width: 992px) {
+    .dashboardItem-w h1 {
+        font-size: 20px;
+    }
+} */
+

src/app/trainning-service/trainning-services/trainning-services.component.html

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

src/app/trainning-service/trainning-services/trainning-services.component.ts

@@ -0,0 +1,70 @@
+import { UserService } from './../../shared/user.service';
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-trainning-services',
+  templateUrl: './trainning-services.component.html',
+  styleUrls: ['./trainning-services.component.css']
+})
+export class TrainningServicesComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private authService: AuthServiceService,
+    private spinner: NgxSpinnerService,
+    private http: HttpClient,
+    private userService: UserService,
+    private authSer: AuthServiceService) { }
+
+    trainningServiceId: number;
+    visitorId: number;
+    pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();//spinner
+    this.authService.checkExternalFooter = false;
+    this.authService.arabicTemplate = true; //to make footer is arabic all time
+    //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;
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.trainningServiceId = +params['trainningServicesId'];
+        this.visitorId = params['visitorId'];
+      }
+    );
+
+    this.userService.getPagesPermetiotns(this.visitorId, this.trainningServiceId).subscribe(
+      (responce) => {
+        this.pages = responce['pages'];
+        console.log('pages list', this.pages);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
+  }
+
+  onGetService(serviceData: any) {
+    console.log(serviceData);
+    if(serviceData.id == 41) {
+      this.router.navigate(['addRequest/' + this.visitorId]);
+    } else if(serviceData.id == 42) {
+      this.router.navigate(['allRequests/' + this.visitorId]);
+    }
+  }
+
+}

src/styles.css

@@ -1091,6 +1091,15 @@ height: 7px !important;
   position: absolute;
 }
 
+.cal-month-view .cal-open-day-events {
+  position: absolute;
+  width: 85%;
+}
+
+.selectStyle-w {
+  padding: 0 5px;
+}
+
 
 /* ------black-----*/
 @media screen and (min-width: 1200px) {