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

   1 <!--
   2   TODO
   3   routerLink's
   4   egDateFilter's
   5 -->
   6
   7 <div class="col-lg-12 card tight-card mb-2 bg-light">
   8   <div class="card-body">
   9     <div class="row">
  10       <!-- Checkbox, jacket image, and title blob live in a flex row
  11            because there's no way to give them col-lg-* columns that
  12            don't waste a lot of space. -->
  13       <div class="col-lg-6 d-flex">
  14         <label class="checkbox">
  15           <span class="font-weight-bold font-italic">
  16             {{index + 1 + searchContext.pager.offset}}.
  17           </span>
  18           <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
  19             (change)="toggleBasketEntry()"/>
  20         </label>
  21         <!-- XXX hard-coded width so columns align vertically regardless
  22              of the presence of a jacket image -->
  23         <div class="pl-2 record-jacket-div" >
  24           <ng-container *ngIf="hasMrConstituentRecords(summary)">
  25             <a routerLink="/staff/catalog/search"
  26               [queryParams]="appendFromMrParam(summary)">
  27               <img src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
  28             </a>
  29           </ng-container>
  30           <ng-container *ngIf="!hasMrConstituentRecords(summary)">
  31               <a routerLink="/staff/catalog/record/{{summary.id}}"
  32                 [queryParams]="currentParams()">
  33                 <img src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
  34               </a>
  35           </ng-container>
  36         </div>
  37         <!-- for call number browse display -->
  38         <ng-container *ngIf="callNumber">
  39           <div class="pl-2 font-weight-bold">
  40             {{callNumber.prefix().label()}}
  41             {{callNumber.label()}}
  42             {{callNumber.suffix().label()}}
  43             @ {{orgName(callNumber.owning_lib())}}
  44           </div>
  45         </ng-container>
  46         <div class="flex-1 pl-2">
  47           <div class="row">
  48             <div class="col-lg-12 font-weight-bold">
  49               <!-- nbsp allows the column to take shape when no value exists -->
  50               <ng-container *ngIf="hasMrConstituentRecords(summary)">
  51                   <a routerLink="/staff/catalog/search"
  52                     [queryParams]="appendFromMrParam(summary)">
  53                     {{summary.display.title || '&nbsp;'}}
  54                   </a>
  55               </ng-container>
  56               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
  57                 <a routerLink="/staff/catalog/record/{{summary.id}}"
  58                   [queryParams]="currentParams()">
  59                   {{summary.display.title || '&nbsp;'}}
  60                 </a>
  61               </ng-container>
  62             </div>
  63           </div>
  64           <div class="row pt-2">
  65             <div class="col-lg-12">
  66               <!-- nbsp allows the column to take shape when no value exists -->
  67               <a routerLink="/staff/catalog/search"
  68                   [queryParams]="getAuthorSearchParams(summary)">
  69                 {{summary.display.author || '&nbsp;'}}
  70               </a>
  71             </div>
  72           </div>
  73           <div class="row pt-2">
  74             <div class="col-lg-12">
  75               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
  76                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
  77                 <span class="pr-1">
  78                   <img class="pr-1"
  79                     src="/images/format_icons/icon_format/{{icon}}.png"/>
  80                   <span>{{iconFormatLabel(icon)}}</span>
  81                 </span>
  82                 </ng-container>
  83               </ng-container>
  84               <span class='pl-1'>{{summary.display.edition}}</span>
  85               <span class='pl-1'>{{summary.display.pubdate}}</span>
  86             </div>
  87           </div>
  88         </div>
  89       </div>
  90       <div class="col-lg-2">
  91         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
  92           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
  93           <div class="w-100" *ngIf="copyCount.type == 'staff'">
  94             <div class="float-left text-left w-50">
  95               <span class="pr-1">
  96               {{copyCount.available}} / {{copyCount.count}} items
  97               </span>
  98             </div>
  99             <div class="float-left w-50">
 100               @ {{orgName(copyCount.org_unit)}}
 101             </div>
 102           </div>
 103         </div>
 104       </div>
 105       <div class="col-lg-1">
 106         <div class="row">
 107           <div class="w-100">
 108             TCN: {{summary.record.tcn_value()}}
 109           </div>
 110         </div>
 111         <div class="row">
 112           <div class="w-100">
 113             Holds: {{summary.holdCount}}
 114           </div>
 115         </div>
 116       </div>
 117       <div class="col-lg-3">
 118         <div class="row">
 119           <div class="col-lg-12">
 120             <div class="float-right small-text-1">
 121               Created {{summary.record.create_date() | date:'shortDate'}} by
 122               <!-- creator if fleshed after the initial data set is loaded -->
 123               <a *ngIf="summary.record.creator().usrname" target="_self"
 124                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 125                   {{summary.record.creator().usrname()}}
 126               </a>
 127               <!-- add a spacer pending data to reduce page shuffle -->
 128               <span *ngIf="!summary.record.creator().usrname"> ... </span>
 129             </div>
 130           </div>
 131         </div>
 132         <div class="row pt-2">
 133           <div class="col-lg-12">
 134             <div class="float-right small-text-1" i18n>
 135               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 136               <a *ngIf="summary.record.editor().usrname" target="_self"
 137                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 138                   {{summary.record.editor().usrname()}}
 139               </a>
 140               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 141             </div>
 142           </div>
 143         </div>
 144         <div class="row pt-2">
 145           <div class="col-lg-12">
 146             <div class="float-right">
 147               <span>
 148                 <button (click)="placeHold()"
 149                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
 150                   <span class="material-icons">check</span>
 151                   <span i18n>Place Hold</span>
 152                 </button>
 153               </span>
 154             </div>
 155           </div>
 156         </div>
 157       </div><!-- col -->
 158     </div><!-- row -->
 159   </div><!-- card-body -->
 160 </div><!-- card -->
 161