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

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