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               <ng-container *ngIf="has_course">
 129                 <div i18n>Associated Courses:
 130                   {{courseNames.join(', ')}}</div>
 131               </ng-container>
 132             </div>
 133           </div>
 134         </div>
 135       </div>
 136       <div class="col-lg-2">
 137         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
 138           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
 139           <div class="float-left text-left w-50">
 140             <span class="pr-1">
 141             {{copyCount.available}} / {{copyCount.count}} items
 142             </span>
 143           </div>
 144           <div class="float-left w-50">
 145             @ {{orgName(copyCount.org_unit)}}
 146           </div>
 147         </div>
 148       </div>
 149       <div class="col-lg-1">
 150         <div class="row">
 151           <div class="w-100">
 152             TCN: {{summary.record.tcn_value()}}
 153           </div>
 154         </div>
 155         <div class="row">
 156           <div class="w-100">
 157             Holds: {{summary.holdCount}}
 158           </div>
 159         </div>
 160       </div>
 161       <div class="col-lg-2">
 162         <div class="row">
 163           <div class="col-lg-12">
 164             <div class="float-right small-text-1">
 165               Created {{summary.record.create_date() | date:'shortDate'}} by
 166               <!-- creator if fleshed after the initial data set is loaded -->
 167               <a *ngIf="summary.record.creator().usrname" target="_self"
 168                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 169                   {{summary.record.creator().usrname()}}
 170               </a>
 171               <!-- add a spacer pending data to reduce page shuffle -->
 172               <span *ngIf="!summary.record.creator().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 small-text-1" i18n>
 179               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 180               <a *ngIf="summary.record.editor().usrname" target="_self"
 181                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 182                   {{summary.record.editor().usrname()}}
 183               </a>
 184               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 185             </div>
 186           </div>
 187         </div>
 188         <div class="row pt-2">
 189           <div class="col-lg-12">
 190             <div class="float-right">
 191               <span>
 192                 <button (click)="placeHold()"
 193                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
 194                   <span class="material-icons">check</span>
 195                   <span i18n>Place Hold</span>
 196                 </button>
 197               </span>
 198             </div>
 199           </div>
 200         </div>
 201       </div><!-- col -->
 202     </div><!-- row -->
 203   </div><!-- card-body -->
 204 </div><!-- card -->
 205