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

  <div class="col-sm-12 pageHeading" style="margin-left: 15px;">
    <h4>Add Building Level Account</h4>
  </div>

  <ng-template #template>
      <div class="modal-header">
        <h4 class="modal-title pull-left">Delete</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 site account?</p>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-sm" (click)="DeleteSiteAccount(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="margin-right:-40px">
        <div class="well no-margin-btm" [style.visibility]="(mode == 'Search') ? 'visible' : 'hidden'">
          <div class="row">
            <div class="col-lg-4 col-sm-7 padd-right0">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="AccountNo" class="col-sm-5 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Account Number :</label>
                    <div class="col-sm-5 col-lg-6 padd-left0 padd-right0">
                      <select id="accountSelect" class="form-control input-sm">
                          <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">
              <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)="SearchRecords()" [disabled]="license.LicenseId == 0">Go <i class="fa fa-arrow-right"></i></button>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>

        <div class="well" [style.display]="(mode == 'Search') ? 'block' : 'none'">
            <table id="fixed_hdr2" class="table-hover  ui-widget-header sorttable">
            <thead>
              <tr>
                <th id="Ip">Site Url</th>
                <th id="SiteIpTo">Site Url To</th>
                <th id="Title">Account Name</th>
                <th id="InstituteName">Institution Name</th>
                <th id="Department">Department Name</th>
                <th id="SiteUserFirstName">Client Admin</th>
                <th id="SiteUserEmailId">Client Admin Email ID</th>
                <th id="CreationDate">Original Entry Date</th>
                <th id="ModifiedDate">Last Modified Date</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="NoRecord !== ''">
                <td colspan="9" style="color: red;text-align: center;"><b><span [innerHTML]="NoRecord"></span></b></td>
              </tr> 
              <tr *ngFor="let item of lstLicenseSites; let i = index" (click)="SetClickedRow(i, item)" [class.active]="i == selectedRow"
                [class.inactive]="i != selectedRow">
                <td style="width: 200px; text-align: center;">
                  <input type="hidden" value="{{item.Id}}"> {{item.Ip}}
                </td>
                <td style="text-align: center;">{{item.SiteIpTo}}</td>
                <td style="text-align: center;">{{item.Title}}</td>
                <td style="text-align: center;">{{item.InstituteName}}</td>
                <td style="text-align: center;">{{item.Department}}</td>
                <td style="text-align: center;">{{item.SiteUserFirstName}}</td>
                <td style="text-align: center;">{{item.SiteUserEmailId}}</td>
                <td style="text-align: center;">{{item.CreationDate | date: 'MM/dd/yyyy'}}</td>
                <td style="text-align: center;">{{item.ModifiedDate | date: 'MM/dd/yyyy'}}</td>
              </tr>
            </tbody>
          </table>
          <admin-pager [recordCount]="recordCount" [pageNo]="pageNo" [pageLength]="pageLength" (pagerEvent)="GetLicenseSites($event)"></admin-pager>
          <div class="row">
            <div class="col-sm-12 marginTop20 text-center">
              <button class="btn btn-primary btn-sm" type="button" (click)="AddLicenseSite()" [disabled]="license.LicenseId==0"><i class="fa fa-plus-circle"></i> Add</button>
              <button class="btn btn-primary btn-sm" type="button" (click)="EditLicenseSite()" [disabled]="selectedRow==-1"><i class="fa fa-edit"></i> Edit</button>
              <button class="btn btn-primary btn-sm" type="button" (click)="openModal(template)" [disabled]="selectedRow==-1"><i class="fa fa-trash"></i> Delete</button>
            </div>
          </div>
        </div>
        <!--modal-->
        <div class="modal fade bs-example-modal-sm text-left" tabindex="-1" role="dialog" id="mymodal">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header annotation-modal-header ui-draggable-handle">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="">Alert</h4>
              </div>
              <div class="modal-body">
                <h5>Please select a site account to edit.</h5>
              </div>
              <div class="modal-footer">
                <div class="row">
                  <div class="col-sm-12"><button class="btn btn-primary btn-sm">Ok</button></div>
                </div>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!--modal-->
        <!--modal-->
        <div class="modal fade bs-example-modal-sm text-left" tabindex="-1" role="dialog" id="mymodal1">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header annotation-modal-header ui-draggable-handle">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="">Alert</h4>
              </div>
              <div class="modal-body">
                <h5>Please select a site account to delete.</h5>
              </div>
              <div class="modal-footer">
                <div class="row">
                  <div class="col-sm-12"><button class="btn btn-primary btn-sm">Ok</button></div>
                </div>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!--modal-->

        <div class="well marginBtm12" style="position: absolute; z-index: 100;" [style.top]="topPos" [style.display]="(mode=='Add' || mode=='Edit') ? 'block' : 'none'">
            
          <form class="row" [formGroup]="insertUpdateSiteLicenseFrm" (submit)="InsertUpdateSiteAccount(templatesuccess)">
            
            <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="SiteUrl" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Site Url(From) <span class="red">*</span> : </label>
                        <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <input type="text" class="form-control input-sm" id="SiteUrl" formControlName="siteUrl" maxlength="2000">
                          <div *ngIf="insertUpdateSiteLicenseFrm.controls.siteUrl.hasError('required') && insertUpdateSiteLicenseFrm.controls.siteUrl.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Site url is required</div>
                        </div>
                      </div>
                    </div>
                  
                    <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="SiteUrlTo" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Site Url to :</label>
                        <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <input type="text" class="form-control input-sm" id="SiteUrlTo" formControlName="siteUrlTo" maxlength="100">
                        </div>
                      </div>
                    </div>
                  
                    <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="BuildingLevel" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Building Level Account Name :</label>
                        <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <input type="text" class="form-control input-sm" id="BuildingLevel" formControlName="buildAccName" maxlength="100">
                        </div>
                      </div>
                    </div>
                    
                    <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="AccountNumber1" 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">
                          <input type="text" class="form-control input-sm" id="AccountNumber1" formControlName="accountNumber" maxlength="100">
                        </div>
                      </div>
                    </div>
                    
                    <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="ProductEdition" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">
                        Product Edition <span class="red">*</span> :</label>
                        <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <form>
                            <div class="checkbox" *ngFor="let item of this.insertUpdateSiteLicenseFrm.controls['editionLoginArr'].value; let i = index"> 
                              <label> 
                                <input value="{{item.Id}}" type="checkbox" (change)="onChange(item, $event.target.checked)" [checked]="item.Login == 1"> {{item.Title}}
                              </label> 
                            </div>
                         </form>
                        </div>
                      </div>
                    </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="InstitutionName" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Institution Name <span class="red">*</span> : </label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="text" class="form-control input-sm" id="InstitutionName" formControlName="institutionName" maxlength="100">
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.institutionName.hasError('required') && insertUpdateSiteLicenseFrm.controls.institutionName.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Institution name is required</div>
                      </div>
                      </div>
                  </div>
                  
                  <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="DepartmentName" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Department Name :</label>
                      </div>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="text" class="form-control input-sm" id="DepartmentName" formControlName="departmentName" maxlength="50">
                      </div>
                  </div>
                  
                  <div class="col-sm-12">
                    <div class="form-group marginTop5">
                      <label for="Address1" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Address <span class="red">*</span> : </label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="text" class="form-control input-sm" id="Address1" formControlName="address1" maxlength="100">
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.address1.hasError('required') && insertUpdateSiteLicenseFrm.controls.address1.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Address is required</div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="Address2" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0"></label>
                        <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <input type="text" class="form-control input-sm" id="Address2" formControlName="address2" maxlength="100">
                        </div>
                      </div>
                    </div>

                  <div class="col-sm-12">									
                    <div class="form-group marginTop5">
                      <label for="City" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">City <span class="red">*</span> :</label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="text" class="form-control input-sm" id="City" formControlName="city" maxlength="50">
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.city.hasError('required') && insertUpdateSiteLicenseFrm.controls.city.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">City is required</div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-12">
                    <div class="form-group marginTop5">
                      <label for="State" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">State(only U.S.) <span class="red">*</span> :</label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <select class="form-control input-sm " id="State" formControlName="stateId" (change)="OnStateChange($event.target)">
                              <option value="0">Select</option>
                              <option *ngFor="let item of lstState" value="{{item.Id}}">
                                  {{item.StateName}}
                              </option>
                          </select>
                          <div *ngIf="insertUpdateSiteLicenseFrm.controls.stateId.errors?.min && insertUpdateSiteLicenseFrm.controls.stateId.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">State is required</div>
                        </div>
                    </div>
                  </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="Country" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Country <span class="red">*</span> :</label>
                      </div>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <select class="form-control input-sm " id="Country" formControlName="countryId" (change)="OnCountryChange($event.target)">
                              <option value="0">Select</option>
                              <option *ngFor="let item of lstCountry" value="{{item.Id}}">
                                  {{item.CountryName}}
                              </option>
                          </select>
                          <div *ngIf="insertUpdateSiteLicenseFrm.controls.countryId.errors?.min && insertUpdateSiteLicenseFrm.controls.countryId.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Country is required</div>
                        </div>
                    </div>
                  
                  <div class="col-sm-12">
                    <div class="form-group marginTop5">
                      <label for="Zip" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Zip <span class="red">*</span> : </label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="text" class="form-control input-sm" id="Zip" formControlName="zip" maxlength="20" (keydown.space)="$event.preventDefault();">
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.zip.hasError('required') && insertUpdateSiteLicenseFrm.controls.zip.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Zip is required</div>
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.zip.hasError('pattern')" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Zip is invalid</div>
                      </div>
                      </div>
                  </div>
                  
                  <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="Phone" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Phone <span class="red">*</span> :</label>
                        </div>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="phone" class="form-control input-sm" id="Phone" formControlName="phone" maxlength="30" (keyup)="onKeyUp($event)" (keydown.space)="$event.preventDefault();">   
                        <span *ngIf="IsUniteState" class="help-block">(xxx-xxx-xxxx)</span>
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.phone.hasError('required') && insertUpdateSiteLicenseFrm.controls.phone.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Phone is required</div>
                        <div *ngIf="insertUpdateSiteLicenseFrm.controls.phone.hasError('pattern') && insertUpdateSiteLicenseFrm.controls.phone.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Phone is invalid</div>
                      </div>
                    </div>
                    
                    <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="ClientAdmin" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Client Admin <span class="red">*</span> :</label>
                      </div>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <select class="form-control input-sm" id="ClientAdmin" formControlName="clientAdminId" (change)="ClientAdminChanged($event.target.value)">
                        <option value="0">Select</option>
                        <option *ngFor="let item of lstClientAdmin" value="{{item.Id}}">
                            {{item.Name}}
                        </option>
                      </select>
                      </div>
                    </div>
                    
                    <div class="col-sm-12">
                      <div class="form-group marginTop5">
                        <label for="ClientAdminEmail" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Client Admin Email ID :</label>
                        <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                          <input type="text" class="form-control input-sm" id="ClientAdminEmail" formControlName="clientAdminEmail" maxlength="50" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$">
                        </div>
                      </div>
                    </div>
              </div>
            </div>

            <div class="col-sm-12 marginTop10 text-right">
              <button type="button" class="btn btn-primary btn-sm" (click)="CancelAddEdit()"><i class="fa fa-times-circle"></i> Back</button>
              <button class="btn btn-primary btn-sm" type="submit" [disabled]="!insertUpdateSiteLicenseFrm.valid"> <i class="fa fa-arrow-circle-right"></i> Submit</button>
              <button type="button" class="btn btn-primary btn-sm" (click)="CancelAddEdit()"><i class="fa fa-times-circle"></i> Cancel</button>
            </div>

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