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