Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html

   1
   2 <div class="col-lg-12 card tight-card mb-2 p-2 bg-light">
   3   <div class="card-body">
   4     <div class="row">
   5       <!-- Checkbox, jacket image, and title blob live in a flex row
   6            because there's no way to give them col-lg-* columns that
   7            don't waste a lot of space. -->
   8       <div class="col-lg-7 d-flex">
   9         <label  class="form-label checkbox">
  10           <span class="fw-bold fst-italic">
  11             {{index + 1 + searchContext.pager.offset}}.
  12           </span>
  13           <input class="ps-1" type='checkbox' [(ngModel)]="isRecordSelected"
  14             (change)="toggleBasketEntry()"/>
  15         </label>
  16         <div class="ps-2 record-jacket-div" >
  17           <ng-container *ngIf="hasMrConstituentRecords(summary)">
  18             <a routerLink="/staff/catalog/search"
  19               [queryParams]="appendFromMrParam(summary)">
  20               <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}" alt=""/>
  21             </a>
  22           </ng-container>
  23           <ng-container *ngIf="!hasMrConstituentRecords(summary)">
  24               <a routerLink="/staff/catalog/record/{{summary.id}}"
  25                 [queryParams]="currentParams()">
  26                 <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}" alt=""/>
  27               </a>
  28           </ng-container>
  29         </div>
  30         <!-- for call number browse display -->
  31         <ng-container *ngIf="callNumber">
  32           <div class="ps-2 fw-bold">
  33             {{callNumber.prefix().label()}}
  34             {{callNumber.label()}}
  35             {{callNumber.suffix().label()}}
  36             @ {{orgName(callNumber.owning_lib())}}
  37           </div>
  38         </ng-container>
  39         <div class="flex-1 ps-2">
  40           <div class="row">
  41             <div class="col-lg-12 fw-bold">
  42               <h3 class="bib-field-title">
  43               <ng-container *ngIf="hasMrConstituentRecords(summary)">
  44                   <a routerLink="/staff/catalog/search" class="bib-title-link"
  45                     [queryParams]="appendFromMrParam(summary)">
  46                     <eg-bib-display-field [summary]="summary" field="title"
  47                       [usePlaceholder]="true"></eg-bib-display-field>
  48                   </a>
  49               </ng-container>
  50
  51               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
  52                 <a routerLink="/staff/catalog/record/{{summary.id}}"
  53                   [queryParams]="currentParams()" class="bib-title-link">
  54                   <eg-bib-display-field [summary]="summary" field="title"
  55                     [usePlaceholder]="true"></eg-bib-display-field>
  56                 </a>
  57               </ng-container>
  58
  59               <a routerLink="/staff/catalog/search" class="bib-author-link pt-2" [queryParams]="getAuthorSearchParams(summary)">
  60                 <eg-bib-display-field [summary]="summary" field="author" [usePlaceholder]="true"></eg-bib-display-field>
  61               </a>
  62               </h3>
  63             </div>
  64           </div>
  65           <div class="row pt-2">
  66             <div class="col-lg-12">
  67               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
  68                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
  69                 <span class="pe-1">
  70                   <img class="pe-1"
  71                     src="/images/format_icons/icon_format/{{icon}}.png" alt=""/>
  72                   <span>{{iconFormatLabel(icon)}}</span>
  73                 </span>
  74                 </ng-container>
  75               </ng-container>
  76             </div>
  77           </div>
  78           <div class="row pt-2">
  79             <div class="col-lg-12">
  80               <ng-container *ngIf="summary.firstCallNumber">
  81                 <div class="pb-1" i18n>Call Number:
  82                   {{summary.firstCallNumber.call_number_prefix_label}}
  83                   {{summary.firstCallNumber.call_number_label}}
  84                   {{summary.firstCallNumber.call_number_suffix_label}}
  85                 </div>
  86               </ng-container>
  87               <ng-container *ngIf="summary.display.physical_description">
  88                 <!-- [].concat() to avoid modifying the summary arrays -->
  89                 <div class="pb-1" i18n>Phys. Desc.:
  90                   <eg-bib-display-field [summary]="summary"
  91                     field="physical_description" joiner=","></eg-bib-display-field>
  92                 </div>
  93               </ng-container>
  94               <ng-container *ngIf="summary.display.edition">
  95                 <div class="pb-1" i18n>Edition:
  96                   <eg-bib-display-field [summary]="summary"
  97                     field="edition" joiner=","></eg-bib-display-field>
  98                 </div>
  99               </ng-container>
 100               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
 101                 <!-- note publisher typically includes pubdate -->
 102                 <ng-container *ngIf="summary.display.publisher; else pubDate">
 103                   <div class="pb-1" i18n>Publisher:
 104                   <eg-bib-display-field [summary]="summary" field="publisher">
 105                   </eg-bib-display-field>
 106                   </div>
 107                 </ng-container>
 108                 <ng-template #pubDate>
 109                   <div class="pb-1" i18n>Pub Date:
 110                     <eg-bib-display-field [summary]="summary" field="pubdate">
 111                     </eg-bib-display-field>
 112                   </div>
 113                 </ng-template>
 114               </ng-container>
 115               <ng-container *ngIf="summary.display.isbn">
 116                 <div class="pb-1" i18n>ISBN:
 117                   <eg-bib-display-field [summary]="summary"
 118                     field="isbn" joiner=","></eg-bib-display-field>
 119                 </div>
 120               </ng-container>
 121               <ng-container *ngIf="summary.display.upc">
 122                 <div class="pb-1" i18n>UPC:
 123                   <eg-bib-display-field [summary]="summary"
 124                     field="upc" joiner=","></eg-bib-display-field>
 125                 </div>
 126               </ng-container>
 127               <ng-container *ngIf="summary.display.issn">
 128                 <div i18n>ISSN:
 129                   <eg-bib-display-field [summary]="summary"
 130                     field="issn" joiner=","></eg-bib-display-field>
 131                 </div>
 132               </ng-container>
 133               <ng-container *ngIf="hasCourse">
 134                 <div i18n>Associated Courses:
 135                   <span *ngFor="let course of courses; let isLast=last">
 136                     <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
 137                       {{course.name()}} ({{course.course_number()}})
 138                     </a>{{isLast ? '' : ', '}}
 139                   </span>
 140                 </div>
 141               </ng-container>
 142             </div>
 143           </div>
 144         </div>
 145       </div>
 146       <div class="col-lg-2">
 147         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
 148           *ngFor="let copyCount of getHoldingsSummaries(); let copyIdx = index"
 149                   [ngClass]="{
 150             'text-dark bg-warning' : copyCount.count === 0 && (copyCount.transcendant === 0 || !copyCount.transcendant),
 151                         'bg-info' : copyCount.count === 0
 152             }">
 153           <div class="float-start text-left w-50">
 154             <span class="pe-1">
 155             {{copyCount.available}} / {{copyCount.count}} items
 156             </span>
 157           </div>
 158           <div class="float-start w-50">
 159             @ {{orgName(copyCount.org_unit)}}
 160           </div>
 161         </div>
 162       </div>
 163       <div class="col-lg-1">
 164         <div class="row">
 165           <div class="w-100">
 166             TCN: {{summary.record.tcn_value()}}
 167           </div>
 168         </div>
 169         <div class="row">
 170           <div class="w-100">
 171             Holds: {{summary.holdCount}}
 172           </div>
 173         </div>
 174       </div>
 175       <div class="col-lg-2">
 176         <div class="row">
 177           <div class="col-lg-12">
 178             <div class="float-end small-text-1">
 179               Created {{summary.record.create_date() | date:'shortDate'}} by
 180               <!-- creator if fleshed after the initial data set is loaded -->
 181               <a *ngIf="summary.record.creator().usrname" target="_self"
 182                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 183                   {{summary.record.creator().usrname()}}
 184               </a>
 185               <!-- add a spacer pending data to reduce page shuffle -->
 186               <span *ngIf="!summary.record.creator().usrname"> ... </span>
 187             </div>
 188           </div>
 189         </div>
 190         <div class="row pt-2">
 191           <div class="col-lg-12">
 192             <div class="float-end small-text-1" i18n>
 193               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 194               <a *ngIf="summary.record.editor().usrname" target="_self"
 195                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 196                   {{summary.record.editor().usrname()}}
 197               </a>
 198               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 199             </div>
 200           </div>
 201         </div>
 202         <div class="row pt-2">
 203           <div class="col-lg-12">
 204             <div class="float-end">
 205               <ng-container *ngIf="summary.record.deleted() === 't'">
 206                 <span class="text-danger" i18n>(Deleted)</span>
 207               </ng-container>
 208               <span>
 209                 <button (click)="placeHold()" [disabled]="!summary.isHoldable"
 210                   [ngClass]="summary.isHoldable ? 'btn-success' : 'btn-secondary'"
 211                   class="btn btn-sm label-with-material-icon small-text-1">
 212                   <span class="material-icons" aria-hidden="true">check</span>
 213                   <span i18n>Place Hold</span>
 214                 </button>
 215               </span>
 216             </div>
 217           </div>
 218         </div>
 219       </div><!-- col -->
 220     </div><!-- row -->
 221     <div class="row" *ngIf="searchContext.showResultExtras && summary.eResourceUrls.length">
 222       <div class="col-lg-12 mt-2">
 223         <div class="w-auto ms-2 me-2">
 224           <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let url of summary.eResourceUrls">
 225             <div class="col-lg-2">
 226               <span class="fw-bold">
 227                 <ng-container [ngSwitch]="url.ind2">
 228                   <ng-container *ngSwitchCase="'0'" i18n>Electronic Resource:</ng-container>
 229                   <ng-container *ngSwitchCase="'1'" i18n>Version of Resource:</ng-container>
 230                   <ng-container *ngSwitchCase="'2'" i18n>Related Resource:</ng-container>
 231                   <ng-container *ngSwitchDefault i18n>Electronic Resource</ng-container>
 232                   </ng-container>
 233                </span>
 234             </div>
 235             <div class="col-lg"><a href="{{url.href}}">{{url.label}}</a> {{url.note}}</div>
 236           </div>
 237         </div>
 238       </div>
 239     </div><!-- row -->
 240     <div class="row" *ngIf="searchContext.showResultExtras && summary.copies">
 241       <div class="shelving-locations" role="region" aria-describedby="caption{{index}}" tabindex="0">
 242         <table class="table" role="table" *ngIf="summary.copies.length">
 243           <caption id="caption{{index}}" *ngIf="summary.copies.length" i18n>
 244             {{summary.copies.length}} Shelving Locations
 245           </caption>
 246           <thead role="rowgroup">
 247             <tr>
 248               <th scope="col" role="columnheader" class="shelving-library org-unit" i18n>Library</th>
 249               <th scope="col" role="columnheader" class="copy-location" i18n>Shelving location</th>
 250               <th scope="col" role="columnheader" class="callnumber" i18n>Call number</th>
 251               <th scope="col" role="columnheader" class="status" i18n>Status</th>
 252               <th scope="col" role="columnheader" class="due-date timestamp" i18n>Due date</th>
 253             </tr>
 254           </thead>
 255           <tbody role="rowgroup">
 256             <tr role="row" *ngFor="let copy of summary.copies">
 257               <th role="rowheader" class="shelving-library org-unit" i18n>{{copy.circ_lib_sn}}</th>
 258               <td role="cell" class="copy-location" i18n>{{copy.copy_location}}</td>
 259               <td role="cell" class="callnumber" i18n>
 260                 {{copy.call_number_prefix_label}}
 261                 {{copy.call_number_label}}
 262                 {{copy.call_number_suffix_label}}
 263               </td>
 264               <td role="cell" class="status" i18n>{{copy.copy_status}}</td>
 265               <td role="cell" class="due-date timestamp" i18n>
 266                 <ng-container *ngIf="copy.due_date">
 267                   <span title="Due:" i18n-title>{{copy.due_date | date:'shortDate'}}</span>
 268                 </ng-container>
 269               </td>
 270             </tr>
 271           </tbody>
 272         </table>
 273       </div>
 274
 275       <ng-container *ngIf="!summary.copies.length && !summary.eResourceUrls.length">
 276         <p class="fst-italic" i18n>No Items To Display</p>
 277       </ng-container>
 278     </div>
 279   </div><!-- card-body -->
 280 </div><!-- card -->
 281