editlicensebasicsettings.component.html 11.8 KB
<!-- main-heading -->
<div class="row" style="margin-right: auto;">
  
    <div class="col-sm-12 pageHeading" style="margin-left: 15px;">
      <h4>View/Update Profile</h4>
    </div>
  
    <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>
  
    <!-- container -->
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
      <div class="container-fluid main-full">
        <div class="row">
  
          <div class="well">
  
            <div class="row" *ngIf="alerts != ''">
              <div class="col-xs-12">
                <div class="alert alert-danger" [innerHTML]="alerts">
                </div>
              </div>
            </div>
  
            <div class="row">
  
              <div class="col-sm-12">
  
                <div class="panel-body">
                  <div class="form-horizontal">
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">Account Number :</label>
                      <div class="col-sm-7">
                        <select id='accountSelect'>
                          <option *ngFor="let item of tempLstAccountNumbers" [value]="item.m_Item1">{{item.m_Item2}}</option>
                        </select>                    
                      </div>
                    </div>
                </div>
                  <!-- form -->
                  <form class="form-horizontal" [formGroup]="updateLicenseBasicSettingsFrm" (submit)="UpdateLicenseBasicSettings(templatesuccess)">
                    <div class="form-group">
                      <label for="inputPassword3" class="col-sm-4 control-label">Licensee First Name <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="LicenseeFirstName" formControlName="licenseeFirstName" maxlength="50">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.licenseeFirstName.hasError('required') && updateLicenseBasicSettingsFrm.controls.licenseeFirstName.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Licensee first name is required</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputPassword3" class="col-sm-4 control-label">Licensee Last Name <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="LicenseeLastName" formControlName="licenseeLastName" maxlength="50">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.licenseeLastName.hasError('required') && updateLicenseBasicSettingsFrm.controls.licenseeLastName.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Licensee last name is required</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputPassword3" class="col-sm-4 control-label">Institution Name <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="InstitutionName" formControlName="institutionName" maxlength="100">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.institutionName.hasError('required') && updateLicenseBasicSettingsFrm.controls.institutionName.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Institution name is required</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">Email ID <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="Email" formControlName="emailId" maxlength="50" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$" (keydown.space)="$event.preventDefault();">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.emailId.hasError('required') && !updateLicenseBasicSettingsFrm.controls.emailId.value  && updateLicenseBasicSettingsFrm.controls.emailId.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Email is required</div>
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.emailId.invalid && updateLicenseBasicSettingsFrm.controls.emailId.value" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Email is invalid</div>     
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">Address 1 <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="Address1" formControlName="address1" maxlength="100">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.address1.hasError('required') && updateLicenseBasicSettingsFrm.controls.address1.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Address 1 is required</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">Address 2 :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="Address2" formControlName="address2" maxlength="100">
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">City <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="City" formControlName="city" maxlength="50">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.city.hasError('required') && updateLicenseBasicSettingsFrm.controls.city.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">City is required</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">Zip <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control input-sm" id="Zip" formControlName="zip" maxlength="20" (keydown.space)="$event.preventDefault();">
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.zip.hasError('required') && updateLicenseBasicSettingsFrm.controls.zip.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Zip is required</div>
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.zip.hasError('pattern')" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Zip is invalid</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">State (only U.S.) <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <select class="form-control input-sm " id="State" formControlName="stateId">
                          <option value="0">Select</option>
                          <option *ngFor="let item of lstState" value="{{item.Id}}">
                            {{item.StateName}}
                          </option>
                        </select>
                        <div *ngIf="updateLicenseBasicSettingsFrm.get('stateId').hasError('min') && updateLicenseBasicSettingsFrm.controls.stateId.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">State is required</div>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-4 control-label">Country <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <select class="form-control input-sm" id="Country" formControlName="countryId" (change)="onCountryChange($event)">
                          <option value="0">Select</option>
                          <option *ngFor="let item of lstCountry" [value]="item.Id">
                            {{item.CountryName}}
                          </option>
                        </select>
                      </div>
                    </div>
  
                    <div class="form-group">
                      <label for="Phone" class="col-sm-4 control-label">Phone <span class="red">*</span> :</label>
                      <div class="col-sm-7">
                        <input type="text" 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="updateLicenseBasicSettingsFrm.controls.phone.hasError('required') && updateLicenseBasicSettingsFrm.controls.phone.dirty" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Phone is required</div>
                        <div *ngIf="updateLicenseBasicSettingsFrm.controls.phone.hasError('pattern') && (updateLicenseBasicSettingsFrm.controls.phone.dirty||license.LicenseId)" class="alert alert-danger" style="padding: 2px; margin-bottom: 2px;">Phone is invalid</div>
                      </div>
                    </div>
  
                    <div class="row">
                      <div class="col-sm-12 marginTop20 text-center">
                        <button type="submit" class="btn btn-primary btn-sm" [disabled]="!updateLicenseBasicSettingsFrm.valid"><i class="fa fa-check"></i> Update</button>
                      </div>
                    </div>
  
                  </form>
                  <!-- form -->
                  <!--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 your license account number.</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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- container -->
  </div>
  <!-- main-heading -->