26

angular.json

@@ -35,7 +35,8 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/popper.js/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/slick-carousel/slick/slick.min.js"
+              "node_modules/slick-carousel/slick/slick.min.js",
+              "node_modules/owl.carousel/dist/owl.carousel.js"
             ]
           },
           "configurations": {

package-lock.json

@@ -1561,6 +1561,7 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2811,7 +2812,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3225,7 +3227,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4311,7 +4314,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4332,12 +4336,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4352,17 +4358,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4479,7 +4488,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4491,6 +4501,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4505,6 +4516,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4512,12 +4524,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4536,6 +4550,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4616,7 +4631,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4628,6 +4644,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4713,7 +4730,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4749,6 +4767,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4768,6 +4787,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4811,12 +4831,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -4825,6 +4847,7 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4837,6 +4860,7 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4874,7 +4898,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -5134,7 +5159,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5905,7 +5931,8 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6592,6 +6619,7 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6604,7 +6632,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6878,7 +6907,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7458,9 +7488,9 @@
       }
     },
     "ngx-owl-carousel-o": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-0.1.1.tgz",
-      "integrity": "sha512-bk8ujlIwmW/bAKZfY6F8tL6V4524vSb9koUv+7MqfTr+2zolJX/Mpd3Ajp7eZrBUroaD/xp2pc1WvP7jH1DFxw==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-0.1.2.tgz",
+      "integrity": "sha512-HaqYfQF4uZLe7bco0AzeWJ+89X2AmDhmjMEIgV8IYzN49Mh6dMeV846nbx5zCeImXuMl4XUxQaRTAMj+1fvwdQ==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -7775,6 +7805,7 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8922,8 +8953,7 @@
     "raw-loader": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
-      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
-      "dev": true
+      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao="
     },
     "read-cache": {
       "version": "1.0.0",
@@ -8947,6 +8977,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
+      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8958,6 +8989,7 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8968,7 +9000,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -8977,6 +9010,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8987,6 +9021,7 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8997,6 +9032,7 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
+          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -9377,6 +9413,14 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "script-loader": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
+      "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==",
+      "requires": {
+        "raw-loader": "~0.5.1"
+      }
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -10296,6 +10340,7 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
+      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -11647,6 +11692,7 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }

package.json

@@ -69,7 +69,7 @@
     "ngx-modialog": "^5.0.1",
     "ngx-moment": "^3.3.0",
     "ngx-owl-carousel": "^2.0.7",
-    "ngx-owl-carousel-o": "^0.1.1",
+    "ngx-owl-carousel-o": "^0.1.2",
     "ngx-pagination": "^3.2.1",
     "ngx-quill": "^3.0.0",
     "ngx-slick": "^0.2.1",
@@ -81,6 +81,7 @@
     "popper.js": "^1.14.7",
     "rxjs": "~6.3.3",
     "rxjs-compat": "^6.3.3",
+    "script-loader": "^0.7.2",
     "slick-carousel": "^1.8.1",
     "zone.js": "~0.8.26"
   },

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

@@ -81,12 +81,10 @@
 
  
 
- <!-- <div class="container">
-        <div>Some tags before</div>
+<!-- <div class="container">
         <owl-carousel-o [options]="customOptions">
-        <ng-template carouselSlide>Slide 1</ng-template>  
-        <ng-template carouselSlide>Slide 2</ng-template>  
-        <ng-template carouselSlide>Slide 3</ng-template>  
-      </owl-carousel-o>
-      <div>Some tags after</div>
- </div> -->
+            <ng-template carouselSlide>Slide 1</ng-template>  
+            <ng-template carouselSlide>Slide 2</ng-template>  
+            <ng-template carouselSlide>Slide 3</ng-template>  
+        </owl-carousel-o>
+</div> -->

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

@@ -126,6 +126,31 @@ export class ExternalHospitalComponent implements OnInit {
       description_en: fieldData.description_en,
     }
     console.log(this.detailsField);
+  };
+
+  customOptions: any = {
+    loop: true,
+    mouseDrag: false,
+    touchDrag: false,
+    pullDrag: false,
+    dots: false,
+    navSpeed: 700,
+    navText: ['', ''],
+    responsive: {
+      0: {
+        items: 1
+      },
+      400: {
+        items: 2
+      },
+      740: {
+        items: 3
+      },
+      940: {
+        items: 4
+      }
+    },
+    nav: true
   }
 
   

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

@@ -12,7 +12,6 @@ import { ExternalPageHeaderComponent } from './external-page-header/external-pag
 import { ExternalPageContentComponent } from './external-page-content/external-page-content.component';
 import { ExternalPageComponent } from './external-page/external-page.component';
 import { AgmCoreModule } from '@agm/core';
-import { OwlModule } from 'ngx-owl-carousel';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { ExternalHospitalComponent } from './external-hospital/external-hospital.component';
@@ -24,10 +23,10 @@ import { InernalServicePageComponent } from './inernal-service-page/inernal-serv
 import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
 import { ExternalPolicyComponent } from './external-policy/external-policy.component';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import { CarouselModule } from 'ngx-owl-carousel-o';
 import { ContactUsComponent } from './contact-us/contact-us.component';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CarouselModule } from 'ngx-owl-carousel-o';
 
 @NgModule({
     declarations: [ExternalPageHeaderComponent,
@@ -50,9 +49,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
         FormsModule,
         BrowserAnimationsModule,
         RouterModule,
-        OwlModule,
         CarouselModule,
         NgxPaginationModule,
+        CarouselModule,
         SharedModule,
         NgbModule.forRoot(),
         AgmCoreModule.forRoot({

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

@@ -16,7 +16,6 @@ export class ExternalPageComponent implements OnInit {
 
   ngOnInit() {
     this.authSer.checkExternalFooter = true;
-    //this.router.navigate(['ExternalPage/home']);
   }
 
 }

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

@@ -101,7 +101,7 @@ export class InternalPageContentComponent implements OnInit {
     }
 
   ngOnInit() {
-    this.spinner.show();
+    console.log('content');
    //console.log(this.checkTokenExpire);
        //get profile data
     //this.spinner.show();
@@ -166,14 +166,12 @@ export class InternalPageContentComponent implements OnInit {
         this.achievements = responce['data'].achievements;
         
         this.advertisiment = {
-          photo: responce['data']['main_ad'].photo,
-          description: responce['data']['main_ad'].description,
-          description_en: responce['data']['main_ad'].description_en,
+          photo: responce['data']['main_ad'] ? responce['data']['main_ad'].photo : '',
+          description: responce['data']['main_ad'] ? responce['data']['main_ad'].description: '',
+          description_en: responce['data']['main_ad'] ? responce['data']['main_ad'].description_en: '',
         }
 
-        if(this.achievements.length > 0) {
           this.spinner.hide();
-        }
         
 
       },

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

@@ -20,7 +20,7 @@ export class InternalPageHeaderComponent implements OnInit {
     private route: ActivatedRoute,
     private spinner: NgxSpinnerService,
     private router: Router) {
-      this.spinner.show();
+      spinner.show();
      }
   
     

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

@@ -24,7 +24,7 @@ export class InternalPageComponent implements OnInit {
     private route: ActivatedRoute,
     private internalService: InternalPageService,
     private spinner: NgxSpinnerService,) {
-      this.spinner.show();
+      spinner.show();
      }
 
 

src/app/app-routing.module.ts

@@ -21,8 +21,8 @@ const routes: Routes = [
   {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'},
+  {path: 'InternalPage' , loadChildren: './Internal-Page/internal-page.module#InternalPageModule', canLoad: [AuthGuard]},
+  {path: 'ExternalPage', loadChildren: './External-Page/external-page.module#ExternalPageModule', canLoad: [AuthGuard]},
   {path: 'profile/:idProfile', component: RegesterComponent, canActivate: [AuthGuard]},
   {path: 'page-not-found', component: PageNotFoundComponent},
   {path: '**', redirectTo: '/page-not-found', pathMatch: 'full'}

src/app/dashboard/Registration-trainee-movement/registration-trainee-movement-add/registration-trainee-movement-add.component.css

@@ -0,0 +1,277 @@
+.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;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.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;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 80px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 265px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    position: absolute;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.buttonStatus-w{
+    width: 80px;
+    margin: 0 10px;
+    float: right;
+}
+
+/* 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/Registration-trainee-movement/registration-trainee-movement-add/registration-trainee-movement-add.component.html

@@ -0,0 +1,301 @@
+<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>
+            </ul>
+          </div>
+      </div>
+  
+      <div class="containerContent-w">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              <h2 class="title">المعلومات الشخصيه</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإسم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.name" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" style="padding:0 5px" ngModel name="nationality_id" [(ngModel)]="userData.nationality_id" [disabled]="disabledInput" required>
+                      <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-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
+                      <select class="form-control select" id="identity" (change)="getSelectedOptionText($event)" ngModel name="identity_type_id" [(ngModel)]="userData.identity_type_id" [disabled]="disabledInput" required>
+                        <option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                    <input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" (input)="onIdentitiyChange($event.target.value)" ngModel name="identity_number" [(ngModel)]="userData.identity_number" [disabled]="disabledInput" required/>
+                    <span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                        <input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" ngModel name="birthday" [(ngModel)]="userData.birthday" [disabled]="disabledInput" required/> 
+                      </div>
+                    </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+                      <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                        <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <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" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
+                      </div>
+      
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات الإتصال</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" ngModel name="phone" [(ngModel)]="userData.phone" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                      <input id="email" type="email" class="form-control" placeholder="الإيميل" ngModel name="email"  [(ngModel)]="userData.email" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات التدريب</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <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 selectStyle-w" ngModel name="type" [(ngModel)]="formData.type" [disabled]="disabledInput" (input)="changeType($event)" 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="order" style="float:right">اسم التخصص <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="order" placeholder=" إسم التخصص" ngModel name="specialization_name" [(ngModel)]="formData.specialization_name" class="form-control" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="spec" style="float:right">التخصص الدقيق <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="spec" class="form-control" placeholder="التخصص الدقيق" name="specific_specialization" [(ngModel)]="formData.specific_specialization" [disabled]="disabledInput" ngModel required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
+                    <div class="form-group">
+                      <label for="universty" style="float:right">الجامعه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="universty" placeholder="الجامعه" class="form-control" name="univeristy" ngModel [(ngModel)]="formData.university" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="level" style="float:right">المستوي <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="level" placeholder="المستوي" class="form-control" name="level" ngModel [(ngModel)]="formData.level" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="trainning" style="float:right">الفتره التدريبيه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="trainning" placeholder="الفتره التدريبيه" class="form-control" name="training_period" ngModel [(ngModel)]="formData.training_period" [disabled]="disabledInput" required />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="regester" style="float:right">رقم التسجيل <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="regester" placeholder="رقم التسجيل" class="form-control" name="training_period" ngModel [(ngModel)]="formData.registration_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="card" style="float:right">رقم البطاقه الهينه <span class="spanReqired-w">*</span></label>
+                      <input id="card" type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" ngModel [(ngModel)]="formData.authority_card_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="job" style="float:right"> البطاقه الوظيفي <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="job" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" ngModel [(ngModel)]="formData.functional_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="contract" style="float:right">نوع التعاقد <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="contract" placeholder="نوع التعاقد" class="form-control" name="contract_type" ngModel [(ngModel)]="formData.contract_type" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="field" style="float:right">الجهه التابع لها المتدرب <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="field" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" ngModel [(ngModel)]="formData.organization_affiliated_with" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department1" style="float:right;">القسم الأول</label>
+                      <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2001">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department2" style="float:right;">القسم الثاني</label>
+                      <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2002">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department3" style="float:right;">القسم الثالث</label>
+                      <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2003">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12">
+                    <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th> إسم المرفق</th>
+                        <th>رفع املف ( بصيغه pdf )</th>
+                        <th>حذف</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                        <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                        <td style="position: relative;">
+                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" [disabled]="disabledInput"/>
+                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          <span class="fileName-w">{{file.nameFile}}</span>
+                        </td>
+                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)" [disabled]="disabledInput">حذف</button></td>
+                      </tr>
+                    </tbody>
+                  </table>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-md-6">
+                    <label style="float:right; margin: 20px;"> الملاحظات</label>
+                    <quill-editor id="description" name="notes" [(ngModel)]="actionForm.notes" required>
+                    </quill-editor>
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <div class="col-12">
+                       <label style="float:right; font-size: 18px;">الحاله</label>
+                    </div>
+                      <button type="button" class="btn btn-danger buttonStatus-w" (click)="traineeStatus('stopped')">إيقاف</button>
+                      <button type="button" class="btn btn-primary buttonStatus-w" (click)="traineeStatus('ended')">إنهاء</button>
+                      <button type="button" class="btn btn-success buttonStatus-w" (click)="traineeStatus('in_training')">إستئناف</button>
+                      <div class="col-12" style="margin: 10px 0;"  *ngIf="stoppedShow">
+                        <div class="form-group">
+                          <label style="float:right; margin: 20px;"> سبب الإلغاء</label>
+                          <quill-editor id="description" name="actionOpinionForm" [(ngModel)]="actionForm.trainee_status_description" required>
+                          </quill-editor>
+                        </div>
+                      </div>
+                      <div class="col-12" style="margin: 10px 0;"  *ngIf="endedShow">
+                        <div class="form-group">
+                          <label style="float:right; margin: 20px;">تقييم القسم للمتدرب</label>
+                          <quill-editor id="description" name="trainee_evaluation" [(ngModel)]="actionForm.trainee_evaluation" required>
+                          </quill-editor>
+                        </div>
+                      </div>
+                  </div>  
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="checkSaveClick">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+
+          </div>
+        </form>
+      </div>
+  
+  
+    </div>
+  </div>
+  

src/app/dashboard/Registration-trainee-movement/registration-trainee-movement-add/registration-trainee-movement-add.component.ts

@@ -0,0 +1,277 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AuthServiceService } from '../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-registration-trainee-movement-add',
+  templateUrl: './registration-trainee-movement-add.component.html',
+  styleUrls: ['./registration-trainee-movement-add.component.css']
+})
+export class RegistrationTraineeMovementAddComponent implements OnInit {
+
+  constructor(private userSer: UserService, 
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private route: ActivatedRoute,
+    private dashBoardSer: DashboardService,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private authSer: AuthServiceService) { }
+
+    
+
+  typeLink:string = '';
+  userId: number;
+  checkSaveClick:boolean = false; //to make save button is disabled when click save 
+  disabledInput: boolean = false; //to make button dsabled in create mode 
+  reportId: number;
+  stoppedShow: boolean = false;
+  endedShow: boolean = false;
+  countries: any[] = [];
+  identities: any[] = [];
+  trainees:any[] = [];
+  departments:any[] = [];
+  departmentsId:any[] = [];
+
+  @ViewChild('f') traineeForm: NgForm;
+
+  //all form data 
+  formData = {
+    trainee: '',
+    type: '',
+    specialization_name: '',
+    specific_specialization: '',
+    university: '',
+    level: '',
+    training_period: '',
+    registration_number: '',
+    authority_card_number: '',
+    functional_number: '',
+    contract_type: '',
+    status: '',
+    organization_affiliated_with: '',
+    department1: '',
+    department2: '',
+    department3: '',
+  }
+
+  //user data object
+
+  userData = {
+    name: '',
+    email: '',
+    nationality_id: '',
+    identity_number: '',
+    identity_type_id: '',
+    birthday: '',
+    gender: '',
+    phone: '',
+  }
+
+  actionForm = {
+    notes: '',
+    request_id: null,
+    trainee_status: '',
+    trainee_status_description: '',
+    trainee_evaluation: '',
+    department_id: null,
+  }
+
+  identity_id: number = 0; //to determine te number of identity to validation
+  identity_type: number;
+  typeMode:boolean = false;
+
+  files = [{
+    title : '',
+    file: '',
+    file_type: '',
+    nameFile: '',
+    id: null,
+  }];
+
+
+  ngOnInit() {
+
+    //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;
+
+    //get nationality data
+    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'];
+        console.log('idddentiiiesssssssssss', this.identities);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get trainee data
+    this.http.get(this.authSer.pathApi + '/get_trainees').subscribe(
+      (responce) => {
+        this.trainees = responce['users'];
+        console.log(this.trainees);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get departments
+    this.http.get(this.authSer.pathApi + '/training_adminstration_departments').subscribe(
+      (responce) => {
+        this.departments = responce['departments'];
+        console.log(this.departments);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.reportId = params['registrationTraineereviewSectionAddId'];
+      }
+    );
+
+    if(this.reportId) {
+
+      this.actionForm.request_id = this.reportId;
+      this.disabledInput = true;
+      this.spinner.show();
+      this.typeMode = true;
+      this.files = [];
+
+      this.dashBoardSer.getItemData(this.reportId,'traineeRequest').subscribe(
+        (responce) => {
+          console.log('get request by id', responce);
+          this.formData.trainee = responce['data']['user'].id;
+          this.formData.type = responce['data']['request'].type;
+          this.formData.specialization_name = responce['data']['request'].specialization_name;
+          this.formData.specific_specialization = responce['data']['request'].specific_specialization;
+          this.formData.level = responce['data']['request'].level;
+          this.formData.contract_type = responce['data']['request'].contract_type;
+          this.formData.university = responce['data']['request'].university;
+          this.formData.authority_card_number = responce['data']['request'].authority_card_number;
+          this.formData.training_period = responce['data']['request'].training_period;
+          this.formData.functional_number = responce['data']['request'].functional_number;
+          this.formData.organization_affiliated_with = responce['data']['request'].organization_affiliated_with;
+          this.formData.registration_number = responce['data']['request'].registration_number;
+          this.userData.name = responce['data']['user'].name;
+          this.userData.email = responce['data']['user'].email;
+          this.userData.identity_number = responce['data']['user'].identity_number;
+          this.userData.identity_type_id = responce['data']['user'].identity_type_id;
+          this.userData.phone = responce['data']['user'].phone;
+          this.userData.birthday = responce['data']['user'].birthday;
+          this.userData.gender = responce['data']['user'].gender;
+          this.userData.nationality_id = responce['data']['user'].nationality_id;
+          this.userId = responce['data']['user'].id;
+          this.userData['id'] = this.userId;
+
+             //add departmrnts ids 
+             if(responce['data']['request'].departments.length > 0) {
+              for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+                if(i == 0) {
+                  this.formData.department1 = responce['data']['request'].departments[0].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 1) {
+                  this.formData.department2 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 2) {
+                  this.formData.department3 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+              }
+            }
+          }
+
+          for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+            if(responce['data']['request'].departments[i].asked_for_opinion == 1) {
+              this.actionForm.department_id = responce['data']['request'].departments[i].department_id;
+            }
+          }
+
+          if(responce['data']['request'].attachments.length > 0) {
+            for(let i = 0; i < responce['data']['request'].attachments.length; i++) {
+              this.files.push({
+                title: responce['data']['request'].attachments[i].title,
+                file: '',
+                nameFile: responce['data']['request'].attachments[i].file,
+                file_type: '',
+                id: responce['data']['request'].attachments[i].id,
+              })
+            }
+          } else {
+            console.log('no attachements user add !');
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+  }
+
+  traineeStatus(status: string) {
+    console.log(status);
+    if(status == 'ended') {
+      this.toastr.warning('تم الانهاء للمتدرب');
+      this.actionForm.trainee_status = status;
+      this.endedShow = true;
+      this.stoppedShow = false;
+    } else if (status == 'stopped') {
+      this.toastr.error('تم الإيقاف للمتدرب');
+      this.actionForm.trainee_status = status;
+      this.stoppedShow = true;
+    } else if(status == 'in_training') {
+      this.toastr.success('تم الإستئناف للمتدرب');
+      this.actionForm.trainee_status = status;
+      this.stoppedShow = false;
+      this.endedShow = false;
+    }
+  }
+
+  onSubmittedForm() {
+    console.log(this.actionForm);
+    this.http.post(this.authSer.pathApi + '/final_accreditation_of_trainees', this.actionForm).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم بنجاح');
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('يوجد خطأ في السيرفر ، حاول لاحقاً');
+        this.location.back();
+      }
+    )
+  }
+
+}

src/app/dashboard/Registration-trainee-movement/registration-trainee-movement-list/registration-trainee-movement-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/Registration-trainee-movement/registration-trainee-movement-list/registration-trainee-movement-list.component.html

@@ -0,0 +1,68 @@
+<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>
+  
+      <table class="table table-bordered">
+        <thead class="headBackground-w">
+          <tr>
+            <th> إسم المتدرب</th>
+            <th>إسم التخصص</th>
+            <th>إسم التخصص الدقيق</th>
+            <th> الجامعه</th>
+            <th *ngIf="authSer.showEditBtn">تفاصيل المتدرب</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+            <td>{{data.trainee_name}}</td>
+            <td> {{data.specialization_name}}</td>
+            <td>{{data.specific_specialization}}</td>
+            <td>{{data.university}}</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/Registration-trainee-movement/registration-trainee-movement-list/registration-trainee-movement-list.component.ts

@@ -0,0 +1,196 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+@Component({
+  selector: 'app-registration-trainee-movement-list',
+  templateUrl: './registration-trainee-movement-list.component.html',
+  styleUrls: ['./registration-trainee-movement-list.component.css']
+})
+export class RegistrationTraineeMovementListComponent implements OnInit {
+
+
+  constructor(private route: ActivatedRoute,    
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private modal: Modal,
+    private dashBoardService: DashboardService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+    pageId: number;
+    dataList = [];
+    dataListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    serviceName: string = '';
+    pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    //init the values of permision boolean
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['registrationListId'];
+      }
+    );
+
+    //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;
+    
+   
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        
+        this.route.parent.params.subscribe(
+          (params:Params) => {
+              this.userLoginId = params['userID'];
+              this.serviceId = params['serviceID'];
+      
+              this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.pages = responce['pages'];
+                  for(let i = 0; i< this.pages.length; i++) {
+                    if(this.pages[i].id == 38) {
+                        this.authSer.showAddBtn = true;
+                        this.authSer.showEditBtn = true;
+                        this.authSer.showDeleteBtn = true;
+                     
+                    } 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('rescponce dataaaa', responce);
+            this.dataList = responce['requests'];
+            if(this.dataList.length == 0) {
+              this.toastr.warning('القائمه فارغه من الطلبات ');
+            }
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log('evennnnts', this.dataList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+
+      }
+    );
+    
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.dataList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    this.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        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.dataList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.dataList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+
+
+  //edit function
+  onEdit(editPageID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'registrationTraineeList/edit/' + editPageID]);
+  }
+
+}

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

@@ -58,6 +58,7 @@ export class AbsorpationAddComponent implements OnInit {
 
     //edit mode 
     if(this.obsId) {
+      this.spinner.show();
       this.dashBoardSer.getItemData(this.obsId, 'absorpation').subscribe(
         (responce) => {
           console.log('data get item', responce);
@@ -79,6 +80,7 @@ export class AbsorpationAddComponent implements OnInit {
           month: parseInt(responce['absorpation_plan'].end_date.split('-')[1]),
           day: parseInt(responce['absorpation_plan'].end_date.split('-')[2]),
         }
+        this.spinner.hide();
          console.log(this.bindingDateSplitStart);
         },
         (error) => {
@@ -122,12 +124,20 @@ export class AbsorpationAddComponent implements OnInit {
       
       const startDateData = this.startDate.split('-');
       const endDateData = this.endDate.split('-');
-      console.log(startDateData);
-      console.log(endDateData);
+      
+      console.log(startDateData[2]);
+      console.log(endDateData[2]);
+   
       console.log(data);
 
       if(this.typeMode) {
-        if(startDateData[0] > endDateData[0] || startDateData[1] > endDateData[1] || startDateData[2] > endDateData[2]) {
+        if(startDateData[0] > endDateData[0]) {
+          this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+          this.checkSaveclick = false;
+        } else if(startDateData[1] > endDateData[1]){
+          this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+          this.checkSaveclick = false;
+        } else if(startDateData[2] > endDateData[2]){
           this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
           this.checkSaveclick = false;
         } else {
@@ -144,7 +154,13 @@ export class AbsorpationAddComponent implements OnInit {
           );
         }
       } else {
-        if(startDateData[0] > endDateData[0] || startDateData[1] > endDateData[1] || startDateData[2] > endDateData[2]) {
+        if(startDateData[0] > endDateData[0]) {
+          this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+          this.checkSaveclick = false;
+        } else if(startDateData[1] > endDateData[1]){
+          this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+          this.checkSaveclick = false;
+        } else if(startDateData[2] > endDateData[2]){
           this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
           this.checkSaveclick = false;
         } else {

src/app/dashboard/dashboard-routing.ts

@@ -1,9 +1,15 @@
+import { RegistrationVehicleListComponent } from './registration-vehicle/registration-vehicle-list/registration-vehicle-list.component';
+import { VehicleAddComponent } from './vehicle/vehicle-add/vehicle-add.component';
+import { VehicleListComponent } from './vehicle/vehicle-list/vehicle-list.component';
+import { FinalAccerditationAddComponent } from './final-accreditation-of-trainees/final-accerditation-add/final-accerditation-add.component';
+import { FinalAccerditationListComponent } from './final-accreditation-of-trainees/final-accerditation-list/final-accerditation-list.component';
+import { PrintCardTraineeListComponent } from './print-card-trainee/print-card-trainee-list/print-card-trainee-list.component';
 import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trainner-data-add.component';
 import { ReviewTraineeDataListComponent } from './reivew-trainee-data/review-trainee-data-list/review-trainee-data-list.component';
 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';
+import { NgModule, Component } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AddAdverComponent } from './advertisiment/add-advertisiment/add-adver/add-adver.component';
@@ -63,6 +69,13 @@ import { SupervisorListComponent } from './supervisor/supervisor-list/supervisor
 import { AbsorpationAddComponent } from './absorpation-plan/absorpation-add/absorpation-add.component';
 import { TrainnerDataListComponent } from './trainner-data/trainner-data-list/trainner-data-list.component';
 import { ReviewTraineeAddComponent } from './reivew-trainee-data/review-trainee-add/review-trainee-add.component';
+import { SectionReviewTraineeListComponent } from './section-review-for-trainee/section-review-trainee-list/section-review-trainee-list.component';
+import { SectionReviewTraineeAddComponent } from './section-review-for-trainee/section-review-trainee-add/section-review-trainee-add.component';
+import { RegistrationTraineeMovementListComponent } from './Registration-trainee-movement/registration-trainee-movement-list/registration-trainee-movement-list.component';
+import { RegistrationTraineeMovementAddComponent } from './Registration-trainee-movement/registration-trainee-movement-add/registration-trainee-movement-add.component';
+import { PrintCardTraineeAddComponent } from './print-card-trainee/print-card-trainee-add/print-card-trainee-add.component';
+import { ModelVehicleListComponent } from './model-vehicle/model-vehicle-list/model-vehicle-list.component';
+import { ModelVehicleAddComponent } from './model-vehicle/model-vehicle-add/model-vehicle-add.component';
 
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -153,6 +166,21 @@ const dashboardRouting: Routes = [
     {path: 'reviewTrainerData/:reviewTrainerId', component: ReviewTraineeDataListComponent},
     {path: 'reviewTraineeData/add', component: ReviewTraineeAddComponent},
     {path: 'reviewTraineeData/edit/:reviewTraineeId', component: ReviewTraineeAddComponent},
+    {path: 'reviewSectionForTrainee/:reviewSectionId', component: SectionReviewTraineeListComponent},
+    {path: 'reviewSectionForTrainee/edit/:reviewSectionAddId', component: SectionReviewTraineeAddComponent},
+    {path: 'registrationTraineeList/:registrationListId', component: RegistrationTraineeMovementListComponent},
+    {path: 'registrationTraineeList/edit/:registrationTraineereviewSectionAddId', component: RegistrationTraineeMovementAddComponent},
+    {path: 'printCardTraineeList/:printTraineeId', component: PrintCardTraineeListComponent},
+    {path: 'printCardTrainee/edit/:printCardAddId', component: PrintCardTraineeAddComponent},
+    {path: 'finalAccerditationList/:finalAccerditationId', component: FinalAccerditationListComponent},
+    {path: 'finalAccerditationList/edit/:finalAccerditationEdit', component: FinalAccerditationAddComponent},
+    {path: 'vehicleList/:vehicleListId', component: VehicleListComponent},
+    {path: 'vehicle/add', component: VehicleAddComponent},
+    {path: 'vehicle/edit/:vehicleEditId', component: VehicleAddComponent},
+    {path: 'vehicleModelList/:modelVehicleListId' , component: ModelVehicleListComponent},
+    {path: 'vehicleModel/add' , component: ModelVehicleAddComponent},
+    {path: 'vehicleModel/edit/:modelVehicleEditId', component:ModelVehicleAddComponent },
+    {path: 'registrationVehicleList/:registrationVehicleListId', component: RegistrationVehicleListComponent},
   ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -109,6 +109,18 @@ import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trai
 import { ReviewTraineeAddComponent } from './reivew-trainee-data/review-trainee-add/review-trainee-add.component';
 import { SectionReviewTraineeListComponent } from './section-review-for-trainee/section-review-trainee-list/section-review-trainee-list.component';
 import { SectionReviewTraineeAddComponent } from './section-review-for-trainee/section-review-trainee-add/section-review-trainee-add.component';
+import { RegistrationTraineeMovementListComponent } from './Registration-trainee-movement/registration-trainee-movement-list/registration-trainee-movement-list.component';
+import { RegistrationTraineeMovementAddComponent } from './Registration-trainee-movement/registration-trainee-movement-add/registration-trainee-movement-add.component';
+import { PrintCardTraineeListComponent } from './print-card-trainee/print-card-trainee-list/print-card-trainee-list.component';
+import { PrintCardTraineeAddComponent } from './print-card-trainee/print-card-trainee-add/print-card-trainee-add.component';
+import { FinalAccerditationListComponent } from './final-accreditation-of-trainees/final-accerditation-list/final-accerditation-list.component';
+import { FinalAccerditationAddComponent } from './final-accreditation-of-trainees/final-accerditation-add/final-accerditation-add.component';
+import { VehicleListComponent } from './vehicle/vehicle-list/vehicle-list.component';
+import { VehicleAddComponent } from './vehicle/vehicle-add/vehicle-add.component';
+import { ModelVehicleListComponent } from './model-vehicle/model-vehicle-list/model-vehicle-list.component';
+import { ModelVehicleAddComponent } from './model-vehicle/model-vehicle-add/model-vehicle-add.component';
+import { RegistrationVehicleListComponent } from './registration-vehicle/registration-vehicle-list/registration-vehicle-list.component';
+import { RegistrationVehicleAddComponent } from './registration-vehicle/registration-vehicle-add/registration-vehicle-add.component';
 
 
 @NgModule({
@@ -184,6 +196,18 @@ import { SectionReviewTraineeAddComponent } from './section-review-for-trainee/s
         ReviewTraineeAddComponent,
         SectionReviewTraineeListComponent,
         SectionReviewTraineeAddComponent,
+        RegistrationTraineeMovementListComponent,
+        RegistrationTraineeMovementAddComponent,
+        PrintCardTraineeListComponent,
+        PrintCardTraineeAddComponent,
+        FinalAccerditationListComponent,
+        FinalAccerditationAddComponent,
+        VehicleListComponent,
+        VehicleAddComponent,
+        ModelVehicleListComponent,
+        ModelVehicleAddComponent,
+        RegistrationVehicleListComponent,
+        RegistrationVehicleAddComponent,
     ],
     imports: [
         CommonModule,

src/app/dashboard/final-accreditation-of-trainees/final-accerditation-add/final-accerditation-add.component.css

@@ -0,0 +1,277 @@
+.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;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.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;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 80px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 265px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    position: absolute;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.buttonStatus-w{
+    width: 80px;
+    margin: 0 10px;
+    float: right;
+}
+
+/* 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/final-accreditation-of-trainees/final-accerditation-add/final-accerditation-add.component.html

@@ -0,0 +1,296 @@
+<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>
+            </ul>
+          </div>
+      </div>
+  
+      <div class="containerContent-w">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              <h2 class="title">المعلومات الشخصيه</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإسم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.name" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" style="padding:0 5px" ngModel name="nationality_id" [(ngModel)]="userData.nationality_id" [disabled]="disabledInput" required>
+                      <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-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
+                      <select class="form-control select" id="identity" (change)="getSelectedOptionText($event)" ngModel name="identity_type_id" [(ngModel)]="userData.identity_type_id" [disabled]="disabledInput" required>
+                        <option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                    <input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" (input)="onIdentitiyChange($event.target.value)" ngModel name="identity_number" [(ngModel)]="userData.identity_number" [disabled]="disabledInput" required/>
+                    <span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                        <input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" ngModel name="birthday" [(ngModel)]="userData.birthday" [disabled]="disabledInput" required/> 
+                      </div>
+                    </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+                      <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                        <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <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" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
+                      </div>
+      
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات الإتصال</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" ngModel name="phone" [(ngModel)]="userData.phone" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                      <input id="email" type="email" class="form-control" placeholder="الإيميل" ngModel name="email"  [(ngModel)]="userData.email" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات التدريب</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <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 selectStyle-w" ngModel name="type" [(ngModel)]="formData.type" [disabled]="disabledInput" (input)="changeType($event)" 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="order" style="float:right">اسم التخصص <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="order" placeholder=" إسم التخصص" ngModel name="specialization_name" [(ngModel)]="formData.specialization_name" class="form-control" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="spec" style="float:right">التخصص الدقيق <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="spec" class="form-control" placeholder="التخصص الدقيق" name="specific_specialization" [(ngModel)]="formData.specific_specialization" [disabled]="disabledInput" ngModel required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
+                    <div class="form-group">
+                      <label for="universty" style="float:right">الجامعه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="universty" placeholder="الجامعه" class="form-control" name="univeristy" ngModel [(ngModel)]="formData.university" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="level" style="float:right">المستوي <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="level" placeholder="المستوي" class="form-control" name="level" ngModel [(ngModel)]="formData.level" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="trainning" style="float:right">الفتره التدريبيه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="trainning" placeholder="الفتره التدريبيه" class="form-control" name="training_period" ngModel [(ngModel)]="formData.training_period" [disabled]="disabledInput" required />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="regester" style="float:right">رقم التسجيل <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="regester" placeholder="رقم التسجيل" class="form-control" name="training_period" ngModel [(ngModel)]="formData.registration_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="card" style="float:right">رقم البطاقه الهينه <span class="spanReqired-w">*</span></label>
+                      <input id="card" type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" ngModel [(ngModel)]="formData.authority_card_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="job" style="float:right"> البطاقه الوظيفي <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="job" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" ngModel [(ngModel)]="formData.functional_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="contract" style="float:right">نوع التعاقد <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="contract" placeholder="نوع التعاقد" class="form-control" name="contract_type" ngModel [(ngModel)]="formData.contract_type" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="field" style="float:right">الجهه التابع لها المتدرب <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="field" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" ngModel [(ngModel)]="formData.organization_affiliated_with" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department1" style="float:right;">القسم الأول</label>
+                      <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2001">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department2" style="float:right;">القسم الثاني</label>
+                      <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2002">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department3" style="float:right;">القسم الثالث</label>
+                      <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2003">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12">
+                    <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th> إسم المرفق</th>
+                        <th>رفع املف ( بصيغه pdf )</th>
+                        <th>حذف</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                        <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                        <td style="position: relative;">
+                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" [disabled]="disabledInput"/>
+                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          <span class="fileName-w">{{file.nameFile}}</span>
+                        </td>
+                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)" [disabled]="disabledInput">حذف</button></td>
+                      </tr>
+                    </tbody>
+                  </table>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12" style="margin: 20px 0;">
+                <div class="row">
+                  <div class="wrapper">
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label style="float:right;">الحاله</label>
+                        <select class="form-control" [(ngModel)]="actionForm.status" name="status">
+                          <option value="ended">إنهاء</option>
+                          <option value="stopped">إيقاف</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-12 col-md-8">
+                      <div class="form-group">
+                        <label style="float:right;">ملاحظات الإداره</label>
+                        <quill-editor id="description" name="adminstration_notes" [(ngModel)]="actionForm.adminstration_notes" required>
+                        </quill-editor>
+                      </div>
+                    </div>
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label style="float:right;">إستلام البطاقه</label>
+                        <button type="button" class="btn btn-success" style="width: 100%;" (click)="recieveCard()"> إستلام</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+            </div>
+
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="checkSaveClick">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+
+          </div>
+        </form>
+      </div>
+  
+  
+    </div>
+  </div>
+  

src/app/dashboard/final-accreditation-of-trainees/final-accerditation-add/final-accerditation-add.component.ts

@@ -0,0 +1,256 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AuthServiceService } from '../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+@Component({
+  selector: 'app-final-accerditation-add',
+  templateUrl: './final-accerditation-add.component.html',
+  styleUrls: ['./final-accerditation-add.component.css']
+})
+export class FinalAccerditationAddComponent implements OnInit {
+
+  constructor(private userSer: UserService, 
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private route: ActivatedRoute,
+    private dashBoardSer: DashboardService,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private authSer: AuthServiceService) { }
+
+    
+
+  typeLink:string = '';
+  userId: number;
+  checkSaveClick:boolean = false; //to make save button is disabled when click save 
+  disabledInput: boolean = false; //to make button dsabled in create mode 
+  reportId: number;
+  stoppedShow: boolean = false;
+  endedShow: boolean = false;
+  countries: any[] = [];
+  identities: any[] = [];
+  trainees:any[] = [];
+  departments:any[] = [];
+  departmentsId:any[] = [];
+
+  @ViewChild('f') traineeForm: NgForm;
+
+  //all form data 
+  formData = {
+    trainee: '',
+    type: '',
+    specialization_name: '',
+    specific_specialization: '',
+    university: '',
+    level: '',
+    training_period: '',
+    registration_number: '',
+    authority_card_number: '',
+    functional_number: '',
+    contract_type: '',
+    status: '',
+    organization_affiliated_with: '',
+    department1: '',
+    department2: '',
+    department3: '',
+  }
+
+  //user data object
+
+  userData = {
+    name: '',
+    email: '',
+    nationality_id: '',
+    identity_number: '',
+    identity_type_id: '',
+    birthday: '',
+    gender: '',
+    phone: '',
+  }
+
+  actionForm = {
+   status: '',
+   adminstration_notes: '',
+   card_received: 0,
+   id: null,
+  }
+
+  identity_id: number = 0; //to determine te number of identity to validation
+  identity_type: number;
+  typeMode:boolean = false;
+
+  files = [{
+    title : '',
+    file: '',
+    file_type: '',
+    nameFile: '',
+    id: null,
+  }];
+
+
+  ngOnInit() {
+     //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;
+ 
+     //get nationality data
+     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'];
+         console.log('idddentiiiesssssssssss', this.identities);
+       },
+       (error) => {
+         console.log(error);
+       }
+     );
+ 
+     //get trainee data
+     this.http.get(this.authSer.pathApi + '/get_trainees').subscribe(
+       (responce) => {
+         this.trainees = responce['users'];
+         console.log(this.trainees);
+       },
+       (error) => {
+         console.log(error);
+       }
+     );
+ 
+     //get departments
+     this.http.get(this.authSer.pathApi + '/training_adminstration_departments').subscribe(
+       (responce) => {
+         this.departments = responce['departments'];
+         console.log(this.departments);
+       },
+       (error) => {
+         console.log(error);
+       }
+     );
+ 
+     this.route.params.subscribe(
+       (params: Params) => {
+         this.reportId = params['finalAccerditationEdit'];
+       }
+     );
+
+     if(this.reportId) {
+
+      this.actionForm.id = this.reportId;
+      this.disabledInput = true;
+      this.spinner.show();
+      this.typeMode = true;
+      this.files = [];
+
+      this.dashBoardSer.getItemData(this.reportId,'traineeRequest').subscribe(
+        (responce) => {
+          console.log('get request by id', responce);
+          this.formData.trainee = responce['data']['user'].id;
+          this.formData.type = responce['data']['request'].type;
+          this.formData.specialization_name = responce['data']['request'].specialization_name;
+          this.formData.specific_specialization = responce['data']['request'].specific_specialization;
+          this.formData.level = responce['data']['request'].level;
+          this.formData.contract_type = responce['data']['request'].contract_type;
+          this.formData.university = responce['data']['request'].university;
+          this.formData.authority_card_number = responce['data']['request'].authority_card_number;
+          this.formData.training_period = responce['data']['request'].training_period;
+          this.formData.functional_number = responce['data']['request'].functional_number;
+          this.formData.organization_affiliated_with = responce['data']['request'].organization_affiliated_with;
+          this.formData.registration_number = responce['data']['request'].registration_number;
+          this.userData.name = responce['data']['user'].name;
+          this.userData.email = responce['data']['user'].email;
+          this.userData.identity_number = responce['data']['user'].identity_number;
+          this.userData.identity_type_id = responce['data']['user'].identity_type_id;
+          this.userData.phone = responce['data']['user'].phone;
+          this.userData.birthday = responce['data']['user'].birthday;
+          this.userData.gender = responce['data']['user'].gender;
+          this.userData.nationality_id = responce['data']['user'].nationality_id;
+          this.userId = responce['data']['user'].id;
+          this.userData['id'] = this.userId;
+
+             //add departmrnts ids 
+             if(responce['data']['request'].departments.length > 0) {
+              for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+                if(i == 0) {
+                  this.formData.department1 = responce['data']['request'].departments[0].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 1) {
+                  this.formData.department2 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 2) {
+                  this.formData.department3 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+              }
+            }
+          }
+
+         
+
+          if(responce['data']['request'].attachments.length > 0) {
+            for(let i = 0; i < responce['data']['request'].attachments.length; i++) {
+              this.files.push({
+                title: responce['data']['request'].attachments[i].title,
+                file: '',
+                nameFile: responce['data']['request'].attachments[i].file,
+                file_type: '',
+                id: responce['data']['request'].attachments[i].id,
+              })
+            }
+          } else {
+            console.log('no attachements user add !');
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+ 
+  }
+
+  recieveCard() {
+    this.toastr.success('تم نسجيل الإستلام');
+    this.actionForm.card_received = 1
+  }
+
+  onSubmittedForm() {
+    console.log(this.actionForm);
+    this.http.post(this.authSer.pathApi + '/final_accreditation_of_trainees', this.actionForm).subscribe(
+      (responce) => {
+        console.log(responce),
+        this.toastr.success('تم بنجاح');
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('يوجد خطأ في السيرفر ، حاول لاحقاَ');
+        this.location.back();
+      }
+    )
+  }
+
+}

src/app/dashboard/final-accreditation-of-trainees/final-accerditation-list/final-accerditation-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/final-accreditation-of-trainees/final-accerditation-list/final-accerditation-list.component.html

@@ -0,0 +1,67 @@
+<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>
+  
+      <table class="table table-bordered">
+        <thead class="headBackground-w">
+          <tr>
+            <th> إسم المتدرب</th>
+            <th>إسم التخصص</th>
+            <th>إسم التخصص الدقيق</th>
+            <th> الجامعه</th>
+            <th *ngIf="authSer.showEditBtn">تفاصيل المتدرب</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+            <td>{{data.trainee_name}}</td>
+            <td> {{data.specialization_name}}</td>
+            <td>{{data.specific_specialization}}</td>
+            <td>{{data.university}}</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/final-accreditation-of-trainees/final-accerditation-list/final-accerditation-list.component.ts

@@ -0,0 +1,190 @@
+import { Component, OnInit } from '@angular/core';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+
+@Component({
+  selector: 'app-final-accerditation-list',
+  templateUrl: './final-accerditation-list.component.html',
+  styleUrls: ['./final-accerditation-list.component.css']
+})
+
+export class FinalAccerditationListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,    
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private modal: Modal,
+    private dashBoardService: DashboardService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+    pageId: number;
+    dataList = [];
+    dataListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    serviceName: string = '';
+    pages = [];
+
+    ngOnInit() {
+
+      this.spinner.show();
+  
+      //init the values of permision boolean
+      this.route.params.subscribe(
+        (params: Params) => {
+          this.pageId = params['finalAccerditationId'];
+        }
+      );
+  
+      //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.parent.params.subscribe(
+        (params:Params) => {
+            this.userLoginId = params['userID'];
+            this.serviceId = params['serviceID'];
+    
+            this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.pages = responce['pages'];
+                for(let i = 0; i< this.pages.length; i++) {
+                  if(this.pages[i].id == 39) {
+                    if(this.pages[i]['permissions'][0].name == 'the_final_accreditation_of_the_trainee') {
+                      this.authSer.showAddBtn = true;
+                      this.authSer.showEditBtn = true;
+                      this.authSer.showDeleteBtn = true;
+                    } else {
+                      console.log('no permissions');
+                    }
+                  } else {
+                    console.log('no events');
+                  }
+                }
+              },
+              (error) => {console.log(error)}
+            );
+          }
+    
+        );
+      
+  
+            //get list data 
+          this.dashBoardService.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+            (responce) => {
+              console.log('rescponce dataaaa', responce);
+              this.dataList = responce['requests'];
+              if(this.dataList.length == 0) {
+                this.toastr.warning('القائمه فارغه من الطلبات ');
+              }
+              this.count = responce['count'];
+              this.perPagePagenation = responce['per_page'];
+              console.log('evennnnts', this.dataList);
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+              this.spinner.hide();
+            }
+          );
+  
+     
+      
+    }
+  
+    //filtter function
+    filtterFunc(data) {
+      this.dataList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      this.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['requests'];
+          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.dataList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['requests'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.dataList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+  
+    //determine the list count from select element 
+    onGetValue(event) {
+      this.spinner.show();
+      this.dataList = [];
+      this.dataTableNumber = event.target.value;
+      this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['requests'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    };
+  
+  
+  
+    //edit function
+    onEdit(editPageID) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'finalAccerditationList/edit/' + editPageID]);
+    }
+
+}

src/app/dashboard/model-vehicle/model-vehicle-add/model-vehicle-add.component.html

@@ -0,0 +1,58 @@
+<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"> {{typePage}} </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]="formData.name" required/>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="form-group">
+                <label style="float: right; margin-right: 5px">الحاله</label>
+                <select class="form-control" name="status" [ngModel]="formData.status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="form-group">
+                <label style="float: right; margin-right: 5px">النوع</label>
+                <select class="form-control" name="vehicle_type_id" [ngModel]="formData.vehicle_type_id" required>
+                  <option *ngFor="let type of vehicle_types" [value]="type.id">{{type.name}}</option>
+                </select>
+              </div>
+            </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/model-vehicle/model-vehicle-add/model-vehicle-add.component.ts

@@ -0,0 +1,114 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+@Component({
+  selector: 'app-model-vehicle-add',
+  templateUrl: './model-vehicle-add.component.html',
+  styleUrls: ['./model-vehicle-add.component.css']
+})
+export class ModelVehicleAddComponent implements OnInit {
+
+  vehicle_types = [];
+  constructor(private dashBoardSer: DashboardService, 
+    private toastr: ToastrService, 
+    private authSer: AuthServiceService, 
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  @ViewChild('f') vehicleForm : NgForm;
+
+  typePage: string = '';
+  checkSaveclick:boolean = false;
+  vehicleId: number;
+
+
+  formData = {
+    name: '',
+    status: '',
+    vehicle_type_id: ''
+  }
+
+  ngOnInit() {
+     this.http.get(this.authSer.pathApi + '/get_vehicle_types_list').subscribe(
+      (response) => {
+        console.log(response);
+        this.vehicle_types = response['types'];
+        
+      },
+      (error) => {
+        console.log(error);
+      }
+     );
+
+     this.route.params.subscribe(
+       (params: Params) => {
+         this.vehicleId = params['modelVehicleEditId'];
+       }
+     );
+
+     if(this.vehicleId) {
+       this.spinner.show();
+       this.dashBoardSer.getItemData(this.vehicleId, 'vehicleModel').subscribe(
+         (responce) => {
+           console.log(responce);
+           this.formData.name = responce['model'].name;
+           this.formData.status = responce['model'].status;
+           this.formData.vehicle_type_id = responce['model'].vehicle_type_id;
+           this.spinner.hide();
+         },
+         (error) => {
+           console.log(error);
+         }
+       );
+     }
+  }
+
+  onSubmitted() {
+    
+    this.checkSaveclick = true;
+
+    if(this.vehicle_types) {
+      
+      this.dashBoardSer.editItem(this.vehicleId, this.vehicleForm.value, 'vehicelModel').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الخادم ، برجاء المحاوله لاحقا');
+        }
+      );
+      
+    } else {
+
+      console.log(this.vehicleForm);
+      
+      this.dashBoardSer.addItem(this.vehicleForm.value, 'modelVehicle').subscribe(
+        (responce) => {
+          this.checkSaveclick = false;
+          console.log(responce);
+          this.toastr.success('تم الإضافه بنجاح ');
+          this.location.back();
+        },
+        (error) => {
+          this.checkSaveclick = false;
+          console.log(error);
+          this.toastr.error('خطأ في الخادم ، حاول لاحقا !');
+        }
+      );
+
+    }
+  }
+
+}

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

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

src/app/dashboard/model-vehicle/model-vehicle-list/model-vehicle-list.component.ts

@@ -0,0 +1,250 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { LectureService } from './../../../shared/lecture.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { HttpClient } from '@angular/common/http';
+
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-model-vehicle-list',
+  templateUrl: './model-vehicle-list.component.html',
+  styleUrls: ['./model-vehicle-list.component.css']
+})
+export class ModelVehicleListComponent implements OnInit {
+ 
+  pageId: number;
+  dataList = [];
+  dataListIds = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  constructor(private route: ActivatedRoute,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private http: HttpClient,
+    private modal: Modal,
+    private dashBoardSer: DashboardService,
+    private router: Router) { }
+
+  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['modelVehicleListId'];
+      }
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log('permission list', responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 44) {
+                if(this.pages[i].permissions[0].name == 'registration_of_vehicle_models') {
+                  this.authSer.showAddBtn = true;
+                  this.authSer.showEditBtn = true;
+                  this.authSer.showDeleteBtn = true;
+                }
+              }else {
+                console.log('no lectures');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    this.dashBoardSer.getListData(this.pageId, this.currentPage , this.dataTableNumber).subscribe(
+      (response) => {
+        console.log(response);
+        this.dataList = response['vehicle_models'];
+        this.count = response['count'];
+        this.perPagePagenation = response['per_page'];
+        console.log('xxx', this.dataList)
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+
+  }
+
+    //make all checkbox of user checked 
+    selectAll() {
+      for (var i = 0; i < this.dataList.length; i++) {
+        this.dataList[i].selected = this.selectedAll;
+      }
+    };
+  
+    checkIfAllSelected() {
+      this.selectedAll = this.dataList.every(function(item:any) {
+        return item.selected == true;
+      });
+    };
+  
+        //filtter function
+      filtterFunc(data) {
+        this.dataList = [];
+        console.log(data.target.value);
+        const dataSearch = data.target.value;     
+        this.currentPage = 1;
+        console.log('search curent page', this.currentPage);
+        this.dashBoardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.dataList = responce['vehicle_models'];
+            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.dataList = [];
+        //console.log(pagenationNumber);
+        //console.log(this.pageId);
+        this.dashBoardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.dataList = responce['vehicle_models'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log(this.dataList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+      };
+  
+       //determine the list count from select element 
+    onGetValue(event) {
+      this.spinner.show();
+      this.dataList = [];
+      this.dataTableNumber = event.target.value;
+      this.dashBoardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['vehicle_models'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+  
+    onDelete() {
+  
+      this.dataListIds = [];
+      for(let i = 0; i < this.dataList.length; i++) {
+        if(this.dataList[i].selected == true) {
+          this.dataListIds.push(this.dataList[i].id);
+        }
+      }
+  
+      console.log(this.dataListIds);
+  
+      if(this.dataListIds.length > 0) {
+        const dialogRef = this.modal.alert()
+        .size('sm')
+        .showClose(true)
+        .title('تأكيد الحذف')
+        .body(`
+            <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+            `)
+        .open();
+    
+          dialogRef.result
+          .then( result => 
+            this.dashBoardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.dataList = [];
+                 //get list data 
+                this.dashBoardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.dataList = responce['vehicle_models'];
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                    this.spinner.hide();
+                  }
+                );
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+                },
+              )
+          );
+      } else {
+        this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+      }
+    };
+  
+    //add function
+    onAdd() {
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addTab');
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/vehicleModel/add']);
+    }
+  
+    //edit function
+     onEdit(editTabID) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'vehicleModel/edit/' + editTabID]);
+    };
+
+}

src/app/dashboard/print-card-trainee/print-card-trainee-add/print-card-trainee-add.component.css

@@ -0,0 +1,277 @@
+.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;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.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;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 80px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 265px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    position: absolute;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.buttonStatus-w{
+    width: 80px;
+    margin: 0 10px;
+    float: right;
+}
+
+/* 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/print-card-trainee/print-card-trainee-add/print-card-trainee-add.component.html

@@ -0,0 +1,268 @@
+<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>
+            </ul>
+          </div>
+      </div>
+  
+      <div class="containerContent-w">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              <h2 class="title">المعلومات الشخصيه</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإسم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.name" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" style="padding:0 5px" ngModel name="nationality_id" [(ngModel)]="userData.nationality_id" [disabled]="disabledInput" required>
+                      <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-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
+                      <select class="form-control select" id="identity" (change)="getSelectedOptionText($event)" ngModel name="identity_type_id" [(ngModel)]="userData.identity_type_id" [disabled]="disabledInput" required>
+                        <option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                    <input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" (input)="onIdentitiyChange($event.target.value)" ngModel name="identity_number" [(ngModel)]="userData.identity_number" [disabled]="disabledInput" required/>
+                    <span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                        <input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" ngModel name="birthday" [(ngModel)]="userData.birthday" [disabled]="disabledInput" required/> 
+                      </div>
+                    </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+                      <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                        <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <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" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
+                      </div>
+      
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات الإتصال</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" ngModel name="phone" [(ngModel)]="userData.phone" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                      <input id="email" type="email" class="form-control" placeholder="الإيميل" ngModel name="email"  [(ngModel)]="userData.email" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات التدريب</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <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 selectStyle-w" ngModel name="type" [(ngModel)]="formData.type" [disabled]="disabledInput" (input)="changeType($event)" 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="order" style="float:right">اسم التخصص <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="order" placeholder=" إسم التخصص" ngModel name="specialization_name" [(ngModel)]="formData.specialization_name" class="form-control" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="spec" style="float:right">التخصص الدقيق <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="spec" class="form-control" placeholder="التخصص الدقيق" name="specific_specialization" [(ngModel)]="formData.specific_specialization" [disabled]="disabledInput" ngModel required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
+                    <div class="form-group">
+                      <label for="universty" style="float:right">الجامعه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="universty" placeholder="الجامعه" class="form-control" name="univeristy" ngModel [(ngModel)]="formData.university" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="level" style="float:right">المستوي <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="level" placeholder="المستوي" class="form-control" name="level" ngModel [(ngModel)]="formData.level" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="trainning" style="float:right">الفتره التدريبيه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="trainning" placeholder="الفتره التدريبيه" class="form-control" name="training_period" ngModel [(ngModel)]="formData.training_period" [disabled]="disabledInput" required />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="regester" style="float:right">رقم التسجيل <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="regester" placeholder="رقم التسجيل" class="form-control" name="training_period" ngModel [(ngModel)]="formData.registration_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="card" style="float:right">رقم البطاقه الهينه <span class="spanReqired-w">*</span></label>
+                      <input id="card" type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" ngModel [(ngModel)]="formData.authority_card_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="job" style="float:right"> البطاقه الوظيفي <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="job" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" ngModel [(ngModel)]="formData.functional_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="contract" style="float:right">نوع التعاقد <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="contract" placeholder="نوع التعاقد" class="form-control" name="contract_type" ngModel [(ngModel)]="formData.contract_type" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="field" style="float:right">الجهه التابع لها المتدرب <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="field" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" ngModel [(ngModel)]="formData.organization_affiliated_with" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department1" style="float:right;">القسم الأول</label>
+                      <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2001">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department2" style="float:right;">القسم الثاني</label>
+                      <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2002">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department3" style="float:right;">القسم الثالث</label>
+                      <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2003">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12">
+                    <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th> إسم المرفق</th>
+                        <th>رفع املف ( بصيغه pdf )</th>
+                        <th>حذف</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                        <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                        <td style="position: relative;">
+                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" [disabled]="disabledInput"/>
+                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          <span class="fileName-w">{{file.nameFile}}</span>
+                        </td>
+                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)" [disabled]="disabledInput">حذف</button></td>
+                      </tr>
+                    </tbody>
+                  </table>
+
+                </div>
+              </div>
+            </div>
+
+
+            <!-- <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="checkSaveClick">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div> -->
+
+          </div>
+        </form>
+      </div>
+  
+  
+    </div>
+  </div>
+  

src/app/dashboard/print-card-trainee/print-card-trainee-add/print-card-trainee-add.component.ts

@@ -0,0 +1,231 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AuthServiceService } from '../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+@Component({
+  selector: 'app-print-card-trainee-add',
+  templateUrl: './print-card-trainee-add.component.html',
+  styleUrls: ['./print-card-trainee-add.component.css']
+})
+export class PrintCardTraineeAddComponent implements OnInit {
+  constructor(private userSer: UserService, 
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private route: ActivatedRoute,
+    private dashBoardSer: DashboardService,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private authSer: AuthServiceService) { }
+
+    
+
+  typeLink:string = '';
+  userId: number;
+  checkSaveClick:boolean = false; //to make save button is disabled when click save 
+  disabledInput: boolean = false; //to make button dsabled in create mode 
+  reportId: number;
+  stoppedShow: boolean = false;
+  endedShow: boolean = false;
+  countries: any[] = [];
+  identities: any[] = [];
+  trainees:any[] = [];
+  departments:any[] = [];
+  departmentsId:any[] = [];
+
+  @ViewChild('f') traineeForm: NgForm;
+
+  //all form data 
+  formData = {
+    trainee: '',
+    type: '',
+    specialization_name: '',
+    specific_specialization: '',
+    university: '',
+    level: '',
+    training_period: '',
+    registration_number: '',
+    authority_card_number: '',
+    functional_number: '',
+    contract_type: '',
+    status: '',
+    organization_affiliated_with: '',
+    department1: '',
+    department2: '',
+    department3: '',
+  }
+
+  //user data object
+
+  userData = {
+    name: '',
+    email: '',
+    nationality_id: '',
+    identity_number: '',
+    identity_type_id: '',
+    birthday: '',
+    gender: '',
+    phone: '',
+  }
+
+
+  identity_id: number = 0; //to determine te number of identity to validation
+  identity_type: number;
+  typeMode:boolean = false;
+
+  files = [{
+    title : '',
+    file: '',
+    file_type: '',
+    nameFile: '',
+    id: null,
+  }];
+
+
+
+  ngOnInit() {
+
+    //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;
+
+    //get nationality data
+    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'];
+        console.log('idddentiiiesssssssssss', this.identities);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get trainee data
+    this.http.get(this.authSer.pathApi + '/get_trainees').subscribe(
+      (responce) => {
+        this.trainees = responce['users'];
+        console.log(this.trainees);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get departments
+    this.http.get(this.authSer.pathApi + '/training_adminstration_departments').subscribe(
+      (responce) => {
+        this.departments = responce['departments'];
+        console.log(this.departments);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.reportId = params['printCardAddId'];
+      }
+    );
+
+    if(this.reportId) {
+
+      this.disabledInput = true;
+      this.spinner.show();
+      this.typeMode = true;
+      this.files = [];
+
+      this.dashBoardSer.getItemData(this.reportId,'traineeRequest').subscribe(
+        (responce) => {
+          console.log('get request by id', responce);
+          this.formData.trainee = responce['data']['user'].id;
+          this.formData.type = responce['data']['request'].type;
+          this.formData.specialization_name = responce['data']['request'].specialization_name;
+          this.formData.specific_specialization = responce['data']['request'].specific_specialization;
+          this.formData.level = responce['data']['request'].level;
+          this.formData.contract_type = responce['data']['request'].contract_type;
+          this.formData.university = responce['data']['request'].university;
+          this.formData.authority_card_number = responce['data']['request'].authority_card_number;
+          this.formData.training_period = responce['data']['request'].training_period;
+          this.formData.functional_number = responce['data']['request'].functional_number;
+          this.formData.organization_affiliated_with = responce['data']['request'].organization_affiliated_with;
+          this.formData.registration_number = responce['data']['request'].registration_number;
+          this.userData.name = responce['data']['user'].name;
+          this.userData.email = responce['data']['user'].email;
+          this.userData.identity_number = responce['data']['user'].identity_number;
+          this.userData.identity_type_id = responce['data']['user'].identity_type_id;
+          this.userData.phone = responce['data']['user'].phone;
+          this.userData.birthday = responce['data']['user'].birthday;
+          this.userData.gender = responce['data']['user'].gender;
+          this.userData.nationality_id = responce['data']['user'].nationality_id;
+          this.userId = responce['data']['user'].id;
+          this.userData['id'] = this.userId;
+
+             //add departmrnts ids 
+             if(responce['data']['request'].departments.length > 0) {
+              for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+                if(i == 0) {
+                  this.formData.department1 = responce['data']['request'].departments[0].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 1) {
+                  this.formData.department2 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 2) {
+                  this.formData.department3 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+              }
+            }
+          }
+
+         
+
+          if(responce['data']['request'].attachments.length > 0) {
+            for(let i = 0; i < responce['data']['request'].attachments.length; i++) {
+              this.files.push({
+                title: responce['data']['request'].attachments[i].title,
+                file: '',
+                nameFile: responce['data']['request'].attachments[i].file,
+                file_type: '',
+                id: responce['data']['request'].attachments[i].id,
+              })
+            }
+          } else {
+            console.log('no attachements user add !');
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+  }
+
+
+
+
+}

src/app/dashboard/print-card-trainee/print-card-trainee-list/print-card-trainee-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/print-card-trainee/print-card-trainee-list/print-card-trainee-list.component.html

@@ -0,0 +1,68 @@
+<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>
+  
+      <table class="table table-bordered">
+        <thead class="headBackground-w">
+          <tr>
+            <th> إسم المتدرب</th>
+            <th>إسم التخصص</th>
+            <th>إسم التخصص الدقيق</th>
+            <th> الجامعه</th>
+            <th *ngIf="authSer.showEditBtn">تفاصيل المتدرب</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+            <td>{{data.trainee_name}}</td>
+            <td> {{data.specialization_name}}</td>
+            <td>{{data.specific_specialization}}</td>
+            <td>{{data.university}}</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/print-card-trainee/print-card-trainee-list/print-card-trainee-list.component.ts

@@ -0,0 +1,192 @@
+import { Component, OnInit } from '@angular/core';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+
+@Component({
+  selector: 'app-print-card-trainee-list',
+  templateUrl: './print-card-trainee-list.component.html',
+  styleUrls: ['./print-card-trainee-list.component.css']
+})
+
+export class PrintCardTraineeListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,    
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private modal: Modal,
+    private dashBoardService: DashboardService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+    pageId: number;
+    dataList = [];
+    dataListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    serviceName: string = '';
+    pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    //init the values of permision boolean
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['printTraineeId'];
+      }
+    );
+
+    //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.parent.params.subscribe(
+      (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+  
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 37) {
+                  if(this.pages[i]['permissions'][0].name == 'print_the_card_to_the_trainee') {
+                    this.authSer.showAddBtn = true;
+                    this.authSer.showEditBtn = true;
+                    this.authSer.showDeleteBtn = true;
+                  } else {
+                    console.log('no permissions');
+                  }
+                } else {
+                  console.log('no events');
+                }
+              }
+            },
+            (error) => {console.log(error)}
+          );
+        }
+  
+      );
+    
+
+          //get list data 
+        this.dashBoardService.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log('rescponce dataaaa', responce);
+            this.dataList = responce['requests'];
+            if(this.dataList.length == 0) {
+              this.toastr.warning('القائمه فارغه من الطلبات ');
+            }
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log('evennnnts', this.dataList);
+            if(this.dataList.length > 0) {
+              this.spinner.hide();
+            }
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+
+   
+    
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.dataList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    this.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        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.dataList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.dataList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+
+
+  //edit function
+  onEdit(editPageID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'printCardTrainee/edit/' + editPageID]);
+  }
+
+}

src/app/dashboard/registration-vehicle/registration-vehicle-add/registration-vehicle-add.component.html

@@ -0,0 +1,3 @@
+<p>
+  registration-vehicle-add works!
+</p>

src/app/dashboard/registration-vehicle/registration-vehicle-add/registration-vehicle-add.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-registration-vehicle-add',
+  templateUrl: './registration-vehicle-add.component.html',
+  styleUrls: ['./registration-vehicle-add.component.css']
+})
+export class RegistrationVehicleAddComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,78 @@
+<div class="container">
+
+  <div class="row">
+    <div class="col-12">
+      <ul class="list-unstyled titileLi-w">
+        <li class="headingText-w">خدمه المركبات  </li>
+        <li class="headingText-w activeLi-w" style="margin-right:5px">تسجيل بيانات المركبات </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="containerContent-w">
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+  
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+              </select>
+              من العناصر يتم عرضها
+            </span>
+          </div>
+        </div>
+        <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">
+            </div>
+          </th>
+          <th>إسم الموديل</th>
+          <th>نوع المركبه</th>
+          <th>اللون</th>
+          <th>الحاله</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+            </div>
+          </td>
+          <td>{{data.vehicle_model_name}}</td>
+          <td>{{data.vehicle_type_name}}</td>
+          <td>{{data.color}}</td>
+          <td>{{data.vehicle_status}}</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/registration-vehicle/registration-vehicle-list/registration-vehicle-list.component.ts

@@ -0,0 +1,247 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { LectureService } from './../../../shared/lecture.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { HttpClient } from '@angular/common/http';
+
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+@Component({
+  selector: 'app-registration-vehicle-list',
+  templateUrl: './registration-vehicle-list.component.html',
+  styleUrls: ['./registration-vehicle-list.component.css']
+})
+export class RegistrationVehicleListComponent implements OnInit {
+
+  pageId: number;
+  dataList = [];
+  dataListIds = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  constructor(private route: ActivatedRoute,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private http: HttpClient,
+    private modal: Modal,
+    private dashBoardSer: DashboardService,
+    private router: Router) { }
+
+    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['registrationVehicleListId'];  
+        }
+      );
+
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log('permission list', responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 45) {
+                  if(this.pages[i].permissions[0].name == 'registration_of_vehicle_data') {
+                    this.authSer.showAddBtn = true;
+                    this.authSer.showEditBtn = true;
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }else {
+                  console.log('no lectures');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+  
+      this.dashBoardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['vehicle_datas'];
+          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.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+
+      //filtter function
+    filtterFunc(data) {
+      this.dataList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      this.dashBoardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['vehicle_datas'];
+          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.dataList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.dashBoardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['vehicle_datas'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.dataList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    };
+
+     //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['vehicle_datas'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  onDelete() {
+
+    this.dataListIds = [];
+    for(let i = 0; i < this.dataList.length; i++) {
+      if(this.dataList[i].selected == true) {
+        this.dataListIds.push(this.dataList[i].id);
+      }
+    }
+
+    console.log(this.dataListIds);
+
+    if(this.dataListIds.length > 0) {
+      const dialogRef = this.modal.alert()
+      .size('sm')
+      .showClose(true)
+      .title('تأكيد الحذف')
+      .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+      .open();
+  
+        dialogRef.result
+        .then( result => 
+          this.dashBoardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم الحذف');
+              this.spinner.show();
+              this.dataList = [];
+               //get list data 
+              this.dashBoardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.dataList = responce['vehicle_datas'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
+            },
+            (error) => {
+              console.log(error);
+              this.spinner.hide();
+              },
+            )
+        );
+    } else {
+      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+    }
+  };
+
+  //add function
+  // onAdd() {
+  //   console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addTab');
+  //   this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/vehicle/add']);
+  // }
+
+  // //edit function
+  //  onEdit(editTabID) {
+  //   this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'vehicle/edit/' + editTabID]);
+  // };
+}

src/app/dashboard/reivew-trainee-data/review-trainee-add/review-trainee-add.component.html

@@ -15,7 +15,7 @@
         <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
           <div class="row">
 
-            <div class="col-6">
+            <div class="col-6" *ngIf="!typeMode">
               <div class="form-group">
                 <label for="trainee" style="float:right">المتدرب</label>
                 <select id="trainee" class="form-control" (input)="getTraineeData($event)" ngModel name="trainee" [(ngModel)]="formData.trainee" >
@@ -198,46 +198,43 @@
 
                   
                 
-                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showEditField">
-                    <div class="form-group">
-                      <label for="specialize" style="float:right; display:block"> الأقسام المناسبه <span class="spanReqired-w">*</span></label>
-                      <select class="form-control" id="department" name="" ngModel [ngModel]="">
-                        <option>first</option>
-                      </select>
-                    </div>
-                  </div>
 
                 <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
-                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="!editMode">
                     <div class="form-group">
                       <label for="department1" style="float:right;">القسم الأول</label>
                       <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1">
                         <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
-                        <option [value]="2001">حذف</option>
                       </select>
                     </div>
                   </div>
-                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="!editMode">
                     <div class="form-group">
                       <label for="department2" style="float:right;">القسم الثاني</label>
                       <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2">
                         <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
-                        <option [value]="2002">حذف</option>
                       </select>
                     </div>
                   </div>
-                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="!editMode">
                     <div class="form-group">
                       <label for="department3" style="float:right;">القسم الثالث</label>
                       <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3">
                         <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
-                        <option [value]="2003">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4"  *ngIf="editMode">
+                    <div class="form-group">
+                      <label for="department4" style="float:right;">القسم</label>
+                      <select class="form-control selectStyle-w" id="department4" name="department4" [(ngModel)]="formData.department4">
+                        <option *ngFor="let department of departments" [value]="department.department_id">{{department.department_name}}</option>
                       </select>
                     </div>
                   </div>
 
 
-                  <div class="col-12 col-sm-12 col-md-6 col-lg-6" *ngIf="editMode">
+                  <div class="col-12 col-sm-12 col-md-12 col-lg-12" *ngIf="editMode">
                     <div class="form-group">
                       <label for="status" style="float:right; display:block"> الحاله <span class="spanReqired-w">*</span></label>
                       <button type="button" class="btn btn-success statusBtn-w" (click)="statusShow('accepted')">قبول</button>
@@ -287,7 +284,7 @@
 
             <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>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
             </div>
 
           </div>

src/app/dashboard/reivew-trainee-data/review-trainee-add/review-trainee-add.component.ts

@@ -60,6 +60,7 @@ export class ReviewTraineeAddComponent implements OnInit {
     department1: '',
     department2: '',
     department3: '',
+    department4: '',
     status: '',
     status_description: '',
   }
@@ -177,20 +178,13 @@ export class ReviewTraineeAddComponent implements OnInit {
           this.userId = responce['data']['user'].id;
           this.userData['id'] = this.userId;
 
-             //add departmrnts ids 
-             if(responce['data']['request'].departments.length > 0) {
+             //full departments in edit mode 
+          if(responce['data']['request'].departments.length > 0) {
+               this.departments = [];
               for(let i = 0; i < responce['data']['request'].departments.length; i++) {
-                if(i == 0) {
-                  this.formData.department1 = responce['data']['request'].departments[0].department_id;
-                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
-                } else if(i == 1) {
-                  this.formData.department2 = responce['data']['request'].departments[i].department_id;
-                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
-                } else if(i == 2) {
-                  this.formData.department3 = responce['data']['request'].departments[i].department_id;
-                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
-              }
+                this.departments[i] = responce['data']['request'].departments[i];
             }
+            this.formData.department4 = responce['data']['request'].departments[0].department_id;
           }
 
 
@@ -338,23 +332,11 @@ export class ReviewTraineeAddComponent implements OnInit {
 
     console.log(event.target.value);
     if(typeSelect == 1) {
-      if(event.target.value == 2001) {
-        this.departmentsId[0] = null;
-      } else {
-        this.departmentsId[0] = event.target.value;        
-      }
+      this.departmentsId[0] = event.target.value;        
     } else if(typeSelect == 2) {
-      if(event.target.value == 2002) {
-        this.departmentsId[1] = null;
-      } else {
-        this.departmentsId[1] = event.target.value;        
-      }
+      this.departmentsId[1] = event.target.value;        
     } else if(typeSelect == 3) {
-      if(event.target.value == 2003) {
-        this.departmentsId[2] = null;
-      } else {
-        this.departmentsId[2] = event.target.value;        
-      }
+      this.departmentsId[2] = event.target.value;        
     }
  
    
@@ -388,6 +370,7 @@ export class ReviewTraineeAddComponent implements OnInit {
     if(this.editMode) {
 
       this.formData['id'] = this.reportId;
+      this.formData['choosen_department_id'] = this.formData['department4'];
       //add old file in new array
       const editAttachements = [];
       for(let i = 0; i < this.files.length; i++) {
@@ -398,21 +381,10 @@ export class ReviewTraineeAddComponent implements OnInit {
         }
       }
 
-      if(this.departmentsId.length > 0) {
-        
-        for(let i = 0; i < this.departmentsId.length; i++) {
-          if(this.departmentsId[i] == null) {
-            this.departmentsId.splice(i, 1);
-          }
-        }
-
-        console.log('chooooooooooooooooooosen', this.departmentsId);
-      }
-      
-
+  
       if(this.formData.trainee == '') {
         this.toastr.warning('من فضلك قم بإختيار متدرب !');
-      } else if(this.departmentsId.length > 1) {
+      } else if(this.formData['choosen_department_id'] == '') {
         this.toastr.warning('يجب إختيار قسم واحد من الأقسام المحدده !');
       } else if(this.formData.status == 'pending') {
         this.toastr.warning('من فضلك قم بإختيار حاله الطلب !');
@@ -450,12 +422,14 @@ export class ReviewTraineeAddComponent implements OnInit {
         delete this.formData['department1'];
         delete this.formData['department2'];
         delete this.formData['department3'];
+        delete this.formData['department4'];
+
 
         //add to form the edit old file 
         this.formData['editable_attachments'] = editAttachements;
         this.formData['attachments'] = this.files;
         this.formData['attachments_ids'] = this.attachments_ids;//departments_ids
-        this.formData['choosen_department_id'] = this.departmentsId[0];
+
         const formArraySend = [];
         formArraySend[0] = this.userData;
         formArraySend[1] = this.formData;
@@ -515,7 +489,7 @@ export class ReviewTraineeAddComponent implements OnInit {
           delete this.files[i].id;
         }
         this.formData['attachments'] = this.files; //add files to form json
-
+        this.formData['user_id'] = this.userId;
         console.log(this.formData);
         this.dashBoardSer.addItem(this.formData, 'traineeRequest').subscribe(
           (responce) => {

src/app/dashboard/reivew-trainee-data/review-trainee-data-list/review-trainee-data-list.component.html

@@ -26,35 +26,35 @@
       
   
       <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 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 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)="onFiltterChosen($event)" style="width:200px;">
-                  <option value="pending">تحت الإجراء</option>
-                  <option value="accepted">مقبول</option>
-                  <option value="refused">مرفوض</option>
-                  <option value="canceled">ملغي</option>
-                  <option value="ended">مغلق</option>
-                  <option value="asked_for_opinion">طلب رأي</option>
-                  <option value="replayed_opinion">رأي القسم</option>
-                </select>
-              </span>
-            </div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-12 col-lg-12"  style="margin-top:20px;">
+          <div class="form-group">
+            <span class="spanSelect-w">
+              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onFiltterChosen($event)" style="width:100px;">
+                <option value="pending">تحت الإجراء</option>
+                <option value="accepted">مقبول</option>
+                <option value="refused">مرفوض</option>
+                <option value="canceled">ملغي</option>
+                <option value="ended">مغلق</option>
+                <option value="asked_for_opinion">طلب رأي</option>
+                <option value="replayed_opinion">رأي القسم</option>
+              </select>
+              حاله الطلب
+            </span>
           </div>
+        </div>
       </div>
   
       <table class="table table-bordered">

src/app/dashboard/section-review-for-trainee/section-review-trainee-add/section-review-trainee-add.component.css

@@ -0,0 +1,281 @@
+.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;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.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;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 80px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+.askForOpinion-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.confirmed-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 265px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    position: absolute;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    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/section-review-for-trainee/section-review-trainee-add/section-review-trainee-add.component.html

@@ -1,3 +1,316 @@
-<p>
-  section-review-trainee-add works!
-</p>
+<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">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              <h2 class="title">المعلومات الشخصيه</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإسم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.name" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
+                    <select class="form-control" style="padding:0 5px" ngModel name="nationality_id" [(ngModel)]="userData.nationality_id" [disabled]="disabledInput" required>
+                      <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-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
+                      <select class="form-control select" id="identity" (change)="getSelectedOptionText($event)" ngModel name="identity_type_id" [(ngModel)]="userData.identity_type_id" [disabled]="disabledInput" required>
+                        <option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
+                    <input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" (input)="onIdentitiyChange($event.target.value)" ngModel name="identity_number" [(ngModel)]="userData.identity_number" [disabled]="disabledInput" required/>
+                    <span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
+                    <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                        <input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" ngModel name="birthday" [(ngModel)]="userData.birthday" [disabled]="disabledInput" required/> 
+                      </div>
+                    </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
+                      <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                        <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <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" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
+                        <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
+                      </div>
+      
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات الإتصال</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" ngModel name="phone" [(ngModel)]="userData.phone" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                      <input id="email" type="email" class="form-control" placeholder="الإيميل" ngModel name="email"  [(ngModel)]="userData.email" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+
+            <div class="col-12">
+              <h2 class="title">معلومات التدريب</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <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 selectStyle-w" ngModel name="type" [(ngModel)]="formData.type" [disabled]="disabledInput" (input)="changeType($event)" 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="order" style="float:right">اسم التخصص <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="order" placeholder=" إسم التخصص" ngModel name="specialization_name" [(ngModel)]="formData.specialization_name" class="form-control" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="spec" style="float:right">التخصص الدقيق <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="spec" class="form-control" placeholder="التخصص الدقيق" name="specific_specialization" [(ngModel)]="formData.specific_specialization" [disabled]="disabledInput" ngModel required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
+                    <div class="form-group">
+                      <label for="universty" style="float:right">الجامعه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="universty" placeholder="الجامعه" class="form-control" name="univeristy" ngModel [(ngModel)]="formData.university" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="level" style="float:right">المستوي <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="level" placeholder="المستوي" class="form-control" name="level" ngModel [(ngModel)]="formData.level" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="trainning" style="float:right">الفتره التدريبيه <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="trainning" placeholder="الفتره التدريبيه" class="form-control" name="training_period" ngModel [(ngModel)]="formData.training_period" [disabled]="disabledInput" required />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="regester" style="float:right">رقم التسجيل <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="regester" placeholder="رقم التسجيل" class="form-control" name="training_period" ngModel [(ngModel)]="formData.registration_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="card" style="float:right">رقم البطاقه الهينه <span class="spanReqired-w">*</span></label>
+                      <input id="card" type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" ngModel [(ngModel)]="formData.authority_card_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="job" style="float:right"> البطاقه الوظيفي <span class="spanReqired-w">*</span></label>
+                      <input type="number" id="job" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" ngModel [(ngModel)]="formData.functional_number" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="contract" style="float:right">نوع التعاقد <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="contract" placeholder="نوع التعاقد" class="form-control" name="contract_type" ngModel [(ngModel)]="formData.contract_type" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
+                    <div class="form-group">
+                      <label for="field" style="float:right">الجهه التابع لها المتدرب <span class="spanReqired-w">*</span></label>
+                      <input type="text" id="field" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" ngModel [(ngModel)]="formData.organization_affiliated_with" [disabled]="disabledInput" required/>
+                    </div>
+                  </div>
+
+                <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department1" style="float:right;">القسم الأول</label>
+                      <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2001">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department2" style="float:right;">القسم الثاني</label>
+                      <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2002">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="department3" style="float:right;">القسم الثالث</label>
+                      <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3" [disabled]="disabledInput">
+                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                        <option [value]="2003">حذف</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12">
+                    <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th> إسم المرفق</th>
+                        <th>رفع املف ( بصيغه pdf )</th>
+                        <th>حذف</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                        <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                        <td style="position: relative;">
+                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" [disabled]="disabledInput"/>
+                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          <span class="fileName-w">{{file.nameFile}}</span>
+                        </td>
+                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)" [disabled]="disabledInput">حذف</button></td>
+                      </tr>
+                    </tbody>
+                  </table>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12" style="margin: 20px 0;">
+                <div class="row">
+                  <div class="wrapper">
+                    
+                    <div class="askForOpinion-w" *ngIf="!isConfirmedStatus">
+                      <div class="col-12 col-md-6">
+                        <div class="form-group">
+                          <label style="float:right; margin: 20px;"> رأي القسم </label>
+                          <quill-editor id="description" name="actionOpinionForm" [(ngModel)]="actionOpinionForm.department_opinion" required>
+                            </quill-editor>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <div class="confirmed-w" *ngIf="isConfirmedStatus">
+                      <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                          <div class="form-group">
+                            <label for="startDate" style="float:right" >تاريخ البدايه</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" >تاريخ الإنتهاء</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">
+                          <button class="btn btn-success" type="button" (click)="beginTrainning()" style="width: 100%; margin-top:30px;">بدء التدريب</button>
+                        </div>
+                    </div>
+                  
+                  </div>
+                </div>
+            </div>
+
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="checkSaveClick">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+
+          </div>
+        </form>
+      </div>
+  
+  
+    </div>
+  </div>
+  

src/app/dashboard/section-review-for-trainee/section-review-trainee-add/section-review-trainee-add.component.ts

@@ -1,4 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AuthServiceService } from '../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-section-review-trainee-add',
@@ -7,9 +16,319 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SectionReviewTraineeAddComponent implements OnInit {
 
-  constructor() { }
+  constructor(private userSer: UserService, 
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private route: ActivatedRoute,
+    private dashBoardSer: DashboardService,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private authSer: AuthServiceService) { }
+
+  typeLink:string = '';
+  userId: number;
+  checkSaveClick:boolean = false; //to make save button is disabled when click save 
+  disabledInput: boolean = false; //to make button dsabled in create mode 
+  showEditField: boolean = false; //to show the field in edit mode 
+  showRefusedCause: boolean = false; //to show the cause of refused when ststus is refused
+  editMode: boolean = false; //true in edit mode 
+  isConfirmedStatus: boolean = false;
+  reportId: number;
+  attachments_ids = []; //for edit mode;
+
+  countries: any[] = [];
+  identities: any[] = [];
+  trainees:any[] = [];
+  departments:any[] = [];
+  departmentsId:any[] = [];
+
+  @ViewChild('f') traineeForm: NgForm;
+
+  //all form data 
+  formData = {
+    trainee: '',
+    type: '',
+    specialization_name: '',
+    specific_specialization: '',
+    university: '',
+    level: '',
+    training_period: '',
+    registration_number: '',
+    authority_card_number: '',
+    functional_number: '',
+    contract_type: '',
+    organization_affiliated_with: '',
+    department1: '',
+    department2: '',
+    department3: '',
+    status_description: '',
+  }
+
+  //user data object
+  userData = {
+    name: '',
+    email: '',
+    nationality_id: '',
+    identity_number: '',
+    identity_type_id: '',
+    birthday: '',
+    gender: '',
+    phone: '',
+  }
+
+  //action form
+  
+  actionConfirmedForm={
+    start_date: '',
+    end_date: '',
+    in_training: 0,
+    id: null,
+  }
+
+  actionOpinionForm = {
+    department_opinion: '',
+    department_id: null,
+    request_id: null,
+  }
+
+  identity_id: number = 0; //to determine te number of identity to validation
+  identity_type: number;
+
+  files = [{
+    title : '',
+    file: '',
+    file_type: '',
+    nameFile: '',
+    id: null,
+  }];
+
+  startDate: string = '';
+  endDate: string= '';
 
   ngOnInit() {
+
+    //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;
+
+    //get nationality data
+    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'];
+        console.log('idddentiiiesssssssssss', this.identities);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get trainee data
+    this.http.get(this.authSer.pathApi + '/get_trainees').subscribe(
+      (responce) => {
+        this.trainees = responce['users'];
+        console.log(this.trainees);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get departments
+    this.http.get(this.authSer.pathApi + '/training_adminstration_departments').subscribe(
+      (responce) => {
+        this.departments = responce['departments'];
+        console.log(this.departments);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.reportId = params['reviewSectionAddId'];
+      }
+    );
+
+    if(this.reportId) {
+      this.spinner.show();
+      this.actionOpinionForm.request_id = this.reportId;
+      this.actionConfirmedForm.id = this.reportId;
+      this.files = [];
+      this.dashBoardSer.getItemData(this.reportId, 'sectionReviewTrainee').subscribe(
+        (responce) =>{
+          console.log('datarequest ', responce);
+          this.disabledInput = true;
+          if(responce['data']['request'].status == 'accepted') {
+            this.isConfirmedStatus = true;
+          } else {
+            this.isConfirmedStatus = false;
+          }
+          this.formData.trainee = responce['data']['user'].id;
+          this.formData.type = responce['data']['request'].type;
+          this.formData.specialization_name = responce['data']['request'].specialization_name;
+          this.formData.specific_specialization = responce['data']['request'].specific_specialization;
+          this.formData.level = responce['data']['request'].level;
+          this.formData.contract_type = responce['data']['request'].contract_type;
+          this.formData.university = responce['data']['request'].university;
+          this.formData.authority_card_number = responce['data']['request'].authority_card_number;
+          this.formData.training_period = responce['data']['request'].training_period;
+          this.formData.functional_number = responce['data']['request'].functional_number;
+          this.formData.organization_affiliated_with = responce['data']['request'].organization_affiliated_with;
+          this.formData.registration_number = responce['data']['request'].registration_number;
+          this.userData.name = responce['data']['user'].name;
+          this.userData.email = responce['data']['user'].email;
+          this.userData.identity_number = responce['data']['user'].identity_number;
+          this.userData.identity_type_id = responce['data']['user'].identity_type_id;
+          this.userData.phone = responce['data']['user'].phone;
+          this.userData.birthday = responce['data']['user'].birthday;
+          this.userData.gender = responce['data']['user'].gender;
+          this.userData.nationality_id = responce['data']['user'].nationality_id;
+          this.userId = responce['data']['user'].id;
+          this.userData['id'] = this.userId;
+          this.userData.name = responce['data']['user'].name;
+          this.userData.nationality_id = responce['data']['user'].nationality_id;
+          this.userData.identity_type_id = responce['data']['user'].identity_type_id;
+          this.userData.identity_number = responce['data']['user'].identity_number;
+          this.userData.email = responce['data']['user'].email;
+          this.userData.birthday = responce['data']['user'].birthday;
+          this.userData.phone = responce['data']['user'].phone;
+          this.userData.gender = responce['data']['user'].gender;
+          this.userId = responce['data']['user'].id;
+            //add departmrnts ids 
+            if(responce['data']['request'].departments.length > 0) {
+              for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+                if(i == 0) {
+                  this.formData.department1 = responce['data']['request'].departments[0].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 1) {
+                  this.formData.department2 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 2) {
+                  this.formData.department3 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+              }
+            }
+          }
+
+          for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+            if(responce['data']['request'].departments[i].asked_for_opinion == 1) {
+              this.actionOpinionForm.department_id = responce['data']['request'].departments[i].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);
+              this.files.push({
+                title: responce['data']['request'].attachments[i].title,
+                file: '',
+                nameFile: responce['data']['request'].attachments[i].file,
+                file_type: '',
+                id: responce['data']['request'].attachments[i].id,
+              })
+            }
+            console.log('attachements ids', this.attachments_ids);
+          } else {
+            console.log('no attachements user add !');
+          }
+
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+
+  }
+
+  //when click in start trianning
+  beginTrainning() {
+    this.actionConfirmedForm.in_training = 1;
+    this.toastr.success('لقد تم تسجيل البدأ ');
+  }
+
+  //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;
+      this.actionConfirmedForm.start_date = this.startDate;
+      console.log('start date', this.startDate);
+    } else if(type == 'end') {
+      this.endDate = date.year + '-' + date.month + '-' + date.day;
+      this.actionConfirmedForm.end_date = this.endDate;
+      console.log('end date', this.endDate);
+    } else {
+      console.log('not type recieved !');
+    }
+  }
+
+  onSubmittedForm() {
+    if(this.isConfirmedStatus) {
+      alert(this.isConfirmedStatus);
+      const startDateObj = this.actionConfirmedForm.start_date.split('-');
+      const endDateObj = this.actionConfirmedForm.end_date.split('-');
+      console.log(startDateObj[0]);
+      console.log(startDateObj[1]);
+      console.log(startDateObj[2]);
+      console.log(this.actionConfirmedForm);
+      if(endDateObj[0] < startDateObj[0]) {
+        this.toastr.warning('تاريخ الإنتهاء يجب أن يكون أكبر من تاريخ الإبتداء !');
+      } else {
+        this.http.post(this.authSer.pathApi + '/manage_request_time_status', this.actionConfirmedForm).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('يوكد مشكله في السيرفر ، حاول لاحقاً');
+          }
+        );
+      }
+    } else {
+      alert(this.isConfirmedStatus);
+      console.log(this.actionOpinionForm);
+      this.http.post(this.authSer.pathApi +  '/department_shows_opinion', this.actionOpinionForm).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.warning('خطأ في السيرفر ، نعمل علي حلها ، حاول لاحقا');
+          this.location.back();
+        }
+      )
+    }
+   
+
+   
+    console.log(this.actionConfirmedForm);
   }
 
 }

src/app/dashboard/section-review-for-trainee/section-review-trainee-list/section-review-trainee-list.component.html

@@ -12,7 +12,7 @@
 
       <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-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">
@@ -23,8 +23,7 @@
         </div>
       </div>
 
-      
-  
+
       <div class="row">
           <div class="col-12 col-sm-12 col-md-12 col-lg-6">
             <div class="form-group">
@@ -44,13 +43,9 @@
               <span class="spanSelect-w">
                   حاله الطلب
                 <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onFiltterChosen($event)" style="width:200px;">
-                  <option value="pending">تحت الإجراء</option>
-                  <option value="accepted">مقبول</option>
-                  <option value="refused">مرفوض</option>
-                  <option value="canceled">ملغي</option>
-                  <option value="ended">مغلق</option>
+                  <option value="all">الكل</option>
                   <option value="asked_for_opinion">طلب رأي</option>
-                  <option value="replayed_opinion">رأي القسم</option>
+                  <option value="is_confirmed">الطلبات المقبوله</option>
                 </select>
               </span>
             </div>
@@ -60,12 +55,6 @@
       <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>
@@ -75,12 +64,6 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
-            <td>
-              <div class="custom-control custom-checkbox centerIneerItem">
-                <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
-                <!-- <label class="custom-control-label disblayBlock-w" for="{{news.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
-              </div>
-            </td>
             <td>{{data.trainee_name}}</td>
             <td> {{data.specialization_name}}</td>
             <td>{{data.specific_specialization}}</td>

src/app/dashboard/section-review-for-trainee/section-review-trainee-list/section-review-trainee-list.component.ts

@@ -1,15 +1,218 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
 
 @Component({
   selector: 'app-section-review-trainee-list',
   templateUrl: './section-review-trainee-list.component.html',
   styleUrls: ['./section-review-trainee-list.component.css']
 })
+
 export class SectionReviewTraineeListComponent implements OnInit {
 
-  constructor() { }
+  constructor(private route: ActivatedRoute,    
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private modal: Modal,
+    private dashBoardService: DashboardService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+    pageId: number;
+    dataList = [];
+    dataListIds = [];
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    serviceName: string = '';
+    pages = [];
 
   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['reviewSectionId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        
+        this.route.parent.params.subscribe(
+          (params:Params) => {
+              this.userLoginId = params['userID'];
+              this.serviceId = params['serviceID'];
+      
+              this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.pages = responce['pages'];
+                  for(let i = 0; i< this.pages.length; i++) {
+                    if(this.pages[i].id == 36) {
+                      if(this.pages[i]['permissions'][0].name == 'review_of_trainee_data_for_department') {
+                        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.dataList = responce['requests'];
+            if(this.dataList.length == 0) {
+              this.toastr.warning('القائمه فارغه من الطلبات ');
+            }
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log('evennnnts', this.dataList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+
+      }
+    );
+    
+  }
+
+    
+  //filtter function
+  filtterFunc(data) {
+    this.dataList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    this.dashBoardService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        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.dataList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashBoardService.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.dataList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardService.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+  onFiltterChosen(event) {
+    this.spinner.show();
+    this.dataList = [];
+    console.log(event.target.value);
+    console.log(this.authSer.pathApi + '/page_list/' +this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + event.target.value);
+    this.http.get(this.authSer.pathApi + '/page_list/' +this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + event.target.value).subscribe(
+      (responce) => {
+        console.log(responce);
+        console.log(responce);
+        this.dataList = responce['requests'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+  //edit function
+  onEdit(editPageID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'reviewSectionForTrainee/edit/' + editPageID]);
   }
 
 }

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

@@ -217,6 +217,7 @@ export class ServiceItemComponent implements OnInit {
         }
       );
     } else if(service.id == 3) {
+      //خدمه التدريب
       this.userservice.getPagesPermetiotns(this.userId, service.id).subscribe(
         (responce) => {
           console.log(responce);
@@ -226,6 +227,14 @@ export class ServiceItemComponent implements OnInit {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/absorpationList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 35) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/reviewTraineeData/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 36) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/reviewSectionForTrainee/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 37) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/printCardTraineeList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 38) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/registrationTraineeList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 39){
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/finalAccerditationList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 40) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/trainnerList/' + this.pages[0].id]);
           }
@@ -234,6 +243,21 @@ export class ServiceItemComponent implements OnInit {
           console.log(error);
         }
       );
+    } else if(service.id == 4) {
+      //خدمه الحركه
+      this.userservice.getPagesPermetiotns(this.userId, service.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          if(this.pages[0].id == 43) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/vehicleList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 44) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/vehicleModelList/' + this.pages[0].id]);
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
     }
   }
 
@@ -309,8 +333,22 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['absorpationList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 35) {
       this.router.navigate(['reviewTrainerData/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 36){
+      this.router.navigate(['reviewSectionForTrainee/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 37) {
+      this.router.navigate(['printCardTraineeList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 38) {
+      this.router.navigate(['registrationTraineeList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 39){
+      this.router.navigate(['finalAccerditationList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 40) {
       this.router.navigate(['trainnerList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 43) {
+      this.router.navigate(['vehicleList/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 44){
+      this.router.navigate(['vehicleModelList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 45) {
+      this.router.navigate(['registrationVehicleList/' + dataPage.id], {relativeTo: this.route});
     }
   }
 

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

@@ -21,7 +21,7 @@
           
           <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>
@@ -57,7 +57,8 @@
               </th>
               <th>الإسم</th>
               <th>البريد الإلكتروني</th>
-              <th>النوع</th>
+              <th>رقم الهويه</th>
+              <th>رقم الهاتف</th>
               <th *ngIf="authSer.showEditBtn">تعديل</th>
             </tr>
           </thead>
@@ -71,7 +72,8 @@
               </td>
               <td>{{trainner.name}}</td>
               <td>{{trainner.email}}</td>
-              <td>{{trainner.type == 1 ? 'زائر' : 'موظف'}}</td>
+              <td>{{trainner.identity_number}}</td>
+              <td>{{trainner.phone}}</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>

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

@@ -0,0 +1,49 @@
+<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"> {{typePage}} </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]="formData.name" #name="ngModel" required/>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="form-group">
+                <label style="float: right; margin-right: 5px">الحاله</label>
+                <select class="form-control" name="status" [ngModel]="formData.status" required>
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+            </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/vehicle/vehicle-add/vehicle-add.component.ts

@@ -0,0 +1,100 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-vehicle-add',
+  templateUrl: './vehicle-add.component.html',
+  styleUrls: ['./vehicle-add.component.css']
+})
+export class VehicleAddComponent implements OnInit {
+
+  constructor(private dashBoardSer: DashboardService, 
+    private toastr: ToastrService, 
+    private authSer: AuthServiceService, 
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location) { }
+
+  @ViewChild('f') vehicleForm : NgForm;
+
+  typePage: string = '';
+  checkSaveclick:boolean = false;
+  vehicleId: number;
+
+
+  formData = {
+    name: '',
+    status: '',
+  }
+
+  ngOnInit() {
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.vehicleId = params['vehicleEditId'];
+      }
+    )
+    
+    if(this.vehicleId) {
+      this.spinner.show();
+      this.typePage = 'تعديل';
+      this.dashBoardSer.getItemData(this.vehicleId, 'vehicle').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.formData.name = responce['type'].name;
+          this.formData.status = responce['type'].status;
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
+    } else {
+      this.typePage = 'إضافه';
+    }
+  }
+
+
+  onSubmitted() {
+
+
+    this.checkSaveclick = true;
+    
+    if(this.vehicleId) {
+      this.dashBoardSer.editItem(this.vehicleId, this.vehicleForm.value, 'vehicle').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('يوجد خطأ في الخادم ، حاول لاخقا');
+        }
+      )
+    } else {
+      //add submitted
+      this.dashBoardSer.addItem(this.vehicleForm.value, 'vehicle').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم الإضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.checkSaveclick = false;
+          console.log(error);
+          this.toastr.error('خطا في السيرفر ، حاول لاحقاً !');
+        }
+      );
+    }
+    
+    console.log(this.vehicleForm);
+  }
+
+}

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

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

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

@@ -0,0 +1,251 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { LectureService } from './../../../shared/lecture.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { HttpClient } from '@angular/common/http';
+
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-vehicle-list',
+  templateUrl: './vehicle-list.component.html',
+  styleUrls: ['./vehicle-list.component.css']
+})
+
+export class VehicleListComponent implements OnInit {
+
+  pageId: number;
+  dataList = [];
+  dataListIds = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  constructor(private route: ActivatedRoute,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private http: HttpClient,
+    private modal: Modal,
+    private dashBoardSer: DashboardService,
+    private router: Router) { }
+
+  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['vehicleListId'];   
+      }
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log('permission list', responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 43) {
+                if(this.pages[i].permissions[0].name == 'definition_of_vehicle_types') {
+                  this.authSer.showAddBtn = true;
+                  this.authSer.showEditBtn = true;
+                  this.authSer.showDeleteBtn = true;
+                }
+              }else {
+                console.log('no lectures');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    this.dashBoardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['vehicle_types'];
+        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.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+
+      //filtter function
+    filtterFunc(data) {
+      this.dataList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      this.dashBoardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['vehicle_types'];
+          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.dataList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.dashBoardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['vehicle_types'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.dataList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    };
+
+     //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataList = responce['vehicle_types'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  onDelete() {
+
+    this.dataListIds = [];
+    for(let i = 0; i < this.dataList.length; i++) {
+      if(this.dataList[i].selected == true) {
+        this.dataListIds.push(this.dataList[i].id);
+      }
+    }
+
+    console.log(this.dataListIds);
+
+    if(this.dataListIds.length > 0) {
+      const dialogRef = this.modal.alert()
+      .size('sm')
+      .showClose(true)
+      .title('تأكيد الحذف')
+      .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+      .open();
+  
+        dialogRef.result
+        .then( result => 
+          this.dashBoardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم الحذف');
+              this.spinner.show();
+              this.dataList = [];
+               //get list data 
+              this.dashBoardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.dataList = responce['vehicle_types'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
+            },
+            (error) => {
+              console.log(error);
+              this.spinner.hide();
+              },
+            )
+        );
+    } else {
+      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+    }
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addTab');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/vehicle/add']);
+  }
+
+  //edit function
+   onEdit(editTabID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'vehicle/edit/' + editTabID]);
+  };
+
+}

src/app/regester/regester.component.css

@@ -157,6 +157,34 @@ select.ng-invalid{
     margin: 5px;
     color: red;
 }
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+.title {
+    font-size: 14px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #616060;
+    width: 150px;
+    padding: 7px 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+    text-align: center;
+    margin-top: 11px;
+    margin-bottom: -12px;
+    z-index: 99999;
+    margin-right: 12px;
+    border-radius: 3px;
+}
+
 /* start media query style */
 
 @media(max-width: 767px){

src/app/regester/regester.component.html

@@ -130,12 +130,19 @@
 						</legend>
 					
 						  
-						<div class="col-12 col-sm-12 col-md-6 col-lg-4">
+						 <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="functional_number" style="float:right"> الرقم الوظيفي <span class="spanReqired-w">*</span></label>
                 <input type="number" class="form-control" min="0" id="functional_number" placeholder="الرقم الوظيفي" formControlName="functional_number" />
               </div>
             </div>
+
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                <div class="form-group">
+                  <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
+                  <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position" />
+                </div>
+              </div>
             
 						<div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
@@ -158,12 +165,6 @@
               </div>
             </div>
 
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-              <div class="form-group">
-                <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
-                <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position" />
-              </div>
-            </div>
             
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">

src/app/regester/regester.component.ts

@@ -59,7 +59,7 @@ export class RegesterComponent implements OnInit {
   
   regesterForm: FormGroup;
   myInnerHeight = window.innerHeight;
-  min = '1990-01-01';
+  min = '1990-01-31';
   adminstration = [];
   countries = [];
   jobTitils = [];

src/app/servicesItems/sercices.component.css

@@ -21,6 +21,7 @@
     border-top: 0;
     font-family: 'Cairo', sans-serif;
     transition: all 05s;
+    margin: 15px 0;
 }
 
 .dashboardItem-w:hover img {

src/app/servicesItems/services.component.ts

@@ -173,8 +173,14 @@ getDataService(dataService){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/absorpationList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 35) {
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reviewTrainerData/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 36) {
+            this.router.navigate(['service/' + this.idUser + '/' + dataService.id + '/reviewSectionForTrainee/' + this.pages[0].id ]);
           } else if(this.pages[0].id == 37) {
-
+            this.router.navigate(['service/' + this.idUser + '/' + dataService.id + '/printCardTraineeList/' + this.pages[0].id ]);
+          } else if(this.pages[0].id == 38){
+            this.router.navigate(['service/' + this.idUser + '/' + dataService.id + '/registrationTraineeList/' + this.pages[0].id ]);
+          } else if(this.pages[0].id == 39) {
+            this.router.navigate(['service/' + this.idUser + '/' + dataService.id + '/finalAccerditationList/' + this.pages[0].id ]);
           } else if(this.pages[0].id == 40) {
             console.log('trainnngg data !');
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/trainnerList/' + this.pages[0].id]);
@@ -189,7 +195,26 @@ getDataService(dataService){
        //visitor life cycle
        console.log('trainingServices/' + this.idUser + '/' + dataService.id);
        this.router.navigate(['trainingServices/' + this.idUser + '/' + dataService.id]);
-     } 
+     } else if(dataService.id == 4) {
+       //خدمه الحركه
+       this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.pages = responce['pages'];
+          if(this.pages[0].id == 43) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/vehicleList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/vehicleList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 44) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/vehicleModelList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 45) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/registrationVehicleList/' + this.pages[0].id]);
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+     }
   }
 
 

src/app/shared/dashboard.service.ts

@@ -23,6 +23,7 @@ export class DashboardService {
       if(pageId == 40) {
         return this.http.get(this.authService.pathApi +'/page_list/1' + '/' + currentPage + '/' + dataTableNumber + '/all');
       } else {
+        console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
         return this.http.get(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
       }
     }
@@ -87,6 +88,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + "/add_user", data);
       } else if(addType == 'traineeRequest') {
         return this.http.post(this.authService.pathApi + "/add_request", data);
+      } else if(addType == 'vehicle') {
+        return this.http.post(this.authService.pathApi + '/add_vehicle_type', data);
+      } else if('modelVehicle') {
+        return this.http.post(this.authService.pathApi + '/add_vehicle_model', data);
       }
     }
 
@@ -151,6 +156,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/edit_user', editData);
       } else if(editPageName == 'request') {
         return this.http.post(this.authService.pathApi + '/edit_request', editData);
+      } else if(editPageName == 'vehicle') {
+        return this.http.post(this.authService.pathApi + '/edit_vehicle_type', editData);
+      } else if(editPageName == 'vehicelModel') {
+        return this.http.post(this.authService.pathApi + '/edit_vehicle_model', editData);
       }
     }
 
@@ -193,6 +202,12 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_user/' + pageId);
       } else if(typeGetData == 'traineeRequest') {
         return this.http.get(this.authService.pathApi + '/get_request/' + pageId);
+      } else if(typeGetData == 'sectionReviewTrainee') {
+        return this.http.get(this.authService.pathApi + '/get_request/' + pageId);
+      } else if(typeGetData == 'vehicle') {
+        return this.http.get(this.authService.pathApi + '/get_vehicle_type/' + pageId);
+      } else if('vehicleModel') {
+        return this.http.get(this.authService.pathApi + '/get_vehicle_model/' + pageId);
       }
   }
 
@@ -246,6 +261,12 @@ export class DashboardService {
         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});
+      } else if(pageId == 43) {
+        return this.http.post(this.authService.pathApi + '/delete_vehicle_type', {'types_id' : dataIds});
+      } else if(pageId == 44) {
+        return this.http.post(this.authService.pathApi + '/delete_vehicle_model', {'models_id' : dataIds});
+      } else if(pageId == 45) {
+        return this.http.post(this.authService.pathApi + '/delete_vehicle_data', {'datas_id' : dataIds});
       }
 
     };

src/app/shared/number.directive.ts

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

src/app/shared/shared.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { OnlyNumberDirective } from './only-number.directive';
 import { CeiboShare } from 'ng2-social-share';
+import { NumberDirective } from './number.directive';
 
 
 @NgModule({
@@ -10,6 +11,7 @@ import { CeiboShare } from 'ng2-social-share';
     OnlyNumberDirective,
     EnglishCharactersDirective,
     CeiboShare,
+    NumberDirective,
   ],
   exports: [
     CommonModule,

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

@@ -57,19 +57,19 @@
             <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"/>
+                <input type="number" min="0" placeholder="رقم التسجيل" (keypress)="onKeyPress($event)" appNumber 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"/>
+                <input type="number" min="0" (keypress)="onKeyPress($event)" appNumber 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"/>
+                <input type="number" min="0" (keypress)="onKeyPress($event)" appNumber 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'">
@@ -143,7 +143,7 @@
               </div>
             </div>
             <div class="col-12">
-              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+              <button type="submit" class="btn btn-success rightW" *ngIf="statusType == 'pending'" [disabled]="!f.valid || checkSaveClick">حفظ</button>
               <button type="button" class="btn btn-warning rightW" (click)="authService.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
             </div>
           </form>

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

@@ -29,6 +29,7 @@ export class AddRequestComponent implements OnInit {
   checkSaveClick: boolean = false;
   editMode:boolean = false;
   requestId: number;
+  statusType: string = '';
 
   @ViewChild('f') addRequestFrom: NgForm;
 
@@ -90,6 +91,8 @@ export class AddRequestComponent implements OnInit {
     (params: Params) => {
       this.requestId = params['requestId'];
       if(this.requestId) {
+        this.statusType = localStorage.getItem('requestStatus');
+
         this.spiner.show();
         this.files = [];
         this.editButtonShow = true;
@@ -418,4 +421,12 @@ export class AddRequestComponent implements OnInit {
 
  }
 
+ onKeyPress(event) {
+   console.log(event.target.value);
+   if(event.target.value < 0) {
+     event.target.value = null;
+    event.preventDefault();
+   }
+ }
+
 }

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

@@ -14,29 +14,24 @@
         <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>
+                <th>الحاله</th>
+                <th> فتره التدريب</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.status == 'pending' ? 'تحت الإجراء' : '....'}}</td>
+                <td>{{data.training_period}}</td>
+                <td>{{data.type}}</td>
                 <td>{{data.specialization_name}}</td>
-                <td> {{data.specific_specialization}}</td>
-                <td>{{data.university}}</td>
+                <td>{{data.specific_specialization}}</td>
+                
                 <td>
-                  <button *ngIf=" data.status == 'pending' " type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button>
+                  <button *ngIf=" data.status == 'pending' " type="button" class="btn btn-outline-secondary" (click)="onEdit(data)"><i class="fas fa-edit"></i></button>
                   <span *ngIf="data.status != 'pending'">غير مسموح</span>
                 </td>
               </tr>

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

@@ -1,3 +1,4 @@
+import { ToastrService } from 'ngx-toastr';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
@@ -14,6 +15,7 @@ export class AllRequestsComponent implements OnInit {
   constructor(private http: HttpClient,
     private spinner: NgxSpinnerService, 
     private router: Router,
+    private toastr: ToastrService,
     private route: ActivatedRoute,
     private authSer: AuthServiceService) { }
 
@@ -48,6 +50,9 @@ export class AllRequestsComponent implements OnInit {
       (responce) => {
         console.log(responce);
         this.requests = responce['requests'];
+        if(this.requests.length == 0) {
+          this.toastr.warning('قائمه الطلبات فارغه ');
+        }
         this.spinner.hide();
       },
       (error) => {
@@ -56,10 +61,11 @@ export class AllRequestsComponent implements OnInit {
     )
   }
 
-  onEdit(requestId: number) {
-    console.log(requestId);
-    console.log('editRequest/' + this.visitorId + '/' + requestId);
-    this.router.navigate(['editRequest/' + this.visitorId + '/' + requestId]);
+  onEdit(requestData) {
+    console.log(requestData);
+    console.log('editRequest/' + this.visitorId + '/' + requestData.id);
+    localStorage.setItem('requestStatus', requestData.status);
+    this.router.navigate(['editRequest/' + this.visitorId + '/' + requestData.id]);
   }
 
 

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

@@ -7,7 +7,7 @@
             <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}}" />
+                <!-- <img src="{{authService.pathImg + page.photo}}" /> -->
               </div>
             </div>
           </div>