Feature: Changed the unposted report to entries report with paging, sorting, etc.

2021-09-14 12:49:01 +05:30
parent d34c8ea0a4
commit 176559466a
35 changed files with 776 additions and 518 deletions
@@ -0,0 +1,138 @@
+<mat-card>
+  <mat-card-title-group>
+    <mat-card-title>Entries</mat-card-title>
+  </mat-card-title-group>
+  <form [formGroup]="form" fxLayout="column">
+    <div
+      fxLayout="row"
+      fxLayout.lt-md="column"
+      fxLayoutGap="20px"
+      fxLayoutGap.lt-md="0px"
+      fxLayoutAlign="space-around start"
+    >
+      <mat-form-field fxFlex="40%">
+        <input
+          matInput
+          [matDatepicker]="startDate"
+          placeholder="Create / Last Edit Date From"
+          formControlName="startDate"
+          autocomplete="off"
+        />
+        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+        <mat-datepicker #startDate></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field fxFlex="40%">
+        <input
+          matInput
+          [matDatepicker]="finishDate"
+          placeholder="Create / Last Edit Date Till"
+          formControlName="finishDate"
+          autocomplete="off"
+        />
+        <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+        <mat-datepicker #finishDate></mat-datepicker>
+      </mat-form-field>
+      <button mat-raised-button (click)="refresh()" fxFlex="20%">
+        <mat-icon>refresh</mat-icon>Refresh
+      </button>
+    </div>
+    <div
+      fxLayout="row"
+      fxLayout.lt-md="column"
+      fxLayoutGap="20px"
+      fxLayoutGap.lt-md="0px"
+      fxLayoutAlign="space-around start"
+    >
+      <mat-radio-group fxFlex="40%" formControlName="posted" (change)="togglePosted($event)">
+        <mat-radio-button class="my-margin" value="true"> Posted </mat-radio-button>
+        <mat-radio-button class="my-margin" value="false"> Not Posted </mat-radio-button>
+        <mat-radio-button class="my-margin" value="null"> All </mat-radio-button>
+      </mat-radio-group>
+      <mat-checkbox
+        fxFlex="40%"
+        formControlName="issue"
+        class="my-margin"
+        [checked]="issue"
+        (change)="toggleIssue()"
+      >
+        Include Issue Entries
+      </mat-checkbox>
+    </div>
+  </form>
+  <mat-card-content>
+    <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
+      <!-- Date Column -->
+      <ng-container matColumnDef="date">
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+        <mat-cell *matCellDef="let row"
+          ><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
+        >
+      </ng-container>
+
+      <!-- Type Column -->
+      <ng-container matColumnDef="voucherType">
+        <mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.type }}</mat-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-cell>
+      </ng-container>
+
+      <!-- DebitName Column -->
+      <ng-container matColumnDef="debitNames">
+        <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <ul>
+            <li *ngFor="let item of row.debitNames">{{ item }}</li>
+          </ul>
+        </mat-cell>
+      </ng-container>
+
+      <!-- CreditName Column -->
+      <ng-container matColumnDef="creditNames">
+        <mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <ul>
+            <li *ngFor="let item of row.creditNames">{{ item }}</li>
+          </ul>
+        </mat-cell>
+      </ng-container>
+
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
+
+      <!-- User Column -->
+      <ng-container matColumnDef="user">
+        <mat-header-cell *matHeaderCellDef mat-sort-header class="right">User</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <ul>
+            <li>{{ row.creationDate | localTime }}</li>
+            <li>{{ row.lastEditDate | localTime }}</li>
+            <li>{{ row.user.name }}</li>
+          </ul>
+        </mat-cell>
+      </ng-container>
+
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [class.unposted]="!row.posted && posted !== false && row.type !== 'Issue'"
+      ></mat-row>
+    </mat-table>
+
+    <mat-paginator
+      #paginator
+      [length]="dataSource.data.length"
+      [pageIndex]="0"
+      [pageSize]="50"
+      [pageSizeOptions]="[25, 50, 100, 250, 300]"
+    >
+    </mat-paginator>
+  </mat-card-content>
+</mat-card>