From 731ce74057b803582247ee8cf4c35af02580ca6a Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Wed, 10 Jul 2019 11:57:18 -0400
Subject: [PATCH] LP1834665 Bib summary formats and jacket

Display the format icon and label along the top of the Angular bib
record summary.

Display the jacket image along the left of the bib summary when the
summary is in expaded mode.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
 .../bib-summary/bib-summary.component.css     |  11 ++
 .../bib-summary/bib-summary.component.html    | 122 +++++++++++-------
 .../bib-summary/bib-summary.component.ts      |  10 +-
 3 files changed, 92 insertions(+), 51 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.css

diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.css b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.css
new file mode 100644
index 0000000000..11e8804226
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.css
@@ -0,0 +1,11 @@
+
+
+.eg-bib-summary .card-header {
+    padding: .25rem .5rem
+}
+
+.jacket {
+    padding: 3px;
+    width: 100%;
+}
+
diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html
index 530e1080e2..45345d2501 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html
@@ -3,6 +3,15 @@
   <div class="card-header d-flex">
     <div class="font-weight-bold">
       Record Summary
+      <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
+        <ng-container *ngFor="let icon of summary.attributes.icon_format">
+          <span class="pr-1 pl-2">
+            <img class="pr-1"
+              src="/images/format_icons/icon_format/{{icon}}.png"/>
+            <span class="font-weight-normal">{{iconFormatLabel(icon)}}</span>
+          </span>
+        </ng-container>
+      </ng-container>
     </div>
     <div class="flex-1"></div>
     <div>
@@ -18,53 +27,70 @@
       </a>
     </div>
   </div>
-  <div class="card-body">
-    <ul class="list-group list-group-flush">
-      <li class="list-group-item">
-        <div class="d-flex">
-          <div class="flex-1 font-weight-bold" i18n>Title:</div>
-          <div class="flex-3">{{summary.display.title}}</div>
-          <div class="flex-1 font-weight-bold pl-1" i18n>Edition:</div>
-          <div class="flex-1">{{summary.display.edition}}</div>
-          <div class="flex-1 font-weight-bold" i18n>TCN:</div>
-          <div class="flex-1">{{summary.record.tcn_value()}}</div>
-          <div class="flex-1 font-weight-bold pl-1" i18n>Created By:</div>
-          <div class="flex-1" *ngIf="summary.record.creator().usrname">
-            <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
-              {{summary.record.creator().usrname()}}
-            </a>
-          </div>
-        </div>
-      </li>
-      <li class="list-group-item" *ngIf="expand">
-        <div class="d-flex">
-          <div class="flex-1 font-weight-bold" i18n>Author:</div>
-          <div class="flex-3">{{summary.display.author}}</div>
-          <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate:</div>
-          <div class="flex-1">{{summary.display.pubdate}}</div>
-          <div class="flex-1 font-weight-bold" i18n>Database ID:</div>
-          <div class="flex-1">{{summary.id}}</div>
-          <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By:</div>
-          <div class="flex-1" *ngIf="summary.record.editor().usrname">
-            <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
-              {{summary.record.editor().usrname()}}
-            </a>
-          </div>
-        </div>
-      </li>
-      <li class="list-group-item" *ngIf="expand">
-        <div class="d-flex">
-          <div class="flex-1 font-weight-bold" i18n>Bib Call #:</div>
-          <div class="flex-3">{{summary.bibCallNumber}}</div>
-          <div class="flex-1 font-weight-bold" i18n>Record Owner:</div>
-          <div class="flex-1">{{orgName(summary.record.owner())}}</div>
-          <div class="flex-1 font-weight-bold pl-1" i18n>Created On:</div>
-          <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
-          <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited On:</div>
-          <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
-        </div>
-      </li>
-    </ul>
-  </div>
+  <div class="row">
+
+    <!-- in expanded display, show the jacket image along the left -->
+    <ng-container *ngIf="expand">
+      <div class="col-lg-1 pr-0">
+        <a href="/opac/extras/ac/jacket/large/r/{{summary.id}}">
+          <img class="jacket jacket-medium"
+            alt="Jacket Image" i18n-alt
+            src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
+        </a>
+      </div>
+    </ng-container>
+    
+    <!-- make room for the jacket image when expanded -->
+    <div [ngClass]="{'col-lg-11 pl-0': expand, 'col-lg-12': !expand}">
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="flex-1 font-weight-bold" i18n>Title:</div>
+              <div class="flex-3">{{summary.display.title}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Edition:</div>
+              <div class="flex-1">{{summary.display.edition}}</div>
+              <div class="flex-1 font-weight-bold" i18n>TCN:</div>
+              <div class="flex-1">{{summary.record.tcn_value()}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Created By:</div>
+              <div class="flex-1" *ngIf="summary.record.creator().usrname">
+                <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
+                  {{summary.record.creator().usrname()}}
+                </a>
+              </div>
+            </div>
+          </li>
+          <li class="list-group-item" *ngIf="expand">
+            <div class="d-flex">
+              <div class="flex-1 font-weight-bold" i18n>Author:</div>
+              <div class="flex-3">{{summary.display.author}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate:</div>
+              <div class="flex-1">{{summary.display.pubdate}}</div>
+              <div class="flex-1 font-weight-bold" i18n>Database ID:</div>
+              <div class="flex-1">{{summary.id}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By:</div>
+              <div class="flex-1" *ngIf="summary.record.editor().usrname">
+                <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
+                  {{summary.record.editor().usrname()}}
+                </a>
+              </div>
+            </div>
+          </li>
+          <li class="list-group-item" *ngIf="expand">
+            <div class="d-flex">
+              <div class="flex-1 font-weight-bold" i18n>Bib Call #:</div>
+              <div class="flex-3">{{summary.bibCallNumber}}</div>
+              <div class="flex-1 font-weight-bold" i18n>Record Owner:</div>
+              <div class="flex-1">{{orgName(summary.record.owner())}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Created On:</div>
+              <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited On:</div>
+              <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
 </div>
 
diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts
index 954cb8bfe3..39b8944d3a 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts
@@ -3,11 +3,12 @@ import {OrgService} from '@eg/core/org.service';
 import {BibRecordService, BibRecordSummary
     } from '@eg/share/catalog/bib-record.service';
 import {ServerStoreService} from '@eg/core/server-store.service';
+import {CatalogService} from '@eg/share/catalog/catalog.service';
 
 @Component({
   selector: 'eg-bib-summary',
   templateUrl: 'bib-summary.component.html',
-  styles: ['.eg-bib-summary .card-header {padding: .25rem .5rem}']
+  styleUrls: ['bib-summary.component.css']
 })
 export class BibSummaryComponent implements OnInit {
 
@@ -38,7 +39,8 @@ export class BibSummaryComponent implements OnInit {
     constructor(
         private bib: BibRecordService,
         private org: OrgService,
-        private store: ServerStoreService
+        private store: ServerStoreService,
+        private cat: CatalogService
     ) {}
 
     ngOnInit() {
@@ -66,7 +68,6 @@ export class BibSummaryComponent implements OnInit {
             summary.getBibCallNumber();
             this.bib.fleshBibUsers([summary.record]);
             this.summary = summary;
-            console.log(this.summary.display);
         });
     }
 
@@ -76,6 +77,9 @@ export class BibSummaryComponent implements OnInit {
         }
     }
 
+    iconFormatLabel(code: string): string {
+        return this.cat.iconFormatLabel(code);
+    }
 }
 
 
-- 
2.43.2