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-7 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/medium/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/medium/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             </div>
  85           </div>
  86           <div class="row pt-2">
  87             <div class="col-lg-12">
  88               <ng-container *ngIf="summary.display.physical_description">
  89                 <!-- [].concat() to avoid modifying the summary arrays -->
  90                 <div class="pb-1" i18n>Phys. Desc.:
  91                   {{[].concat(summary.display.physical_description).join(', ')}}
  92                 </div>
  93               </ng-container>
  94               <ng-container *ngIf="summary.display.edition">
  95                 <div class="pb-1" i18n>Edition: {{summary.display.edition}}</div>
  96               </ng-container>
  97               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
  98                 <!-- note publisher typically includes pubdate -->
  99                 <ng-container *ngIf="summary.display.publisher; else pubDate">
 100                   <div class="pb-1" i18n>Publisher: {{summary.display.publisher}}</div>
 101                 </ng-container>
 102                 <ng-template #pubDate>
 103                   <div class="pb-1" i18n>Pub Date: {{summary.display.pubdate}}</div>
 104                 </ng-template>
 105               </ng-container>
 106               <ng-container *ngIf="summary.display.isbn">
 107                 <div class="pb-1" i18n>ISBN:
 108                   {{[].concat(summary.display.isbn).join(', ')}}</div>
 109               </ng-container>
 110               <ng-container *ngIf="summary.display.upc">
 111                 <div class="pb-1" i18n>UPC:
 112                   {{[].concat(summary.display.upc).join(', ')}}</div>
 113               </ng-container>
 114               <ng-container *ngIf="summary.display.issn">
 115                 <div i18n>ISSN:
 116                   {{[].concat(summary.display.issn).join(', ')}}</div>
 117               </ng-container>
 118             </div>
 119           </div>
 120         </div>
 121       </div>
 122       <div class="col-lg-2">
 123         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
 124           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
 125           <div class="w-100" *ngIf="copyCount.type == 'staff'">
 126             <div class="float-left text-left w-50">
 127               <span class="pr-1">
 128               {{copyCount.available}} / {{copyCount.count}} items
 129               </span>
 130             </div>
 131             <div class="float-left w-50">
 132               @ {{orgName(copyCount.org_unit)}}
 133             </div>
 134           </div>
 135         </div>
 136       </div>
 137       <div class="col-lg-1">
 138         <div class="row">
 139           <div class="w-100">
 140             TCN: {{summary.record.tcn_value()}}
 141           </div>
 142         </div>
 143         <div class="row">
 144           <div class="w-100">
 145             Holds: {{summary.holdCount}}
 146           </div>
 147         </div>
 148       </div>
 149       <div class="col-lg-2">
 150         <div class="row">
 151           <div class="col-lg-12">
 152             <div class="float-right small-text-1">
 153               Created {{summary.record.create_date() | date:'shortDate'}} by
 154               <!-- creator if fleshed after the initial data set is loaded -->
 155               <a *ngIf="summary.record.creator().usrname" target="_self"
 156                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 157                   {{summary.record.creator().usrname()}}
 158               </a>
 159               <!-- add a spacer pending data to reduce page shuffle -->
 160               <span *ngIf="!summary.record.creator().usrname"> ... </span>
 161             </div>
 162           </div>
 163         </div>
 164         <div class="row pt-2">
 165           <div class="col-lg-12">
 166             <div class="float-right small-text-1" i18n>
 167               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 168               <a *ngIf="summary.record.editor().usrname" target="_self"
 169                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 170                   {{summary.record.editor().usrname()}}
 171               </a>
 172               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 173             </div>
 174           </div>
 175         </div>
 176         <div class="row pt-2">
 177           <div class="col-lg-12">
 178             <div class="float-right">
 179               <span>
 180                 <button (click)="placeHold()"
 181                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
 182                   <span class="material-icons">check</span>
 183                   <span i18n>Place Hold</span>
 184                 </button>
 185               </span>
 186             </div>
 187           </div>
 188         </div>
 189       </div><!-- col -->
 190     </div><!-- row -->
 191   </div><!-- card-body -->
 192 </div><!-- card -->
 193