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.display.series_title">
  81                 <!-- [].concat() to avoid modifying the summary arrays -->
  82                 <div class="pb-1" i18n>Series:
  83                   <eg-bib-display-field [summary]="summary"
  84                     field="series_title" joiner=","></eg-bib-display-field>
  85                 </div>
  86               </ng-container>
  87               <ng-container *ngIf="summary.firstCallNumber">
  88                 <div class="pb-1" i18n>Call Number:
  89                   {{summary.firstCallNumber.call_number_prefix_label}}
  90                   {{summary.firstCallNumber.call_number_label}}
  91                   {{summary.firstCallNumber.call_number_suffix_label}}
  92                 </div>
  93               </ng-container>
  94               <ng-container *ngIf="summary.display.physical_description">
  95                 <!-- [].concat() to avoid modifying the summary arrays -->
  96                 <div class="pb-1" i18n>Phys. Desc.:
  97                   <eg-bib-display-field [summary]="summary"
  98                     field="physical_description" joiner=","></eg-bib-display-field>
  99                 </div>
 100               </ng-container>
 101               <ng-container *ngIf="summary.display.edition">
 102                 <div class="pb-1" i18n>Edition:
 103                   <eg-bib-display-field [summary]="summary"
 104                     field="edition" joiner=","></eg-bib-display-field>
 105                 </div>
 106               </ng-container>
 107               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
 108                 <!-- note publisher typically includes pubdate -->
 109                 <ng-container *ngIf="summary.display.publisher; else pubDate">
 110                   <div class="pb-1" i18n>Publisher:
 111                   <eg-bib-display-field [summary]="summary" field="publisher">
 112                   </eg-bib-display-field>
 113                   </div>
 114                 </ng-container>
 115                 <ng-template #pubDate>
 116                   <div class="pb-1" i18n>Pub Date:
 117                     <eg-bib-display-field [summary]="summary" field="pubdate">
 118                     </eg-bib-display-field>
 119                   </div>
 120                 </ng-template>
 121               </ng-container>
 122               <ng-container *ngIf="summary.display.isbn">
 123                 <div class="pb-1" i18n>ISBN:
 124                   <eg-bib-display-field [summary]="summary"
 125                     field="isbn" joiner=","></eg-bib-display-field>
 126                 </div>
 127               </ng-container>
 128               <ng-container *ngIf="summary.display.upc">
 129                 <div class="pb-1" i18n>UPC:
 130                   <eg-bib-display-field [summary]="summary"
 131                     field="upc" joiner=","></eg-bib-display-field>
 132                 </div>
 133               </ng-container>
 134               <ng-container *ngIf="summary.display.issn">
 135                 <div i18n>ISSN:
 136                   <eg-bib-display-field [summary]="summary"
 137                     field="issn" joiner=","></eg-bib-display-field>
 138                 </div>
 139               </ng-container>
 140               <ng-container *ngIf="hasCourse">
 141                 <div i18n>Associated Courses:
 142                   <span *ngFor="let course of courses; let isLast=last">
 143                     <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
 144                       {{course.name()}} ({{course.course_number()}})
 145                     </a>{{isLast ? '' : ', '}}
 146                   </span>
 147                 </div>
 148               </ng-container>
 149             </div>
 150           </div>
 151         </div>
 152       </div>
 153       <div class="col-lg-2">
 154         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
 155           *ngFor="let copyCount of getHoldingsSummaries(); let copyIdx = index"
 156                   [ngClass]="{
 157             'no-copies-transcendant' : copyCount.count === 0 && (copyCount.transcendant === 0 || !copyCount.transcendant),
 158                               'no-copies' : copyCount.count === 0
 159             }">
 160           <div class="float-start text-left w-50">
 161             <span class="pe-1">
 162             {{copyCount.available}} / {{copyCount.count}} <span i18n>items</span>
 163             </span>
 164           </div>
 165           <div class="float-start w-50">
 166             @ {{orgName(copyCount.org_unit)}}
 167           </div>
 168         </div>
 169       </div>
 170       <div class="col-lg-1">
 171         <div class="row">
 172           <div class="w-100">
 173             TCN: {{summary.record.tcn_value()}}
 174           </div>
 175         </div>
 176         <div class="row">
 177           <div class="w-100">
 178             <span i18n>Holds:</span> {{summary.holdCount}}
 179           </div>
 180         </div>
 181       </div>
 182       <div class="col-lg-2">
 183         <div class="row">
 184           <div class="col-lg-12">
 185             <div class="float-end small-text-1">
 186               <span i18n>Created</span> {{summary.record.create_date() | date:'shortDate'}} <span i18n>by</span>
 187               <!-- creator if fleshed after the initial data set is loaded -->
 188               <a *ngIf="summary.record.creator().usrname" target="_self"
 189                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 190                   {{summary.record.creator().usrname()}}
 191               </a>
 192               <!-- add a spacer pending data to reduce page shuffle -->
 193               <span *ngIf="!summary.record.creator().usrname"> ... </span>
 194             </div>
 195           </div>
 196         </div>
 197         <div class="row pt-2">
 198           <div class="col-lg-12">
 199             <div class="float-end small-text-1" i18n>
 200               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 201               <a *ngIf="summary.record.editor().usrname" target="_self"
 202                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 203                   {{summary.record.editor().usrname()}}
 204               </a>
 205               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 206             </div>
 207           </div>
 208         </div>
 209         <div class="row pt-2">
 210           <div class="col-lg-12">
 211             <div class="float-end">
 212               <ng-container *ngIf="summary.record.deleted() === 't'">
 213                 <span class="text-danger" i18n>(Deleted)</span>
 214               </ng-container>
 215               <span>
 216                 <button type="button" (click)="placeHold()" [disabled]="!summary.isHoldable"
 217                   [ngClass]="summary.isHoldable ? 'btn-success' : 'btn-secondary'"
 218                   class="btn btn-sm label-with-material-icon small-text-1">
 219                   <span class="material-icons" aria-hidden="true">check</span>
 220                   <span i18n>Place Hold</span>
 221                 </button>
 222               </span>
 223             </div>
 224           </div>
 225         </div>
 226       </div><!-- col -->
 227     </div><!-- row -->
 228     <div class="row" *ngIf="searchContext.showResultExtras && summary.eResourceUrls.length">
 229       <div class="col-lg-12 mt-2">
 230         <div class="w-auto ms-2 me-2">
 231           <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let url of summary.eResourceUrls">
 232             <div class="col-lg-2">
 233               <span class="fw-bold">
 234                 <ng-container [ngSwitch]="url.ind2">
 235                   <ng-container *ngSwitchCase="'0'" i18n>Electronic Resource:</ng-container>
 236                   <ng-container *ngSwitchCase="'1'" i18n>Version of Resource:</ng-container>
 237                   <ng-container *ngSwitchCase="'2'" i18n>Related Resource:</ng-container>
 238                   <ng-container *ngSwitchDefault i18n>Electronic Resource</ng-container>
 239                   </ng-container>
 240                </span>
 241             </div>
 242             <div class="col-lg"><a href="{{url.href}}">{{url.label}}</a> {{url.note}}</div>
 243           </div>
 244         </div>
 245       </div>
 246     </div><!-- row -->
 247     <div class="row" *ngIf="searchContext.showResultExtras && summary.copies">
 248       <div class="shelving-locations" role="region" aria-describedby="caption{{index}}" tabindex="0">
 249         <table class="table" role="table" *ngIf="summary.copies.length">
 250           <caption id="caption{{index}}" *ngIf="summary.copies.length">
 251               <span i18n="Shelving locations table heading">Shelving Locations</span>
 252               <span i18n="Shelving locations table heading preposition and separators">&nbsp;for&nbsp;</span>
 253               <eg-bib-display-field [summary]="summary" field="title" [usePlaceholder]="true"></eg-bib-display-field>
 254               <span i18n="Shelving locations table heading separator">&nbsp;-&nbsp;</span>
 255               <eg-bib-display-field [summary]="summary" field="author" [usePlaceholder]="true"></eg-bib-display-field>
 256           </caption>
 257           <thead role="rowgroup">
 258             <tr>
 259               <th scope="col" role="columnheader" class="shelving-library org-unit" i18n>Library</th>
 260               <th scope="col" role="columnheader" class="copy-location" i18n>Shelving location</th>
 261               <th scope="col" role="columnheader" class="callnumber" i18n>Call number</th>
 262               <th scope="col" role="columnheader" class="status" i18n>Status</th>
 263               <th scope="col" role="columnheader" class="due-date timestamp" i18n>Due date</th>
 264             </tr>
 265           </thead>
 266           <tbody role="rowgroup">
 267             <tr role="row" *ngFor="let copy of summary.copies">
 268               <th role="rowheader" class="shelving-library org-unit" i18n>{{copy.circ_lib_sn}}</th>
 269               <td role="cell" class="copy-location" i18n>{{copy.copy_location}}</td>
 270               <td role="cell" class="callnumber" i18n>
 271                 {{copy.call_number_prefix_label}}
 272                 {{copy.call_number_label}}
 273                 {{copy.call_number_suffix_label}}
 274               </td>
 275               <td role="cell" class="status" i18n>{{copy.copy_status}}</td>
 276               <td role="cell" class="due-date timestamp" i18n>
 277                 <ng-container *ngIf="copy.due_date">
 278                   <span title="Due:" i18n-title>{{copy.due_date | date:'shortDate'}}</span>
 279                 </ng-container>
 280               </td>
 281             </tr>
 282           </tbody>
 283         </table>
 284       </div>
 285
 286       <ng-container *ngIf="!summary.copies.length && !summary.eResourceUrls.length">
 287         <p class="fst-italic" i18n>No Items To Display</p>
 288       </ng-container>
 289     </div>
 290   </div><!-- card-body -->
 291 </div><!-- card -->
 292