LP1913807 Staff catalog shows preferred lib holdings counts
[evergreen-equinox.git] / Open-ILS / src / eg2 / src / app / staff / catalog / result / record.component.html
index 5ddf94e..115d92a 100644 (file)
@@ -1,8 +1,3 @@
-<!-- 
-  TODO
-  routerLink's
-  egDateFilter's
--->
 
 <div class="col-lg-12 card tight-card mb-2 bg-light">
   <div class="card-body">
@@ -10,7 +5,7 @@
       <!-- Checkbox, jacket image, and title blob live in a flex row
            because there's no way to give them col-lg-* columns that
            don't waste a lot of space. -->
-      <div class="col-lg-6 d-flex">
+      <div class="col-lg-7 d-flex">
         <label class="checkbox">
           <span class="font-weight-bold font-italic">
             {{index + 1 + searchContext.pager.offset}}.
           <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
             (change)="toggleBasketEntry()"/>
         </label>
-        <!-- XXX hard-coded width so columns align vertically regardless
-             of the presence of a jacket image -->
         <div class="pl-2 record-jacket-div" >
           <ng-container *ngIf="hasMrConstituentRecords(summary)">
             <a routerLink="/staff/catalog/search"
               [queryParams]="appendFromMrParam(summary)">
-              <img src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
+              <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
             </a>
           </ng-container>
           <ng-container *ngIf="!hasMrConstituentRecords(summary)">
               <a routerLink="/staff/catalog/record/{{summary.id}}"
                 [queryParams]="currentParams()">
-                <img src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
+                <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
               </a>
           </ng-container>
         </div>
         <div class="flex-1 pl-2">
           <div class="row">
             <div class="col-lg-12 font-weight-bold">
-              <!-- nbsp allows the column to take shape when no value exists -->
               <ng-container *ngIf="hasMrConstituentRecords(summary)">
                   <a routerLink="/staff/catalog/search"
                     [queryParams]="appendFromMrParam(summary)">
-                    {{summary.display.title || '&nbsp;'}}
+                    <eg-bib-display-field [summary]="summary" field="title"
+                      [usePlaceholder]="true"></eg-bib-display-field>
                   </a>
               </ng-container>
               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
                 <a routerLink="/staff/catalog/record/{{summary.id}}"
                   [queryParams]="currentParams()">
-                  {{summary.display.title || '&nbsp;'}}
+                  <eg-bib-display-field [summary]="summary" field="title"
+                    [usePlaceholder]="true"></eg-bib-display-field>
                 </a>
               </ng-container>
             </div>
           </div>
           <div class="row pt-2">
             <div class="col-lg-12">
-              <!-- nbsp allows the column to take shape when no value exists -->
               <a routerLink="/staff/catalog/search"
-                  [queryParams]="getAuthorSearchParams(summary)">
-                {{summary.display.author || '&nbsp;'}}
+                [queryParams]="getAuthorSearchParams(summary)">
+                <eg-bib-display-field [summary]="summary" field="author"
+                  [usePlaceholder]="true"></eg-bib-display-field>
               </a>
             </div>
           </div>
                 </span>
                 </ng-container>
               </ng-container>
-              <span class='pl-1'>{{summary.display.edition}}</span>
-              <span class='pl-1'>{{summary.display.pubdate}}</span>
+            </div>
+          </div>
+          <div class="row pt-2">
+            <div class="col-lg-12">
+              <ng-container *ngIf="summary.firstCallNumber">
+                <div class="pb-1" i18n>Call Number:
+                  {{summary.firstCallNumber.call_number_prefix_label}}
+                  {{summary.firstCallNumber.call_number_label}}
+                  {{summary.firstCallNumber.call_number_suffix_label}}
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.physical_description">
+                <!-- [].concat() to avoid modifying the summary arrays -->
+                <div class="pb-1" i18n>Phys. Desc.:
+                  <eg-bib-display-field [summary]="summary"
+                    field="physical_description" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.edition">
+                <div class="pb-1" i18n>Edition:
+                  <eg-bib-display-field [summary]="summary"
+                    field="edition" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
+                <!-- note publisher typically includes pubdate -->
+                <ng-container *ngIf="summary.display.publisher; else pubDate">
+                  <div class="pb-1" i18n>Publisher:
+                  <eg-bib-display-field [summary]="summary" field="publisher">
+                  </eg-bib-display-field>
+                  </div>
+                </ng-container>
+                <ng-template #pubDate>
+                  <div class="pb-1" i18n>Pub Date:
+                    <eg-bib-display-field [summary]="summary" field="pubdate">
+                    </eg-bib-display-field>
+                  </div>
+                </ng-template>
+              </ng-container>
+              <ng-container *ngIf="summary.display.isbn">
+                <div class="pb-1" i18n>ISBN:
+                  <eg-bib-display-field [summary]="summary"
+                    field="isbn" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.upc">
+                <div class="pb-1" i18n>UPC:
+                  <eg-bib-display-field [summary]="summary"
+                    field="upc" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.issn">
+                <div i18n>ISSN:
+                  <eg-bib-display-field [summary]="summary"
+                    field="issn" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="hasCourse">
+                <div i18n>Associated Courses:
+                  <span *ngFor="let course of courses; let isLast=last">
+                    <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
+                      {{course.name()}} ({{course.course_number()}})
+                    </a>{{isLast ? '' : ', '}}
+                  </span>
+                </div>
+              </ng-container>
             </div>
           </div>
         </div>
       </div>
       <div class="col-lg-2">
-        <div class="row" [ngClass]="{'pt-2':copyIndex > 0}" 
-          *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
-          <div class="w-100" *ngIf="copyCount.type == 'staff'">
-            <div class="float-left text-left w-50">
-              <span class="pr-1">
-              {{copyCount.available}} / {{copyCount.count}} items
-              </span>
-            </div>
-            <div class="float-left w-50">
-              @ {{orgName(copyCount.org_unit)}}
-            </div>
+        <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
+          *ngFor="let copyCount of getHoldingsSummaries(); let copyIdx = index">
+          <div class="float-left text-left w-50">
+            <span class="pr-1">
+            {{copyCount.available}} / {{copyCount.count}} items
+            </span>
+          </div>
+          <div class="float-left w-50">
+            @ {{orgName(copyCount.org_unit)}}
           </div>
         </div>
       </div>
           </div>
         </div>
       </div>
-      <div class="col-lg-3">
+      <div class="col-lg-2">
         <div class="row">
           <div class="col-lg-12">
             <div class="float-right small-text-1">
               Created {{summary.record.create_date() | date:'shortDate'}} by
               <!-- creator if fleshed after the initial data set is loaded -->
-              <a *ngIf="summary.record.creator().usrname" target="_self" 
+              <a *ngIf="summary.record.creator().usrname" target="_self"
                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
                   {{summary.record.creator().usrname()}}
               </a>
           <div class="col-lg-12">
             <div class="float-right small-text-1" i18n>
               Edited {{summary.record.edit_date() | date:'shortDate'}} by
-              <a *ngIf="summary.record.editor().usrname" target="_self" 
+              <a *ngIf="summary.record.editor().usrname" target="_self"
                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
                   {{summary.record.editor().usrname()}}
               </a>
         <div class="row pt-2">
           <div class="col-lg-12">
             <div class="float-right">
-              <span>
-                <button (click)="placeHold()"
-                  class="btn btn-sm btn-success label-with-material-icon small-text-1">
-                  <span class="material-icons">check</span>
-                  <span i18n>Place Hold</span>
-                </button>
-              </span>
+              <ng-container *ngIf="summary.record.deleted() == 't'">
+                <span class="text-danger" i18n>(Deleted)</span>
+              </ng-container>
+              <ng-container *ngIf="summary.record.deleted() == 'f'">
+                <span>
+                  <button (click)="placeHold()"
+                    class="btn btn-sm btn-success label-with-material-icon small-text-1">
+                    <span class="material-icons">check</span>
+                    <span i18n>Place Hold</span>
+                  </button>
+                </span>
+              </ng-container>
             </div>
           </div>
         </div>
       </div><!-- col -->
     </div><!-- row -->
+    <div class="row" *ngIf="searchContext.showResultExtras && summary.eResourceUrls.length">
+      <div class="col-lg-12 mt-2">
+        <div class="w-auto ml-2 mr-2">
+          <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let url of summary.eResourceUrls">
+            <div class="col-lg-2">
+              <span class="font-weight-bold">
+                <ng-container [ngSwitch]="url.ind2">
+                  <ng-container *ngSwitchCase="'0'" i18n>Electronic 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>Electronic Resource</ng-container>
+                  </ng-container>
+               </span>
+            </div>
+            <div class="col-lg"><a href="{{url.href}}">{{url.label}}</a> {{url.note}}</div>
+          </div>
+        </div>
+      </div>
+    </div><!-- row -->
+    <div class="row" *ngIf="searchContext.showResultExtras && summary.copies">
+      <div class="col-lg-12 mt-2">
+        <div class="w-auto ml-2 mr-2">
+          <ng-container *ngIf="summary.copies.length">
+            <div class="row p-1 font-weight-bold border-top">
+              <div class="col-lg-2" i18n>Library</div>
+              <div class="col-lg-3" i18n>Shelving location</div>
+              <div class="col-lg-4" i18n>Call number</div>
+              <div class="col-lg-3" i18n>Status</div>
+            </div>
+            <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let copy of summary.copies">
+              <div class="col-lg-2" i18n>{{copy.circ_lib_sn}}</div>
+              <div class="col-lg-3" i18n>{{copy.copy_location}}</div>
+              <div class="col-lg-4" i18n>
+                {{copy.call_number_prefix_label}} 
+                {{copy.call_number_label}}
+                {{copy.call_number_suffix_label}}
+              </div>
+              <div class="col-lg-3" i18n>{{copy.copy_status}}</div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!summary.copies.length && !summary.eResourceUrls.length">
+            <span class="font-italic" i18n>No Items To Display</span>
+          </ng-container>
+        </div>
+      </div>
+    </div>
   </div><!-- card-body -->
 </div><!-- card -->