trainee request

src/app/dashboard/dashboard-routing.ts

@@ -1,3 +1,5 @@
+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';
@@ -60,7 +62,7 @@ import { AddAdvertisingServiceComponent } from './advertising-services/add-adver
 import { SupervisorListComponent } from './supervisor/supervisor-list/supervisor-list.component';
 import { AbsorpationAddComponent } from './absorpation-plan/absorpation-add/absorpation-add.component';
 import { TrainnerDataListComponent } from './trainner-data/trainner-data-list/trainner-data-list.component';
-import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trainner-data-add.component';
+import { ReviewTraineeAddComponent } from './reivew-trainee-data/review-trainee-add/review-trainee-add.component';
 
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -147,7 +149,10 @@ const dashboardRouting: Routes = [
     {path: 'absorpation/edit/:absorpationEditId', component: AbsorpationAddComponent},
     {path: 'trainnerList/:trainnerListId', component: TrainnerDataListComponent},
     {path: 'trainer/add', component: TrainnerDataAddComponent},
-    {path: 'trainer/edit/:trainnerEditId', component: TrainnerDataAddComponent}
+    {path: 'trainer/edit/:trainnerEditId', component: TrainnerDataAddComponent},
+    {path: 'reviewTrainerData/:reviewTrainerId', component: ReviewTraineeDataListComponent},
+    {path: 'reviewTraineeData/add', component: ReviewTraineeAddComponent},
+    {path: 'reviewTraineeData/edit/:reviewTraineeId', component: ReviewTraineeAddComponent},
   ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -104,7 +104,9 @@ import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-a
 import { AbsorpationListComponent } from './absorpation-plan/absorpation-list/absorpation-list.component';
 import { AbsorpationAddComponent } from './absorpation-plan/absorpation-add/absorpation-add.component';
 import { TrainnerDataListComponent } from './trainner-data/trainner-data-list/trainner-data-list.component';
+import { ReviewTraineeDataListComponent } from './reivew-trainee-data/review-trainee-data-list/review-trainee-data-list.component';
 import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trainner-data-add.component';
+import { ReviewTraineeAddComponent } from './reivew-trainee-data/review-trainee-add/review-trainee-add.component';
 
 
 @NgModule({
@@ -176,6 +178,8 @@ import { TrainnerDataAddComponent } from './trainner-data/trainner-data-add/trai
         AbsorpationAddComponent,
         TrainnerDataListComponent,
         TrainnerDataAddComponent,
+        ReviewTraineeDataListComponent,
+        ReviewTraineeAddComponent,
     ],
     imports: [
         CommonModule,

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

@@ -0,0 +1,271 @@
+.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;
+}
+
+/* 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/reivew-trainee-data/review-trainee-add/review-trainee-add.component.html

@@ -0,0 +1,300 @@
+<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-6">
+              <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" >
+                  <option *ngFor="let trainee of trainees" [value]="trainee.id">{{trainee.name}}</option>
+                </select>
+              </div>
+            </div>
+            
+            <div class="col-12" *ngIf="typeMode">
+              <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" *ngIf="typeMode">
+              <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" (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" 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" 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" 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" 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" 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" 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" 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" 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" 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" required/>
+                    </div>
+                  </div>
+
+                  
+                
+                  <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="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="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="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-6 col-lg-6" *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>
+                      <button type="button" class="btn btn-danger statusBtn-w" (click)="statusShow('refuced')">رفض</button>
+                      <button type="button" class="btn btn-default statusBtn-w" (click)="statusShow('asked_for_opinion')">طلب رأي</button>
+                      <input type="text" placeholder="سبب الرفض" class="form-control" name="status_description" ngModel [(ngModel)]="formData.status_description" *ngIf="showRefusedCause" required>
+                    </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}"/></td>
+                        <td style="position: relative;">
+                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" />
+                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          <span class="fileName-w">{{file.nameFile}}</span>
+                        </td>
+                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
+                      </tr>
+                    </tbody>
+                  </table>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authService.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+
+          </div>
+        </form>
+      </div>
+  
+  
+    </div>
+  </div>
+  

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

@@ -0,0 +1,544 @@
+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-review-trainee-add',
+  templateUrl: './review-trainee-add.component.html',
+  styleUrls: ['./review-trainee-add.component.css']
+})
+export class ReviewTraineeAddComponent 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 
+  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 
+  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: '',
+    status_description: '',
+  }
+
+  //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() {
+  
+
+    //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['reviewTraineeId'];
+      }
+    );
+
+    if(this.reportId) {
+
+      this.spinner.show();
+      this.editMode = true;
+      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.status = responce['data']['request'].status;
+          this.formData.status_description = responce['data']['request'].status_description;
+          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.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);
+        }
+      );
+    }
+
+    
+
+  }
+
+
+  statusShow(typeStatus: string) {
+    console.log(typeStatus);
+    if(typeStatus == 'accepted') {
+      this.formData.status = typeStatus;
+      this.toastr.success('تم تسجيل الحاله مقبول');
+      this.showRefusedCause = false;
+    } else if(typeStatus == 'refuced') {
+      this.formData.status = typeStatus;
+      this.showRefusedCause = true;
+      this.toastr.error('تم تسجيل الحاله بالرفض');
+    } else if(typeStatus == 'asked_for_opinion') {
+      this.formData.status = typeStatus;
+      this.showRefusedCause = false;
+      this.toastr.warning('تم تسجيل الحاله طلب رأي ');
+    }
+  }
+
+  plusImage() {
+    this.files.push({
+      title: '',
+      file: '',
+      file_type: '',
+      nameFile: '',
+      id: null,
+    });
+    console.log('files after plus ', this.files);
+  }
+
+
+ //delete row from table
+ onDeleteRow(index:number) {
+  this.files.splice(index , 1);
+  if(this.attachments_ids.length > 0) {
+    this.attachments_ids.splice(index, 1);
+  }
+  console.log('files after delete ',this.files);
+  console.log('attachements ids', this.attachments_ids);
+}
+
+   //identitiy input change 
+   onIdentitiyChange(event) {
+    if(event.length >= 10) {
+      this.identity_id = 0;
+    } else {
+      this.identity_id = this.identity_type;
+    }
+  }
+
+  getSelectedOptionText(event){
+    console.log(event.target.value);
+    this.identity_id = event.target.value;
+    this.identity_type = event.target.value;
+  }
+
+  //get trainee data when subitted form
+  getTraineeData(event) {
+    console.log(event.target.value);
+    this.http.get(this.authSer.pathApi + '/get_user/' + event.target.value).subscribe(
+      (responce) => {
+        console.log('one trainee data ', responce);
+        this.typeMode = true;
+        this.disabledInput = true;
+        this.userData.name = responce['user'].name;
+        this.userData.nationality_id = responce['user'].nationality_id;
+        this.userData.identity_type_id = responce['user'].identity_type_id;
+        this.userData.identity_number = responce['user'].identity_number;
+        this.userData.email = responce['user'].email;
+        this.userData.birthday = responce['user'].birthday;
+        this.userData.phone = responce['user'].phone;
+        this.userData.gender = responce['user'].gender;
+        this.userId = responce['user'].id;
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+  //change file 
+  onFileChanges(event, index:number) {
+    console.log(event);
+    console.log(index);
+     this.files[index].nameFile = event[0].name.substring(0,20) + '....';
+     this.files[index].file = event[0].base64;
+     this.files[index].file_type = event[0].type.split('/')[1];
+     if(this.editMode) {
+       //validate in pdf type file in edit mode 
+       if(this.files[index].file_type != '') {
+         if(this.files[index].file_type != 'pdf') {
+           this.toastr.warning('يجب أن تكون صيغه الملف pdf !');
+           this.checkSaveClick = true;
+         } else {
+           this.checkSaveClick = false;
+         }
+       }
+
+       console.log(this.files);
+ 
+     } else {
+       //validate in pdf type file in create mode 
+       if(this.files[index].file_type != 'pdf') {
+         this.toastr.warning('يجب أن تكون صيفه الملف pdf !');
+         this.checkSaveClick = true;
+       } else {
+         this.checkSaveClick = false;
+       }
+       console.log(this.files);
+     }
+    console.log('files after change ',this.files);
+  }
+
+  //change department
+  changeDepartment(event, typeSelect) {
+
+    console.log(event.target.value);
+    if(typeSelect == 1) {
+      if(event.target.value == 2001) {
+        this.departmentsId[0] = null;
+      } else {
+        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;        
+      }
+    } else if(typeSelect == 3) {
+      if(event.target.value == 2003) {
+        this.departmentsId[2] = null;
+      } else {
+        this.departmentsId[2] = event.target.value;        
+      }
+    }
+ 
+   
+    
+     console.log(this.departmentsId);
+
+     for(let i = 0; i < this.departmentsId.length; i++) {
+       if(this.departmentsId[i] == this.departmentsId[i+1] && this.departmentsId[i] != null && this.departmentsId[i+1] != null) {
+         this.toastr.warning('يوجد أقسام متشابهه ، يجب أن تكون جميه الاقسام مختلفه');
+         this.checkSaveClick = true;
+         break;
+       } else {
+         this.checkSaveClick = false;
+       }
+     }
+
+  }
+
+  
+  //change type 
+  changeType(event) {
+    console.log(event.target.value);
+    this.formData.type = event.target.value;
+  }
+
+
+  onSubmittedForm() {
+    
+    
+
+    if(this.editMode) {
+
+      this.formData['id'] = this.reportId;
+      //add old file in new array
+      const editAttachements = [];
+      for(let i = 0; i < this.files.length; i++) {
+        for(let j = 0; j < this.attachments_ids.length; j++) {
+         if(this.files[i].id == this.attachments_ids[j]) {
+          editAttachements[i] = this.files[i];
+         }
+        }
+      }
+
+      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) {
+        this.toastr.warning('يجب إختيار قسم واحد من الأقسام المحدده !');
+      } else if(this.formData.status == 'pending') {
+        this.toastr.warning('من فضلك قم بإختيار حاله الطلب !');
+      } else {
+        
+        //delete file & file type if not change it in old file
+        for(let i = 0; i < editAttachements.length; i++) {
+          if(editAttachements[i].file_type == '') {
+            delete editAttachements[i].file;
+            delete editAttachements[i].file_type;
+          }
+        }
+
+        //delete the extera key file name 
+        for(let i = 0; i < editAttachements.length; i++) {
+          delete editAttachements[i].nameFile;
+        }
+        
+        
+        //remove old file from files object
+        for(let i = 0; i < editAttachements.length; i++) {
+          for(let j = 0; j < this.files.length; j++) {
+            if(editAttachements[i].id == this.files[j].id) {
+              this.files.splice(j , 1);
+            }
+          }
+        }
+
+        //remove nameFile and id from object
+        for(let i = 0; i < this.files.length; i++) {
+          delete this.files[i].nameFile;
+          delete this.files[i].id;
+        }
+
+        delete this.formData['department1'];
+        delete this.formData['department2'];
+        delete this.formData['department3'];
+
+        //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;
+        console.log('data send' , formArraySend);
+
+        this.http.post(this.authSer.pathApi + '/edit_request', formArraySend).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('يوجد مشكله في السيرفر يتم العمل عليها حالياً');
+          }
+        );
+      }
+    } else {
+      //add attachements to json in craete mode
+      //remove fileName from files and remove file is empty 
+      for(let i = 0; i < this.files.length; i++) {
+        //delete this.files[i].nameFile;
+        if(this.files[i].file_type){
+          this.files[i].file_type = this.files[i].file_type.toLowerCase();
+        }
+        if(this.files[i].file == '') {
+        //this.files.splice(this.files.indexOf(this.files[i], 1));
+        console.log('empty number ' , i);  
+        this.files.splice(i , 1);
+        }
+      }
+
+      if(this.departmentsId.length > 0) {
+        this.formData['departments_ids'] = [];
+        for(let i = 0; i < this.departmentsId.length; i++) {
+          this.formData['departments_ids'][i] = this.departmentsId[i];
+        }
+      }
+      
+
+    
+
+      if(this.departmentsId.length == 0) {
+        this.toastr.warning('قم بإختيار قسم كحد أدني !');
+      } else if(this.formData.trainee == '') {
+        this.toastr.warning('قم بإختيار متدرب !');
+      } else {
+        //delete extra keies
+        delete this.formData.trainee;
+        delete this.formData.department1;
+        delete this.formData.department2;
+        delete this.formData.department3;
+        delete this.formData.status;
+
+        for(let i = 0; i < this.files.length; i++) {
+          delete this.files[i].nameFile;
+          delete this.files[i].id;
+        }
+        this.formData['attachments'] = this.files; //add files to form json
+
+        console.log(this.formData);
+        this.dashBoardSer.addItem(this.formData, 'traineeRequest').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الإضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            console.log(error.error['error']);
+              if(error.error['error'] == 'can not add new request untill old one done') {
+                this.toastr.warning('لا يمكن التعديل طلب جديد ، حتي يتم إجراءات علي الطلب السابق ، شكراً');
+                this.location.back();                
+              } else {
+                this.toastr.error('يوجد مشكله في السرفر ، سيتم معالجتها لاحقاً');
+                this.location.back();
+                this.location.back();
+              }
+          }
+        );
+      }
+    }
+
+  }
+
+}

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

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

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

@@ -0,0 +1,81 @@
+<div class="container">
+    <div class="row">
+      <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه التدريب</li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px">إستعراض بيانات المتدربين</li>
+          </ul>
+      </div>
+    </div>
+  
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+            <!-- <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button> -->
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+            <hr>
+          </div>
+        </div>
+      </div>
+  
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            <div class="form-group">
+              <span class="spanSelect-w">
+                <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+                من العناصر يتم عرضها
+              </span>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+  
+          </div>
+      </div>
+  
+      <table class="table table-bordered">
+        <thead class="headBackground-w">
+          <tr>
+            <th>
+              <div class="custom-control custom-checkbox">
+                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                  <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
+              </div>
+            </th>
+            <th> إسم المتدرب</th>
+            <th>إسم التخصص</th>
+            <th>إسم التخصص الدقيق</th>
+            <th> الجامعه</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="{{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>
+            <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/reivew-trainee-data/review-trainee-data-list/review-trainee-data-list.component.ts

@@ -0,0 +1,276 @@
+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-review-trainee-data-list',
+  templateUrl: './review-trainee-data-list.component.html',
+  styleUrls: ['./review-trainee-data-list.component.css']
+})
+export class ReviewTraineeDataListComponent 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['newsPageId'];
+      }
+    );
+
+    //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['reviewTrainerId'];
+      }
+    );
+    
+    //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 == 35) {
+                      if(this.pages[i]['permissions'][0].name == 'review_of_trainee_data') {
+                        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();
+          }
+        );
+
+      }
+    );
+    
+  }
+
+  //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;
+    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();
+    }
+  );
+};
+    
+// onDelete() {
+//   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.dashBoardService.deleteItem(this.dataListIds, this.pageId).subscribe(
+//         (responce) => {
+//           console.log(responce);
+//           this.toastr.success('تم الحذف');
+//           this.spinner.show();
+//           this.dataList = [];
+//           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();
+//             }
+//           );
+//         },
+//         (error) => {
+//           this.toastr.success('يوجد خطأ إنتظر قليلا وأعد المحاوله ');
+//           console.log(error);
+//           this.spinner.hide();
+//         },
+//       )
+//     );
+//   } else {
+//     this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+//   }
+// };
+  
+//add function
+onAdd() {
+  console.log('service/' + this.userLoginId + '/' + this.serviceId + '/reviewTraineeData/add');
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/reviewTraineeData/add']);
+}
+
+//edit function
+  onEdit(editNewID) {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'reviewTraineeData/edit/' + editNewID]);
+}
+    
+
+}

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

@@ -224,6 +224,8 @@ export class ServiceItemComponent implements OnInit {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/supervisorList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 34) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/absorpationList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 35) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/reviewTraineeData/' + this.pages[0].id]);
           } else if(this.pages[0].id == 40) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/trainnerList/' + this.pages[0].id]);
           }
@@ -305,6 +307,8 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['supervisorList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 34) {
       this.router.navigate(['absorpationList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 35) {
+      this.router.navigate(['reviewTrainerData/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 40) {
       this.router.navigate(['trainnerList/' + dataPage.id], {relativeTo: this.route});
     }

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

@@ -158,11 +158,6 @@ ngOnInit() {
       }
     }
   )
-
- 
-
-
-
 }
 
 

src/app/regester/regester.component.html

@@ -17,29 +17,29 @@
         <form [formGroup]="regesterForm" (ngSubmit)="onSubmittedForm()" class="formStyle">
           <div class="row">
         
-            <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
-              <div class="form-group text-center imgContainer">
-                  <img [src]="urlImg" class="imgProfile" height="200"> 
-                  <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
-                  <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-              </div>
+          <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+            <div class="form-group text-center imgContainer">
+                <img [src]="urlImg" class="imgProfile" height="200"> 
+                <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
             </div>
+          </div>
 
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showTypeInput">
-              <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="defaultUnradio" value="1" formControlName="type" name="type" (change)="checkTypeUser($event)">
-                  <label class="custom-control-label" for="defaultUnradio" 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="defaultRadio" value="0" formControlName="type" name="type" (change)="checkTypeUser($event)">
-                  <label class="custom-control-label" for="defaultRadio" style="cursor: pointer;">موظف</label>
-                </div>
-
+          <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showTypeInput">
+            <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="defaultUnradio" value="1" formControlName="type" name="type" (change)="checkTypeUser($event)">
+                <label class="custom-control-label" for="defaultUnradio" 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="defaultRadio" value="0" formControlName="type" name="type" (change)="checkTypeUser($event)">
+                <label class="custom-control-label" for="defaultRadio" style="cursor: pointer;">موظف</label>
+              </div>
+
             </div>
+          </div>
 			
 			<div class="col-sm-12 col-md-12 col-lg-12">
 				<div class="row">

src/app/servicesItems/services.component.ts

@@ -171,8 +171,11 @@ getDataService(dataService){
           } else if(this.pages[0].id == 34) {
             console.log('/service/' + this.idUser + '/' + dataService.id + '/absorpationList/' + this.pages[0].id);
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/absorpationList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 35) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reviewTrainerData/' + 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]);
           }
         },
         (error) => {
@@ -181,6 +184,7 @@ getDataService(dataService){
       );
       
      } else if(dataService.id == 3 && this.userType == 1) {
+       //visitor life cycle
        console.log('trainingServices/' + this.idUser + '/' + dataService.id);
        this.router.navigate(['trainingServices/' + this.idUser + '/' + dataService.id]);
      } 

src/app/shared/dashboard.service.ts

@@ -85,6 +85,8 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + "/add_request", data);
       } else if(addType == 'trainee') {
         return this.http.post(this.authService.pathApi + "/add_user", data);
+      } else if(addType == 'traineeRequest') {
+        return this.http.post(this.authService.pathApi + "/add_request", data);
       }
     }
 
@@ -148,7 +150,7 @@ export class DashboardService {
       } else if(editPageName == 'trainee') {
         return this.http.post(this.authService.pathApi + '/edit_user', editData);
       } else if(editPageName == 'request') {
-        return this.http.post(this.authService.pathApi + '/edit_request_for_trainee', editData);
+        return this.http.post(this.authService.pathApi + '/edit_request', editData);
       }
     }
 
@@ -189,6 +191,8 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_absorpation_plan/' + pageId);
       } else if(typeGetData == 'trainee') {
         return this.http.get(this.authService.pathApi + '/get_user/' + pageId);
+      } else if(typeGetData == 'traineeRequest') {
+        return this.http.get(this.authService.pathApi + '/get_request/' + pageId);
       }
   }
 
@@ -239,9 +243,9 @@ export class DashboardService {
       } else if(pageId == 33) {
         return this.http.post(this.authService.pathApi + '/un_asign_supervisor_to_department', {'departments_id' : dataIds})
       } else if(pageId == 34) {
-        return this.http.post(this.authService.pathApi + '/delete_absorpation_plans', {'absorpation_plans_id' : dataIds})
+        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})
+        return this.http.post(this.authService.pathApi + '/delete_user', {'users_id' : dataIds});
       }
 
     };

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

@@ -59,12 +59,32 @@
 
 .iconUpload-w {
     width: 30px;
+    height: 37px;
+    border-radius: 5px;
     font-size: 1.25em;
     font-weight: 700;
     display: inline-block;
     background-color: #fff;
     border: 1px solid #ccc;
     width: 100%;
-    margin: 10px 0;
     padding: 0 10px;
+}
+
+.deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
 }

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

@@ -18,8 +18,8 @@
               <div class="form-group">
                 <label>نوع الطلب</label>
                 <select class="form-control selectStyle-w" name="type" (input)="changeType($event)" [ngModel]="dataForm.type" required>
-                  <option value="trainees">إختيار بين متدربين</option>
-                  <option value="fellowship">زماله(البورد السعودي) </option>
+                  <option value="trainees">المتدربين</option>
+                  <option value="fellowship"> زماله(البورد السعودي) </option>
                   <option value="university_administrators">مشرفي الجامعات</option>
                 </select>
               </div>
@@ -115,18 +115,30 @@
               </div>
               <div class="col-12">
                <div class="row">
-                 <div class="col-12">
-                  <button type="button" class="btn btn-default" (click)="plusImage()">إضافه مرفق</button>
-                 </div>
-                 <div class="col-12 col-sm-12 col-md-3 col-lg-3" *ngFor="let file of files; let i = index">
-                   <div class="itemFile-w">
-                     <input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}">
-                     <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" />
-                     <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-                     <span>{{file.nameFile}}</span>
-                     <button (click)="onDeleteFile(file,i)" class="btn btn-danger" *ngIf="i==0 ? false: true">حذف</button>
-                   </div>
+                 
+                  <div class="col-12">
+                  <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:10px 0;">إضافه مرفق</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}"/></td>
+                        <td>
+                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" />
+                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          <span>{{file.nameFile}}</span>
+                        </td>
+                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
+                      </tr>
+                    </tbody>
+                  </table>
                </div>
               </div>
             </div>

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

@@ -6,6 +6,7 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-add-request',
@@ -19,12 +20,14 @@ export class AddRequestComponent implements OnInit {
     private toastr: ToastrService,
     private dashBoardSer: DashboardService,
     private spiner: NgxSpinnerService,
+    private location: Location,
     private authService: AuthServiceService) { }
 
   visitorId: number;
   departments = [];
   departmentsId = [];
   checkSaveClick: boolean = false;
+  editMode:boolean = false;
   requestId: number;
 
   @ViewChild('f') addRequestFrom: NgForm;
@@ -45,16 +48,23 @@ export class AddRequestComponent implements OnInit {
     department1: '',
     department2: '',
     department3: '',
-  }
+  };
   
   files = [{
     title : '',
     file: '',
     file_type: '',
     nameFile: '',
-  }]
+    id: null,
+  }];
+
+
 
   attachments_ids = []; //for edit mode;
+  departmentsIds = []; //attachemnts id edit
+  disabledInput:boolean = false; //disabled button of row in edit mode 
+  editButtonShow:boolean = false; //show edit button in edit mode 
+  saveButtonShow:boolean = false; //show save button in edit mode 
 
   ngOnInit() {
 
@@ -81,6 +91,10 @@ export class AddRequestComponent implements OnInit {
       this.requestId = params['requestId'];
       if(this.requestId) {
         this.spiner.show();
+        this.files = [];
+        this.editButtonShow = true;
+        this.disabledInput = true;
+        this.editMode = true;
         this.http.get(this.authService.pathApi + '/get_request/' + this.requestId).subscribe(
           (responce) => {
             console.log(responce);
@@ -89,23 +103,40 @@ export class AddRequestComponent implements OnInit {
             this.dataForm.specific_specialization = responce['data']['request'].specific_specialization;
             this.dataForm.university = responce['data']['request'].university;
             this.dataForm.level = responce['data']['request'].level;
-            this.dataForm.training_period = responce['data']['request'].training_period;
-
+            this.dataForm.registration_number = responce['data']['request'].registration_number ? responce['data']['request'].registration_number : '';
+            this.dataForm.contract_type = responce['data']['request'].contract_type ? responce['data']['request'].contract_type : '';
+            this.dataForm.functional_number = responce['data']['request'].functional_number ? responce['data']['request'].functional_number : '';
+            this.dataForm.level = responce['data']['request'].level ? responce['data']['request'].level : '';
+            this.dataForm.training_period = responce['data']['request'].training_period ? responce['data']['request'].training_period : '';
+            this.dataForm.organization_affiliated_with = responce['data']['request'].organization_affiliated_with ? responce['data']['request'].organization_affiliated_with : '';
+            this.dataForm.authority_card_number = responce['data']['request'].authority_card_number ? responce['data']['request'].authority_card_number : '';
+
+            //add departmrnts ids 
             if(responce['data']['request'].departments.length > 0) {
-              if(responce['data']['request'].departments[0].department_id) {
-                this.dataForm.department1 = responce['data']['request'].departments[0].department_id;
-              }
-              if(responce['data']['request'].departments[1].department_id) {
-                this.dataForm.department2 = responce['data']['request'].departments[1].department_id;
-              }
-              if(responce['data']['request'].departments[2].department_id) {
-                this.dataForm.department3 = responce['data']['request'].departments[2].department_id;
+              for(let i = 0; i < responce['data']['request'].departments.length; i++) {
+                if(i == 0) {
+                  this.dataForm.department1 = responce['data']['request'].departments[0].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 1) {
+                  this.dataForm.department2 = responce['data']['request'].departments[i].department_id;
+                  this.departmentsId[i] = responce['data']['request'].departments[i].department_id;
+                } else if(i == 2) {
+                  this.dataForm.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.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 {
@@ -117,7 +148,7 @@ export class AddRequestComponent implements OnInit {
           (error) => {
             console.log(error);
           }
-        )
+        );
       }
     }
   );
@@ -142,25 +173,42 @@ export class AddRequestComponent implements OnInit {
      file: '',
      file_type: '',
      nameFile: '',
+     id: null,
    });
-   console.log(this.files);
+   console.log('files after plus ', this.files);
  }
 
  onFileChanges(event, index:number) {
    console.log(event);
    console.log(index);
-   this.files[index].nameFile = event[0].name.substring(0,20) + '....';
-   this.files[index].file = event[0].base64;
-   this.files[index].file_type = event[0].type.split('/')[1];
-   console.log(this.files);
- }
+    this.files[index].nameFile = event[0].name.substring(0,20) + '....';
+    this.files[index].file = event[0].base64;
+    this.files[index].file_type = event[0].type.split('/')[1];
+    if(this.editMode) {
+      //validate in pdf type file in edit mode 
+      if(this.files[index].file_type != '') {
+        if(this.files[index].file_type != 'pdf') {
+          this.toastr.warning('يجب أن تكون صيغه الملف pdf !');
+          this.checkSaveClick = true;
+        } else {
+          this.checkSaveClick = false;
+        }
+      }
 
- onDeleteFile(fileData, index:number) {
-   console.log(fileData);
-   console.log(index);
-   this.files.splice(index , 1);
+    } else {
+      //validate in pdf type file in create mode 
+      if(this.files[index].file_type != 'pdf') {
+        this.toastr.warning('يجب أن تكون صيفه الملف pdf !');
+        this.checkSaveClick = true;
+      } else {
+        this.checkSaveClick = false;
+      }
+    }
+   console.log('files after change ',this.files);
  }
 
+ 
+
  changeDepartment(event, typeSelect) {
    console.log(event.target.value);
    if(typeSelect == 1) {
@@ -190,47 +238,75 @@ export class AddRequestComponent implements OnInit {
    console.log(this.dataForm.type);
  }
 
+ //delete row from table
+ onDeleteRow(index:number) {
+   this.files.splice(index , 1);
+   if(this.attachments_ids.length > 0) {
+     this.attachments_ids.splice(index, 1);
+   }
+   console.log('files after delete ',this.files);
+   console.log('attachements ids', this.attachments_ids);
+ }
+
+
+
  onSubmitted() {
 
-  //remove fileName from files and remove file is empty 
+  this.addRequestFrom.value['departments_ids'] = [];
+
+  for(let i = 0; i < this.departmentsId.length; i++) {
+    this.addRequestFrom.value['departments_ids'][i] = this.departmentsId[i];
+  }
+
+  const editAttachements = [];
+
+  if(this.editMode) {
+
+   for(let i = 0; i < this.files.length; i++) {
+     for(let j = 0; j < this.attachments_ids.length; j++) {
+      if(this.files[i].id == this.attachments_ids[j]) {
+       editAttachements[i] = this.files[i];
+      }
+     }
+   }
+
+   
+
+  } else {
+    //remove fileName from files and remove file is empty 
     for(let i = 0; i < this.files.length; i++) {
-     delete this.files[i].nameFile;
-     if(this.files[i].file_type){
+      //delete this.files[i].nameFile;
+      if(this.files[i].file_type){
       this.files[i].file_type = this.files[i].file_type.toLowerCase();
-     }
-     if(this.files[i].file == '') {
+      }
+      if(this.files[i].file == '') {
       //this.files.splice(this.files.indexOf(this.files[i], 1));
       console.log('empty number ' , i);  
       this.files.splice(i , 1);
-     }
+      }
     }
+    console.log('after submitted form ', this.files);
+    this.addRequestFrom.value['attachments'] = this.files; //add files to form json
+  }
+
+
+ 
+
     
-    console.log(this.files);
-    this.addRequestFrom.value['attachments'] = this.files;
 
-    //store departments in object save
-    this.addRequestFrom.value['departments_ids'] = [];
 
-    if(this.addRequestFrom.value['department1']) {
-      console.log('1');
-      this.addRequestFrom.value['departments_ids'].push(this.addRequestFrom.value['department1']);
-      //delete this.addRequestFrom.value['department1'];
-    }
-    if(this.addRequestFrom.value['department2']) {
-     console.log('2');
-     this.addRequestFrom.value['departments_ids'].push(this.addRequestFrom.value['department2']);
-     //delete this.addRequestFrom.value['department2'];
-   }
-   if(this.addRequestFrom.value['department3']) {
-     console.log('3');
-     this.addRequestFrom.value['departments_ids'].push(this.addRequestFrom.value['department3']);
-     //delete this.addRequestFrom.value['department3'];
-   }
 
 
+
+
+
+  
+
    if(this.requestId) {
+     console.log('attachements ids after submitted' , this.attachments_ids);
+    
     //edit mode
-    if(this.addRequestFrom.value['departments_ids'].length == 0 ) {
+    if(this.departmentsId.length == 0) {
       this.toastr.warning('من فضلك ، قم بإختيار قسم كحد أدني !');
     } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['registration_number'] == '') {
       this.toastr.warning('قم بإختيار رقم التسجيل !');
@@ -242,52 +318,66 @@ export class AddRequestComponent implements OnInit {
       this.toastr.warning('قم بإختيار نوع العقد !');
     } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['organization_affiliated_with'] == '') {
       this.toastr.warning('الجهه التابع لها المتدرب !');
-    } else if(this.addRequestFrom.value['attachments'].length > 0){
-      for(let i = 0; i < this.addRequestFrom.value['attachments'].length; i++) {
-        if(this.addRequestFrom.value['attachments'][i].file_type != 'pdf' || this.addRequestFrom.value['attachments'][i].title == "") {
-          this.toastr.warning(  ' ان يكون صيغه الملف ' +  'PDF' + (i+1) );
-        }
-      }
-        delete this.addRequestFrom.value['department1'];
-        delete this.addRequestFrom.value['department2'];
-        delete this.addRequestFrom.value['department3'];
-        console.log('successsss edit ' , this.addRequestFrom.value);
-        // this.dashBoardSer.addItem(this.addRequestFrom.value,'request').subscribe(
-        //   (responce) => {
-        //     console.log(responce);
-        //     this.toastr.success('تم التعديل بنحاج');
-        //   },
-        //   (error) => {
-        //     console.log(error);
-        //     this.toastr.error('خطأ في التعديل !');
-        //   }
-        // );
     } else {
+      //store departments in object save
         delete this.addRequestFrom.value['department1'];
         delete this.addRequestFrom.value['department2'];
         delete this.addRequestFrom.value['department3'];
-        console.log('successsss edit ' , this.addRequestFrom.value);
-        // this.dashBoardSer.editItem(this.requestId, this.addRequestFrom.value,'request').subscribe(
-        //   (responce) => {
-        //     console.log(responce);
-        //     this.toastr.success('تم التعديل بنحاج');
-        //   },
-        //   (error) => {
-        //     console.log(error);
-        //     console.log(error.error['error']);
-        //     if(error.error['error'] == 'can not add new request untill old one done') {
-        //       this.toastr.warning('لا يمكن التعديل طلب جديد ، حتي يتم إجراءات علي الطلب السابق ، شكراً');
-        //     } else {
-        //       this.toastr.error('يوجد مشكله في السرفر ، سيتم معالجتها لاحقاً');
-        //     }
-        //   }
-        // );
+        //access edit object of edit attachements (delete the increase data if user not hcnage file )
+        for(let i = 0; i < editAttachements.length; i++) {
+          if(editAttachements[i].file_type == '') {
+            delete editAttachements[i].file;
+            delete editAttachements[i].file_type;
+          }
+        }
+
+          for(let i = 0; i < editAttachements.length; i++) {
+            delete editAttachements[i].nameFile;
+          }
+          this.addRequestFrom.value['editable_attachments'] = editAttachements;
+          for(let i = 0; i < editAttachements.length; i++) {
+            for(let j = 0; j < this.files.length; j++) {
+              if(editAttachements[i].id == this.files[j].id) {
+                this.files.splice(j , 1);
+              }
+            }
+          }
+          this.addRequestFrom.value['editable_attachments'] = editAttachements;
+          this.addRequestFrom.value['attachments'] = this.files;
+          this.addRequestFrom.value['attachments_ids'] = this.attachments_ids;
+          
+          console.log('attachements ids', this.attachments_ids);
+          console.log('fillllllllllllllllles ', this.files);
+          console.log('ediiiiiit fillllllles', editAttachements);
+          console.log('ediiiiiiiiiiiiiiiiiiiite filllles ', editAttachements);
+          console.log('form value ', this.addRequestFrom.value);
+          
+
+
+          this.dashBoardSer.editItem(this.requestId, this.addRequestFrom.value,'request').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم التعديل بنحاج');
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+              console.log(error.error['error']);
+              if(error.error['error'] == 'can not add new request untill old one done') {
+                this.toastr.warning('لا يمكن التعديل طلب جديد ، حتي يتم إجراءات علي الطلب السابق ، شكراً');
+                
+              } else {
+                this.toastr.error('يوجد مشكله في السرفر ، سيتم معالجتها لاحقاً');
+                this.location.back();
+              }
+            }
+          );
     }
    } else {
      
     this.addRequestFrom.value['user_id'] = this.visitorId;//add id of user in object
     //add mode
-    if(this.addRequestFrom.value['departments_ids'].length == 0 ) {
+    if(this.departmentsId.length == 0) {
       this.toastr.warning('من فضلك ، قم بإختيار قسم كحد أدني !');
     } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['registration_number'] == '') {
       this.toastr.warning('قم بإختيار رقم التسجيل !');
@@ -299,27 +389,9 @@ export class AddRequestComponent implements OnInit {
       this.toastr.warning('قم بإختيار نوع العقد !');
     } else if(this.addRequestFrom.value['type'] == 'fellowship' && this.addRequestFrom.value['organization_affiliated_with'] == '') {
       this.toastr.warning('الجهه التابع لها المتدرب !');
-    } else if(this.addRequestFrom.value['attachments'].length > 0){
-      for(let i = 0; i < this.addRequestFrom.value['attachments'].length; i++) {
-        if(this.addRequestFrom.value['attachments'][i].file_type != 'pdf' || this.addRequestFrom.value['attachments'][i].title == "") {
-          this.toastr.warning(  ' ان يكون صيغه الملف ' +  'PDF' + (i+1) );
-        }
-      }
-      delete this.addRequestFrom.value['department1'];
-        delete this.addRequestFrom.value['department2'];
-        delete this.addRequestFrom.value['department3'];
-        console.log('successsss save ' , this.addRequestFrom.value);
-        this.dashBoardSer.addItem(this.addRequestFrom.value,'request').subscribe(
-          (responce) => {
-            console.log(responce);
-            this.toastr.success('تم الإضافه بنحاج');
-          },
-          (error) => {
-            console.log(error);
-            this.toastr.error('خطأ في الإضافه !');
-          }
-        );
     } else {
+    
+      //store departments in object save
         delete this.addRequestFrom.value['department1'];
         delete this.addRequestFrom.value['department2'];
         delete this.addRequestFrom.value['department3'];
@@ -328,6 +400,8 @@ export class AddRequestComponent implements OnInit {
           (responce) => {
             console.log(responce);
             this.toastr.success('تم الإضافه بنحاج');
+            this.addRequestFrom.reset();
+            this.location.back();
           },
           (error) => {
             console.log(error);

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

@@ -35,7 +35,10 @@
                 <td>{{data.specialization_name}}</td>
                 <td> {{data.specific_specialization}}</td>
                 <td>{{data.university}}</td>
-                <td *ngIf=" data.status == 'pending' "><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+                <td>
+                  <button *ngIf=" data.status == 'pending' " type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button>
+                  <span *ngIf="data.status != 'pending'">غير مسموح</span>
+                </td>
               </tr>
             </tbody>
           </table>

src/styles.css

@@ -740,7 +740,10 @@ width: 100%;
   margin-top: 0 !important;
 }
 
-
+select.form-control:not([size]):not([multiple]) {
+  height: 35px;
+  padding: 0 5px;
+}