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.firstCallNumber">
  83                 <div class="pb-1" i18n>Call Number:
  84                   {{summary.firstCallNumber.call_number_prefix_label}}
  85                   {{summary.firstCallNumber.call_number_label}}
  86                   {{summary.firstCallNumber.call_number_suffix_label}}
  87                 </div>
  88               </ng-container>
  89               <ng-container *ngIf="summary.display.physical_description">
  90                 <!-- [].concat() to avoid modifying the summary arrays -->
  91                 <div class="pb-1" i18n>Phys. Desc.:
  92                   <eg-bib-display-field [summary]="summary"
  93                     field="physical_description" joiner=","></eg-bib-display-field>
  94                 </div>
  95               </ng-container>
  96               <ng-container *ngIf="summary.display.edition">
  97                 <div class="pb-1" i18n>Edition:
  98                   <eg-bib-display-field [summary]="summary"
  99                     field="edition" joiner=","></eg-bib-display-field>
 100                 </div>
 101               </ng-container>
 102               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
 103                 <!-- note publisher typically includes pubdate -->
 104                 <ng-container *ngIf="summary.display.publisher; else pubDate">
 105                   <div class="pb-1" i18n>Publisher:
 106                   <eg-bib-display-field [summary]="summary" field="publisher">
 107                   </eg-bib-display-field>
 108                   </div>
 109                 </ng-container>
 110                 <ng-template #pubDate>
 111                   <div class="pb-1" i18n>Pub Date:
 112                     <eg-bib-display-field [summary]="summary" field="pubdate">
 113                     </eg-bib-display-field>
 114                   </div>
 115                 </ng-template>
 116               </ng-container>
 117               <ng-container *ngIf="summary.display.isbn">
 118                 <div class="pb-1" i18n>ISBN:
 119                   <eg-bib-display-field [summary]="summary"
 120                     field="isbn" joiner=","></eg-bib-display-field>
 121                 </div>
 122               </ng-container>
 123               <ng-container *ngIf="summary.display.upc">
 124                 <div class="pb-1" i18n>UPC:
 125                   <eg-bib-display-field [summary]="summary"
 126                     field="upc" joiner=","></eg-bib-display-field>
 127                 </div>
 128               </ng-container>
 129               <ng-container *ngIf="summary.display.issn">
 130                 <div i18n>ISSN:
 131                   <eg-bib-display-field [summary]="summary"
 132                     field="issn" joiner=","></eg-bib-display-field>
 133                 </div>
 134               </ng-container>
 135               <ng-container *ngIf="hasCourse">
 136                 <div i18n>Associated Courses:
 137                   <span *ngFor="let course of courses; let isLast=last">
 138                     <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
 139                       {{course.name()}} ({{course.course_number()}})
 140                     </a>{{isLast ? '' : ', '}}
 141                   </span>
 142                 </div>
 143               </ng-container>
 144             </div>
 145           </div>
 146         </div>
 147       </div>
 148       <div class="col-lg-2">
 149         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
 150           *ngFor="let copyCount of getHoldingsSummaries(); let copyIdx = index">
 151           <div class="float-left text-left w-50">
 152             <span class="pr-1">
 153             {{copyCount.available}} / {{copyCount.count}} items
 154             </span>
 155           </div>
 156           <div class="float-left w-50">
 157             @ {{orgName(copyCount.org_unit)}}
 158           </div>
 159         </div>
 160       </div>
 161       <div class="col-lg-1">
 162         <div class="row">
 163           <div class="w-100">
 164             TCN: {{summary.record.tcn_value()}}
 165           </div>
 166         </div>
 167         <div class="row">
 168           <div class="w-100">
 169             Holds: {{summary.holdCount}}
 170           </div>
 171         </div>
 172       </div>
 173       <div class="col-lg-2">
 174         <div class="row">
 175           <div class="col-lg-12">
 176             <div class="float-right small-text-1">
 177               Created {{summary.record.create_date() | date:'shortDate'}} by
 178               <!-- creator if fleshed after the initial data set is loaded -->
 179               <a *ngIf="summary.record.creator().usrname" target="_self"
 180                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
 181                   {{summary.record.creator().usrname()}}
 182               </a>
 183               <!-- add a spacer pending data to reduce page shuffle -->
 184               <span *ngIf="!summary.record.creator().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 small-text-1" i18n>
 191               Edited {{summary.record.edit_date() | date:'shortDate'}} by
 192               <a *ngIf="summary.record.editor().usrname" target="_self"
 193                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
 194                   {{summary.record.editor().usrname()}}
 195               </a>
 196               <span *ngIf="!summary.record.editor().usrname"> ... </span>
 197             </div>
 198           </div>
 199         </div>
 200         <div class="row pt-2">
 201           <div class="col-lg-12">
 202             <div class="float-right">
 203               <ng-container *ngIf="summary.record.deleted() === 't'">
 204                 <span class="text-danger" i18n>(Deleted)</span>
 205               </ng-container>
 206               <span>
 207                 <button (click)="placeHold()" [disabled]="!summary.isHoldable"
 208                   [ngClass]="summary.isHoldable ? 'btn-success' : 'btn-secondary'"
 209                   class="btn btn-sm label-with-material-icon small-text-1">
 210                   <span class="material-icons">check</span>
 211                   <span i18n>Place Hold</span>
 212                 </button>
 213               </span>
 214             </div>
 215           </div>
 216         </div>
 217       </div><!-- col -->
 218     </div><!-- row -->
 219     <div class="row" *ngIf="searchContext.showResultExtras && summary.eResourceUrls.length">
 220       <div class="col-lg-12 mt-2">
 221         <div class="w-auto ml-2 mr-2">
 222           <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let url of summary.eResourceUrls">
 223             <div class="col-lg-2">
 224               <span class="font-weight-bold">
 225                 <ng-container [ngSwitch]="url.ind2">
 226                   <ng-container *ngSwitchCase="'0'" i18n>Electronic Resource:</ng-container>
 227                   <ng-container *ngSwitchCase="'1'" i18n>Version of Resource:</ng-container>
 228                   <ng-container *ngSwitchCase="'2'" i18n>Related Resource:</ng-container>
 229                   <ng-container *ngSwitchDefault i18n>Electronic Resource</ng-container>
 230                   </ng-container>
 231                </span>
 232             </div>
 233             <div class="col-lg"><a href="{{url.href}}">{{url.label}}</a> {{url.note}}</div>
 234           </div>
 235         </div>
 236       </div>
 237     </div><!-- row -->
 238     <div class="row" *ngIf="searchContext.showResultExtras && summary.copies">
 239       <div class="col-lg-12 mt-2">
 240         <div class="w-auto ml-2 mr-2">
 241           <ng-container *ngIf="summary.copies.length">
 242             <div class="row p-1 font-weight-bold border-top">
 243               <div class="col-lg-2" i18n>Library</div>
 244               <div class="col-lg-3" i18n>Shelving location</div>
 245               <div class="col-lg-3" i18n>Call number</div>
 246               <div class="col-lg-2" i18n>Status</div>
 247               <div class="col-lg-2" i18n>Due date</div>
 248             </div>
 249             <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let copy of summary.copies">
 250               <div class="col-lg-2" i18n>{{copy.circ_lib_sn}}</div>
 251               <div class="col-lg-3" i18n>{{copy.copy_location}}</div>
 252               <div class="col-lg-3" i18n>
 253                 {{copy.call_number_prefix_label}}
 254                 {{copy.call_number_label}}
 255                 {{copy.call_number_suffix_label}}
 256               </div>
 257               <div class="col-lg-2" i18n>{{copy.copy_status}}</div>
 258               <div class="col-lg-2" *ngIf="copy.due_date">
 259                 {{copy.due_date | date:'shortDate'}}
 260               </div>
 261             </div>
 262           </ng-container>
 263           <ng-container *ngIf="!summary.copies.length && !summary.eResourceUrls.length">
 264             <span class="font-italic" i18n>No Items To Display</span>
 265           </ng-container>
 266         </div>
 267       </div>
 268     </div>
 269   </div><!-- card-body -->
 270 </div><!-- card -->
 271