Settle Options are now stored in the Database and can be updated

bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTable } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ReportingLevel } from '../../core/reporting-level';
+import { SettleOption } from '../../core/settle-option';
+import { ToasterService } from '../../core/toaster.service';
+import { VoucherType } from '../../sales/bills/voucher-type';
+import { SettleOptionService } from '../settle-option.service';
+
+import { SettleOptionListDatasource } from './settle-option-list-datasource';
+
+@Component({
+  selector: 'app-settle-option-list',
+  templateUrl: './settle-option-list.component.html',
+  styleUrls: ['./settle-option-list.component.css'],
+})
+export class SettleOptionListComponent implements OnInit {
+  @ViewChild('table', { static: true }) table?: MatTable<SettleOption>;
+  data: BehaviorSubject<SettleOption[]> = new BehaviorSubject<SettleOption[]>([]);
+  dataSource: SettleOptionListDatasource = new SettleOptionListDatasource(this.data);
+  list: SettleOption[] = [];
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['name', 'voucherType', 'reportingLevel', 'hasReason', 'isFixture'];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private toaster: ToasterService,
+    private ser: SettleOptionService,
+  ) {
+    this.data.subscribe((data: SettleOption[]) => {
+      this.list = data;
+    });
+  }
+
+  ngOnInit() {
+    this.route.data
+      .pipe(
+        map((x) => {
+          const data = (x as { list: SettleOption[] }).list;
+          return data.map((y) => {
+            y.voucherType = y.voucherType;
+            y.reportingLevel = y.reportingLevel;
+            return y;
+          });
+        }),
+      )
+      .subscribe((list) => {
+        this.data.next(list);
+      });
+
+    this.route.data.subscribe((value) => {
+      const data = value as { list: SettleOption[] };
+      this.data.next(data.list);
+    });
+    this.dataSource = new SettleOptionListDatasource(this.data);
+  }
+
+  voucherType(input: VoucherType): string {
+    return VoucherType[input];
+  }
+
+  reportingLevel(input: ReportingLevel): string {
+    return ReportingLevel[input];
+  }
+}