Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html

   1
   2 <div class='eg-bib-summary card tight-card w-100' *ngIf="summary">
   3   <div class="card-header d-flex">
   4     <div id="bib-record-summary" class="fw-bold">
   5       <h2 class="record-summary" i18n>Record Summary</h2>
   6       <ng-container *ngIf="summary.record.deleted() === 't'">
   7         <span class="text-danger" i18n>(Deleted)</span>
   8       </ng-container>
   9       <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
  10         <ng-container *ngFor="let icon of summary.attributes.icon_format">
  11           <span class="pe-1 ps-2">
  12             <img class="pe-1" alt=""
  13               src="/images/format_icons/icon_format/{{icon}}.png"/>
  14             <span class="fw-normal">{{iconFormatLabel(icon)}}</span>
  15           </span>
  16         </ng-container>
  17       </ng-container>
  18     </div>
  19     <div class="flex-1"></div>
  20     <div>
  21       <button class="with-material-icon btn btn-link" type="button"
  22         title="Show More" i18n-title
  23         *ngIf="!expand" (click)="expand=true">
  24         <span class="material-icons" aria-hidden="true">expand_more</span>
  25       </button>
  26       <button class="with-material-icon btn btn-link" type="button"
  27         title="Show Less" i18n-title aria-label="Show Less" i18n-aria-label
  28         *ngIf="expand" (click)="expand=false">
  29         <span class="material-icons" aria-hidden="true">expand_less</span>
  30       </button>
  31     </div>
  32   </div>
  33   <div class="row">
  34
  35     <!-- in expanded display, show the jacket image along the left -->
  36     <ng-container *ngIf="expand">
  37       <div class="col-lg-1 pe-0">
  38         <a href="/opac/extras/ac/jacket/large/r/{{summary.id}}" target="_blank">
  39           <img class="jacket jacket-medium"
  40             alt="Jacket Image" i18n-alt
  41             src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
  42         </a>
  43       </div>
  44     </ng-container>
  45
  46     <!-- make room for the jacket image when expanded -->
  47     <div [ngClass]="{'col-lg-11 ps-0': expand, 'col-lg-12': !expand}">
  48       <div class="card-body">
  49         <ul class="list-group list-group-flush">
  50           <li class="list-group-item">
  51             <div class="d-flex">
  52               <div class="flex-1 fw-bold" i18n>Title:</div>
  53               <div class="flex-3">
  54                 <a routerLink="/staff/catalog/record/{{summary.id}}" target="_blank">
  55                   <eg-bib-display-field [summary]="summary" field="title"></eg-bib-display-field>
  56                 </a>
  57               </div>
  58               <div class="flex-1 fw-bold ps-1" i18n>Edition:</div>
  59               <div class="flex-1">{{summary.display.edition}}</div>
  60               <div class="flex-1 fw-bold" i18n>TCN:</div>
  61               <div class="flex-1">{{summary.record.tcn_value()}}</div>
  62               <div class="flex-1 fw-bold ps-1" i18n>Created By:</div>
  63               <div class="flex-1" *ngIf="summary.record.creator().usrname">
  64                 <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout" target="_blank">
  65                   {{summary.record.creator().usrname()}}
  66                 </a>
  67               </div>
  68             </div>
  69           </li>
  70           <li class="list-group-item" *ngIf="expand">
  71             <div class="d-flex">
  72               <div class="flex-1 fw-bold" i18n>Author:</div>
  73               <div class="flex-3">{{summary.display.author}}</div>
  74               <div class="flex-1 fw-bold ps-1" i18n>Pubdate:</div>
  75               <div class="flex-1">{{summary.display.pubdate}}</div>
  76               <div class="flex-1 fw-bold" i18n>Database ID:</div>
  77               <div class="flex-1">{{summary.id}}</div>
  78               <div class="flex-1 fw-bold ps-1" i18n>Last Edited By:</div>
  79               <div class="flex-1" *ngIf="summary.record.editor().usrname">
  80                 <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout" target="_blank">
  81                   {{summary.record.editor().usrname()}}
  82                 </a>
  83               </div>
  84             </div>
  85           </li>
  86           <li class="list-group-item" *ngIf="expand">
  87             <div class="d-flex">
  88               <div class="flex-1 fw-bold" i18n>Bib Call #:</div>
  89               <div class="flex-3">{{summary.bibCallNumber}}</div>
  90               <div class="flex-1 fw-bold" i18n>Record Owner:</div>
  91               <div class="flex-1">{{orgName(summary.record.owner())}}</div>
  92               <div class="flex-1 fw-bold ps-1" i18n>Created On:</div>
  93               <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
  94               <div class="flex-1 fw-bold ps-1" i18n>Last Edited On:</div>
  95               <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
  96             </div>
  97           </li>
  98           <ng-container *ngIf="expand && hasCourse">
  99             <li class="list-group-item">
 100               <div class="d-flex">
 101                 <div class="flex-1 fw-bold" i18n>Associated Courses</div>
 102               </div>
 103             </li>
 104             <li class="list-group-item" *ngFor="let course of courses">
 105               <div class="d-flex">
 106                 <div class="flex-1 fw-bold" i18n>Course Name:</div>
 107                 <div class="flex-3">
 108                   <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}" target="_blank">
 109                     {{course.name()}}
 110                   </a>
 111                 </div>
 112                 <div class="flex-1 fw-bold" i18n>Course Number:</div>
 113                 <div class="flex-1">{{course.course_number()}}</div>
 114                 <div class="flex-1 fw-bold" i18n>Section Number:</div>
 115                 <div class="flex-1">{{course.section_number()}}</div>
 116                 <div class="flex-1 fw-bold" i18n>Owning Library:</div>
 117                 <div class="flex-1">{{this.org.get(course.owning_lib()).shortname()}}</div>
 118               </div>
 119             </li>
 120           </ng-container>
 121           <ng-container *ngIf="expand && summary.eResourceUrls.length">
 122             <li class="list-group-item" *ngFor="let url of summary.eResourceUrls">
 123               <div class="d-flex">
 124                 <div class="flex-1 fw-bold">
 125                   <ng-container [ngSwitch]="url.ind2">
 126                     <ng-container *ngSwitchCase="'0'" i18n>Resource:</ng-container>
 127                     <ng-container *ngSwitchCase="'1'" i18n>Version of Resource:</ng-container>
 128                     <ng-container *ngSwitchCase="'2'" i18n>Related Resource:</ng-container>
 129                     <ng-container *ngSwitchDefault i18n></ng-container>
 130                   </ng-container>
 131                 </div>
 132                 <div class="flex-5">
 133                   <div><a href="{{url.href}}" target="_blank">{{url.label}}</a></div>
 134                   <div class="pt-1">{{url.note}}</div>
 135                 </div>
 136               </div>
 137             </li>
 138           </ng-container>
 139         </ul>
 140       </div>
 141     </div><!-- col -->
 142   </div><!-- row -->
 143 </div>
 144