LP1841823 Marc flat editor repair slashes (AngJS)
[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-7 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           <ng-container *ngIf="hasMrConstituentRecords(summary)">
25             <a routerLink="/staff/catalog/search"
26               [queryParams]="appendFromMrParam(summary)">
27               <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
28             </a>
29           </ng-container>
30           <ng-container *ngIf="!hasMrConstituentRecords(summary)">
31               <a routerLink="/staff/catalog/record/{{summary.id}}"
32                 [queryParams]="currentParams()">
33                 <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
34               </a>
35           </ng-container>
36         </div>
37         <!-- for call number browse display -->
38         <ng-container *ngIf="callNumber">
39           <div class="pl-2 font-weight-bold">
40             {{callNumber.prefix().label()}}
41             {{callNumber.label()}}
42             {{callNumber.suffix().label()}}
43             @ {{orgName(callNumber.owning_lib())}}
44           </div>
45         </ng-container>
46         <div class="flex-1 pl-2">
47           <div class="row">
48             <div class="col-lg-12 font-weight-bold">
49               <!-- nbsp allows the column to take shape when no value exists -->
50               <ng-container *ngIf="hasMrConstituentRecords(summary)">
51                   <a routerLink="/staff/catalog/search"
52                     [queryParams]="appendFromMrParam(summary)">
53                     {{summary.display.title || '&nbsp;'}}
54                   </a>
55               </ng-container>
56               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
57                 <a routerLink="/staff/catalog/record/{{summary.id}}"
58                   [queryParams]="currentParams()">
59                   {{summary.display.title || '&nbsp;'}}
60                 </a>
61               </ng-container>
62             </div>
63           </div>
64           <div class="row pt-2">
65             <div class="col-lg-12">
66               <!-- nbsp allows the column to take shape when no value exists -->
67               <a routerLink="/staff/catalog/search"
68                   [queryParams]="getAuthorSearchParams(summary)">
69                 {{summary.display.author || '&nbsp;'}}
70               </a>
71             </div>
72           </div>
73           <div class="row pt-2">
74             <div class="col-lg-12">
75               <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
76                 <ng-container *ngFor="let icon of summary.attributes.icon_format">
77                 <span class="pr-1">
78                   <img class="pr-1"
79                     src="/images/format_icons/icon_format/{{icon}}.png"/>
80                   <span>{{iconFormatLabel(icon)}}</span>
81                 </span>
82                 </ng-container>
83               </ng-container>
84             </div>
85           </div>
86           <div class="row pt-2">
87             <div class="col-lg-12">
88               <ng-container *ngIf="summary.display.physical_description">
89                 <!-- [].concat() to avoid modifying the summary arrays -->
90                 <div class="pb-1" i18n>Phys. Desc.: 
91                   {{[].concat(summary.display.physical_description).join(', ')}}
92                 </div>
93               </ng-container>
94               <ng-container *ngIf="summary.display.edition">
95                 <div class="pb-1" i18n>Edition: {{summary.display.edition}}</div>
96               </ng-container>
97               <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
98                 <!-- note publisher typically includes pubdate -->
99                 <ng-container *ngIf="summary.display.publisher; else pubDate">
100                   <div class="pb-1" i18n>Publisher: {{summary.display.publisher}}</div>
101                 </ng-container>
102                 <ng-template #pubDate>
103                   <div class="pb-1" i18n>Pub Date: {{summary.display.pubdate}}</div>
104                 </ng-template>
105               </ng-container>
106               <ng-container *ngIf="summary.display.isbn">
107                 <div class="pb-1" i18n>ISBN: 
108                   {{[].concat(summary.display.isbn).join(', ')}}</div>
109               </ng-container>
110               <ng-container *ngIf="summary.display.upc">
111                 <div class="pb-1" i18n>UPC: 
112                   {{[].concat(summary.display.upc).join(', ')}}</div>
113               </ng-container>
114               <ng-container *ngIf="summary.display.issn">
115                 <div i18n>ISSN: 
116                   {{[].concat(summary.display.issn).join(', ')}}</div>
117               </ng-container>
118             </div>
119           </div>
120         </div>
121       </div>
122       <div class="col-lg-2">
123         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}" 
124           *ngFor="let copyCount of summary.holdingsSummary; let copyIdx = index">
125           <div class="w-100" *ngIf="copyCount.type == 'staff'">
126             <div class="float-left text-left w-50">
127               <span class="pr-1">
128               {{copyCount.available}} / {{copyCount.count}} items
129               </span>
130             </div>
131             <div class="float-left w-50">
132               @ {{orgName(copyCount.org_unit)}}
133             </div>
134           </div>
135         </div>
136       </div>
137       <div class="col-lg-1">
138         <div class="row">
139           <div class="w-100">
140             TCN: {{summary.record.tcn_value()}}
141           </div>
142         </div>
143         <div class="row">
144           <div class="w-100">
145             Holds: {{summary.holdCount}}
146           </div>
147         </div>
148       </div>
149       <div class="col-lg-2">
150         <div class="row">
151           <div class="col-lg-12">
152             <div class="float-right small-text-1">
153               Created {{summary.record.create_date() | date:'shortDate'}} by
154               <!-- creator if fleshed after the initial data set is loaded -->
155               <a *ngIf="summary.record.creator().usrname" target="_self" 
156                 href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
157                   {{summary.record.creator().usrname()}}
158               </a>
159               <!-- add a spacer pending data to reduce page shuffle -->
160               <span *ngIf="!summary.record.creator().usrname"> ... </span>
161             </div>
162           </div>
163         </div>
164         <div class="row pt-2">
165           <div class="col-lg-12">
166             <div class="float-right small-text-1" i18n>
167               Edited {{summary.record.edit_date() | date:'shortDate'}} by
168               <a *ngIf="summary.record.editor().usrname" target="_self" 
169                 href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
170                   {{summary.record.editor().usrname()}}
171               </a>
172               <span *ngIf="!summary.record.editor().usrname"> ... </span>
173             </div>
174           </div>
175         </div>
176         <div class="row pt-2">
177           <div class="col-lg-12">
178             <div class="float-right">
179               <span>
180                 <button (click)="placeHold()"
181                   class="btn btn-sm btn-success label-with-material-icon small-text-1">
182                   <span class="material-icons">check</span>
183                   <span i18n>Place Hold</span>
184                 </button>
185               </span>
186             </div>
187           </div>
188         </div>
189       </div><!-- col -->
190     </div><!-- row -->
191   </div><!-- card-body -->
192 </div><!-- card -->
193