LP1860044 Angular catalog search result highlights
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / catalog / result / record.component.html
index a27c1bd..65209a0 100644 (file)
@@ -1,8 +1,3 @@
-<!-- 
-  TODO
-  routerLink's
-  egDateFilter's
--->
 
 <div class="col-lg-12 card tight-card mb-2 bg-light">
   <div class="card-body">
@@ -18,8 +13,6 @@
           <input class="pl-1" type='checkbox' [(ngModel)]="isRecordSelected"
             (change)="toggleBasketEntry()"/>
         </label>
-        <!-- XXX hard-coded width so columns align vertically regardless
-             of the presence of a jacket image -->
         <div class="pl-2 record-jacket-div" >
           <ng-container *ngIf="hasMrConstituentRecords(summary)">
             <a routerLink="/staff/catalog/search"
         <div class="flex-1 pl-2">
           <div class="row">
             <div class="col-lg-12 font-weight-bold">
-              <!-- nbsp allows the column to take shape when no value exists -->
               <ng-container *ngIf="hasMrConstituentRecords(summary)">
                   <a routerLink="/staff/catalog/search"
                     [queryParams]="appendFromMrParam(summary)">
-                    {{summary.display.title || '&nbsp;'}}
+                    <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()">
-                  {{summary.display.title || '&nbsp;'}}
+                  <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">
-              <!-- nbsp allows the column to take shape when no value exists -->
               <a routerLink="/staff/catalog/search"
-                  [queryParams]="getAuthorSearchParams(summary)">
-                {{summary.display.author || '&nbsp;'}}
+                [queryParams]="getAuthorSearchParams(summary)">
+                <eg-bib-display-field [summary]="summary" field="author" 
+                  [usePlaceholder]="true"></eg-bib-display-field>
               </a>
             </div>
           </div>
               <ng-container *ngIf="summary.display.physical_description">
                 <!-- [].concat() to avoid modifying the summary arrays -->
                 <div class="pb-1" i18n>Phys. Desc.: 
-                  {{[].concat(summary.display.physical_description).join(', ')}}
+                  <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: {{summary.display.edition}}</div>
+                <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: {{summary.display.publisher}}</div>
+                  <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: {{summary.display.pubdate}}</div>
+                  <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: 
-                  {{[].concat(summary.display.isbn).join(', ')}}</div>
+                  <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: 
-                  {{[].concat(summary.display.upc).join(', ')}}</div>
+                  <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: 
-                  {{[].concat(summary.display.issn).join(', ')}}</div>
+                  <eg-bib-display-field [summary]="summary" 
+                    field="issn" joiner=","></eg-bib-display-field>
+                </div>
               </ng-container>
             </div>
           </div>