kfmc_website/src/app/dashboard/create-report/add-new-report/add-new-report.component.html

<div class="addRequest-w">
  <div class="container">

    <div class="row" style="margin-bottom:8px;">
      <div class="col-12">
        <ul class="list-unstyled titileLi-w">
          <li class="headingText-w" style="cursor: pointer;" (click)="authService.perviousLocation()">خدمه التدريب</li>
          <li class="headingText-w activeLi-w" style="margin-right:5px">إضافه بلاغ</li>
        </ul>
      </div>
    </div>

    <div class="contentBorder-w">

      <form (ngSubmit)="onSubmitted()" #f="ngForm">

        <div class="row">
          
          <div class="col-12 col-md-6" *ngIf="departmentUserLoginId == 6">
            <div class="form-group">
              <input type="checkbox" class="form-check-input checkReport" name="report" id="report" [(ngModel)]="reportVal" value="report">
              <label class="form-check-label" for="report" style="margin: 0 20px; float: right;">إنشاء بلاغ ع الغير</label>
            </div>
          </div>


          <div class="col-12" *ngIf="reportVal">
            <h2 class="title">بيانات صاحب البلاغ</h2>
            <div class="row">
              <div class="col-12">
                <div class="wrapper">
                  <div class="col-12">
                    <input type="text" class="form-control searchEmp" placeholder="البحث ( برقم الهويه / الرقم الوظيفي )" style="width:85%; float:right" appOnlyNumber [(ngModel)]="search" [ngModelOptions]="{standalone: true}"/>
                    <button class="btn btn-success" type="button" style="float:right; margin:0 2px;" (click)="getValue()">أبحث</button>
                  </div>

                  <div class="col-12 col-md-4" style="margin: 20px 0">
                    <div class="form-group">
                      <label for="name" style="float:right">الإسم<span class="spanReqired-w">*</span></label>
                      <input type="text" class="form-control" id="name" [ngModel]="reportAuthor.name" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                  <div class="col-12 col-md-4" style="margin: 20px 0">
                    <div class="form-group">
                      <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
                      <input type="phone" class="form-control" id="identityNumber" [ngModel]="reportAuthor.identity_number" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                  <div class="col-12 col-md-4" style="margin: 20px 0">
                    <div class="form-group">
                      <label for="functionalNumber" style="float:right">رقم الوظيفي <span class="spanReqired-w">*</span></label>
                      <input type="phone" class="form-control" id="functionalNumber" [ngModel]="reportAuthor.functional_number" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                  <div class="col-12 col-md-4">
                    <div class="form-group">
                      <label for="phone" style="float:right">الهاتف<span class="spanReqired-w">*</span></label>
                      <input type="phone" class="form-control" id="phone" [ngModel]="reportAuthor.phone" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12">
            <h2 class="title">بيانات مقدم البلاغ</h2>
            <div class="row">
              <div class="col-12">
                  <div class="wrapper">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label  style="float: right;margin-right: 5px">رقم الهوية</label>
                        <input type="text" placeholder="رقم الهوية" class="form-control" name="id_number" [ngModel]="dataForm.id_number" [disabled]="true" />
                      </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label for="name"  style="float: right;margin-right: 5px">الاسم</label>
                        <input type="text" placeholder="الاسم" class="form-control" name="name" [ngModel]="dataForm.name" [disabled]="true" />
                      </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label for="phoneNum"  style="float: right;margin-right: 5px"> الهاتف </label>
                        <input type="number" placeholder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="dataForm.phoneNum" [disabled]="true" required/>
                      </div>  
                  </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                          <label for="startDate" style="float:right" >التاريخ</label>
                          <div>
                            <app-higri-date  class="disabledDiv" (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart" [higriDisabled]="disabledVal"></app-higri-date>
                          </div>
                      </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="form-group">
                          <label for="created_time"  style="float: right;margin-right: 5px">الوقت</label>
                          <input type="text" placeholder="الوقت" class="form-control" name="created_time" [ngModel]="dataForm.created_time" [disabled]="true" />
                        </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>

          <div class="col-12" *ngIf="reportVal">
            <h2 class="title">بيانات صاحب البلاغ</h2>
            <div class="row">
              <div class="col-12">
                <div class="wrapper">
                  <div class="col-12">
                    <input type="text" class="form-control searchEmp" placeholder="البحث ( برقم الهويه / الرقم الوظيفي )" style="width:85%; float:right" appOnlyNumber [(ngModel)]="search" [ngModelOptions]="{standalone: true}"/>
                    <button class="btn btn-success" type="button" style="float:right; margin:0 2px;" (click)="getValue()">أبحث</button>
                  </div>

                  <div class="col-12 col-md-4" style="margin: 20px 0">
                    <div class="form-group">
                      <label for="name" style="float:right">الإسم<span class="spanReqired-w">*</span></label>
                      <input type="text" class="form-control" id="name" [ngModel]="reportAuthor.name" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                  <div class="col-12 col-md-4" style="margin: 20px 0">
                    <div class="form-group">
                      <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
                      <input type="phone" class="form-control" id="identityNumber" [ngModel]="reportAuthor.identity_number" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                  <div class="col-12 col-md-4" style="margin: 20px 0">
                    <div class="form-group">
                      <label for="functionalNumber" style="float:right">رقم الوظيفي <span class="spanReqired-w">*</span></label>
                      <input type="phone" class="form-control" id="functionalNumber" [ngModel]="reportAuthor.functional_number" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                  <div class="col-12 col-md-4">
                    <div class="form-group">
                      <label for="phone" style="float:right">الهاتف<span class="spanReqired-w">*</span></label>
                      <input type="phone" class="form-control" id="phone" [ngModel]="reportAuthor.phone" [ngModelOptions]="{standalone: true}" [disabled]="true"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12">
              <h2 class="title">بيانات البلاغ</h2>
              <div class="row">
                  <div class="col-12">
                    <div class="wrapper">
                      <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                          <div class="form-group">
                            <label for="subject"  style="float: right;margin-right: 5px"> موضوع البلاغ </label>
                            <input type="text" placeholder=" موضوع البلاغ " class="form-control" name="subject" [(ngModel)]="dataForm.subject" required/>
                          </div>    
                      </div>
                      <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="form-group">
                          <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
                          <select name="main_location_id" [(ngModel)]="dataForm.main_location_id" class="form-control"  (change)="onChangemainLocation($event)" required >
                            <option *ngFor="let location of locationList" [value]="location.id" required> {{location.name}} </option>    
                          </select>                  
                        </div>     
                     </div>
                     <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.main_location_id != ''">
                      <div class="form-group">
                        <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
                        <select name="sub_location_id" [(ngModel)]="dataForm.sub_location_id" class="form-control" (change)="changeSubLocation($event)" required >
                          <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
                        </select>
                      </div>
                     </div>
                     <div class="col-12">
                        <div class="form-group">
                          <label for="message"  style="float: right;margin-right: 5px"> نص البلاغ </label>
                          <textarea rows="4" cols="50" class="form-control" name="message" [(ngModel)]="dataForm.message" required></textarea>
                        </div>  
                    </div>
                    </div>
                  </div>
                </div>
          </div>

          <div class="col-12">
            <h2 class="title">المرفقات</h2>
            <div class="row">
                <div class="col-12">
                  <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> -->
                          <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" *ngIf="file.nameFile" style="color:green"> <i class='fas fa-check'style=" float: left; padding-top: 4px; "></i>
                            </span>
                          </td>
                          <!-- <td><a href="{{authSer.pathImg + file.nameFile}}" target="_blank"><i class="fas fa-download"></i></a></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>

          <div class="col-12">
            <div class="row">
              <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>
          </div>

        </div>

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