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

   1 <!--
   2   TODO
   3   routerLink's
   4   egDateFilter's
   5 -->
   6 <eg-record-bucket-dialog #addToListDialog>
   7 </eg-record-bucket-dialog>
   8
   9 <div class="col-lg-12 card tight-card mb-2 bg-light">
  10   <div class="card-body">
  11     <div class="row">
  12       <div class="col-lg-1">
  13         <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
  14           <img style="height:80px"
  15             src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
  16         </a>
  17       </div>
  18       <div class="col-lg-5">
  19         <div class="row">
  20           <div class="col-lg-12 font-weight-bold">
  21             <!-- nbsp allows the column to take shape when no value exists -->
  22             <span class="font-weight-light font-italic">
  23               #{{index + 1 + searchContext.pager.offset}}
  24             </span>
  25             <a href="javascript:void(0)"
  26               (click)="navigatToRecord(summary.id)">
  27               {{summary.display.title || '&nbsp;'}}
  28             </a>
  29           </div>
  30         </div>
  31         <div class="row pt-2">
  32           <div class="col-lg-12">
  33             <!-- nbsp allows the column to take shape when no value exists -->
  34             <a href="javascript:void(0)"
  35               (click)="searchAuthor(summary)">
  36               {{summary.display.author || '&nbsp;'}}
  37             </a>
  38           </div>
  39         </div>
  40         <div class="row pt-2">
  41           <div class="col-lg-12">
  42             <!-- only shows the first icon format -->
  43             <span *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
  44               <img class="pr-1"
  45                 src="/images/format_icons/icon_format/{{summary.attributes.icon_format[0]}}.png"/>
  46               <span>{{iconFormatLabel(summary.attributes.icon_format[0])}}</span>
  47             </span>
  48             <span class='pl-1'>{{summary.display.edition}}</span>
  49             <span class='pl-1'>{{summary.display.pubdate}}</span>
  50           </div>
  51         </div>
  52       </div>
  53       <div class="col-lg-2">
  54         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
  55           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
  56           <div class="w-100" *ngIf="copyCount.type == 'staff'">
  57             <div class="float-left text-left w-50">
  58               <span class="pr-1">
  59               {{copyCount.available}} / {{copyCount.count}} items
  60               </span>
  61             </div>
  62             <div class="float-left w-50">
  63               @ {{orgName(copyCount.org_unit)}}
  64             </div>
  65           </div>
  66         </div>
  67       </div>
  68       <div class="col-lg-1">
  69         <div class="row">
  70           <div class="w-100">
  71             TCN: {{summary.record.tcn_value()}}
  72           </div>
  73         </div>
  74         <div class="row">
  75           <div class="w-100">
  76             Holds: {{summary.holdCount}}
  77           </div>
  78         </div>
  79       </div>
  80       <div class="col-lg-3">
  81         <div class="row">
  82           <div class="col-lg-12">
  83             <div class="float-right small-text-1">
  84               Created {{summary.record.create_date() | date:'shortDate'}} by
  85               <!-- creator if fleshed after the initial data set is loaded -->
  86               <a *ngIf="summary.record.creator().usrname" target="_self"
  87                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
  88                   {{summary.record.creator().usrname()}}
  89               </a>
  90               <!-- add a spacer pending data to reduce page shuffle -->
  91               <span *ngIf="!summary.record.creator().usrname"> ... </span>
  92             </div>
  93           </div>
  94         </div>
  95         <div class="row pt-2">
  96           <div class="col-lg-12">
  97             <div class="float-right small-text-1" i18n>
  98               Edited {{summary.record.edit_date() | date:'shortDate'}} by
  99               <a *ngIf="summary.record.editor().usrname" target="_self"
 100                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 101                   {{summary.record.editor().usrname()}}
 102               </a>
 103               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 104             </div>
 105           </div>
 106         </div>
 107         <div class="row pt-2">
 108           <div class="col-lg-12">
 109             <div class="float-right">
 110               <span>
 111                 <button (click)="placeHold()"
 112                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
 113                   <span class="material-icons">check</span>
 114                   <span i18n>Place Hold</span>
 115                 </button>
 116               </span>
 117               <span class="pl-1">
 118                 <button
 119                   (click)="addToListDialog.recordId=summary.record.id(); addToListDialog.open({size: 'lg'})"
 120                   class="btn btn-sm btn-info label-with-material-icon small-text-1">
 121                   <span class="material-icons">playlist_add_check</span>
 122                   <span i18n>Add to List</span>
 123                 </button>
 124               </span>
 125             </div>
 126           </div>
 127         </div>
 128       </div><!-- col -->
 129     </div><!-- row -->
 130   </div><!-- card-body -->
 131 </div><!-- card -->
 132