kfmc_website/src/app/dashboard/view_my_female_requests/view-my-female-requests-add/view-my-female-requests-add.component.html

<div class="addDepartment-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 activeLi-w" style="margin-right:5px; cursor: pointer;" (click)="authSer.backFromEdit()">{{page__title}}</li>
              <li class="headingText-w activeLi-w" style="margin-right:5px">{{typePage}}</li>
            </ul>
          </div>
        </div>
  
      <div class="containerContent-w">
        <h2 class="title"  style="margin: auto ;text-align:  center" [ngClass]="{'green': statusAccept, 'red' : statusrefu}">{{ comfoe }}</h2>
          <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
              <div class="row">
                  <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]="userData.identity_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]="userData.name" [disabled]="true" />
                              </div>
                              </div>
                              <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="functional_number" [ngModel]="userData.functional_number" [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" placeholNeedder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="userData.phone" [disabled]="true" />
                                </div>  
                              </div>
                              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <label for="email"  style="float: right;margin-right: 5px">البريد الالكتروني</label>
                                    <input type="email" placeholder="" class="form-control" name="email" [ngModel]="userData.email" [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" >
                          <div class="form-group">
                           <label style="float: right; margin-right: 5px"> نوع الطلب <span class="spanReqired-w">*</span> </label>
                            <select class="form-control" name="type_id" [(ngModel)]="formData.type_id " (input)="onRequestType($event.target.value)"  [disabled]="isAdmin" required>
                             <option *ngFor="let type of types" [value]="type.id" >{{type.name}}</option>
                           </select>
                      </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4">
                      <div class="form-group">
                       <label style="float: right; margin-right: 5px"> سبب الطلب </label>
                       <input type="text" class="form-control" id="request_reason" name="request_reason" placeholder=" " ngModel [(ngModel)]="formData.request_reason"  [disabled]="isAdmin || tookDes" />
                      </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
                        <div class="form-group">
                          <label style="float: right; margin-right: 5px">  تاريخ المغادرة <span class="spanReqired-w">*</span></label>
                          <input type="date" class="form-control" id="leaving_date" name="leaving_date" placeholder="  " ngModel [(ngModel)]="formData.leaving_date"  [disabled]="isAdmin || tookDes" required/>
                       </div>
                    </div>   
                    <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
                        <div class="form-group">
                          <label style="float: right; margin-right: 5px">  وقت المغادرة <span class="spanReqired-w">*</span></label>
                          <input type="time" class="form-control" id="leaving_time" name="leaving_time" placeholder="  " ngModel [(ngModel)]="formData.leaving_time" [disabled]="isAdmin || tookDes" required/>
                       </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
                        <div class="form-group">
                          <label style="float: right; margin-right: 5px">  تاريخ العوده <span class="spanReqired-w">*</span></label>
                          <input type="date" class="form-control" id="return_date" name="return_date" placeholder="  " ngModel [(ngModel)]="formData.return_date"  [disabled]="isAdmin || tookDes" required/>
                       </div>
                    </div>  
                        <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
                           <div class="form-group">
                            <label style="float: right; margin-right: 5px">  وقت العوده <span class="spanReqired-w">*</span></label>
                            <input type="time" class="form-control" id="return_time" name="return_time" placeholder="  " ngModel [(ngModel)]="formData.return_time" [disabled]="isAdmin || tookDes" required/>
                          </div>
                        </div>
                     </div>
                    </div> 
                  </div>
                </div>   
                <div class="col-12" *ngIf="!addNew">
                    <h2 class="title">تفاصيل السكن</h2>
                    <div class="row">
                      <div class="col-12">
                        <div class="wrapper">
                            <div class="col-12 col-sm-12 col-md-4" >
                                <div class="form-group">
                                  <label style="float: right; margin-right: 5px"> اسم المجمع </label>
                                  <select class="form-control" name="housing_complex_id" [(ngModel)]="unitInformation.housing_complex_id"  (input)="getBuildingType($event.target.value)" [disabled]="true" required>
                                    <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
                                  </select>
                                </div>
                             </div>
                             <div class="col-12 col-sm-12 col-md-4" *ngIf="isComplex ">
                                <div class="form-group">
                                  <label style="float: right; margin-right: 5px">نوع المبنى</label>
                                  <select class="form-control" name="building_type_id" [(ngModel)]="unitInformation.building_type_id" (input)="getBuilding($event.target.value)" [disabled]="true" required>
                                    <option *ngFor="let type of building_types" [value]="type.id" >{{type.name}}</option>
                                  </select>
                                </div>
                              </div>
                              <div class="col-12 col-sm-12 col-md-4" *ngIf="isBuildingType">
                                  <div class="form-group">
                                      <label style="float: right; margin-right: 5px">اسم المبنى </label>
                                      <select class="form-control" id="building_id" name="building_id" [(ngModel)]="unitInformation.building_id " (input)="getUnit($event.target.value)" [disabled]="true" required>
                                        <option *ngFor="let building of buildings" [value]="building.id" >{{building.building_name}}</option>
                                      </select>
                                  </div>
                              </div>
                              <div class="col-12 col-sm-12 col-md-4"  *ngIf="isBuilding">
                                   <div class="form-group">
                                       <label style="float: right; margin-right: 5px">رقم الوحدة </label>
                                       <select class="form-control" name="unit_id" [(ngModel)]="unitInformation.unit_id" [disabled]="true"  required>
                                         <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
                                      </select>
                                   </div>
                              </div>
                        </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-12" *ngIf="needFiles">
                        <h2 class="title">المرفقات</h2>
                        <div class="row">
                          <div class="col-12">
                          <div class="wrapper"> 
                          <div class="col-12" *ngIf="!isAdmin || !tookDes">
                            <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 *ngIf="!isAdmin || tookDes">رفع الملف ( بصيغه pdf )</th>
                                  <th *ngIf="isAdmin || tookDes">عرض الملف</th>
                                  <th *ngIf="!isAdmin || !tookDes">حذف</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}" [disabled]="" required/></td>
                                    <td style="position: relative;" *ngIf="!isAdmin || tookDes">
                                        <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" required/>
                                        <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 *ngIf="isAdmin || tookDes"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></td>
                                      <td *ngIf="!isAdmin || !tookDes"><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
                                    </tr>
                                  </tbody>
                                </table>
                            </div>
                          </div>
                        </div>       
                  </div>
              </div>
              <div class="row" *ngIf="isAdmin">
                <div class="col-12 ">
                    <div class="wrapper btns-des">
                  <div class="col-3 col-md-2">
                    <button type="button" class="btn btn-success" [disabled]="acceptCheak" (click)="accept()">قبول</button>
                  </div>
                  <div class="col-3 col-md-2">
                    <button type="button" class="btn btn-danger" [disabled]="refusedCheak" (click)="refuse()">رفض</button>
                  </div>
                  </div>
                </div>  
              </div>
              <div class="col-12" *ngIf="refusedCheak">
                <h2 class="title" > سبب الرفض</h2>
                <div class="row">
                  <div class="col-12">
                    <div class="wrapper">
                      <textarea name="status_description" id="status_description"  [(ngModel)]="adminForm.status_description" maxlength="250"  cols="110" rows="5"[disabled]="tookDes" ></textarea>
                      </div>
                    </div>
                  </div>
                </div>    
            <div class=" row col-6">
                <button type="submit" class="btn btn-success rightW"  *ngIf="!tookDes || isAdmin" [disabled]="!f.valid || disable">حفظ</button>
                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">{{tookDes == true ? 'رجوع' :  'الغاء'}}</button>
            </div>
          </form>
      </div>
    </div>
  </div>