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           <a href="javascript:void(0)" (click)="navigateToRecord(summary)">
  25             <img src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
  26           </a>
  27         </div>
  28         <!-- for call number browse display -->
  29         <ng-container *ngIf="callNumber">
  30           <div class="pl-2 font-weight-bold">
  31             {{callNumber.prefix().label()}}
  32             {{callNumber.label()}}
  33             {{callNumber.suffix().label()}}
  34             @ {{orgName(callNumber.owning_lib())}}
  35           </div>
  36         </ng-container>
  37         <div class="flex-1 pl-2">
  38           <div class="row">
  39             <div class="col-lg-12 font-weight-bold">
  40               <!-- nbsp allows the column to take shape when no value exists -->
  41               <a href="javascript:void(0)"
  42                 (click)="navigateToRecord(summary)">
  43                 {{summary.display.title || '&nbsp;'}}
  44               </a>
  45             </div>
  46           </div>
  47           <div class="row pt-2">
  48             <div class="col-lg-12">
  49               <!-- nbsp allows the column to take shape when no value exists -->
  50               <a href="javascript:void(0)"
  51                 (click)="searchAuthor(summary)">
  52                 {{summary.display.author || '&nbsp;'}}
  53               </a>
  54             </div>
  55           </div>
  56           <div class="row pt-2">
  57             <div class="col-lg-12">
  58               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
  59                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
  60                 <span class="pr-1">
  61                   <img class="pr-1"
  62                     src="/images/format_icons/icon_format/{{icon}}.png"/>
  63                   <span>{{iconFormatLabel(icon)}}</span>
  64                 </span>
  65                 </ng-container>
  66               </ng-container>
  67               <span class='pl-1'>{{summary.display.edition}}</span>
  68               <span class='pl-1'>{{summary.display.pubdate}}</span>
  69             </div>
  70           </div>
  71         </div>
  72       </div>
  73       <div class="col-lg-2">
  74         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
  75           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
  76           <div class="w-100" *ngIf="copyCount.type == 'staff'">
  77             <div class="float-left text-left w-50">
  78               <span class="pr-1">
  79               {{copyCount.available}} / {{copyCount.count}} items
  80               </span>
  81             </div>
  82             <div class="float-left w-50">
  83               @ {{orgName(copyCount.org_unit)}}
  84             </div>
  85           </div>
  86         </div>
  87       </div>
  88       <div class="col-lg-1">
  89         <div class="row">
  90           <div class="w-100">
  91             TCN: {{summary.record.tcn_value()}}
  92           </div>
  93         </div>
  94         <div class="row">
  95           <div class="w-100">
  96             Holds: {{summary.holdCount}}
  97           </div>
  98         </div>
  99       </div>
 100       <div class="col-lg-3">
 101         <div class="row">
 102           <div class="col-lg-12">
 103             <div class="float-right small-text-1">
 104               Created {{summary.record.create_date() | date:'shortDate'}} by
 105               <!-- creator if fleshed after the initial data set is loaded -->
 106               <a *ngIf="summary.record.creator().usrname" target="_self"
 107                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 108                   {{summary.record.creator().usrname()}}
 109               </a>
 110               <!-- add a spacer pending data to reduce page shuffle -->
 111               <span *ngIf="!summary.record.creator().usrname"> ... </span>
 112             </div>
 113           </div>
 114         </div>
 115         <div class="row pt-2">
 116           <div class="col-lg-12">
 117             <div class="float-right small-text-1" i18n>
 118               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 119               <a *ngIf="summary.record.editor().usrname" target="_self"
 120                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 121                   {{summary.record.editor().usrname()}}
 122               </a>
 123               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 124             </div>
 125           </div>
 126         </div>
 127         <div class="row pt-2">
 128           <div class="col-lg-12">
 129             <div class="float-right">
 130               <span>
 131                 <button (click)="placeHold()"
 132                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
 133                   <span class="material-icons">check</span>
 134                   <span i18n>Place Hold</span>
 135                 </button>
 136               </span>
 137             </div>
 138           </div>
 139         </div>
 140       </div><!-- col -->
 141     </div><!-- row -->
 142   </div><!-- card-body -->
 143 </div><!-- card -->
 144