customersummaryreport.component.html 9.1 KB
<div class="row" style="margin-right: auto;">
  <div class="col-sm-12 pageHeading"  style="margin-left: 15px;">
    <h4>Customer Summary Report</h4>
  </div>
  <div class="col-sm-12">

    <div class="container-fluid main-full">
      <div class="row" style="margin-right:-40px">
        <div class="well no-margin-btm">
          <div class="row" [formGroup]="CustomerSummaryReportForm">
            <div class="col-lg-4 col-sm-4">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="LicenseeName" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Licensee Name :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <input type="text" class="form-control input-sm" id="LicenseeName" placeholder=""  formControlName="sLicenseeName">
                    </div>

                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="LicenseType" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">License Type :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                    <select class="form-control input-sm" id="LicenseType" formControlName="sLicenseType">
                      <option selected="selected" value="0">All</option>
                      <option *ngFor="let lcitem of lstLicenceType" value="{{lcitem.Id}}">{{lcitem.Title}}</option>
                    </select>
                  </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 :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0"> 
                      <input type="text" class="form-control input-sm" id="Zip" placeholder="" formControlName="sZip">
                    </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="AccountNumber" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Account Number :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                    <input type="text" class="form-control input-sm" id="acc-num" placeholder="" formControlName="sAccountNumber">
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="LicenseType" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Account Type :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                    <select class="form-control input-sm" id="AccountType" formControlName="sAccountType">
                      <option selected="selected" value="0">All</option>
                      <option *ngFor="let at of lstAccountType" value="{{at.Id}}">{{at.Title}}</option>
                    </select>
                  </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.) :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <select class="form-control input-sm " id="State" formControlName="iState">
                        <option selected="selected" value="0">All</option>
                        <option *ngFor="let item of lstState" value="{{item.Id}}">
                          {{item.StateName}}
                        </option>
                      </select>
                    </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="SubscriptionStart" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Subscription Start Price :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                    <input type="text" class="form-control input-sm" id="SubscriptionStart" placeholder="" formControlName="sSubscriptionStart">
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="SubscriptionEnd" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Subscription End Price :</label>
                  </div>
                  <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                    <input type="text" class="form-control input-sm" id="SubscriptionEnd" placeholder="" formControlName="sSubscriptionEnd">
                  </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">Country :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <select class="form-control input-sm " id="Country" formControlName="iCountry">
                        <option selected="selected" value="0">All</option>
                        <option *ngFor="let c of lstCountry" value="{{c.Id}}">{{c.CountryName}}</option>                       
                      </select>
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5 text-right">
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mymodal" (click)="SearchRecords()"><i class="fa fa-file"></i>  Generate Report</button>
                  </div>
                </div>


              </div>
            </div>
          </div>

        </div>

        <div class="well">
          <table id="fixed_hdr2" class="table-hover  ui-widget-header sorttable">
            <thead>
              <tr>
                <th id="AccountNumber">Account Number</th>
                <th id="LicenseeName">Licensee Name</th>
                <th id="LicenseType">License Type</th>
                <th id="AccountType">Account Type</th>
                <th id="Edition">Edition</th>
                <th id="Email">Email ID</th>
                <th id="LicenseStatus">Status</th>
                <th id="StartDate">Start Date</th>
                <th id="EndDate">End Date</th>
                <th id="Price">Price</th>
                <th id="LicenseZip">Zip</th>
                <th id="LicenseState">State</th>
                <th id="LicenseCountry">Country</th>
                <th id="InstitutionName">Institution Name</th>
                <th id="LicenseCreationDate">Org. Entry Date</th>
                <th id="CardNumber">Card Number</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="NoRecord !== ''">

                <td colspan="6"><b style="color: red;text-align: center; padding-left: 606px;"><span [innerHTML]="NoRecord"></span></b></td>
              </tr>
              <tr *ngFor="let csr of lstCustomerSummaryReport">
                <td>{{csr.AccountNumber}}</td>
                <td>{{csr.LicenseeName}}</td>
                <td>{{csr.LicenseType}}</td>
                <td>{{csr.AccountType}}</td>
                <td>{{csr.Edition}}</td>
                <td>{{csr.Email}}</td>
                <td>{{csr.LicenseStatus}}</td>
                <td>{{csr.StartDate | date: 'MM/dd/yyyy'}}</td>
                <td>{{csr.EndDate | date: 'MM/dd/yyyy'}}</td>
                <td>{{csr.Price | number:'1.2'}}</td>
                <td>{{csr.LicenseZip}}</td>
                <td>{{csr.LicenseState}}</td>
                <td>{{csr.LicenseCountry}}</td>
                <td>{{csr.InstitutionName}}</td>
                <td>{{csr.LicenseCreationDate | date: 'MM/dd/yyyy'}}</td>
                <td>{{csr.CardNumber}}</td>
              </tr>
            </tbody>
          </table>
          <admin-pager [recordCount]="recordCount" [pageNo]="pageNo" [pageLength]="pageLength" (pagerEvent)="GetCustomerSummeryReport($event)"></admin-pager>
          <div class="row">
            <div class="col-sm-12 marginTop20 text-center">
              <button type="button" class="btn btn-primary btn-sm" (click)="ExportEvent()" [ngClass]="{disabled : !buttonStatus}"><i class="fa fa-file-excel-o"></i>  Export To CSV</button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>