managediscountcode.component.html 9.64 KB
<div class="row">
  <!-- main-heading -->
  <div class="col-sm-12 pageHeading">
    <h4>{{Mode}} Discount Code</h4>
  </div>
  <!-- main-heading -->
  <!-- container -->
  <div [className]="divClass">
    <div class="container-fluid main-full">
      <div class="form-group" *ngIf="alerts != ''">
        <div class="col-xs-12">
          <div class="alert alert-danger" [innerHTML]="alerts">
          </div>
        </div>
      </div>
      <!-- form -->
      <form class="form-horizontal" [formGroup]="manageDiscountCodeFrm">

        <div [style.visibility]="(Mode == 'Manage') ? 'visible' : 'hidden'" class="row">
          <div class="well no-margin-btm">
            <div class="row">
              <div class="col-lg-3 col-sm-4">
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group marginTop5">
                      <label for="searchDiscountCode" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Discount Code : </label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <input type="text" class="form-control" id="searchDiscountCode" formControlName="searchDiscountCode">
                      </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="searchStartDate" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Discount Start Date :</label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <div id="datetimepicker1" class="input-group input-append date">
                          <input id="searchStartDate" type="text" class="form-control" formControlName="searchStartDate">
                          <span class="input-group-btn add-on">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                  </span>
                        </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="searchEndDate" class="col-sm-12 col-lg-6 control-label text-right-lg paddTop7 padd-left0">Discount End Date :</label>
                      <div class="col-sm-12 col-lg-6 padd-left0 padd-right0">
                        <div id="datetimepicker2" class="input-group input-append date">
                          <input id="searchEndDate" type="text" class="form-control" formControlName="searchEndDate">
                          <span class="input-group-btn add-on">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                  </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-lg-1 col-sm-4">
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group marginTop5">
                      <button (click)="SearchDiscountCodes()" type="button" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Search</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="well">
            <div class="table-responsive blue table-fixT">
              <table class="table table-condensed table-bordered margin-btm0 table-striped table-hover table-fixed">
                <thead>
                  <tr>
                    <th>Discount Code</th>
                    <th>Percentage</th>
                    <th>Discount Start Date</th>
                    <th>Discount End Date</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of this.manageDiscountCodeFrm.controls['discountCodes'].value">
                    <td><input type="hidden" value="{{item.Id}}">{{item.DiscountCode}}</td>
                    <td>{{item.Percentage | number : '1.2'}}</td>
                    <td>{{item.StartDate | date: 'MM/dd/yyyy'}}</td>
                    <td>{{item.EndDate | date: 'MM/dd/yyyy'}}</td>
                    <td>
                      <span *ngIf="item.IsActive" class="label label-success">Active</span>
                      <span *ngIf="!item.IsActive" class="label label-default">Inactive</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="row">
              <div class="col-sm-12 marginTop20 text-center">
                <button (click)="AddDiscountCode()" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> Add</button>
                <button (click)="EditDiscountCode()" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Edit</button>
              </div>
            </div>
          </div>
        </div>
      </form>
      <!-- form -->

      <div style="position: absolute; z-index: 100;" [style.top]="topPos" [style.visibility]="(Mode=='Add' || Mode=='Edit') ? 'visible' : 'hidden'"
        class="well">
        <div class="row">
          <div class="col-sm-12">
            <div class="panel-body">
              <!-- form -->
              <form class="form-horizontal" [formGroup]="insertUpdateDiscountCodeFrm" (submit)="InsertUpdateDiscountCode()">
                <div class="form-group">
                  <label for="discountCode" class="col-sm-4 control-label">Discount Code :</label>
                  <div class="col-sm-7">
                    <input type="hidden" formControlName="discountId">
                    <input type="text" class="form-control" id="discountCode" placeholder="" formControlName="discountCode">
                  </div>
                </div>
                <div class="form-group">
                  <label for="startDate" class="col-sm-4 control-label">Discount Start Date <span class="red">*</span> :</label>
                  <div class="col-sm-7">
                    <div id="datetimepicker1" class="input-group input-group-sm input-append date">
                      <input type="text" class="form-control" id="startDate" formControlName="startDate">
                      <span class="input-group-btn add-on">
                  <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="endDate" class="col-sm-4 control-label">Discount End Date <span class="red">*</span> :</label>
                  <div class="col-sm-7">
                    <div id="datetimepicker2" class="input-group input-group-sm input-append date">
                      <input type="text" class="form-control" id="endDate" formControlName="endDate">
                      <span class="input-group-btn add-on">
                  <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                </span>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="percentage" class="col-sm-4 control-label">Percentage <span class="red">*</span> :</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="percentage" placeholder="" formControlName="percentage">
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-offset-4 col-sm-7 mar-top17">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> Save</button>
                    <button type="button" (click)="CancelAddEdit()" class="btn btn-primary btn-sm"><i class="fa fa-times-circle"></i> Cancel</button>
                  </div>
                </div>
                <!--cancel-button-->
                <div class="modal fade bs-example-modal-sm" 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>Discount Percentage should be greater than one.</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 -->
                <!--cancel-button-->
              </form>
              <!-- form -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- container -->
</div>