subscriptioncancellationreport.component.html 9.76 KB
<div class="row">
  <div class="col-sm-12 pageHeading">
    <h4>Subscription Cancellation Report</h4>
  </div>
  <div class="col-sm-12">

    <div class="container-fluid main-full">
      <div class="row">
        <div class="well no-margin-btm">
          <div class="row"  [formGroup]="SubscriptionCancellationReportForm">
            <div class="col-lg-4 col-sm-4">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="FromDate" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">From Date :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <div id="datetimepicker2" class="input-group input-group-sm input-append date">
                        <input type="text" class="form-control" formControlName="sFromDate" #dp1="bsDatepicker" bsDatepicker [(bsValue)]="bsValue1">
                        <span class="input-group-btn add-on">
                          <button class="btn btn-default" type="button" (click)="dp1.toggle()"><i class="fa fa-calendar"></i></button>
                        </span>
                      </div>
                    </div>

                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="ToDate" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">To Date :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <div id="datetimepicker2" class="input-group input-group-sm input-append date">
                        <input type="text" class="form-control" formControlName="sToDate" #dp2="bsDatepicker" bsDatepicker [(bsValue)]="bsValue2">
                        <span class="input-group-btn add-on">
                          <button class="btn btn-default" type="button" (click)="dp2.toggle()"><i class="fa fa-calendar"></i></button>
                        </span>
                      </div>
                    </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 :</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="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="iLicenseTypeId">
                      <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="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="iAccountTypeId">
                      <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="iStateId">
                        <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="icStartPrice">
                  </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="icEndPrice">
                  </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="iCountryId">
                        <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" (click)="GetSubscriptionCancellationReport(this)"><i class="fa fa-file"></i>  Generate Report</button>
                    <!--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>Account number does not exist in the system.</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>
                      </div>
                    </div>
                    
                  </div>-->
                </div>

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

        <div class="well">
          <table id="fixed_hdr2" class="table-hover ">
            <thead>
              <tr>
                <th>Account Number</th>
                <th>Licensee Name</th>
                <th>License Type</th>
                <th>Inistitution Name</th>
                <th>Account Type</th>
                <th>Edition</th>
                <th>Start Date</th>
                <th>Original Entry Date</th>
                <th>End Date</th>
                <th>Subscription Price</th>
                <th>Credit Card Number</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let sr of lstSubscriptionCancellationReport">
                <td>{{sr.AccountNumber}}</td>
                <td>{{sr.LicenseeName}}</td>
                <td>{{sr.LicenseType}}</td>
                <td>{{sr.InstitutionName}}</td>
                <td>{{sr.AccountType}}</td>
                <td>{{sr.Edition}}</td>
                <td>{{sr.StartDate}}</td>
                <td>{{sr.LicenseCreationDate}}</td>
                <td>{{sr.EndDate}}</td>
                <td>{{sr.SubscriptionPrice | number:'1.2'}}</td>
                <td>{{sr.CardNumber}}</td>
              </tr>
            </tbody>
          </table>
          <div class="row">
            <div class="col-sm-12 marginTop20 text-center">
              <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-file-excel-o"></i>  Export To CSV</button>
            </div>
          </div>
        </div>

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