simplifying the layout for now and adding display fields

diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
index 95af1a6..06f864b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
@@ -1,132 +1,463 @@
-
 <div class='eg-bib-staff-view card tight-card w-100' *ngIf="summary">
-  <div class="card-header d-flex">
-    <div class="font-weight-bold">
-      Record Staff View
-      <ng-container *ngIf="summary.record.deleted() === 't'">
-        <span class="text-danger" i18n>(Deleted)</span>
-      </ng-container>
-      <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>
-      <a class="with-material-icon no-href text-primary"
-        title="Show More" i18n-title
-        *ngIf="!expand" (click)="expand=true">
-        <span class="material-icons">expand_more</span>
-      </a>
-      <a class="with-material-icon no-href text-primary"
-        title="Show Less" i18n-title
-        *ngIf="expand" (click)="expand=false">
-        <span class="material-icons">expand_less</span>
-      </a>
-    </div>
-  </div>
-  <div class="row">
-
-    <div class='col-lg-11 pl-0'>
-      <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">
-                <eg-bib-display-field [summary]="summary" field="title"
-                  routerLink="/staff/catalog/record/{{summary.id}}">
-                </eg-bib-display-field>
-              </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()}}
+
+  <div class="row" *ngIf="summary.display.title">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Title:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{summary.display.title}}&fieldClass=title&joinOp=&matchOp=contains&dateOp=is">
+                    {{summary.display.title}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _series of summary.display.series_title">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Series Title:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_series}}&fieldClass=series&joinOp=&matchOp=contains&dateOp=is">
+                    {{_series}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngIf="summary.display.edition">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Edition:</div>
+              <div class="col-lg-4 pl-1">
+                {{summary.display.edition}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngIf="summary.display.publisher">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Publisher:</div>
+              <div class="col-lg-4 pl-1">
+                {{summary.display.publisher}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngIf="summary.display.author">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Author:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{summary.display.author}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
+                    {{summary.display.author}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _creator of summary.display.creators">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Creator:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_creator}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
+                    {{_creator}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _performer of summary.display.performers">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Performer:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_performer}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
+                    {{_performer}}
                 </a>
               </div>
+              <div class="col-lg-6 flex-1"></div>
             </div>
           </li>
-          <li class="list-group-item" *ngIf="expand">
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _credit of summary.display.production_credits">
+    <div class='col-lg-11 pl-0'>
+      <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>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()}}
+              <div class="col-lg-2 font-weight-bold" i18n>Production Credit:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_credit}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
+                    {{_credit}}
                 </a>
               </div>
+              <div class="col-lg-6 flex-1"></div>
             </div>
           </li>
-          <li class="list-group-item" *ngIf="expand">
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _isbn of summary.display.isbn">
+    <div class='col-lg-11 pl-0'>
+      <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>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 class="col-lg-2 font-weight-bold" i18n>ISBN:</div>
+              <div class="col-lg-4 pl-1">
+                  <a href="/eg2/staff/catalog/search?identQuery={{_isbn}}&identQueryType=identifier%7Cisbn">
+                    {{_isbn}}
+                  </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
             </div>
           </li>
-          <ng-container *ngIf="expand && hasCourse">
-            <li class="list-group-item">
-              <div class="d-flex">
-                <div class="flex-1 font-weight-bold" i18n>Associated Courses</div>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _issn of summary.display.issn">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>ISSN:</div>
+              <div class="col-lg-4 pl-1">
+                  <a href="/eg2/staff/catalog/search?identQuery={{_issn}}&identQueryType=identifier%7Cissn">
+                    {{_issn}}
+                  </a>
               </div>
-            </li>
-            <li class="list-group-item" *ngFor="let course of courses">
-              <div class="d-flex">
-                <div class="flex-1 font-weight-bold" i18n>Course Name:</div>
-                <div class="flex-3">
-                  <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
-                    {{course.name()}}
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _upc of summary.display.upc">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>UPC:</div>
+              <div class="col-lg-4 pl-1">
+                  <a href="/eg2/staff/catalog/search?identQuery={{_upc}}&identQueryType=identifier%7Cupc">
+                    {{_upc}}
                   </a>
-                </div>
-                <div class="flex-1 font-weight-bold" i18n>Course Number:</div>
-                <div class="flex-1">{{course.course_number()}}</div>
-                <div class="flex-1 font-weight-bold" i18n>Section Number:</div>
-                <div class="flex-1">{{course.section_number()}}</div>
-                <div class="flex-1 font-weight-bold" i18n>Owning Library:</div>
-                <div class="flex-1">{{this.org.get(course.owning_lib()).shortname()}}</div>
-              </div>
-            </li>
-          </ng-container>
-          <ng-container *ngIf="expand && summary.eResourceUrls.length">
-            <li class="list-group-item" *ngFor="let url of summary.eResourceUrls">
-              <div class="d-flex">
-                <div class="flex-1 font-weight-bold">
-                  <ng-container [ngSwitch]="url.ind2">
-                    <ng-container *ngSwitchCase="'0'" i18n>Resource:</ng-container>
-                    <ng-container *ngSwitchCase="'1'" i18n>Version of Resource:</ng-container>
-                    <ng-container *ngSwitchCase="'2'" i18n>Related Resource:</ng-container>
-                    <ng-container *ngSwitchDefault i18n></ng-container>
-                  </ng-container>
-                </div>
-                <div class="flex-5">
-                  <div><a href="{{url.href}}">{{url.label}}</a></div>
-                  <div class="pt-1">{{url.note}}</div>
-                </div>
-              </div>
-            </li>
-          </ng-container>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
         </ul>
       </div>
     </div><!-- col -->
   </div><!-- row -->
-</div>
 
+  <div class="row" *ngIf="summary.display.type_of_resource">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Type of Resource:</div>
+              <div class="col-lg-4 pl-1">
+                {{summary.display.type_of_resource}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _desc of summary.display.physical_description">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Physical Description:</div>
+              <div class="col-lg-4 pl-1">
+                {{_desc}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _subj of summary.display.subject">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Subject:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
+                    {{_subj}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _subj of summary.display.subject_name">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Subject Name:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
+                    {{_subj}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _subj of summary.display.subject_topic">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Subject Topic:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
+                    {{_subj}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _subj of summary.display.subject_geographic">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Subject Geographic:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
+                    {{_subj}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _subj of summary.display.subject_temporal">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Subject Temporal:</div>
+              <div class="col-lg-4 pl-1">
+                <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
+                    {{_subj}}
+                </a>
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _genre of summary.display.genre">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Genre:</div>
+              <div class="col-lg-4 pl-1">
+                {{_genre}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _bibliography of summary.display.bibliography">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Bibliography:</div>
+              <div class="col-lg-4 pl-1">
+                {{_bibliography}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngIf="summary.display.abstract">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Abstract:</div>
+              <div class="col-lg-4 pl-1">
+                {{summary.display.abstract}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngIf="summary.display.toc">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Table of Contents:</div>
+              <div class="col-lg-4 pl-1">
+                {{summary.display.toc}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _thesis of summary.display.thesis">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>Thesis:</div>
+              <div class="col-lg-4 pl-1">
+                {{_thesis}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+  <div class="row" *ngFor="let _note of summary.display.general_note">
+    <div class='col-lg-11 pl-0'>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="col-lg-2 font-weight-bold" i18n>General Note:</div>
+              <div class="col-lg-4 pl-1">
+                {{_note}}
+              </div>
+              <div class="col-lg-6 flex-1"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+
+</div>