LP1860044 Angular catalog search result highlights
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / catalog / result / record.component.html
index 54ad3db..65209a0 100644 (file)
-<!-- 
-  TODO
-  routerLink's
-  egDateFilter's
--->
-<eg-record-bucket-dialog #addToListDialog>
-</eg-record-bucket-dialog>
 
 <div class="col-lg-12 card tight-card mb-2 bg-light">
   <div class="card-body">
     <div class="row">
-      <div class="col-lg-1">
-        <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
-          <img style="height:80px"
-            src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
-        </a>
-      </div>
-      <div class="col-lg-5">
-        <div class="row">
-          <div class="col-lg-12 font-weight-bold">
-            <!-- nbsp allows the column to take shape when no value exists -->
-            <span class="font-weight-light font-italic">
-              #{{index + 1 + searchContext.pager.offset}}
-            </span>
-            <a href="javascript:void(0)"
-              (click)="navigatToRecord(summary.id)">
-              {{summary.display.title || '&nbsp;'}}
+      <!-- Checkbox, jacket image, and title blob live in a flex row
+           because there's no way to give them col-lg-* columns that
+           don't waste a lot of space. -->
+      <div class="col-lg-7 d-flex">
+        <label class="checkbox">
+          <span class="font-weight-bold font-italic">
+            {{index + 1 + searchContext.pager.offset}}.
+          </span>
+          <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
+            (change)="toggleBasketEntry()"/>
+        </label>
+        <div class="pl-2 record-jacket-div" >
+          <ng-container *ngIf="hasMrConstituentRecords(summary)">
+            <a routerLink="/staff/catalog/search"
+              [queryParams]="appendFromMrParam(summary)">
+              <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
             </a>
-          </div>
+          </ng-container>
+          <ng-container *ngIf="!hasMrConstituentRecords(summary)">
+              <a routerLink="/staff/catalog/record/{{summary.id}}"
+                [queryParams]="currentParams()">
+                <img src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
+              </a>
+          </ng-container>
         </div>
-        <div class="row pt-2">
-          <div class="col-lg-12">
-            <!-- nbsp allows the column to take shape when no value exists -->
-            <a href="javascript:void(0)"
-              (click)="searchAuthor(summary)">
-              {{summary.display.author || '&nbsp;'}}
-            </a>
+        <!-- for call number browse display -->
+        <ng-container *ngIf="callNumber">
+          <div class="pl-2 font-weight-bold">
+            {{callNumber.prefix().label()}}
+            {{callNumber.label()}}
+            {{callNumber.suffix().label()}}
+            @ {{orgName(callNumber.owning_lib())}}
           </div>
-        </div>
-        <div class="row pt-2">
-          <div class="col-lg-12">
-            <!-- only shows the first icon format -->
-            <span *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
-              <img class="pr-1"
-                src="/images/format_icons/icon_format/{{summary.attributes.icon_format[0]}}.png"/>
-              <span>{{iconFormatLabel(summary.attributes.icon_format[0])}}</span>
-            </span>
-            <span class='pl-1'>{{summary.display.edition}}</span>
-            <span class='pl-1'>{{summary.display.pubdate}}</span>
+        </ng-container>
+        <div class="flex-1 pl-2">
+          <div class="row">
+            <div class="col-lg-12 font-weight-bold">
+              <ng-container *ngIf="hasMrConstituentRecords(summary)">
+                  <a routerLink="/staff/catalog/search"
+                    [queryParams]="appendFromMrParam(summary)">
+                    <eg-bib-display-field [summary]="summary" field="title" 
+                      [usePlaceholder]="true"></eg-bib-display-field>
+                  </a>
+              </ng-container>
+              <ng-container *ngIf="!hasMrConstituentRecords(summary)">
+                <a routerLink="/staff/catalog/record/{{summary.id}}"
+                  [queryParams]="currentParams()">
+                  <eg-bib-display-field [summary]="summary" field="title" 
+                    [usePlaceholder]="true"></eg-bib-display-field>
+                </a>
+              </ng-container>
+            </div>
+          </div>
+          <div class="row pt-2">
+            <div class="col-lg-12">
+              <a routerLink="/staff/catalog/search"
+                [queryParams]="getAuthorSearchParams(summary)">
+                <eg-bib-display-field [summary]="summary" field="author" 
+                  [usePlaceholder]="true"></eg-bib-display-field>
+              </a>
+            </div>
+          </div>
+          <div class="row pt-2">
+            <div class="col-lg-12">
+              <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
+                <ng-container *ngFor="let icon of summary.attributes.icon_format">
+                <span class="pr-1">
+                  <img class="pr-1"
+                    src="/images/format_icons/icon_format/{{icon}}.png"/>
+                  <span>{{iconFormatLabel(icon)}}</span>
+                </span>
+                </ng-container>
+              </ng-container>
+            </div>
+          </div>
+          <div class="row pt-2">
+            <div class="col-lg-12">
+              <ng-container *ngIf="summary.display.physical_description">
+                <!-- [].concat() to avoid modifying the summary arrays -->
+                <div class="pb-1" i18n>Phys. Desc.: 
+                  <eg-bib-display-field [summary]="summary" 
+                    field="physical_description" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.edition">
+                <div class="pb-1" i18n>Edition: 
+                  <eg-bib-display-field [summary]="summary" 
+                    field="edition" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.publisher || summary.display.pubdate">
+                <!-- note publisher typically includes pubdate -->
+                <ng-container *ngIf="summary.display.publisher; else pubDate">
+                  <div class="pb-1" i18n>Publisher:
+                  <eg-bib-display-field [summary]="summary" field="publisher">
+                  </eg-bib-display-field>
+                  </div>
+                </ng-container>
+                <ng-template #pubDate>
+                  <div class="pb-1" i18n>Pub Date: 
+                    <eg-bib-display-field [summary]="summary" field="pubdate">
+                    </eg-bib-display-field>
+                  </div>
+                </ng-template>
+              </ng-container>
+              <ng-container *ngIf="summary.display.isbn">
+                <div class="pb-1" i18n>ISBN: 
+                  <eg-bib-display-field [summary]="summary" 
+                    field="isbn" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.upc">
+                <div class="pb-1" i18n>UPC: 
+                  <eg-bib-display-field [summary]="summary" 
+                    field="upc" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+              <ng-container *ngIf="summary.display.issn">
+                <div i18n>ISSN: 
+                  <eg-bib-display-field [summary]="summary" 
+                    field="issn" joiner=","></eg-bib-display-field>
+                </div>
+              </ng-container>
+            </div>
           </div>
         </div>
       </div>
           </div>
         </div>
       </div>
-      <div class="col-lg-3">
+      <div class="col-lg-2">
         <div class="row">
           <div class="col-lg-12">
             <div class="float-right small-text-1">
                   <span i18n>Place Hold</span>
                 </button>
               </span>
-              <span class="pl-1">
-                <button 
-                  (click)="addToListDialog.recordId=summary.record.id(); addToListDialog.open({size: 'lg'})"
-                  class="btn btn-sm btn-info label-with-material-icon small-text-1">
-                  <span class="material-icons">playlist_add_check</span>
-                  <span i18n>Add to List</span>
-                </button>
-              </span>
             </div>
           </div>
         </div>