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

<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" *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" >
                  <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>

                  
                

                <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
                  <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>
                      </select>
                    </div>
                  </div>
                  <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>
                      </select>
                    </div>
                  </div>
                  <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>
                      </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-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>
                      <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)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
            </div>

          </div>
        </form>
      </div>
  
  
    </div>
  </div>