LP1952931 ASN Receiving UI

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.html b/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.html
index 828dc61..a46928f 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.html
@@ -22,10 +22,38 @@
 
 <div class="row border rounded mt-1" *ngFor="let container of containers">
   <div class="col-lg-12 d-flex pt-2 pb-2">
-    <div class="">{{container.container_code()}}</div>
-    <div class="ml-2">{{container.provider().name()}}</div>
-    <div class="ml-2">{{container.recv_date() | date:'short'}}</div>
-    <div class="ml-2">{{container.lading_number()}}</div>
-    <div class="ml-2">{{container.note()}}</div>
+    <label for="container-code" i18n>Container Code: </label>
+    <div class="ml-1 pr-1 border-right" id="container-code">{{container.container_code()}}</div>
+
+    <label class="ml-2" for="container-provider" i18n>Provider: </label>
+    <div class="ml-1 pr-1 border-right">{{container.provider().name()}}</div>
+
+    <label class="ml-2" for="container-provider" i18n>Receive Date: </label>
+    <div class="ml-1 pr-1 border-right">{{container.recv_date() | date:'short'}}</div>
+
+    <label class="ml-2" for="container-provider" i18n>Lading #: </label>
+    <div class="ml-1 pr-1 border-right">{{container.lading_number()}}</div>
+
+    <label class="ml-2" for="container-provider" i18n>Notes: </label>
+    <div class="ml-1">{{container.note()}}</div>
   </div>
 </div>
+
+<hr class="mt-2 mb-2"/>
+
+<eg-grid #grid [dataSource]="gridDataSource" (onRowActivate)="openLi($event)">
+  <eg-grid-column i18n-label label="Entry ID" path="entry.id" 
+    [index]="true" [hidden]="true"></eg-grid-column>
+  <eg-grid-column i18n-label label="Lineitem ID" path="lineitem.id"></eg-grid-column>
+  <eg-grid-column i18n-label label="Title" path="title"></eg-grid-column>
+  <eg-grid-column i18n-label label="ISBN" path="isbn"></eg-grid-column>
+  <eg-grid-column i18n-label label="ISSN" path="issn" [hidden]="true"></eg-grid-column>
+  <eg-grid-column i18n-label label="UPC" path="upc" [hidden]="true"></eg-grid-column>
+  <eg-grid-column i18n-label label="Shipped" path="entry.item_count"></eg-grid-column>
+  <eg-grid-column i18n-label label="Received" path="lineitem.order_summary.recv_count"></eg-grid-column>
+  <eg-grid-column i18n-label label="Invoiced" path="lineitem.order_summary.invoice_count"></eg-grid-column>
+  <eg-grid-column i18n-label label="Canceled" path="lineitem.order_summary.cancel_count"></eg-grid-column>
+  <eg-grid-column i18n-label label="Delayed" path="lineitem.order_summary.delay_count"></eg-grid-column>
+</eg-grid>
+
+

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.ts
index cb53499..f8bd153 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.ts
@@ -1,8 +1,14 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
+import {Location} from '@angular/common';
+import {Observable, Observer, of, from} from 'rxjs';
+import {tap} from 'rxjs/operators';
 import {IdlObject} from '@eg/core/idl.service';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {LineitemService} from '../lineitem/lineitem.service';
+import {Pager} from '@eg/share/util/pager';
+import {GridDataSource, GridColumn, GridCellTextGenerator} from '@eg/share/grid/grid';
+import {GridComponent} from '@eg/share/grid/grid.component';
 
 @Component({
   templateUrl: 'receive.component.html'
@@ -11,28 +17,108 @@ export class AsnReceiveComponent implements OnInit {
 
     barcode = '';
 
-    // Technically possible for one barcode to match across providers.
+    // Technically possible for one container code to match across providers.
+    container: IdlObject;
+    entries: IdlObject[] = [];
     containers: IdlObject[] = [];
 
+    @ViewChild('grid') private grid: GridComponent;
+    gridDataSource: GridDataSource = new GridDataSource();
+
     constructor(
         private route: ActivatedRoute,
+        private router: Router,
+        private ngLocation: Location,
         private pcrud: PcrudService,
         private li: LineitemService
     ) {}
 
     ngOnInit() {
-    }
+        this.barcode = this.route.snapshot.paramMap.get('containerCode') || '';
+        if (this.barcode) {
+            this.findContainer();
+        }
 
-    findContainer() {
+        this.gridDataSource.getRows = (pager: Pager, sort: any[]) => {
+            return from(this.entries.map(e => this.gridifyEntry(e)));
+        };
+    }
 
-        console.log('BARCODE', this.barcode);
+    gridifyEntry(entry: IdlObject): any {
+        const li = entry.lineitem();
+        return {
+            entry: entry,
+            lineitem: li,
+            title: this.li.getFirstAttributeValue(li, 'title'),
+            author: this.li.getFirstAttributeValue(li, 'author'),
+            isbn: this.li.getFirstAttributeValue(li, 'isbn'),
+            issn: this.li.getFirstAttributeValue(li, 'issn'),
+            upc: this.li.getFirstAttributeValue(li, 'upc')
+        };
+    }
 
+    findContainer() {
+        this.container = null;
         this.containers = [];
+        this.entries = [];
 
         this.pcrud.search('acqsn',
             {container_code: this.barcode},
             {flesh: 1, flesh_fields: {acqsn: ['entries', 'provider']}}
-        ).subscribe(sn => this.containers.push(sn));
+        ).subscribe(
+          sn => this.containers.push(sn),
+          _ => {},
+          () => {
+
+              // TODO handle multiple containers w/ same code
+              if (this.containers.length === 1) {
+                  this.container = this.containers[0];
+                  this.loadContainer();
+              }
+
+              const node = document.getElementById('barcode-search-input');
+              (node as HTMLInputElement).select();
+          }
+        );
+    }
+
+    loadContainer() {
+        if (!this.container) { return; }
+
+        const entries = this.container.entries();
+
+        if (entries.length === 0) { return; }
+
+        this.li.getFleshedLineitems(entries.map(e => e.lineitem()), {})
+        .subscribe(
+            li_struct => {
+                // Flesh the lineitems directly in the shipment entry
+                const entry = entries.filter(e => e.lineitem() === li_struct.id)[0];
+                entry.lineitem(li_struct.lineitem);
+            },
+            _ => {},
+            () => {
+                this.entries = entries;
+                this.grid.reload();
+            }
+        );
+    }
+
+    openLi(row: any) {
+        let url = this.ngLocation.prepareExternalUrl(
+            this.router.serializeUrl(
+                this.router.createUrlTree(
+                    ['/staff/acq/po/', row.lineitem.purchase_order().id()]
+                )
+            )
+        );
+
+        // this.router.createUrlTree() documents claim it supports
+        // {fragment: row.lineitem.id()}, but it's not getting added to
+        // the URL. Adding manually.
+        url += '#' + row.lineitem.id();
+
+        window.open(url);
     }
 }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/asn/routing.module.ts b/Open-ILS/src/eg2/src/app/staff/acq/asn/routing.module.ts
index ca60120..b4d0f67 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/asn/routing.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/asn/routing.module.ts
@@ -12,6 +12,10 @@ import {AsnReceiveComponent} from './receive.component';
 const routes: Routes = [{
   path: 'receive',
   component: AsnReceiveComponent
+}, {
+  path: 'receive/:containerCode',
+  component: AsnReceiveComponent
+
 }];
 
 @NgModule({