usergroup.component.html 9.49 KB
<!-- main-heading -->
<div class="row" style="margin-right: auto;">

  <div class="col-sm-12 pageHeading" style="margin-left: 15px;">
    <h4> {{modalTitle}}</h4>
  </div>

  <ng-template #template>
    <div class="modal-header" style="z-index:1100">
      <h4 class="modal-title pull-left"><b>Delete</b> </h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Do you want to delete the selected user group?</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary btn-sm" (click)="DeleteLicenseUserGroup(templatesuccess)">Yes</button>
      <button type="button" class="btn btn-primary btn-sm" (click)="modalRef.hide()">No</button>
    </div>
  </ng-template>

  <ng-template #templatesuccess>
    <div class="modal-header">
      <h4 class="modal-title pull-left">Confirmation</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body" [innerHTML]="modalAlerts">
    </div>
    <div class="modal-footer">
    </div>
  </ng-template>

  <div class="col-sm-12">

    <div class="container-fluid main-full">
      <div class="row" [style.visibility]="(mode == 'Search') ? 'visible' : 'hidden'" style="margin-right:-40px">
        <div class="well no-margin-btm">
          <div class="row">
            <div class="form-group" *ngIf="alerts != ''">
              <div class="col-xs-12">
                <div class="alert alert-danger" [innerHTML]="alerts">
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-4">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="AccountNumber" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Account Number :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <select id='accountSelect'>
                          <option *ngFor="let item of lstAccountNumbers" [value]="item.m_Item1">{{item.m_Item2}}</option>
                        </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-4 padd-right0">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="New Group" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">New Group :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0">
                    <input type="text" #title class="form-control input-sm" id="new-group" maxlength="100" value="{{userGroupName}}">
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-sm-4">
              <div class="row">
                <div class="col-sm-2 padd-left0">
                  <div class="form-group marginTop5">
                    <label for="New Group" class="col-sm-12 col-md-1 paddTop7 padd-left0 padd-right0 hidden-xs">&nbsp;</label>
                  </div>
                  <div class="col-sm-12 col-lg-2 padd-left0 padd-right0 mar-left6 mobile_1">
                    <button class="btn btn-primary btn-sm" type="button" (click)="InsertLicenseUserGroup(title.value, templatesuccess)"
                            [disabled]="license.LicenseId==0">
                      <i class="fa fa-plus-circle"></i> Add
                    </button>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>

        <div class="well">
          <div class="groupName">
            <table id="fixed_hdr2" class="table-hover  ui-widget-header sorttable">
              <thead>
                <tr>
                  <th id="Title">Group Name</th>
                  <th id="TotalUsers">Number of User(s)</th>
                  <th id="CreationDate">Created Date</th>
                  <th id="ModifiedDate">Last Modified Date</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngIf="NoRecord !== ''">
                  <td colspan="4" style="color: red;text-align: center;"><b><span [innerHTML]="NoRecord"></span></b></td>
                </tr>
                <tr *ngFor="let item of lstLicenseUserGroups; let i = index;" (click)="SetClickedRow(i, item)" [class.active]="i == selectedRow"
                    [class.inactive]="i != selectedRow">
                  <td>
                    <input type="hidden" value={{item.Id}} /> {{item.Title}}
                  </td>
                  <td>{{item.TotalUsers}}</td>
                  <td>{{item.CreationDate | date: 'MM/dd/yyyy'}}</td>
                  <td>{{item.ModifiedDate | date: 'MM/dd/yyyy'}}</td>
                </tr>
              </tbody>
            </table>
            <admin-pager [recordCount]="recordCount" [pageNo]="pageNo" [pageLength]="pageLength" (pagerEvent)="GetLicenseUserGroups($event)"></admin-pager>
          </div>

          <div class="row">
            <div class="col-sm-12 marginTop20 text-center">
              <button class="btn btn-primary btn-sm" (click)="ViewLicenseUserGroup()" [disabled]="selectedRow == -1"><i class="fa fa-eye"></i>  View</button>
              <button class="btn btn-primary btn-sm" (click)="EditLicenseUserGroup()" [disabled]="selectedRow == -1"><i class="fa fa-edit"></i> Edit</button>
              <button class="btn btn-primary btn-sm" (click)="openModal(template)" [disabled]="selectedRow == -1"><i class="fa fa-trash"></i> Remove</button>
            </div>
          </div>

        </div>
      </div>

      <form class="row" style="position: absolute; z-index: 100;width: 100%;" [style.top]="topPos" [style.display]="(mode == 'View' || mode == 'Edit') ? 'block' : 'none'"
            [formGroup]="updateUserGroupFrm" (submit)="UpdateLicenseUserGroup(templatesuccess)">

        <div class="well no-margin-btm">
          <div class="row">
            <div class="form-group" *ngIf="alerts != ''">
              <div class="col-xs-12">
                <div class="alert alert-danger" [innerHTML]="alerts">
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-4 padd-right0">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="GroupName" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Group Name :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0">
                    <input type="text" class="form-control input-sm" formControlName="userGroupName" id="GroupName" [attr.disabled]="(mode == 'View')? '':null" maxlength="100">
                    <div *ngIf="!updateUserGroupFrm.controls.userGroupName.valid && updateUserGroupFrm.controls.userGroupName.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">User group name is required</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="well">

          <div class="groupList">
            <table id="fixed_hdr3" class="table-hover  ui-widget-header sorttable ">
              <thead>
                <tr>
                  <th id="InGroup">Select</th>
                  <th id="FirstName">First Name</th>
                  <th id="LastName">Last Name</th>
                  <th id="LoginId">User ID</th>
                  <th id="EmailId">Email ID</th>
                  <th id="ProductEdition">Product Edition</th>
                </tr>
              </thead>
              <tbody style="word-wrap: break-word; word-break: break-all">
                <tr *ngIf="NoRecord !== ''">
                  <td colspan="6" style="color: red;text-align: center;"><b><span [innerHTML]="NoRecord"></span></b></td>
                </tr>
                <tr *ngFor="let item of lstLicenseUserGroupUsers; let i = index">
                  <td *ngIf="(mode == 'Edit')">
                    <input type="hidden" value="{{item.Id}}">
                    <input type="checkbox" (change)="onChange(i, item.Id, $event.target.checked)" [checked]="item.InGroup">
                  </td>
                  <td>{{item.FirstName}}</td>
                  <td>{{item.LastName}}</td>
                  <td>{{item.LoginId}}</td>
                  <td>{{item.EmailId}}</td>
                  <td>{{item.ProductEdition}}</td>
                </tr>
              </tbody>
            </table>
            <admin-pager [recordCount]="recordCountUser" [pageNo]="pageNoUser" [pageLength]="pageLengthUser" (pagerEvent)="GetLicenseUserGroupUsers($event)"></admin-pager>
          </div>

          <div class="row">
            <div class="col-sm-12 marginTop20 text-center">
              <button class="btn btn-primary btn-sm" type="submit" [disabled]="!updateUserGroupFrm.valid" [style.visibility]="(mode == 'Edit') ? 'visible' : 'hidden'"><i class="fa fa-plus-circle"></i> Update</button>
              <button class="btn btn-primary btn-sm" type="button" (click)="CancelAddEdit()"><i class="fa fa-times-circle"></i> Cancel</button>
            </div>
          </div>

        </div>

      </form>

    </div>
  </div>
</div>
<!-- main-heading -->