kfmc_website/src/app/dashboard/follow-communications/follow-communications-add/follow-communications-add.component.html

<div class="addHospital-w">
  <div class="container">
    
    <!-- <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  <countdown #countdown [config]="{leftTime: 180}">$!m!:$!s!</countdown></h3> -->
    <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  {{counter$ | async }} ثانيه</h3>

    <div class="row">
      <div class="col-12">
        <ul class="list-unstyled titileLi-w">
          <li class="headingText-w">خدمه البلاغات  </li>
          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> عرض التفاصيل</li>
        </ul>
      </div>
    </div>

    <div class="containerContent-w">
        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
          <div class="row">
            <div class="col-12">
              <h2 class="title">بيانات منشئ البلاغ</h2>
              <div class="row">
                <div class="wrapper">
                  
                  <div class="col-12 col-md-4">
                    <div class="form-group">
                      <label for="name" style="float:right">رقم البلاغ</label>
                      <input id="name" type="text" class="form-control" placeholder="رقم البلاغ" ngModel name="commmun_number"  [(ngModel)]="maintData.id" [disabled]="disabledInput" />
                    </div>
                  </div>

                  <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.comm_creator_name" [disabled]="disabledInput" />
                    </div>
                  </div>

                  <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="comm_adminstration_creator_name"  [(ngModel)]="userData.comm_adminstration_creator_name" [disabled]="disabledInput" />
                    </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>
                    <input type="phone" placeholder="رقم الجوال" class="form-control" ngModel name="phone" [(ngModel)]="userData.comm_creator_phone" [disabled]="disabledInput" />
                    </div>
                  </div>
      
                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                    <div class="form-group">
                      <label for="endDate" style="float:right" >التاريخ<span class="spanReqired-w">*</span></label>
                      <div *ngIf='bindingDateSplitEnd'>
                        <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd" [higriDisabled]="disabledVal"> </app-end-higri-date>
                      </div>
                    </div>
                  </div>

                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                    <div class="form-group">
                      <label for="time" style="float:right"> الوقت<span class="spanReqired-w">*</span></label>
                      <input type="time" id="time" placeholder="الوقت" class="form-control" ngModel name="time" [(ngModel)]="maintData.created_time" [disabled]="disabledInput" /> 
                    </div>
                  </div>
                </div>
              </div>
            </div>

           <div class="col-12">
              <h2 class="title">بيانات البلاغ</h2>
              <div class="row">
                <div class="wrapper">
                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                    <div class="form-group">
                      <label for="subject"  style="float: right; margin-right:5px;margin-top:10px">موضوع البلاغ</label>
                      <input type="text" id="subject" class="form-control" placeholder="موضوع البلاغ" name="subject" ngModel [(ngModel)]="maintData.subject" [disabled]="disabledInput" />
                    </div>
                  </div>

                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                    <div class="form-group">
                      <label for="message"  style="float: right; margin-right:5px;margin-top:10px">نص البلاغ</label>
                      <input type="text" id="message" class="form-control" placeholder="نص البلاغ" name="message" ngModel [(ngModel)]="maintData.message" [disabled]="disabledInput" />
                    </div>
                  </div>

                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin-top: 10px;">
                      <div class="form-group">
                        <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
                        <select name="main_location_id" class="form-control" [ngModel]="mainLocationVal" (change)="onChangemainLocation($event)" [disabled]="disabledInput" >
                          <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">
                      <div class="form-group">
                        <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
                        <select name="sub_location_id" class="form-control" [ngModel]="subLocationVal" (change)="changeSubLocation($event)" [disabled]="disabledInput">
                          <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
                        </select>
                      </div>
                   </div>

                   <div class="col-12">
                      <h2 class="title">المرفقات</h2>
                      <div class="row">
                        <div class="wrapper">
                          <h3 *ngIf="!showAttachements" style="font-size: 18px;">لا توجد مرفقات لعرضها </h3>

                          <table class="table table-bordered" *ngIf="showAttachements">
                            <thead class="headBackground-w">
                              <tr>
                                <th> إسم المرفق</th>
                                <th>عرض الملف</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr style="text-align:center;" *ngFor="let file of maintData['files']; let i = index">
                                <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput" /></td>
                                <th style="text-align:center"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></th>
                              </tr>
                            </tbody>
                          </table>
          
                        </div>
                      </div>
                  
                    </div>

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

          <div class="col-12">
              <h2 class="title">عمليات البلاغ</h2>
              <div class="row">
                <div class="wrapper">
                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                    <div class="form-group">
                      <label style="float:right" for="parent_category_id">التصنيف الرئيسي</label>
                      <select class="form-control" id="parent_category_id" style="padding:0 5px" ngModel name="parent_category_id" (input)="changeParentCategory($event)" [(ngModel)]="communicationData.parent_category_id" [disabled]="disabledInput">
                        <option *ngFor="let categorie of parentCategoriesList; let i = index" [value]="categorie.id">{{categorie.name}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="checkStatusClosed">
                    <div class="form-group">
                      <label style="float:right" for="reopen_reason">سبب إعاده فتح البلاغ</label>
                      <select class="form-control" id="reopen_reason" style="padding:0 5px" ngModel name="reopen_reason" (input)="getReopenReason($event)" [(ngModel)]="reOpenReasonObject.reopen_closed_communication">
                        <option value="ظهور المشكلة مجددا">ظهور المشكلة مجددا</option>
                        <option value="عدم حل المشكلة من البداية">عدم حل المشكلة من البداية</option>
                        <option value="إغلاق البلاغ دون موافقتنا">إغلاق البلاغ دون موافقتنا</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12 col-md-4">
                    <div class="form-group">
                      <label style="float:right" for="child_category_id">التصنيف الفرعي</label>
                      <select class="form-control" id="child_category_id" style="padding:0 5px" ngModel name="child_category_id" [(ngModel)]="communicationData.child_category_id" [disabled]="disabledInput">
                        <option *ngFor="let childCategorie of childsCategoriesList; let i = index" [value]="childCategorie.id">{{childCategorie.name}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12 col-md-4">
                    <div class="form-group">
                      <label style="float:right" for="time_period_id">الفئه - الوقت</label>
                      <select class="form-control" id="time_period_id" style="padding:0 5px" ngModel name="time_period_id" [(ngModel)]="communicationData.time_period_id" [disabled]="disabledInput">
                        <option *ngFor="let timePeriod of times; let i = index" [value]="timePeriod.id">{{timePeriod.name}}</option>
                      </select>
                    </div>
                  </div>
                  
                  <div class="col-12 col-md-12">
                    <div class="form-group">
                      <label for="maintenance_notes" style="float:right">ملاحظات إداره الصيانه</label>
                      <textarea cols="3" class="form-control" name="maintenance_notes" id="maintenance_notes" [(ngModel)]="communicationData.maintenance_notes" [disabled]="disabledInput"> </textarea>
                    </div>
                  </div>

               

                  <div class="col-12 col-md-4">
                    <div style="float:right">
                      <input type="checkbox" class="form-check-input" name="urgent_communication" id="urgent_communication" [(ngModel)]="communicationData.urgent_communication" [value]="communicationData.urgent_communication" [disabled]="disabledInput">
                      <label class="form-check-label" for="urgent_communication" style="margin: 0 20px;">بلاغ عاجل</label>
                    </div>
                  </div>

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

          <div class="col-12">
              <h2 class="title">إغلاف البلاغ</h2>
              <div class="row">
                <div class="wrapper" style="padding: 10px 20px;">
                    <div style="float:right">
                      <input type="checkbox" class="form-check-input" name="status" id="status" [(ngModel)]="communicationData.status" [value]="communicationData.status" [disabled]="disabledInput">
                      <label class="form-check-label" for="status" style="margin: 0 20px;">إغلاق البلاغ</label>
                    </div>
                    <div class="col-12 col-md-12" style="margin: 20px 0;" *ngIf="communicationData.status">
                      <div class="form-group">
                        <label for="closed_status_reason" style="float:right; margin-right: 5px;"> سبب إغلاق البلاغ</label>
                        <textarea cols="3" class="form-control" name="closed_status_reason" id="closed_status_reason" [(ngModel)]="communicationData.closed_status_reason" [disabled]="disabledInput"> </textarea>
                      </div>
                    </div>
                </div>
              </div>
          
            </div>

            <div class="col-12">
              <h2 class="title">الإدارات الموجه لها البلاغ</h2>
              <div class="row">
                <div class="wrapper">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="float: right; margin: 20px 0;" [disabled]="disabledInput">
                      الإدارات الموجه لها البلاغ
                  </button>

                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">الإدارات</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <div class="form-group">
                            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:0;" (input)="filtterFunc($event)"/>
                            <hr>
                          </div>
                          <table class="table table-bordered" *ngIf="this.count != 0">
                            <thead class="headBackground-w">
                              <tr>
                                  <th style="text-align:right">
                                  <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
                                  </div>
                                </th>
                                <th style="text-align:right">الإسم</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr *ngFor="let data of adminstrations ">
                                <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();" [ngModelOptions]="{standalone: true}">
                                    <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a"></label>
                                  </div>
                                </td>
                                <td>{{data.name}}</td>
                              </tr>
                          </tbody>
                        </table>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin: 0 10px;">إغلاق</button>
                          <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getDepartments()">حفظ</button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <table class="table table-bordered">
                    <thead class="headBackground-w">
                      <tr>
                        <th>الجهه المستلمه للبلاغ</th>
                        <th>وقت التحويل</th>
                        <th>ملاحظات</th>
                        <th>حاله البلاغ</th>
                        <th>مده التأخير</th>
                        <!-- <th>حذف</th> -->
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let selectAdmin of selectedAdminstrations; let i = index">
                        <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
                        <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
                        <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
                        <td>
                          {{ 
                            selectAdmin.adminstration_status == 'new' ? 'جديد' 
                            : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
                            : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
                            : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
                        </td>
                        <td style="font-size: 14px;">{{selectAdmin.countdown}}</td>
                        <!-- <td><button type="button" class="btn btn-danger" (click)="removeSelectedAdminsration(selectAdmin)">حذف</button></td> -->
                      </tr>
                  </tbody>
                </table>
                
                </div>
              </div>            
            </div>

            <div class="col-12">
              <button type="button" class="btn btn-primary rightW" *ngIf="checkStatusClosed" (click)="reOpenMaintenance()">إعاده فتح البلاغ</button>
              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
            </div>
          </div>
        </form>
      </div>
  </div>
</div>