LP1860044 Angular catalog search result highlights
[working/Evergreen.git] / 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">
51                 <eg-bib-display-field [summary]="summary" field="title">
52                 </eg-bib-display-field>
53               </div>
54               <div class="flex-1 font-weight-bold pl-1" i18n>Edition:</div>
55               <div class="flex-1">{{summary.display.edition}}</div>
56               <div class="flex-1 font-weight-bold" i18n>TCN:</div>
57               <div class="flex-1">{{summary.record.tcn_value()}}</div>
58               <div class="flex-1 font-weight-bold pl-1" i18n>Created By:</div>
59               <div class="flex-1" *ngIf="summary.record.creator().usrname">
60                 <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
61                   {{summary.record.creator().usrname()}}
62                 </a>
63               </div>
64             </div>
65           </li>
66           <li class="list-group-item" *ngIf="expand">
67             <div class="d-flex">
68               <div class="flex-1 font-weight-bold" i18n>Author:</div>
69               <div class="flex-3">{{summary.display.author}}</div>
70               <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate:</div>
71               <div class="flex-1">{{summary.display.pubdate}}</div>
72               <div class="flex-1 font-weight-bold" i18n>Database ID:</div>
73               <div class="flex-1">{{summary.id}}</div>
74               <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By:</div>
75               <div class="flex-1" *ngIf="summary.record.editor().usrname">
76                 <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
77                   {{summary.record.editor().usrname()}}
78                 </a>
79               </div>
80             </div>
81           </li>
82           <li class="list-group-item" *ngIf="expand">
83             <div class="d-flex">
84               <div class="flex-1 font-weight-bold" i18n>Bib Call #:</div>
85               <div class="flex-3">{{summary.bibCallNumber}}</div>
86               <div class="flex-1 font-weight-bold" i18n>Record Owner:</div>
87               <div class="flex-1">{{orgName(summary.record.owner())}}</div>
88               <div class="flex-1 font-weight-bold pl-1" i18n>Created On:</div>
89               <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
90               <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited On:</div>
91               <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
92             </div>
93           </li>
94         </ul>
95       </div>
96     </div><!-- col -->
97   </div><!-- row -->
98 </div>
99