LP1806087 Catalog holds display WIP (detail page)

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

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.html b/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.html
index 1bee0eb..daeeb89 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.html
@@ -2,74 +2,98 @@
 <eg-staff-banner bannerText="Hold Details (#{{hold.id}})" i18n-bannerText>
 </eg-staff-banner>
 
-<div class="row well-table">
-  <div class="well-label" i18n><div class="align-middle">Request Date</div></div>
-  <div class="well-value">{{hold.request_time | formatValue:'timestamp'}}</div>
-  <div class="well-label" i18n>Capture Date</div>
-  <div class="well-value">{{hold.capture_time | formatValue:'timestamp'}}</div>
-  <div class="well-label" i18n>Available On</div>
-  <div class="well-value">{{hold.shelf_time | formatValue:'timestamp'}}</div>
+<div class="row">
+  <div class="col-lg-3">
+    <button (click)="showListView()" class="btn btn-info" i18n>List View</button>
+  </div>
 </div>
-<div class="row well-table">
-  <div class="well-label" i18n>hold Type</div>
-  <div class="well-value">
-    {{hold.hold_type}}
-    <!-- TODO: add part data to wide holds 
-    <span *ngIf="hold.hold_type == 'P'">&nbsp;-&nbsp;{{hold.part_label}}</span>
-    -->
+
+<div class="well-table">
+  <div class="well-row">
+    <div class="well-label" i18n>Request Date</div>
+    <div class="well-value">{{hold.request_time | formatValue:'timestamp'}}</div>
+    <div class="well-label" i18n>Capture Date</div>
+    <div class="well-value">{{hold.capture_time | formatValue:'timestamp'}}</div>
+    <div class="well-label" i18n>Available On</div>
+    <div class="well-value">{{hold.shelf_time | formatValue:'timestamp'}}</div>
   </div>
-  <div class="well-label" i18n>Current Item</div>
-  <div class="well-value">
-    <a href="/eg/staff/cat/item/{{hold.cp_id}}">{{hold.cp_barcode}}</a>
+  <div class="well-row">
+    <div class="well-label" i18n>hold Type</div>
+    <div class="well-value">
+      {{hold.hold_type}}
+      <!-- TODO: add part data to wide holds 
+      <span *ngIf="hold.hold_type == 'P'">&nbsp;-&nbsp;{{hold.part_label}}</span>
+      -->
+    </div>
+    <div class="well-label" i18n>Current Item</div>
+    <div class="well-value">
+      <a href="/eg/staff/cat/item/{{hold.cp_id}}">{{hold.cp_barcode}}</a>
+    </div>
+    <div class="well-label" i18n>Call Number</div>
+    <div class="well-value">{{hold.cn_full_label}}</div>
   </div>
-  <div class="well-label" i18n>Call Number</div>
-  <div class="well-value">{{hold.cn_full_label}}</div>
-</div>
-<div class="row well-table">
-  <div class="well-label" i18n>Pickup Lib</div>
-  <div class="well-value">{{getOrgName(hold.pickup_lib)}}</div>
-  <div class="well-label" i18n>Status</div>
-  <div class="well-value">
-    <ng-container [ngSwitch]="hold.hold_status">
-      <div *ngSwitchCase="-1" i18n>Unknown Error</div>
-      <div *ngSwitchCase="1" i18n>Waiting for Item</div>
-      <div *ngSwitchCase="2" i18n>Waiting for Capture</div>
-      <div *ngSwitchCase="3" i18n>In Transit</div>
-      <div *ngSwitchCase="4" i18n>Ready for Pickup</div>
-      <div *ngSwitchCase="5" i18n>Hold Shelf Delay</div>
-      <div *ngSwitchCase="6" i18n>Canceled</div>
-      <div *ngSwitchCase="7" i18n>Suspended</div>
-      <div *ngSwitchCase="8" i18n>Wrong Shelf</div>
-      <div *ngSwitchCase="9" i18n>Fulfilled</div>
-    </ng-container>
+  <div class="well-row">
+    <div class="well-label" i18n>Pickup Lib</div>
+    <div class="well-value">{{hold.pl_shortname}}</div>
+    <div class="well-label" i18n>Status</div>
+    <div class="well-value">
+      <ng-container [ngSwitch]="hold.hold_status">
+        <div *ngSwitchCase="-1" i18n>Unknown Error</div>
+        <div *ngSwitchCase="1" i18n>Waiting for Item</div>
+        <div *ngSwitchCase="2" i18n>Waiting for Capture</div>
+        <div *ngSwitchCase="3" i18n>In Transit</div>
+        <div *ngSwitchCase="4" i18n>Ready for Pickup</div>
+        <div *ngSwitchCase="5" i18n>Hold Shelf Delay</div>
+        <div *ngSwitchCase="6" i18n>Canceled</div>
+        <div *ngSwitchCase="7" i18n>Suspended</div>
+        <div *ngSwitchCase="8" i18n>Wrong Shelf</div>
+        <div *ngSwitchCase="9" i18n>Fulfilled</div>
+      </ng-container>
+    </div>
+    <div class="well-label" i18n>Behind Desk</div>
+    <div class="well-value">{{hold.behind_desk == '1'}}</div>
+  </div>
+  <div class="well-row">
+    <div class="well-label" i18n>Current Shelf Lib</div>
+    <div class="well-value">{{getOrgName(hold.current_shelf_lib)}}</div>
+    <div class="well-label" i18n>Current Shelving Location</div>
+    <div class="well-value">{{hold.acpl_name}}</div>
+    <div class="well-label" i18n>Force Item Quality</div>
+    <div class="well-value">{{hold.mint_condition == '1'}}</div>
+  </div>
+  <div class="well-row">
+    <div class="well-label" i18n>Email Notify</div>
+    <div class="well-value">{{hold.email_notify == '1'}}</div>
+    <div class="well-label" i18n>Phone Notify</div>
+    <div class="well-value">{{hold.phone_notify}}</div>
+    <div class="well-label" i18n>SMS Notify</div>
+    <div class="well-value">{{hold.sms_notify}}</div>
+  </div>
+  <div class="well-row">
+    <div class="well-label" i18n>Cancel Cause</div>
+    <div class="well-value">{{hold.cancel_cause}}</div><!-- TODO: label -->
+    <div class="well-label" i18n>Cancel Time</div>
+    <div class="well-value">{{hold.cancel_time | formatValue:'timestamp'}}</div>
+    <div class="well-label" i18n>Cancel Note</div>
+    <div class="well-value">{{hold.cancel_note}}</div>
+  </div>
+  <div class="well-row">
+    <div class="well-label" i18n>Patron Name</div>
+    <div class="well-value">
+      <a href="/eg/staff/circ/patron/{{hold.usr_id}}/checkout">
+        {{hold.usr_display_name}}
+      </a>
+    </div>
+    <!-- force consistent width -->
+    <div class="well-label" i18n>Patron Barcode</div>
+    <div class="well-value">
+      <a href="/eg/staff/circ/patron/{{hold.usr_id}}/checkout">
+        {{hold.ucard_barcode}}
+      </a>
+    </div>
+    <!-- for balance -->
+    <div class="well-label" i18n></div>
+    <div class="well-label" i18n></div>
   </div>
-  <div class="well-label" i18n>Behind Desk</div>
-  <div class="well-value">{{hold.behind_desk == '1'}}</div>
-</div>
-<!--
-<div class="row well-table">
-  <div class="well-label" i18n>Current Shelf Lib</div>
-  <div class="well-value">{{hold.current_shelf_lib().shortname()}}</div>
-  <div class="well-label" i18n>Current Shelving Location</div>
-  <div class="well-value">{{hold.current_copy().location().name()}}</div>
-  <div class="well-label" i18n>Force Item Quality</div>
-  <div class="well-value">{{hold.mint_condition() == 't'}}</div>
-</div>
-<div class="row well-table">
-  <div class="well-label" i18n>Email Notify</div>
-  <div class="well-value">{{hold.email_notify() == 't'}}</div>
-  <div class="well-label" i18n>Phone Notify</div>
-  <div class="well-value">{{hold.phone_notify()}}</div>
-  <div class="well-label" i18n>SMS Notify</div>
-  <div class="well-value">{{hold.sms_notify()}}</div>
-</div>
-<div class="row well-table">
-  <div class="well-label" i18n>Cancel Cause</div>
-  <div class="well-value">{{hold.cancel_cause().label()}}</div>
-  <div class="well-label" i18n>Cancel Time</div>
-  <div class="well-value">{{hold.cancel_time() | date:$root.egDateAndTimeFormat}}</div>
-  <div class="well-label" i18n>Cancel Note</div>
-  <div class="well-value">{{hold.cancel_note()}}</div>
 </div>
--->
 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.ts b/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.ts
index 0bb25a9..ea5d171 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/holds-grid/hold-detail.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, Input, ViewChild} from '@angular/core';
+import {Component, OnInit, Input, Output, ViewChild, EventEmitter} from '@angular/core';
 import {Observable, Observer, of} from 'rxjs';
 import {map, filter} from 'rxjs/operators';
 import {IdlObject} from '@eg/core/idl.service';
@@ -27,12 +27,15 @@ export class HoldDetailComponent implements OnInit {
     }
 
     initDone: boolean;
+    @Output() onShowList: EventEmitter<any>;
 
     constructor(
         private net: NetService,
         private org: OrgService,
         private auth: AuthService,
-    ) {}
+    ) {
+        this.onShowList = new EventEmitter<any>();
+    }
 
     ngOnInit() {
         this.initDone = true;
@@ -56,6 +59,10 @@ export class HoldDetailComponent implements OnInit {
             return this.org.get(id).shortname();
         }
     }
+
+    showListView() {
+        this.onShowList.emit();
+    }
 }
 
 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holds-grid/holds-grid.component.html b/Open-ILS/src/eg2/src/app/staff/share/holds-grid/holds-grid.component.html
index 79d2b01..d52bd08 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holds-grid/holds-grid.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holds-grid/holds-grid.component.html
@@ -5,7 +5,8 @@
 <div class='eg-holds w-100 mt-3'>
 
   <ng-container *ngIf="mode == 'detail'">
-    <eg-hold-detail [wideHold]="detailHold"></eg-hold-detail>
+    <eg-hold-detail [wideHold]="detailHold" (onShowList)="mode='list'">
+    </eg-hold-detail>
   </ng-container>
 
   <ng-container *ngIf="mode == 'list'">