searchlicense.component.html 17.2 KB
<div class="row">
  <!-- main-heading -->
  <div class="col-sm-12 pageHeading" style="margin-left: 15px;">
    <h4>Search License</h4>
  </div>
  <!-- main-heading -->

  <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 license?</p>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-sm" (click)="DeleteLicense(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>

  <!-- container -->
  <div class="col-sm-12" style="margin-left: 0px;">

    <div class="container-fluid main-full">

      <form class="row" [formGroup]="searchLicenseFrm" (submit)="SearchLicenses()">

        <div class="well no-margin-btm">

          <div class="row">

            <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">
                      <input type="text" class="form-control input-sm" id="AccountNumber" formControlName="accountNumber" maxlength="16">
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="LicenseeFirstName" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Licensee First Name :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <input type="text" class="form-control input-sm" id="LicenseeFirstName" formControlName="licenseeFirstName" maxlength="50">
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="LicenseeLastName" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Licensee Last Name :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <input type="text" class="form-control input-sm" id="LicenseeLastName" formControlName="licenseeLastName" maxlength="50">
                    </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="licenseTypeId">
                    <option selected="selected" value="0">All</option>
                    <option *ngFor="let item of lstLicenceType" value="{{item.Id}}">
                        {{item.Title}}
                    </option>
                  </select>
                  </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" title="Institution Name">Institution Name : </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>
                  </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="stateId">
                        <option selected="selected" value="0">All</option>
                        <option *ngFor="let item of lstState" value="{{item.Id}}">
                            {{item.StateName}}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>

                <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 :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <select class="form-control input-sm" id="Country" formControlName="countryId">
                        <option selected="selected" value="0">All</option>
                        <option *ngFor="let item of lstCountry" value="{{item.Id}}">
                            {{item.CountryName}}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5 margin48Top-sm">
                    <div class="checkbox text-right-lg">
                      <label class="marginR5">
                        <input type="checkbox" checked="" formControlName="isActive"> License Active
                      </label>
                      <label>
                        <input type="checkbox" checked=""> Pagination Results
                      </label>
                    </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="EmailID" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Email ID : </label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <input type="email" class="form-control input-sm" id="EmailID" formControlName="emailId" maxlength="50">
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="SubscriptionStartDate" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Subscription Start Date :</label>
                    <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                      <div id="datetimepicker1" class="input-group input-group-sm input-append date">
                        <input type="text" class="form-control" id="SubscriptionStartDate" formControlName="subscriptionStartDate" #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 icon-calendar"></i></button>
                    </span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5">
                    <label for="SubscriptionEndDate" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Subscription End 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" id="SubscriptionEndDate" formControlName="subscriptionEndDate" #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 icon-calendar"></i></button>
                    </span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group marginTop5 margin48Top-sm text-right">
                    <button class="btn btn-primary btn-sm"><i class="fa fa-search "></i> Search</button>
                  </div>
                </div>

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

        </div>

        <div class="well">
                <table id="fixed_hdr2" class="table-hover  ui-widget-header sorttable" style="width: 4032px;">
                  <thead>
                    <tr>
                      <th>Account No.</th>
                      <th>Licensee Name</th>
                      <th>License Type</th>
                      <th>Account Type</th>
                      <th>Institution Name</th>
                      <th>Address</th>
                      <th>State (Only U.S.)</th>
                      <th>Country</th>
                      <th>Email ID</th>
                      <th>Subscription Start Date</th>
                      <th>Subscription Renewal Date</th>
                      <th>Subscription End Date</th>
                      <th>Status</th>
                      <th>Original Entry Date</th>
                      <th>Last Modified Date</th>
                      <th>No. of Export Images</th>
                      <th>Admin</th>
                      <th>Credit Card No.</th>
                      <th>Product Key</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="ui-widget-content" *ngFor="let item of this.searchLicenseFrm.controls['licenses'].value; let i = index" (click)="SetClickedRow(i, item)" [class.active]="i == selectedRow" [class.inactive]="i != selectedRow">
                      <td style="text-align: center;">
                          <input type="hidden" value="{{item.LicenseId}}">
                          {{item.AccountNumber}}
                        </td>
                      <td style="text-align: center;">{{item.LicenseeName}}</td>
                      <td style="text-align: center;">{{item.LicenseTypeName}}</td>
                      <td style="text-align: center;">{{item.AccountTypeName}}</td>
                      <td style="text-align: center;">{{item.InstitutionName}}</td>
                      <td style="text-align: center;">{{item.Address}}</td>
                      <td style="text-align: center;">{{item.LicenseState}}</td>
                      <td style="text-align: center;">{{item.LicenseCountry}}</td>
                      <td style="text-align: center;">{{item.EmailId}}</td>
                      <td style="text-align: center;">{{item.SubscriptionStartDate | date: 'MM/dd/yyyy'}}</td>
                      <td style="text-align: center;">{{item.RenewDate | date: 'MM/dd/yyyy'}}</td>
                      <td style="text-align: center;">{{item.SubscriptionEndDate | date: 'MM/dd/yyyy'}}</td>
                      <td style="text-align: center;">
                        <span *ngIf="item.IsActive" class="label label-success">Active</span>
                        <span *ngIf="!item.IsActive" class="label label-default">Inactive</span>
                      </td>
                      <td style="text-align: center;">{{item.EntryDate | date: 'MM/dd/yyyy'}}</td>
                      <td style="text-align: center;">{{item.ModifyDate | date: 'MM/dd/yyyy'}}</td>
                      <td style="text-align: center;">{{item.NoOfImages}}</td>
                      <td style="text-align: center;">{{item.ClientAdmin}}</td>
                      <td style="text-align: center;">{{item.CardNumber}}</td>
                      <td style="text-align: center;">{{item.ProductKey}}</td>
                    </tr>
                  </tbody>
                </table>
          <div class="row">
            <div class="col-lg-2 col-sm-4">
              <div class="form-inline marginTop20">
                <div class="form-group">
                  <label for="PerPage">Item's Per Page</label>
                  <select class="form-control input-sm" id="PerPage">
                <option>10</option>
                <option>25</option>
                <option>50</option>
                <option>100</option>
              </select>
                </div>
              </div>
            </div>
            <div class="col-lg-5 col-sm-8">
              <nav aria-label="...">
                <ul class="pagination pagination-sm margin-btm0">
                  <li class="disabled">
                    <span>
                  <span aria-hidden="true">« Prev</span>
                    </span>
                  </li>
                  <li class="active">
                    <span>1 <span class="sr-only">(current)</span></span>
                  </li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#">6</a></li>
                  <li><a href="#">7</a></li>
                  <li><a href="#">8</a></li>
                  <li><a href="#">9</a></li>
                  <li><a href="#">10</a></li>
                  <li><a href="#">11</a></li>
                  <li><a href="#">12</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                <span aria-hidden="true">Next »</span>
                </a>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="col-lg-3 col-sm-6">
              <div class="form-inline marginTop20">
                <div class="form-group">

                  <label for="Page"><span class="font-normal marginR10">Results: 1 - 1120 of 11956</span> Page</label>
                  <select class="form-control input-sm" id="Page">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                  <option>10</option>
                  <option>11</option>
                  <option>12</option>
                  <option>13</option>
                  <option>14</option>
                  <option>15</option>
                  <option>16</option>
                  <option>17</option>
                  <option>18</option>
                  <option>19</option>
                  <option>20</option>
                  <option>21</option>
                  <option>22</option>
                  <option>23</option>
                  <option>24</option>
                  <option>25</option>
                  <option>26</option>
                  <option>27</option>
                  <option>28</option>
                  <option>29</option>
                  <option>30</option>
                  <option>31</option>
                  <option>32</option>
                  <option>33</option>
                  <option>34</option>
                  <option>35</option>
                  <option>36</option>
                  <option>37</option>
                  <option>38</option>
                  <option>39</option>
                  <option>40</option>
                  <option>41</option>
                  <option>42</option>
                  <option>43</option>
                  <option>44</option>
                  <option>45</option>
                  <option>46</option>
                  <option>47</option>
                  <option>48</option>
                  <option>49</option>
                  <option>50</option>
                </select>
                </div>
              </div>
            </div>
            <div class="col-lg-2 col-sm-6 pull-right">
              <div class="pull-right marginTop20">
                <button type="button" class="btn btn-primary btn-sm" (click)="openModal(template)"><i class="fa fa-trash"></i> Delete</button>
                <button type="button" class="btn btn-primary btn-sm" (click)="EditLicense()"><i class="fa fa-edit"></i> Edit</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>