<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span>&nbsp;File Type Master
    <small> </small>
  </h4>
</section>

<section class="content">
  <div class="box padding-15 clearfix" style="display: block;">
      <div class="row">
        <div class="col-sm-9">
          <div class="row">       
              <div class="col-md-5" id="datatable_length">
                <button type="button" *ngIf="add==true" (click)="openFileTypeModal(filetypeTemplate,'add')" class="btn btn-outline-primary waves-effect waves-themed btn-sm"><span class="fal fa-plus"></span>&nbsp;Add New</button>
                &nbsp; &nbsp; <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
                  <i class="fal fa-chart-area"></i> Go back to dashboard</a>
              </div>  
              <div class="col-md-7">
                  <div class="row">
                      <div class="col-md-7">
                        <div class="input-group input-group-sm">
                            <input type="file" id="file-input" class="input-sm form-control" required accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                            <span class="input-group-append" ng-if="btncrl == '1'">
                                <button type="submit" aria-label="Left Align" value="Upload File" class="btn btn-primary waves-effect waves-themed btn-sm" (click)="uploadData($event);">
                                    <span class="fal fa-upload" aria-hidden="true"></span>&nbsp;Import Data
                                </button>
                            </span>
                        </div>
                      </div>
                      <div class="col-md-5">
                        <button type="button" *ngIf="filetypes && filetypes.length!=0"  (click)="exportToExcel();"  class="btn-primary btn btn-sm">
                          <span class="fal fa-file-excel"></span>&nbsp;Export to Excel</button>
                      </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="File Type Name" [(ngModel)]="searchText" aria-label="Search">
            <span class="input-group-append">
                <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
                  <span class="fal fa-search"></span>
                      </button>
      </span>
          </div>
          <!--<input id="txtPending" type="text" class="form-control table-search" [(ngModel)]="searchText" placeholder="Search" aria-label="Search">-->
        </div>
      </div>
      <div class="table-responsive">       
 <table class="table jambo_table table-striped table-condensed table-hover">
          <thead>
            <tr class="headings">
              <th style="width:60px">#</th>
              <th *ngIf="(edit==true || delete==true) && readOnly==true" style="width:110px;">
  
  
                <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
                <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;" (click)="getactiveinactive(false)" title="Show all"></span>
                <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;" (click)="getactiveinactive(true)" title="Show only active"></span>
  
  
              </th>
              <th class="pointer" (click)="sort('filetype')">
                File Type
                <i *ngIf="key =='filetype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
  
              </th>
              
              <th class="pointer" (click)="sort('icon')">
                Icon
                <i *ngIf="key =='icon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
  
              </th>
              <th class="pointer" (click)="sort('createdbyname')">
                Created By
                <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('createddate')">
                Created Date
                <i *ngIf="key =='createddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('updatedbyname')">
                Last Modified By
                <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('updateddate')">
                Last Modified Date
                <i *ngIf="key =='updateddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of filetypes| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
              <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
              <td *ngIf="(edit==true || delete==true)">
                <span class="fal fa-pencil blue" style="cursor:pointer;" (click)="openFileTypeModal(filetypeTemplate,'update',item)" title="Edit" *ngIf="edit==true "></span>&nbsp;&nbsp;
                <span *ngIf="item.active==1 && delete==true" class="img-active" style="cursor:pointer;" (click)="OpenConfirmTemplate(item)" title="Active"></span>
                <span *ngIf="item.active==0 && delete==true" class="img-inactive" style="cursor:pointer;" (click)="OpenConfirmTemplate(item)" title="Inactive"></span>
              </td>
  
              <td>{{item.filetype}}</td>
              <td>{{item.icon}}</td>
              <td>{{item.createdbyname}}</td>
            <td>{{item.createddate | date:'MM-dd-yyyy'}}</td>
            <td>{{item.updatedbyname}}</td>
            <td>{{item.updateddate | date:'MM-dd-yyyy'}}</td>
              <!--<td><span *ngIf="item.active==1" style="color:green">Active</span><span style="color:red" *ngIf="item.active==0">Inactive</span></td>-->
             
            </tr>
            <tr *ngIf="filetypes.length==0 || (filetypes |filter:searchText).length === 0"><td colspan="8" style="text-align:center;">No Records Found</td></tr>
  
          </tbody>
        </table>
         </div>
        <div *ngIf="filetypes && filetypes.length!=0" class="pull-right">
          <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
     
   </div>
     </section>
     
  
        <ng-template #filetypeTemplate>
          <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
            <div class="modal-header" style="cursor:move" #dragHandle>
              <h4 class="modal-title pull-left" *ngIf="operation=='add'"><span class="fal fa-plus"></span>&nbsp;Add New File Mode</h4>
              <h4 class="modal-title pull-left" *ngIf="operation=='update'"><span class="fal fa-edit"></span>&nbsp;Edit File Mode</h4>
              <button type="button" class="close pull-right" aria-label="Close" (click)="filetypeModalRef.hide()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
  
              <form [formGroup]="filetypeForm" (ngSubmit)="Post(filetypeForm.value)">
                <input type="hidden" name="filetypeid" formControlName="filetypeid" />
                <table class="table">
                  <tr>
                    <td>
                      <div class="form-group">
                        <label>File Type</label><span style="color:red;">*</span><input type="text" trim placeholder="File Type Name" name="filetype" formControlName="filetype" class="form-control" />
                        <div *ngIf="submitted && g.filetype.errors" class="invalid-feedback">
                          <div *ngIf="g.filetype.errors.required" class="errormsg">Filetype is required</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="form-group">
                        <label>Icon</label> <input type="text" trim placeholder="File Type Name" name="icon" formControlName="icon" class="form-control" />
                      </div>
                    </td>
                  </tr>

                  <tr *ngIf="operation=='update'">
                    <td colspan="2">
                      <div class="form-group">
                        <input type="checkbox" (change)="ChangeActive($event)" name="active" formControlName="active" /><label>Active</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="form-group">
                        <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right" (click)="clearForm();">Cancel</button>
                        <button type="submit" *ngIf="(edit==true || add==true) " 
                        class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" [disabled]="filetypeForm.invalid">
                          <span *ngIf="operation=='add' && add==true">Add</span>
                          <span *ngIf="operation!='add' && edit==true">Update</span>
                        </button>
                      </div>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
        </ng-template>
     
  
   
