LP#1775466 Angular(6) base application
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / catalog / result / record.component.html
1 <!-- 
2   TODO
3   routerLink's
4   egDateFilter's
5 -->
6 <eg-record-bucket-dialog #addToListDialog>
7 </eg-record-bucket-dialog>
8
9 <div class="col-lg-12 card tight-card mb-2 bg-light">
10   <div class="card-body">
11     <div class="row">
12       <div class="col-lg-1">
13         <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
14           <img style="height:80px"
15             src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
16         </a>
17       </div>
18       <div class="col-lg-5">
19         <div class="row">
20           <div class="col-lg-12 font-weight-bold">
21             <!-- nbsp allows the column to take shape when no value exists -->
22             <span class="font-weight-light font-italic">
23               #{{index + 1 + searchContext.pager.offset}}
24             </span>
25             <a href="javascript:void(0)"
26               (click)="navigatToRecord(summary.id)">
27               {{summary.display.title || '&nbsp;'}}
28             </a>
29           </div>
30         </div>
31         <div class="row pt-2">
32           <div class="col-lg-12">
33             <!-- nbsp allows the column to take shape when no value exists -->
34             <a href="javascript:void(0)"
35               (click)="searchAuthor(summary)">
36               {{summary.display.author || '&nbsp;'}}
37             </a>
38           </div>
39         </div>
40         <div class="row pt-2">
41           <div class="col-lg-12">
42             <!-- only shows the first icon format -->
43             <span *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
44               <img class="pr-1"
45                 src="/images/format_icons/icon_format/{{summary.attributes.icon_format[0]}}.png"/>
46               <span>{{iconFormatLabel(summary.attributes.icon_format[0])}}</span>
47             </span>
48             <span class='pl-1'>{{summary.display.edition}}</span>
49             <span class='pl-1'>{{summary.display.pubdate}}</span>
50           </div>
51         </div>
52       </div>
53       <div class="col-lg-2">
54         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}" 
55           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
56           <div class="w-100" *ngIf="copyCount.type == 'staff'">
57             <div class="float-left text-left w-50">
58               <span class="pr-1">
59               {{copyCount.available}} / {{copyCount.count}} items
60               </span>
61             </div>
62             <div class="float-left w-50">
63               @ {{orgName(copyCount.org_unit)}}
64             </div>
65           </div>
66         </div>
67       </div>
68       <div class="col-lg-1">
69         <div class="row">
70           <div class="w-100">
71             TCN: {{summary.record.tcn_value()}}
72           </div>
73         </div>
74         <div class="row">
75           <div class="w-100">
76             Holds: {{summary.holdCount}}
77           </div>
78         </div>
79       </div>
80       <div class="col-lg-3">
81         <div class="row">
82           <div class="col-lg-12">
83             <div class="float-right small-text-1">
84               Created {{summary.record.create_date() | date:'shortDate'}} by
85               <!-- creator if fleshed after the initial data set is loaded -->
86               <a *ngIf="summary.record.creator().usrname" target="_self" 
87                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
88                   {{summary.record.creator().usrname()}}
89               </a>
90               <!-- add a spacer pending data to reduce page shuffle -->
91               <span *ngIf="!summary.record.creator().usrname"> ... </span>
92             </div>
93           </div>
94         </div>
95         <div class="row pt-2">
96           <div class="col-lg-12">
97             <div class="float-right small-text-1" i18n>
98               Edited {{summary.record.edit_date() | date:'shortDate'}} by
99               <a *ngIf="summary.record.editor().usrname" target="_self" 
100                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
101                   {{summary.record.editor().usrname()}}
102               </a>
103               <span *ngIf="!summary.record.editor().usrname"> ... </span>
104             </div>
105           </div>
106         </div>
107         <div class="row pt-2">
108           <div class="col-lg-12">
109             <div class="float-right">
110               <span>
111                 <button (click)="placeHold()"
112                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
113                   <span class="material-icons">check</span>
114                   <span i18n>Place Hold</span>
115                 </button>
116               </span>
117               <span class="pl-1">
118                 <button 
119                   (click)="addToListDialog.recordId=summary.record.id(); addToListDialog.open({size: 'lg'})"
120                   class="btn btn-sm btn-info label-with-material-icon small-text-1">
121                   <span class="material-icons">playlist_add_check</span>
122                   <span i18n>Add to List</span>
123                 </button>
124               </span>
125             </div>
126           </div>
127         </div>
128       </div><!-- col -->
129     </div><!-- row -->
130   </div><!-- card-body -->
131 </div><!-- card -->
132