LP1819498 Angular staff catalog call number browse
[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         <!-- for call number browse display -->
29         <ng-container *ngIf="callNumber">
30           <div class="pl-2 font-weight-bold">
31             {{callNumber.prefix().label()}}
32             {{callNumber.label()}}
33             {{callNumber.suffix().label()}}
34             @ {{orgName(callNumber.owning_lib())}}
35           </div>
36         </ng-container>
37         <div class="flex-1 pl-2">
38           <div class="row">
39             <div class="col-lg-12 font-weight-bold">
40               <!-- nbsp allows the column to take shape when no value exists -->
41               <a href="javascript:void(0)"
42                 (click)="navigateToRecord(summary)">
43                 {{summary.display.title || '&nbsp;'}}
44               </a>
45             </div>
46           </div>
47           <div class="row pt-2">
48             <div class="col-lg-12">
49               <!-- nbsp allows the column to take shape when no value exists -->
50               <a href="javascript:void(0)"
51                 (click)="searchAuthor(summary)">
52                 {{summary.display.author || '&nbsp;'}}
53               </a>
54             </div>
55           </div>
56           <div class="row pt-2">
57             <div class="col-lg-12">
58               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
59                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
60                 <span class="pr-1">
61                   <img class="pr-1"
62                     src="/images/format_icons/icon_format/{{icon}}.png"/>
63                   <span>{{iconFormatLabel(icon)}}</span>
64                 </span>
65                 </ng-container>
66               </ng-container>
67               <span class='pl-1'>{{summary.display.edition}}</span>
68               <span class='pl-1'>{{summary.display.pubdate}}</span>
69             </div>
70           </div>
71         </div>
72       </div>
73       <div class="col-lg-2">
74         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}" 
75           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
76           <div class="w-100" *ngIf="copyCount.type == 'staff'">
77             <div class="float-left text-left w-50">
78               <span class="pr-1">
79               {{copyCount.available}} / {{copyCount.count}} items
80               </span>
81             </div>
82             <div class="float-left w-50">
83               @ {{orgName(copyCount.org_unit)}}
84             </div>
85           </div>
86         </div>
87       </div>
88       <div class="col-lg-1">
89         <div class="row">
90           <div class="w-100">
91             TCN: {{summary.record.tcn_value()}}
92           </div>
93         </div>
94         <div class="row">
95           <div class="w-100">
96             Holds: {{summary.holdCount}}
97           </div>
98         </div>
99       </div>
100       <div class="col-lg-3">
101         <div class="row">
102           <div class="col-lg-12">
103             <div class="float-right small-text-1">
104               Created {{summary.record.create_date() | date:'shortDate'}} by
105               <!-- creator if fleshed after the initial data set is loaded -->
106               <a *ngIf="summary.record.creator().usrname" target="_self" 
107                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
108                   {{summary.record.creator().usrname()}}
109               </a>
110               <!-- add a spacer pending data to reduce page shuffle -->
111               <span *ngIf="!summary.record.creator().usrname"> ... </span>
112             </div>
113           </div>
114         </div>
115         <div class="row pt-2">
116           <div class="col-lg-12">
117             <div class="float-right small-text-1" i18n>
118               Edited {{summary.record.edit_date() | date:'shortDate'}} by
119               <a *ngIf="summary.record.editor().usrname" target="_self" 
120                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
121                   {{summary.record.editor().usrname()}}
122               </a>
123               <span *ngIf="!summary.record.editor().usrname"> ... </span>
124             </div>
125           </div>
126         </div>
127         <div class="row pt-2">
128           <div class="col-lg-12">
129             <div class="float-right">
130               <span>
131                 <button (click)="placeHold()"
132                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
133                   <span class="material-icons">check</span>
134                   <span i18n>Place Hold</span>
135                 </button>
136               </span>
137             </div>
138           </div>
139         </div>
140       </div><!-- col -->
141     </div><!-- row -->
142   </div><!-- card-body -->
143 </div><!-- card -->
144