LP1859701 Cash Reports Tidying
authorBill Erickson <berickxx@gmail.com>
Thu, 30 Jun 2022 20:57:52 +0000 (16:57 -0400)
committerMichele Morgan <mmorgan@noblenet.org>
Fri, 28 Oct 2022 19:45:51 +0000 (15:45 -0400)
* Avoid manual currency data formatting when it can happen in the template.
* Replace ngbTab with ngbNav.  ngbTab is deprecated.
* Tweak date filter form layout to fix some obscured fields.
* Remove no longer needed view child static specifiers
* Use 2-space "tabs" in HTML consistent w/ other angular components.
* Remove unused code / css styles
* ng lint

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jason Etheridge <jason@EquinoxOLI.org>
Signed-off-by: Jane Sandberg <js7389@princeton.edu>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>

Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.module.ts
Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/routing.module.ts
Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/user-dialog.component.ts

index 4191d6c..bb136bc 100644 (file)
-<eg-title i18n-prefix prefix="Cash Reports"></eg-title>
 <eg-staff-banner bannerText="Cash Reports" i18n-bannerText>
 </eg-staff-banner>
 
-<div class="mb-5 text-center">
-    <div>
-        <div class="row col-lg-12 ml-auto mr-auto">
-            <div class="input-group col-lg-3 ml-auto mr-auto">
-                <div class="input-group-prepend col-lg-12">
-                    <div class="input-group-text" i18n>Start Date</div> 
-                    <eg-date-select [initialDate]="today" (onChangeAsYmd)="onStartDateChange($event)"></eg-date-select>
-                </div>
-            </div>
-            <div class="input-group col-lg-3 ml-auto mr-auto">
-                <div class="input-group-prepend col-lg-12">
-                    <div class="input-group-text" i18n>End Date</div> 
-                    <eg-date-select [initialDate]="today" (onChangeAsYmd)="onEndDateChange($event)"></eg-date-select>
-                </div>
-            </div>
-            <div class="input-group col-lg-4">
-                <div class="input-group-prepend col-lg-6 ml-auto mr-auto">
-                    <div class="input-group-text" i18n>View reports for</div>
-                    <eg-org-select [applyDefault]="true" [disableOrgs]="disabledOrgs" (onChange)="onOrgChange($event)"></eg-org-select>
-                </div>
-                <button class="btn btn-primary col-lg-2" (click)="searchForData(startDate, endDate)">Submit</button>
-            </div>
+<div class="mb-5">
+  <div>
+    <div class="row">
+      <div class="input-group col-lg-3">
+        <div class="input-group-prepend">
+          <div class="input-group-text" i18n>Start Date</div> 
+          <eg-date-select [initialDate]="today" (onChangeAsYmd)="onStartDateChange($event)"></eg-date-select>
         </div>
+      </div>
+      <div class="input-group col-lg-3">
+        <div class="input-group-prepend">
+          <div class="input-group-text" i18n>End Date</div> 
+          <eg-date-select [initialDate]="today" (onChangeAsYmd)="onEndDateChange($event)"></eg-date-select>
+        </div>
+      </div>
+      <div class="input-group col-lg-4">
+        <div class="input-group-prepend">
+          <div class="input-group-text" i18n>View reports for</div>
+        </div>
+        <eg-org-select [applyDefault]="true" [disableOrgs]="disabledOrgs" (onChange)="onOrgChange($event)"></eg-org-select>
+      </div>
+      <div class="col-lg-2">
+        <button class="btn btn-primary" (click)="searchForData(startDate, endDate)">Submit</button>
+      </div>
     </div>
+  </div>
 </div>
-<ngb-tabset [destroyOnHide]="false" (tabChange)="eraseUserGrid()">
-    <ngb-tab title="Desk Payments">
-      <ng-template ngbTabContent>
-        <div class="mb-5">
-            <div class="row">
-                <div class="col-sm-2" i18n>Total Cash Payments</div>
-                <div class="col-sm-10">{{deskTotals.formatted_cash_payment}}</div>
-            </div>
-            <div class="row">
-                <div class="col-sm-2" i18n>Total Check Payments</div>
-                <div class="col-sm-10">{{deskTotals.formatted_check_payment}}</div>
-            </div>
-            <div class="row">
-                <div class="col-sm-2" i18n>Total Credit Card Payments</div>
-                <div class="col-sm-10">{{deskTotals.formatted_credit_card_payment}}</div>
-            </div>
-            <eg-grid #deskPaymentGrid
-                [disableSelect]="true"
-                [disablePaging]="true"
-                [dataSource]="deskPaymentDataSource"
-                [sortable]="false">
-                <eg-grid-column label="Workstation" name="workstation" [index]="true" i18n-label></eg-grid-column>
-                <eg-grid-column label="Cash Payment" name="cash_payment" i18n-label></eg-grid-column>
-                <eg-grid-column label="Check Payment" name="check_payment" i18n-label></eg-grid-column>
-                <eg-grid-column label="Credit Card Payment" name="credit_card_payment" i18n-label></eg-grid-column>
-            </eg-grid>
+
+<ul ngbNav #cashReportsNav="ngbNav" class="nav-tabs"
+  [destroyOnHide]="false" activeId="deskPayments" (navChange)="eraseUserGrid()">
+  <li ngbNavItem="deskPayments">
+    <a ngbNavLink i18n>Desk Payments</a>
+    <ng-template ngbNavContent>
+      <div class="mt-3">
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Cash Payments</div>
+          <div class="col-sm-10">{{deskTotals.cash_payment | currency}}</div>
+        </div>
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Check Payments</div>
+          <div class="col-sm-10">{{deskTotals.check_payment | currency}}</div>
+        </div>
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Credit Card Payments</div>
+          <div class="col-sm-10">{{deskTotals.credit_card_payment | currency}}</div>
+        </div>
+        <eg-grid #deskPaymentGrid
+          [disableSelect]="true"
+          [disablePaging]="true"
+          [dataSource]="deskPaymentDataSource"
+          [sortable]="false">
+          <eg-grid-column label="Workstation" name="workstation" [index]="true" i18n-label></eg-grid-column>
+          <eg-grid-column label="Cash Payment" name="cash_payment" i18n-label datatype="money"></eg-grid-column>
+          <eg-grid-column label="Check Payment" name="check_payment" i18n-label datatype="money"></eg-grid-column>
+          <eg-grid-column label="Credit Card Payment" name="credit_card_payment" i18n-label datatype="money"></eg-grid-column>
+        </eg-grid>
+      </div>
+    </ng-template>
+  </li>
+  <li ngbNavItem="userPayments">
+    <a ngbNavLink i18n>User Payments</a>
+    <ng-template ngbNavContent>
+      <div class="mt-3">
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Credit Payments</div>
+          <div class="col-sm-10">{{userTotals.credit_payment | currency}}</div>
+        </div>
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Forgive Payments</div>
+          <div class="col-sm-10">{{userTotals.forgive_payment | currency}}</div>
+        </div>
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Work Payments</div>
+          <div class="col-sm-10">{{userTotals.work_payment | currency}}</div>
         </div>
-      </ng-template>
-    </ngb-tab>
-    <ngb-tab title="User Payments">
-        <ng-template ngbTabContent>
-            <div class="mb-3">
-                <div class="row">
-                    <div class="col-sm-2" i18n>Total Credit Payments</div>
-                    <div class="col-sm-10">{{userTotals.formatted_credit_payment}}</div>
-                </div>
-                <div class="row">
-                    <div class="col-sm-2" i18n>Total Forgive Payments</div>
-                    <div class="col-sm-10">{{userTotals.formatted_forgive_payment}}</div>
-                </div>
-                <div class="row">
-                    <div class="col-sm-2" i18n>Total Work Payments</div>
-                    <div class="col-sm-10">{{userTotals.formatted_work_payment}}</div>
-                </div>
-                <div class="row">
-                    <div class="col-sm-2" i18n>Total Goods Payments</div>
-                    <div class="col-sm-10">{{userTotals.formatted_goods_payment}}</div>
-                </div>
-                <eg-grid #userPaymentGrid
-                    (onRowActivate) = "onRowActivate($event)"
-                    [disableSelect]="true"
-                    [disablePaging]="true"
-                    [dataSource]="userPaymentDataSource"
-                    [sortable]="false">
-                    <eg-grid-column label="User" name="usr" [index]="true" i18n-label></eg-grid-column>
-                    <eg-grid-column label="Credit Payment" name="credit_payment" i18n-label></eg-grid-column>
-                    <eg-grid-column label="Forgive Payment" name="forgive_payment" i18n-label></eg-grid-column>
-                    <eg-grid-column label="Work Payment" name="work_payment" i18n-label></eg-grid-column>
-                    <eg-grid-column label="Goods Payment" name="goods_payment" i18n-label></eg-grid-column>
-                </eg-grid>
-            </div>
-        </ng-template>
-      </ngb-tab>
-</ngb-tabset>
+        <div class="row">
+          <div class="col-sm-2" i18n>Total Goods Payments</div>
+          <div class="col-sm-10">{{userTotals.goods_payment | currency}}</div>
+        </div>
+        <eg-grid #userPaymentGrid
+          (onRowActivate) = "onRowActivate($event)"
+          [disableSelect]="true"
+          [disablePaging]="true"
+          [dataSource]="userPaymentDataSource"
+          [sortable]="false">
+          <eg-grid-column label="User" name="usr" [index]="true" i18n-label></eg-grid-column>
+          <eg-grid-column label="Credit Payment" name="credit_payment" i18n-label datatype="money"></eg-grid-column>
+          <eg-grid-column label="Forgive Payment" name="forgive_payment" i18n-label datatype="money"></eg-grid-column>
+          <eg-grid-column label="Work Payment" name="work_payment" i18n-label datatype="money"></eg-grid-column>
+          <eg-grid-column label="Goods Payment" name="goods_payment" i18n-label datatype="money"></eg-grid-column>
+        </eg-grid>
+      </div>
+    </ng-template>
+  </li>
+</ul>
+<div [ngbNavOutlet]="cashReportsNav"></div>
 
 <eg-user-dialog #userDialog>
-    <ng-container *ngIf="userDataSource.data && userDataSource.data.length>0">
-        <eg-grid #userGrid
-            [disableSelect]="true"
-            [disablePaging]="true"
-            [dataSource]="userDataSource"
-            [sortable]="false">
-            <eg-grid-column label="Card" name="card" [index]="true" i18n-label></eg-grid-column>
-            <eg-grid-column label="Email" name="email" i18n-label></eg-grid-column>
-            <eg-grid-column label="First Name" name="first_given_name" i18n-label></eg-grid-column>
-            <eg-grid-column label="Family Name" name="family_name" i18n-label></eg-grid-column>
-            <eg-grid-column label="Home OU" name="home_ou" i18n-label></eg-grid-column>
-        </eg-grid>
-    </ng-container>
+  <ng-container *ngIf="userDataSource.data && userDataSource.data.length>0">
+    <eg-grid #userGrid
+      [disableSelect]="true"
+      [disablePaging]="true"
+      [dataSource]="userDataSource"
+      [sortable]="false">
+      <eg-grid-column label="Card" name="card" [index]="true" i18n-label></eg-grid-column>
+      <eg-grid-column label="Email" name="email" i18n-label></eg-grid-column>
+      <eg-grid-column label="First Name" name="first_given_name" i18n-label></eg-grid-column>
+      <eg-grid-column label="Family Name" name="family_name" i18n-label></eg-grid-column>
+      <eg-grid-column label="Home OU" name="home_ou" i18n-label></eg-grid-column>
+    </eg-grid>
+  </ng-container>
 </eg-user-dialog>
index ae98f80..e131e1b 100644 (file)
@@ -1,7 +1,6 @@
 import {Component, OnInit, Input, ViewChild} from '@angular/core';
 import {GridComponent} from '@eg/share/grid/grid.component';
 import {GridDataSource, GridColumn, GridRowFlairEntry} from '@eg/share/grid/grid';
-import {FormatService} from '@eg/core/format.service';
 import {IdlService} from '@eg/core/idl.service';
 import {NetService} from '@eg/core/net.service';
 import {AuthService} from '@eg/core/auth.service';
@@ -12,21 +11,14 @@ class DeskTotals {
     cash_payment = 0;
     check_payment = 0;
     credit_card_payment = 0;
-    formatted_cash_payment = '0.00';
-    formatted_check_payment = '0.00';
-    formatted_credit_card_payment = '0.00';
-};
+}
 
 class UserTotals {
     forgive_payment = 0;
     work_payment = 0;
     credit_payment = 0;
     goods_payment = 0;
-    formatted_forgive_payment = '0.00';
-    formatted_work_payment = '0.00';
-    formatted_credit_payment = '0.00';
-    formatted_goods_payment = '0.00';
-};
+}
 
 @Component({
     templateUrl: './cash-reports.component.html'
@@ -45,20 +37,20 @@ export class CashReportsComponent implements OnInit {
     deskTotals = new DeskTotals();
     userTotals = new UserTotals();
     disabledOrgs = [];
+    activeTab = 'deskPayments';
 
     // Default sort field, used when no grid sorting is applied.
     @Input() sortField: string;
-    @ViewChild('userDialog', { static: true }) userDialog: UserDialogComponent;
-    @ViewChild('deskPaymentGrid', { static: true }) deskPaymentGrid: GridComponent;
-    @ViewChild('userPaymentGrid', { static: true }) userPaymentGrid: GridComponent;
-    @ViewChild('userGrid', { static: true }) userGrid: GridComponent;
+    @ViewChild('userDialog') userDialog: UserDialogComponent;
+    @ViewChild('deskPaymentGrid') deskPaymentGrid: GridComponent;
+    @ViewChild('userPaymentGrid') userPaymentGrid: GridComponent;
+    @ViewChild('userGrid') userGrid: GridComponent;
 
     constructor(
         private idl: IdlService,
         private net: NetService,
         private org: OrgService,
-        private format: FormatService,
-        private auth: AuthService){}
+        private auth: AuthService) {}
 
     ngOnInit() {
         this.disabledOrgs = this.getFilteredOrgList();
@@ -66,7 +58,7 @@ export class CashReportsComponent implements OnInit {
     }
 
     onRowActivate(userObject) {
-        if(userObject.user && this.userDataSource.data.length === 0) {
+        if (userObject.user && this.userDataSource.data.length === 0) {
             this.userDataSource.data = [userObject.user];
             this.showUserInformation();
         } else {
@@ -75,16 +67,7 @@ export class CashReportsComponent implements OnInit {
     }
 
     showUserInformation() {
-        return new Promise((resolve, reject) => {
-            this.userDialog.open({size: 'lg'}).subscribe(
-                result => {
-                    resolve(result);
-                },
-                error => {
-                    reject(error);
-                }
-            );
-        });
+        return this.userDialog.open({size: 'lg'}).toPromise();
     }
 
     searchForData(start, end) {
@@ -94,7 +77,8 @@ export class CashReportsComponent implements OnInit {
                 'open-ils.circ',
                 'open-ils.circ.money.org_unit.desk_payments',
                 this.auth.token(), this.selectedOrg.id(), start, end));
-        this.fillGridData(this.userIdlClass,'userPaymentDataSource',
+
+        this.fillGridData(this.userIdlClass, 'userPaymentDataSource',
             this.net.request(
                 'open-ils.circ',
                 'open-ils.circ.money.org_unit.user_payments',
@@ -103,26 +87,12 @@ export class CashReportsComponent implements OnInit {
 
     fillGridData(idlClass, dataSource, data) {
         data.subscribe((result) => {
-            let dataForTotal;
-            if(idlClass === this.deskIdlClass) {
-                dataForTotal = this.getDeskTotal(result);
-                this.deskTotals.formatted_cash_payment = this.format.transform({value: this.deskTotals.cash_payment, datatype: 'money'});
-                this.deskTotals.formatted_check_payment = this.format.transform({value: this.deskTotals.check_payment, datatype: 'money'});
-                this.deskTotals.formatted_credit_card_payment = this.format.transform({value: this.deskTotals.credit_card_payment, datatype: 'money'});
-            } else if(idlClass === this.userIdlClass) {
-                dataForTotal = this.getUserTotal(result);
-                this.userTotals.formatted_credit_payment = this.format.transform({value: this.userTotals.credit_payment, datatype: 'money'});
-                this.userTotals.formatted_forgive_payment = this.format.transform({value: this.userTotals.forgive_payment, datatype: 'money'});
-                this.userTotals.formatted_work_payment = this.format.transform({value: this.userTotals.work_payment, datatype: 'money'});
-                this.userTotals.formatted_goods_payment = this.format.transform({value: this.userTotals.goods_payment, datatype: 'money'});
+            if (idlClass === this.userIdlClass) {
                 result.forEach((userObject, index) => {
                     result[index].user = userObject.usr();
-                    result[index].usr(userObject.usr().usrname())
+                    result[index].usr(userObject.usr().usrname());
                 });
             }
-            //if(result.length > 0) {
-            //    result.push(dataForTotal);
-            //}
             this[dataSource].data = result;
             this.eraseUserGrid();
         });
@@ -134,8 +104,9 @@ export class CashReportsComponent implements OnInit {
 
     getDeskTotal(idlObjects) {
         this.deskTotals = new DeskTotals();
-        if(idlObjects.length > 0) {
-            let idlObjectFormat = this.idl.create("mwps")
+
+        if (idlObjects.length > 0) {
+            const idlObjectFormat = this.idl.create('mwps');
             idlObjects.forEach((idlObject) => {
                 this.deskTotals['cash_payment'] += parseFloat(idlObject.cash_payment());
                 this.deskTotals['check_payment'] += parseFloat(idlObject.check_payment());
@@ -150,8 +121,8 @@ export class CashReportsComponent implements OnInit {
 
     getUserTotal(idlObjects) {
         this.userTotals = new UserTotals();
-        if(idlObjects.length > 0) {
-            let idlObjectFormat = this.idl.create("mups")
+        if (idlObjects.length > 0) {
+            const idlObjectFormat = this.idl.create('mups');
             idlObjects.forEach((idlObject, index) => {
                 this.userTotals['forgive_payment'] += parseFloat(idlObject.forgive_payment());
                 this.userTotals['work_payment'] += parseFloat(idlObject.work_payment());
@@ -168,17 +139,10 @@ export class CashReportsComponent implements OnInit {
     }
 
     getFilteredOrgList() {
-        let orgFilter = {canHaveUsers:false}
+        const orgFilter = {canHaveUsers: false};
         return this.org.filterList(orgFilter, true);
     }
 
-    // getOrgIds(orgs) {
-    //     orgs.forEach((element) => {
-    //         this.disabledOrgs.push(element.id());
-    //     });
-    //     return orgs;
-    // }
-
     onStartDateChange(date) {
         this.startDate = date;
     }
index dec49bb..5ab480f 100644 (file)
@@ -2,8 +2,8 @@ import {NgModule} from '@angular/core';
 import {TreeModule} from '@eg/share/tree/tree.module';
 import {StaffCommonModule} from '@eg/staff/common.module';
 import {CashReportsComponent} from './cash-reports.component';
-import {UserDialogComponent} from './user-dialog.component'
-import {CashReportsRoutingModule} from './routing.module'
+import {UserDialogComponent} from './user-dialog.component';
+import {CashReportsRoutingModule} from './routing.module';
 
 @NgModule({
   declarations: [
@@ -22,4 +22,5 @@ import {CashReportsRoutingModule} from './routing.module'
 })
 
 export class CashReportsModule {
-}
\ No newline at end of file
+}
+
index 65f7620..b9b0e9d 100644 (file)
@@ -12,4 +12,5 @@ const routes: Routes = [{
   exports: [RouterModule]
 })
 
-export class CashReportsRoutingModule {}
\ No newline at end of file
+export class CashReportsRoutingModule {}
+
index 480e720..872aeea 100644 (file)
@@ -4,7 +4,7 @@ import {Observable} from 'rxjs';
 import { DialogComponent } from '@eg/share/dialog/dialog.component';
 
 @Component({
-    selector:'eg-user-dialog',
+    selector: 'eg-user-dialog',
     templateUrl: './user-dialog.component.html'
 })
 export class UserDialogComponent extends DialogComponent implements OnInit {