LP1896629 Angular catalog deleted record indicators
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / share / bib-summary / bib-summary.component.html
1
2 <div class='eg-bib-summary card tight-card w-100' *ngIf="summary">
3   <div class="card-header d-flex">
4     <div class="font-weight-bold">
5       Record Summary
6       <ng-container *ngIf="summary.record.deleted() == 't'">
7         <span class="text-danger" i18n>(Deleted)</span>
8       </ng-container>
9       <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
10         <ng-container *ngFor="let icon of summary.attributes.icon_format">
11           <span class="pr-1 pl-2">
12             <img class="pr-1"
13               src="/images/format_icons/icon_format/{{icon}}.png"/>
14             <span class="font-weight-normal">{{iconFormatLabel(icon)}}</span>
15           </span>
16         </ng-container>
17       </ng-container>
18     </div>
19     <div class="flex-1"></div>
20     <div>
21       <a class="with-material-icon no-href text-primary"
22         title="Show More" i18n-title
23         *ngIf="!expand" (click)="expand=true">
24         <span class="material-icons">expand_more</span>
25       </a>
26       <a class="with-material-icon no-href text-primary"
27         title="Show Less" i18n-title
28         *ngIf="expand" (click)="expand=false">
29         <span class="material-icons">expand_less</span>
30       </a>
31     </div>
32   </div>
33   <div class="row">
34
35     <!-- in expanded display, show the jacket image along the left -->
36     <ng-container *ngIf="expand">
37       <div class="col-lg-1 pr-0">
38         <a href="/opac/extras/ac/jacket/large/r/{{summary.id}}">
39           <img class="jacket jacket-medium"
40             alt="Jacket Image" i18n-alt
41             src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
42         </a>
43       </div>
44     </ng-container>
45
46     <!-- make room for the jacket image when expanded -->
47     <div [ngClass]="{'col-lg-11 pl-0': expand, 'col-lg-12': !expand}">
48       <div class="card-body">
49         <ul class="list-group list-group-flush">
50           <li class="list-group-item">
51             <div class="d-flex">
52               <div class="flex-1 font-weight-bold" i18n>Title:</div>
53               <div class="flex-3">
54                 <eg-bib-display-field [summary]="summary" field="title">
55                 </eg-bib-display-field>
56               </div>
57               <div class="flex-1 font-weight-bold pl-1" i18n>Edition:</div>
58               <div class="flex-1">{{summary.display.edition}}</div>
59               <div class="flex-1 font-weight-bold" i18n>TCN:</div>
60               <div class="flex-1">{{summary.record.tcn_value()}}</div>
61               <div class="flex-1 font-weight-bold pl-1" i18n>Created By:</div>
62               <div class="flex-1" *ngIf="summary.record.creator().usrname">
63                 <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
64                   {{summary.record.creator().usrname()}}
65                 </a>
66               </div>
67             </div>
68           </li>
69           <li class="list-group-item" *ngIf="expand">
70             <div class="d-flex">
71               <div class="flex-1 font-weight-bold" i18n>Author:</div>
72               <div class="flex-3">{{summary.display.author}}</div>
73               <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate:</div>
74               <div class="flex-1">{{summary.display.pubdate}}</div>
75               <div class="flex-1 font-weight-bold" i18n>Database ID:</div>
76               <div class="flex-1">{{summary.id}}</div>
77               <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By:</div>
78               <div class="flex-1" *ngIf="summary.record.editor().usrname">
79                 <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
80                   {{summary.record.editor().usrname()}}
81                 </a>
82               </div>
83             </div>
84           </li>
85           <li class="list-group-item" *ngIf="expand">
86             <div class="d-flex">
87               <div class="flex-1 font-weight-bold" i18n>Bib Call #:</div>
88               <div class="flex-3">{{summary.bibCallNumber}}</div>
89               <div class="flex-1 font-weight-bold" i18n>Record Owner:</div>
90               <div class="flex-1">{{orgName(summary.record.owner())}}</div>
91               <div class="flex-1 font-weight-bold pl-1" i18n>Created On:</div>
92               <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
93               <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited On:</div>
94               <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
95             </div>
96           </li>
97           <ng-container *ngIf="expand && hasCourse">
98             <li class="list-group-item">
99               <div class="d-flex">
100                 <div class="flex-1 font-weight-bold" i18n>Associated Courses</div>
101               </div>
102             </li>
103             <li class="list-group-item" *ngFor="let course of courses">
104               <div class="d-flex">
105                 <div class="flex-1 font-weight-bold" i18n>Course Name:</div>
106                 <div class="flex-3">
107                   <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
108                     {{course.name()}}
109                   </a>
110                 </div>
111                 <div class="flex-1 font-weight-bold" i18n>Course Number:</div>
112                 <div class="flex-1">{{course.course_number()}}</div>
113                 <div class="flex-1 font-weight-bold" i18n>Section Number:</div>
114                 <div class="flex-1">{{course.section_number()}}</div>
115                 <div class="flex-1 font-weight-bold" i18n>Owning Library:</div>
116                 <div class="flex-1">{{this.org.get(course.owning_lib()).shortname()}}</div>
117               </div>
118             </li>
119           </ng-container>
120         </ul>
121       </div>
122     </div><!-- col -->
123   </div><!-- row -->
124 </div>
125