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 class="font-weight-bold">
   5       Record Summary
   6       <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
   7         <ng-container *ngFor="let icon of summary.attributes.icon_format">
   8           <span class="pr-1 pl-2">
   9             <img class="pr-1"
  10               src="/images/format_icons/icon_format/{{icon}}.png"/>
  11             <span class="font-weight-normal">{{iconFormatLabel(icon)}}</span>
  12           </span>
  13         </ng-container>
  14       </ng-container>
  15     </div>
  16     <div class="flex-1"></div>
  17     <div>
  18       <a class="with-material-icon no-href text-primary"
  19         title="Show More" i18n-title
  20         *ngIf="!expand" (click)="expand=true">
  21         <span class="material-icons">expand_more</span>
  22       </a>
  23       <a class="with-material-icon no-href text-primary"
  24         title="Show Less" i18n-title
  25         *ngIf="expand" (click)="expand=false">
  26         <span class="material-icons">expand_less</span>
  27       </a>
  28     </div>
  29   </div>
  30   <div class="row">
  31
  32     <!-- in expanded display, show the jacket image along the left -->
  33     <ng-container *ngIf="expand">
  34       <div class="col-lg-1 pr-0">
  35         <a href="/opac/extras/ac/jacket/large/r/{{summary.id}}">
  36           <img class="jacket jacket-medium"
  37             alt="Jacket Image" i18n-alt
  38             src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
  39         </a>
  40       </div>
  41     </ng-container>
  42
  43     <!-- make room for the jacket image when expanded -->
  44     <div [ngClass]="{'col-lg-11 pl-0': expand, 'col-lg-12': !expand}">
  45       <div class="card-body">
  46         <ul class="list-group list-group-flush">
  47           <li class="list-group-item">
  48             <div class="d-flex">
  49               <div class="flex-1 font-weight-bold" i18n>Title:</div>
  50               <div class="flex-3">{{summary.display.title}}</div>
  51               <div class="flex-1 font-weight-bold pl-1" i18n>Edition:</div>
  52               <div class="flex-1">{{summary.display.edition}}</div>
  53               <div class="flex-1 font-weight-bold" i18n>TCN:</div>
  54               <div class="flex-1">{{summary.record.tcn_value()}}</div>
  55               <div class="flex-1 font-weight-bold pl-1" i18n>Created By:</div>
  56               <div class="flex-1" *ngIf="summary.record.creator().usrname">
  57                 <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
  58                   {{summary.record.creator().usrname()}}
  59                 </a>
  60               </div>
  61             </div>
  62           </li>
  63           <li class="list-group-item" *ngIf="expand">
  64             <div class="d-flex">
  65               <div class="flex-1 font-weight-bold" i18n>Author:</div>
  66               <div class="flex-3">{{summary.display.author}}</div>
  67               <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate:</div>
  68               <div class="flex-1">{{summary.display.pubdate}}</div>
  69               <div class="flex-1 font-weight-bold" i18n>Database ID:</div>
  70               <div class="flex-1">{{summary.id}}</div>
  71               <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By:</div>
  72               <div class="flex-1" *ngIf="summary.record.editor().usrname">
  73                 <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
  74                   {{summary.record.editor().usrname()}}
  75                 </a>
  76               </div>
  77             </div>
  78           </li>
  79           <li class="list-group-item" *ngIf="expand">
  80             <div class="d-flex">
  81               <div class="flex-1 font-weight-bold" i18n>Bib Call #:</div>
  82               <div class="flex-3">{{summary.bibCallNumber}}</div>
  83               <div class="flex-1 font-weight-bold" i18n>Record Owner:</div>
  84               <div class="flex-1">{{orgName(summary.record.owner())}}</div>
  85               <div class="flex-1 font-weight-bold pl-1" i18n>Created On:</div>
  86               <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
  87               <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited On:</div>
  88               <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
  89             </div>
  90           </li>
  91         </ul>
  92       </div>
  93     </div><!-- col -->
  94   </div><!-- row -->
  95 </div>
  96