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,143 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatRadioChange } from '@angular/material/radio';
+import { MatSort } from '@angular/material/sort';
+import { SortDirection } from '@angular/material/sort/sort-direction';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as moment from 'moment';
+
+import { EntriesDatasource } from './entries-datasource';
+import { Report } from './report';
+
+@Component({
+  selector: 'app-entries',
+  templateUrl: './entries.component.html',
+  styleUrls: ['./entries.component.css'],
+})
+export class EntriesComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
+  info: Report = new Report();
+  dataSource: EntriesDatasource = new EntriesDatasource(this.info.report, 0);
+  form: FormGroup;
+  displayedColumns = [
+    'date',
+    'voucherType',
+    'narration',
+    'debitNames',
+    'creditNames',
+    'amount',
+    'user',
+  ];
+
+  posted: boolean | null = null;
+  issue: boolean = false;
+  constructor(private route: ActivatedRoute, private router: Router, private fb: FormBuilder) {
+    this.form = this.fb.group({
+      startDate: '',
+      finishDate: '',
+      posted: '',
+      issue: '',
+    });
+  }
+
+  ngOnInit() {
+    this.route.data.subscribe((value) => {
+      const data = value as { info: Report };
+      this.info = data.info;
+      const queryMap = this.route.snapshot.queryParamMap;
+      const startDateO = queryMap.get('s');
+      const finishDateO = queryMap.get('f');
+      const startDate = startDateO !== null ? moment(startDateO, 'DD-MMM-YYYY').toDate() : '';
+      const finishDate = finishDateO !== null ? moment(finishDateO, 'DD-MMM-YYYY').toDate() : '';
+      const postedO = queryMap.get('p');
+      this.posted = postedO !== null ? postedO === 'true' : null;
+      const pageSizeO = queryMap.get('ps');
+      const pageSize = pageSizeO !== null ? +pageSizeO : 50;
+      const pageIndexO = queryMap.get('pi');
+      const pageIndex = pageIndexO !== null ? +pageIndexO : 0;
+      const activeSortO = queryMap.get('a');
+      const activeSort = activeSortO !== null ? (activeSortO as string) : 'date';
+      const sortDirectionO = queryMap.get('d');
+      const sortDirection = sortDirectionO !== null ? (sortDirectionO as SortDirection) : 'desc';
+      const issueO = queryMap.get('i');
+      this.issue = issueO !== null ? issueO === 'true' : false;
+      this.form.setValue({
+        startDate: startDate,
+        finishDate: finishDate,
+        posted: postedO ?? 'null',
+        issue: this.issue,
+      });
+      if (this.posted === null || this.posted) {
+        (this.form.get('issue') as FormControl).enable();
+      } else {
+        (this.form.get('issue') as FormControl).disable();
+      }
+      this.dataSource = new EntriesDatasource(
+        this.info.report,
+        this.info.counts,
+        this.paginator,
+        this.sort,
+        pageSize,
+        pageIndex,
+        activeSort,
+        sortDirection,
+      );
+    });
+    this.sort?.sortChange.subscribe((x) =>
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { a: this.sort?.active ?? 'date', d: this.sort?.direction },
+        queryParamsHandling: 'merge',
+      }),
+    );
+    this.paginator?.page.subscribe((x) =>
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { ps: this.paginator?.pageSize, pi: this.paginator?.pageIndex },
+        queryParamsHandling: 'merge',
+      }),
+    );
+  }
+
+  refresh() {
+    const formModel = this.form.value;
+    const startDate = formModel.startDate
+      ? moment(formModel.startDate).format('DD-MMM-YYYY')
+      : null;
+    const finishDate = formModel.finishDate
+      ? moment(formModel.finishDate).format('DD-MMM-YYYY')
+      : null;
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { s: startDate, f: finishDate },
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  togglePosted($event: MatRadioChange) {
+    if ($event.value === 'true') {
+      this.posted = true;
+    } else if ($event.value === 'false') {
+      this.posted = false;
+      this.issue = false;
+    } else {
+      this.posted = null;
+    }
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { p: this.posted, i: this.issue || null },
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  toggleIssue() {
+    this.issue = !this.issue;
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { i: this.issue || null },
+      queryParamsHandling: 'merge',
+    });
+  }
+}