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