602d768485b281beea95bad48b921d427b67af8a
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / catalog / result / record.component.html
1
2 <div class="col-lg-12 card tight-card mb-2 bg-light">
3   <div class="card-body">
4     <div class="row">
5       <!-- Checkbox, jacket image, and title blob live in a flex row
6            because there's no way to give them col-lg-* columns that
7            don't waste a lot of space. -->
8       <div class="col-lg-7 d-flex">
9         <label class="checkbox">
10           <span class="font-weight-bold font-italic">
11             {{index + 1 + searchContext.pager.offset}}.
12           </span>
13           <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
14             (change)="toggleBasketEntry()"/>
15         </label>
16         <div class="pl-2 record-jacket-div" >
17           <ng-container *ngIf="hasMrConstituentRecords(summary)">
18             <a routerLink="/staff/catalog/search"
19               [queryParams]="appendFromMrParam(summary)">
20               <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
21             </a>
22           </ng-container>
23           <ng-container *ngIf="!hasMrConstituentRecords(summary)">
24               <a routerLink="/staff/catalog/record/{{summary.id}}"
25                 [queryParams]="currentParams()">
26                 <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
27               </a>
28           </ng-container>
29         </div>
30         <!-- for call number browse display -->
31         <ng-container *ngIf="callNumber">
32           <div class="pl-2 font-weight-bold">
33             {{callNumber.prefix().label()}}
34             {{callNumber.label()}}
35             {{callNumber.suffix().label()}}
36             @ {{orgName(callNumber.owning_lib())}}
37           </div>
38         </ng-container>
39         <div class="flex-1 pl-2">
40           <div class="row">
41             <div class="col-lg-12 font-weight-bold">
42               <ng-container *ngIf="hasMrConstituentRecords(summary)">
43                   <a routerLink="/staff/catalog/search"
44                     [queryParams]="appendFromMrParam(summary)">
45                     <eg-bib-display-field [summary]="summary" field="title"
46                       [usePlaceholder]="true"></eg-bib-display-field>
47                   </a>
48               </ng-container>
49               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
50                 <a routerLink="/staff/catalog/record/{{summary.id}}"
51                   [queryParams]="currentParams()">
52                   <eg-bib-display-field [summary]="summary" field="title"
53                     [usePlaceholder]="true"></eg-bib-display-field>
54                 </a>
55               </ng-container>
56             </div>
57           </div>
58           <div class="row pt-2">
59             <div class="col-lg-12">
60               <a routerLink="/staff/catalog/search"
61                 [queryParams]="getAuthorSearchParams(summary)">
62                 <eg-bib-display-field [summary]="summary" field="author"
63                   [usePlaceholder]="true"></eg-bib-display-field>
64               </a>
65             </div>
66           </div>
67           <div class="row pt-2">
68             <div class="col-lg-12">
69               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
70                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
71                 <span class="pr-1">
72                   <img class="pr-1"
73                     src="/images/format_icons/icon_format/{{icon}}.png"/>
74                   <span>{{iconFormatLabel(icon)}}</span>
75                 </span>
76                 </ng-container>
77               </ng-container>
78             </div>
79           </div>
80           <div class="row pt-2">
81             <div class="col-lg-12">
82               <ng-container *ngIf="summary.display.physical_description">
83                 <!-- [].concat() to avoid modifying the summary arrays -->
84                 <div class="pb-1" i18n>Phys. Desc.:
85                   <eg-bib-display-field [summary]="summary"
86                     field="physical_description" joiner=","></eg-bib-display-field>
87                 </div>
88               </ng-container>
89               <ng-container *ngIf="summary.display.edition">
90                 <div class="pb-1" i18n>Edition:
91                   <eg-bib-display-field [summary]="summary"
92                     field="edition" joiner=","></eg-bib-display-field>
93                 </div>
94               </ng-container>
95               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
96                 <!-- note publisher typically includes pubdate -->
97                 <ng-container *ngIf="summary.display.publisher; else pubDate">
98                   <div class="pb-1" i18n>Publisher:
99                   <eg-bib-display-field [summary]="summary" field="publisher">
100                   </eg-bib-display-field>
101                   </div>
102                 </ng-container>
103                 <ng-template #pubDate>
104                   <div class="pb-1" i18n>Pub Date:
105                     <eg-bib-display-field [summary]="summary" field="pubdate">
106                     </eg-bib-display-field>
107                   </div>
108                 </ng-template>
109               </ng-container>
110               <ng-container *ngIf="summary.display.isbn">
111                 <div class="pb-1" i18n>ISBN:
112                   <eg-bib-display-field [summary]="summary"
113                     field="isbn" joiner=","></eg-bib-display-field>
114                 </div>
115               </ng-container>
116               <ng-container *ngIf="summary.display.upc">
117                 <div class="pb-1" i18n>UPC:
118                   <eg-bib-display-field [summary]="summary"
119                     field="upc" joiner=","></eg-bib-display-field>
120                 </div>
121               </ng-container>
122               <ng-container *ngIf="summary.display.issn">
123                 <div i18n>ISSN:
124                   <eg-bib-display-field [summary]="summary"
125                     field="issn" joiner=","></eg-bib-display-field>
126                 </div>
127               </ng-container>
128               <ng-container *ngIf="hasCourse">
129                 <div i18n>Associated Courses:
130                   <span *ngFor="let course of courses; let isLast=last">
131                     <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
132                       {{course.name()}} ({{course.course_number()}})
133                     </a>{{isLast ? '' : ', '}}
134                   </span>
135                 </div>
136               </ng-container>
137             </div>
138           </div>
139         </div>
140       </div>
141       <div class="col-lg-2">
142         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}"
143           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
144           <div class="float-left text-left w-50">
145             <span class="pr-1">
146             {{copyCount.available}} / {{copyCount.count}} items
147             </span>
148           </div>
149           <div class="float-left w-50">
150             @ {{orgName(copyCount.org_unit)}}
151           </div>
152         </div>
153       </div>
154       <div class="col-lg-1">
155         <div class="row">
156           <div class="w-100">
157             TCN: {{summary.record.tcn_value()}}
158           </div>
159         </div>
160         <div class="row">
161           <div class="w-100">
162             Holds: {{summary.holdCount}}
163           </div>
164         </div>
165       </div>
166       <div class="col-lg-2">
167         <div class="row">
168           <div class="col-lg-12">
169             <div class="float-right small-text-1">
170               Created {{summary.record.create_date() | date:'shortDate'}} by
171               <!-- creator if fleshed after the initial data set is loaded -->
172               <a *ngIf="summary.record.creator().usrname" target="_self"
173                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
174                   {{summary.record.creator().usrname()}}
175               </a>
176               <!-- add a spacer pending data to reduce page shuffle -->
177               <span *ngIf="!summary.record.creator().usrname"> ... </span>
178             </div>
179           </div>
180         </div>
181         <div class="row pt-2">
182           <div class="col-lg-12">
183             <div class="float-right small-text-1" i18n>
184               Edited {{summary.record.edit_date() | date:'shortDate'}} by
185               <a *ngIf="summary.record.editor().usrname" target="_self"
186                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
187                   {{summary.record.editor().usrname()}}
188               </a>
189               <span *ngIf="!summary.record.editor().usrname"> ... </span>
190             </div>
191           </div>
192         </div>
193         <div class="row pt-2">
194           <div class="col-lg-12">
195             <div class="float-right">
196               <span>
197                 <button (click)="placeHold()"
198                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
199                   <span class="material-icons">check</span>
200                   <span i18n>Place Hold</span>
201                 </button>
202               </span>
203             </div>
204           </div>
205         </div>
206       </div><!-- col -->
207     </div><!-- row -->
208   </div><!-- card-body -->
209 </div><!-- card -->
210