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