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

   1
   2 <div class="col-lg-12 card tight-card mb-2 bg-light">
   3   <div class="card-body">
   4     <div class="row">
   5       <!-- Checkbox, jacket image, and title blob live in a flex row
   6            because there's no way to give them col-lg-* columns that
   7            don't waste a lot of space. -->
   8       <div class="col-lg-7 d-flex">
   9         <label class="checkbox">
  10           <span class="font-weight-bold font-italic">
  11             {{index + 1 + searchContext.pager.offset}}.
  12           </span>
  13           <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
  14             (change)="toggleBasketEntry()"/>
  15         </label>
  16         <div class="pl-2 record-jacket-div" >
  17           <ng-container *ngIf="hasMrConstituentRecords(summary)">
  18             <a routerLink="/staff/catalog/search"
  19               [queryParams]="appendFromMrParam(summary)">
  20               <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
  21             </a>
  22           </ng-container>
  23           <ng-container *ngIf="!hasMrConstituentRecords(summary)">
  24               <a routerLink="/staff/catalog/record/{{summary.id}}"
  25                 [queryParams]="currentParams()">
  26                 <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
  27               </a>
  28           </ng-container>
  29         </div>
  30         <!-- for call number browse display -->
  31         <ng-container *ngIf="callNumber">
  32           <div class="pl-2 font-weight-bold">
  33             {{callNumber.prefix().label()}}
  34             {{callNumber.label()}}
  35             {{callNumber.suffix().label()}}
  36             @ {{orgName(callNumber.owning_lib())}}
  37           </div>
  38         </ng-container>
  39         <div class="flex-1 pl-2">
  40           <div class="row">
  41             <div class="col-lg-12 font-weight-bold">
  42               <ng-container *ngIf="hasMrConstituentRecords(summary)">
  43                   <a routerLink="/staff/catalog/search"
  44                     [queryParams]="appendFromMrParam(summary)">
  45                     <eg-bib-display-field [summary]="summary" field="title"
  46                       [usePlaceholder]="true"></eg-bib-display-field>
  47                   </a>
  48               </ng-container>
  49               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
  50                 <a routerLink="/staff/catalog/record/{{summary.id}}"
  51                   [queryParams]="currentParams()">
  52                   <eg-bib-display-field [summary]="summary" field="title"
  53                     [usePlaceholder]="true"></eg-bib-display-field>
  54                 </a>
  55               </ng-container>
  56             </div>
  57           </div>
  58           <div class="row pt-2">
  59             <div class="col-lg-12">
  60               <a routerLink="/staff/catalog/search"
  61                 [queryParams]="getAuthorSearchParams(summary)">
  62                 <eg-bib-display-field [summary]="summary" field="author"
  63                   [usePlaceholder]="true"></eg-bib-display-field>
  64               </a>
  65             </div>
  66           </div>
  67           <div class="row pt-2">
  68             <div class="col-lg-12">
  69               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
  70                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
  71                 <span class="pr-1">
  72                   <img class="pr-1"
  73                     src="/images/format_icons/icon_format/{{icon}}.png"/>
  74                   <span>{{iconFormatLabel(icon)}}</span>
  75                 </span>
  76                 </ng-container>
  77               </ng-container>
  78             </div>
  79           </div>
  80           <div class="row pt-2">
  81             <div class="col-lg-12">
  82               <ng-container *ngIf="summary.display.physical_description">
  83                 <!-- [].concat() to avoid modifying the summary arrays -->
  84                 <div class="pb-1" i18n>Phys. Desc.:
  85                   <eg-bib-display-field [summary]="summary"
  86                     field="physical_description" joiner=","></eg-bib-display-field>
  87                 </div>
  88               </ng-container>
  89               <ng-container *ngIf="summary.display.edition">
  90                 <div class="pb-1" i18n>Edition:
  91                   <eg-bib-display-field [summary]="summary"
  92                     field="edition" joiner=","></eg-bib-display-field>
  93                 </div>
  94               </ng-container>
  95               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
  96                 <!-- note publisher typically includes pubdate -->
  97                 <ng-container *ngIf="summary.display.publisher; else pubDate">
  98                   <div class="pb-1" i18n>Publisher:
  99                   <eg-bib-display-field [summary]="summary" field="publisher">
 100                   </eg-bib-display-field>
 101                   </div>
 102                 </ng-container>
 103                 <ng-template #pubDate>
 104                   <div class="pb-1" i18n>Pub Date:
 105                     <eg-bib-display-field [summary]="summary" field="pubdate">
 106                     </eg-bib-display-field>
 107                   </div>
 108                 </ng-template>
 109               </ng-container>
 110               <ng-container *ngIf="summary.display.isbn">
 111                 <div class="pb-1" i18n>ISBN:
 112                   <eg-bib-display-field [summary]="summary"
 113                     field="isbn" joiner=","></eg-bib-display-field>
 114                 </div>
 115               </ng-container>
 116               <ng-container *ngIf="summary.display.upc">
 117                 <div class="pb-1" i18n>UPC:
 118                   <eg-bib-display-field [summary]="summary"
 119                     field="upc" joiner=","></eg-bib-display-field>
 120                 </div>
 121               </ng-container>
 122               <ng-container *ngIf="summary.display.issn">
 123                 <div i18n>ISSN:
 124                   <eg-bib-display-field [summary]="summary"
 125                     field="issn" joiner=","></eg-bib-display-field>
 126                 </div>
 127               </ng-container>
 128             </div>
 129           </div>
 130         </div>
 131       </div>
 132       <div class="col-lg-2">
 133         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
 134           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
 135           <div class="w-100" *ngIf="copyCount.type == 'staff'">
 136             <div class="float-left text-left w-50">
 137               <span class="pr-1">
 138               {{copyCount.available}} / {{copyCount.count}} items
 139               </span>
 140             </div>
 141             <div class="float-left w-50">
 142               @ {{orgName(copyCount.org_unit)}}
 143             </div>
 144           </div>
 145         </div>
 146       </div>
 147       <div class="col-lg-1">
 148         <div class="row">
 149           <div class="w-100">
 150             TCN: {{summary.record.tcn_value()}}
 151           </div>
 152         </div>
 153         <div class="row">
 154           <div class="w-100">
 155             Holds: {{summary.holdCount}}
 156           </div>
 157         </div>
 158       </div>
 159       <div class="col-lg-2">
 160         <div class="row">
 161           <div class="col-lg-12">
 162             <div class="float-right small-text-1">
 163               Created {{summary.record.create_date() | date:'shortDate'}} by
 164               <!-- creator if fleshed after the initial data set is loaded -->
 165               <a *ngIf="summary.record.creator().usrname" target="_self"
 166                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 167                   {{summary.record.creator().usrname()}}
 168               </a>
 169               <!-- add a spacer pending data to reduce page shuffle -->
 170               <span *ngIf="!summary.record.creator().usrname"> ... </span>
 171             </div>
 172           </div>
 173         </div>
 174         <div class="row pt-2">
 175           <div class="col-lg-12">
 176             <div class="float-right small-text-1" i18n>
 177               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 178               <a *ngIf="summary.record.editor().usrname" target="_self"
 179                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 180                   {{summary.record.editor().usrname()}}
 181               </a>
 182               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 183             </div>
 184           </div>
 185         </div>
 186         <div class="row pt-2">
 187           <div class="col-lg-12">
 188             <div class="float-right">
 189               <span>
 190                 <button (click)="placeHold()"
 191                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
 192                   <span class="material-icons">check</span>
 193                   <span i18n>Place Hold</span>
 194                 </button>
 195               </span>
 196             </div>
 197           </div>
 198         </div>
 199       </div><!-- col -->
 200     </div><!-- row -->
 201   </div><!-- card-body -->
 202 </div><!-- card -->
 203