brewman/overlord/src/app/ledger/ledger.component.html

<h2 class="row-container space-between">
  <span>Ledger</span>
  @if (dataSource.data.length) {
    <button mat-icon-button (click)="exportCsv()">
      <mat-icon>save_alt</mat-icon>
    </button>
  }
</h2>

<form [formGroup]="form" class="flex-col">
  <div class="row-container">
    <mat-form-field class="flex-auto">
      <mat-label>Start Date</mat-label>
      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
      <mat-datepicker #startDate></mat-datepicker>
    </mat-form-field>
    <mat-form-field class="flex-auto">
      <mat-label>Finish Date</mat-label>
      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
      <mat-datepicker #finishDate></mat-datepicker>
    </mat-form-field>
  </div>
  <div class="row-container">
    <mat-form-field class="flex-auto basis-4-5">
      <mat-label>Account</mat-label>
      <input
        type="text"
        matInput
        #accountElement
        [matAutocomplete]="auto"
        formControlName="account"
        autocomplete="off"
      />
      <mat-autocomplete
        #auto="matAutocomplete"
        autoActiveFirstOption
        [displayWith]="displayFn"
        (optionSelected)="selected($event)"
      >
        @for (account of accounts | async; track account) {
          <mat-option [value]="account">{{ account.name }}</mat-option>
        }
      </mat-autocomplete>
    </mat-form-field>
    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
  </div>
  <div class="row-container">
    <mat-form-field class="flex-auto basis-4-5">
      <mat-label>Tags</mat-label>
      <mat-select formControlName="tags" multiple (selectionChange)="tagChanges($event.value)">
        @for (tag of tags; track tag) {
          <mat-option [value]="tag">{{ tag }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <button mat-raised-button tabindex="-1" extended class="flex-auto basis-1-5" (click)="labels()">
      <mat-icon>label</mat-icon>
      Manage Labels
    </button>
  </div>
</form>
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
  <!-- Date Column -->
  <ng-container matColumnDef="date">
    <mat-header-cell *matHeaderCellDef>
      <mat-checkbox
        (change)="$event ? toggleAllRows() : null"
        [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()"
      >
      </mat-checkbox>
      Date
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-checkbox
        (click)="$event.stopPropagation()"
        (change)="$event ? selection.toggle(row) : null"
        [checked]="selection.isSelected(row)"
      >
      </mat-checkbox>
      {{ row.date }}
    </mat-cell>
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <!-- Particulars Column -->
  <ng-container matColumnDef="particulars">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
    <mat-cell *matCellDef="let row"
      ><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
    >
    <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
  </ng-container>

  <!-- Type Column -->
  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
    <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
  </ng-container>

  <!-- Narration Column -->
  <ng-container matColumnDef="narration">
    <mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
    <mat-cell *matCellDef="let row"
      >{{ row.narration }}
      <mat-chip-set>
        @for (tag of row.tags; track tag) {
          <mat-chip>{{ tag }}</mat-chip>
        }
      </mat-chip-set></mat-cell
    >
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <!-- Debit Column -->
  <ng-container matColumnDef="debit">
    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
    <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | clear }}</mat-cell>
    <mat-footer-cell *matFooterCellDef class="right">{{ dataSource.debit | currency: 'INR' }}</mat-footer-cell>
  </ng-container>

  <!-- Credit Column -->
  <ng-container matColumnDef="credit">
    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
    <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | clear }}</mat-cell>
    <mat-footer-cell *matFooterCellDef class="right">{{ dataSource.credit | currency: 'INR' }}</mat-footer-cell>
  </ng-container>

  <!-- Running Column -->
  <ng-container matColumnDef="running">
    <mat-header-cell *matHeaderCellDef class="right">Running</mat-header-cell>
    <mat-cell *matCellDef="let row" class="right">{{ row.running | currency: 'INR' | accounting }}</mat-cell>
    <mat-footer-cell *matFooterCellDef class="right">{{
      dataSource.running | currency: 'INR' | accounting
    }}</mat-footer-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row
    *matRowDef="let row; columns: displayedColumns"
    [class.selected]="selectedRowId === row.id"
    [class.unposted]="!row.posted && selectedRowId !== row.id"
    (click)="selectRow(row.id)"
  ></mat-row>
  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>

<mat-paginator
  #paginator
  [length]="dataSource.data.length"
  [pageIndex]="0"
  [pageSize]="50"
  [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
>
</mat-paginator>