usergroup.component.html 10.1 KB
<!-- main-heading -->
<div class="row">

  <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'">
        <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" *ngIf="this.global.UserType == 1 || this.global.UserType == 2">
                      <select #accountvalue class="form-control input-sm " id="AccountNumber" (change)="AccountNumberChanged($event.target.value, $event)">
                        <option value="0">Select</option>
                        <option *ngFor="let item of lstAccountNumbers;" value="{{item.m_Item1}}">{{item.m_Item2}}</option>
                      </select>
                    </div>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0" *ngIf="this.global.UserType > 2">
                      <span class="pull-left" style="margin-top: -1px;">{{accountDropDownText}}</span>
                    </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="table-responsive blue">
            <table id="tblLicenseUserGroups" class="table table-condensed table-bordered margin-btm0 table-striped table-hover table-fixed">
              <thead>
                <tr>
                  <th>Group Name</th>
                  <th>Number of User(s)</th>
                  <th>Created Date</th>
                  <th>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" 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="table-responsive blue table-fixT">
            <table id="tblUserGroupUsers" class="table table-condensed table-bordered margin-btm0 table-striped table-fixed">
              <thead>
                <tr>
                  <th *ngIf="(mode == 'Edit')" style="width: 80px">Select</th>
                  <th style="width:150px">First Name</th>
                  <th style="width:150px">Last Name</th>
                  <th style="width:150px">User ID</th>
                  <th style="width:150px">Email ID</th>
                  <th style="width:150px">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')" style="width: 80px">
                    <input type="hidden" value="{{item.Id}}">
                    <input type="checkbox" (change)="onChange(i, item.Id, $event.target.checked)" [checked]="item.InGroup">
                  </td>
                  <td style="width:150px">{{item.FirstName}}</td>
                  <td style="width:150px">{{item.LastName}}</td>
                  <td style="width:150px">{{item.UserId}}</td>
                  <td style="width:150px">{{item.EmailId}}</td>
                  <td style="width:150px">{{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 -->