kfmc_website/src/app/dashboard/report-communication/report-communications/report-communications.component.html

<div class="addHospital-w">
  <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" style="cursor:pointer">تقرير الإتصال</li>
        </ul>
      </div>
    </div>

    <div class="containerContent-w">
      <div class="row">
        <div class="col-12 col-md-4">
          <div class="form-group">
            <input type="number" placeholder="رقم البلاغ" class="form-control numberReport-s" [(ngModel)]="searchValue"/>
            <button class="btn btn-success buttonS" (click)="onSearch()">أبحث</button>
          </div>
        </div>
      
      </div>

      <form (ngSubmit)="onSubmittedForm()" #f="ngForm"  *ngIf="showTable">
        <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>
            </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 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 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">
                    <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)]="formData.status" [value]="formData.status">
                    <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="formData.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)]="formData.closed_status_reason"> </textarea>
                    </div>
                  </div>
              </div>
            </div>
        
          </div> -->

          <!-- <div class="col-12">
            <h2 class="title"> ملاحظات القسم</h2>
            <div class="row">
              <div class="wrapper" style="padding: 10px 20px;">
                <div class="col-12 col-md-12" style="margin: 20px 0;">
                  <div class="form-group">
                    <label for="department_notes" style="float:right; margin-right: 5px;"> </label>
                    <textarea cols="3" class="form-control" name="department_notes" id="department_notes" [(ngModel)]="formData.department_notes"> </textarea>
                  </div>
                </div>
              </div>
            </div>
        
          </div> -->

          <div class="col-12">
            <h2 class="title">الإدارات الموجه لها البلاغ</h2>
            <div class="row">
              <div class="wrapper">
                <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 maintData['adminstrations']; 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>
                      <th style="text-align:center">
                        <div class="dropdown">
                          <button class="btn btn-secondary dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            عرض
                          </button>
                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="text-align:right;"> 
                            <a class="dropdown-item" *ngFor="let department of selectAdmin['departments']"> {{ department.name ? department.name : 'لا يوجد'}} </a>
                          </div>
                        </div>
                      </th>
                      <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
                    </tr>
                </tbody>
              </table>
              
              </div>
            </div>            
          </div>

          <!-- <div class="col-12">
            <h2 class="title">الأقسام الموجه لها البلاغ</h2>
            <div class="row">
              <div class="wrapper">
            

                <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">
                          <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 departments; 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();" [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>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let selectAdmin of selectedDepartments; 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: 12px;">{{selectAdmin.countdown}}</td>
                    </tr>
                </tbody>
              </table>
              
              </div>
            </div>            
          </div> -->

          <div class="col-12">
            <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
          </div>
          
        </div>
      </form>
          
      </div>
    </div>

</div>