LP1821382 Add Items to Bucket menu action
[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
7 <div class="col-lg-12 card tight-card mb-2 bg-light">
8   <div class="card-body">
9     <div class="row">
10       <!-- Checkbox, jacket image, and title blob live in a flex row
11            because there's no way to give them col-lg-* columns that
12            don't waste a lot of space. -->
13       <div class="col-lg-6 d-flex">
14         <label class="checkbox">
15           <span class="font-weight-bold font-italic">
16             {{index + 1 + searchContext.pager.offset}}.
17           </span>
18           <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
19             (change)="toggleBasketEntry()"/>
20         </label>
21         <!-- XXX hard-coded width so columns align vertically regardless
22              of the presence of a jacket image -->
23         <div class="pl-2 record-jacket-div" >
24           <a href="javascript:void(0)" (click)="navigateToRecord(summary)">
25             <img src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
26           </a>
27         </div>
28         <div class="flex-1 pl-2">
29           <div class="row">
30             <div class="col-lg-12 font-weight-bold">
31               <!-- nbsp allows the column to take shape when no value exists -->
32               <a href="javascript:void(0)"
33                 (click)="navigateToRecord(summary)">
34                 {{summary.display.title || '&nbsp;'}}
35               </a>
36             </div>
37           </div>
38           <div class="row pt-2">
39             <div class="col-lg-12">
40               <!-- nbsp allows the column to take shape when no value exists -->
41               <a href="javascript:void(0)"
42                 (click)="searchAuthor(summary)">
43                 {{summary.display.author || '&nbsp;'}}
44               </a>
45             </div>
46           </div>
47           <div class="row pt-2">
48             <div class="col-lg-12">
49               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
50                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
51                 <span class="pr-1">
52                   <img class="pr-1"
53                     src="/images/format_icons/icon_format/{{icon}}.png"/>
54                   <span>{{iconFormatLabel(icon)}}</span>
55                 </span>
56                 </ng-container>
57               </ng-container>
58               <span class='pl-1'>{{summary.display.edition}}</span>
59               <span class='pl-1'>{{summary.display.pubdate}}</span>
60             </div>
61           </div>
62         </div>
63       </div>
64       <div class="col-lg-2">
65         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}" 
66           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
67           <div class="w-100" *ngIf="copyCount.type == 'staff'">
68             <div class="float-left text-left w-50">
69               <span class="pr-1">
70               {{copyCount.available}} / {{copyCount.count}} items
71               </span>
72             </div>
73             <div class="float-left w-50">
74               @ {{orgName(copyCount.org_unit)}}
75             </div>
76           </div>
77         </div>
78       </div>
79       <div class="col-lg-1">
80         <div class="row">
81           <div class="w-100">
82             TCN: {{summary.record.tcn_value()}}
83           </div>
84         </div>
85         <div class="row">
86           <div class="w-100">
87             Holds: {{summary.holdCount}}
88           </div>
89         </div>
90       </div>
91       <div class="col-lg-3">
92         <div class="row">
93           <div class="col-lg-12">
94             <div class="float-right small-text-1">
95               Created {{summary.record.create_date() | date:'shortDate'}} by
96               <!-- creator if fleshed after the initial data set is loaded -->
97               <a *ngIf="summary.record.creator().usrname" target="_self" 
98                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
99                   {{summary.record.creator().usrname()}}
100               </a>
101               <!-- add a spacer pending data to reduce page shuffle -->
102               <span *ngIf="!summary.record.creator().usrname"> ... </span>
103             </div>
104           </div>
105         </div>
106         <div class="row pt-2">
107           <div class="col-lg-12">
108             <div class="float-right small-text-1" i18n>
109               Edited {{summary.record.edit_date() | date:'shortDate'}} by
110               <a *ngIf="summary.record.editor().usrname" target="_self" 
111                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
112                   {{summary.record.editor().usrname()}}
113               </a>
114               <span *ngIf="!summary.record.editor().usrname"> ... </span>
115             </div>
116           </div>
117         </div>
118         <div class="row pt-2">
119           <div class="col-lg-12">
120             <div class="float-right">
121               <span>
122                 <button (click)="placeHold()"
123                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
124                   <span class="material-icons">check</span>
125                   <span i18n>Place Hold</span>
126                 </button>
127               </span>
128             </div>
129           </div>
130         </div>
131       </div><!-- col -->
132     </div><!-- row -->
133   </div><!-- card-body -->
134 </div><!-- card -->
135