apt-maintenance-account/src/app/accounts/periodic-list.component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<div class="container">

  <ul class="items">

    <h2>Periodic Grid View</h2>

    <div class="controls">
      <button
        class="btn btn-link"
        (click)="gotoPreviousMonth($event)"
        title="Go to previous month">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </button>
      <select
        class="btn btn-link"
        id="forMonth"
        required
        [(ngModel)]="for_month"
        (ngModelChange)="monthChanged($event)"
        name="forMonth"
        #forMonth="ngModel"
        title="Periodic view for the month">
        <option
          *ngFor="let month of months"
          [value]="month.number"
         >{{month.shortName}}</option>
      </select>

      <input
        class="btn btn-link"
        type="number"
        id="forYear"
        required
        [(ngModel)]="for_year"
        name="forYear"
        #forYear="ngModel"
        min="2010"
        max="2030"
        title="Periodic view for they year">

        <button
          class="btn btn-link"
          (click)="gotoNextMonth($event)"
          title="Go to next month">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>

        Monthly Maintenance Charge: &#8377; {{monthlyMaintCharge}}

      <input
        class="btn btn-link"
        type="button"
        value="Get List"
        title="Retreive List for month and year"
        (click)="getPeriodicList(forMonth.value, forYear.value)">

    </div>

    <br />

    <div class="grid">
    	<li *ngFor="let model of models | async" class="box" role="button" (click)="togglePaidStatus($event, model)">
    			<div class="flat-number">{{ model.flat_number }}</div>
          <div class="payment">
            <span *ngIf="model.amount == monthlyMaintCharge">&#10004; Paid</span>
            </div>
            <div class="recorded-at" *ngIf="model.amount == monthlyMaintCharge">{{ model.recorded_at }}</div>
    	</li>
    </div>
  </ul>

</div>