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