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

  <div class="box padding-15" style="display: block;">
  <div class="row">
    <div class="col-lg-5 col-md-6 col-sm-12 templist">
      <div class="row">
        <div class="col-md-7">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Role 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>
        </div>
        <div class="col-md-5">
            &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>
       

      <div class="table-responsive">
        <table class="table jambo_table table-striped table-condensed table-hover">
          <thead class="headings">
            <tr>
              <th style="width:60px"><b>#</b></th>
              <th style="width:100px;">
                <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('Role Name')">
                Role Name
                <i *ngIf="key =='Role Name'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('Description')">
                Description
                <i *ngIf="key =='Description'" 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('createdon')">
                Created Date
                <i *ngIf="key =='createdon'" 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('updatedon')">
                Last Modified Date
                <i *ngIf="key =='updatedon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr  [class.highlighted]="item.rolename===currentRole" *ngFor="let item of _roleList | orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
              <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
              <td>
                <span class="fal fa-pencil pointer blue"  (click)="editRole(item.roleid,item.rolename,'update');" title="Edit">
                </span>&nbsp;&nbsp;
                <span class="img-active"  (click)="statusChange(item.roleid,'deactivate');" *ngIf="item.active==1" title="Active">
                </span>
                <span class="img-inactive" (click)="statusChange(item.roleid,'activate');" *ngIf="item.active!=1" title="Inactive">
                </span>

              </td>
              <td>{{item.rolename}}</td>
              <td>{{item.description}}</td>
              <td>{{item.createdbyname}}</td>
              <td>{{item.createdon | date:'MM-dd-yyyy'}}</td>
              <td>{{item.updatedbyname}}</td>
              <td>{{item.updatedon | date:'MM-dd-yyyy'}}</td>
            </tr>
            <tr *ngIf=" _roleList.length==0 || (_roleList |filter:searchText).length === 0"><td colspan="4" style="text-align:center;">No Records Found</td></tr>
          </tbody>
        </table>
        <div *ngIf="_roleList && _roleList.length!=0" class="pull-right">
          <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
      </div>
    </div>
    <div class="col-lg-7 col-md-6 col-sm-12">
  
        <form [formGroup]="roleForm" (ngSubmit)="postRole(roleForm.value)">
          <div class="row-padding-bottom">
            <input type="hidden" name="rowroleId" formControlName="roleid" />
            <div class="form-group row">
              <div class="col-md-3 text-right">
                <label class="labelfont" for="roleid">Role<span style="color:red;">*</span></label>
              </div>
              <div class="col-md-9">
                <input type="text" trim placeholder="Enter the Role Name..." name="rolename" formControlName="rolename" class="form-control" #txtRoleName />
                <div *ngIf="submitted && formdata.rolename.errors" class="invalid-feedback">
                  <div *ngIf="formdata.rolename.errors.required" class="errormsg">Role Name is required</div>
                </div>
              </div>
            </div>
          </div>
          <div class="row-padding-bottom">
            <div class="form-group row ">
              <div class="col-md-3 text-right">
                <label class="labelfont" for="description">Description<span style="color:red;">*</span></label>
              </div>
              <div class="col-md-9">
                <input type="text" placeholder="Enter the Role Description.." class="form-control" name="description" formControlName="description" />
                <div *ngIf="submitted && formdata.description.errors" class="invalid-feedback">
                  <div *ngIf="formdata.description.errors.required" class="errormsg">Role description is required</div>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix">          
              <app-menurights (click)="chkArrayTouched();"></app-menurights>          
          </div>
          <div class="row-padding-bottom" style="margin-top:10px;">
              <div class="col-md-12">
                <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right"  (click)="clearForm();">Cancel</button>
                <button type="submit" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"  style="margin-right: 10px;">
                  <span *ngIf="_action=='add'">Add Role</span>
                  <span *ngIf="_action!='add'">Update</span>
                </button>
              </div>            
        </div>
        </form>
  
    </div>
  </div>
</div>
<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>
</section>