LP#626157 Ang2 experiments
authorBill Erickson <berickxx@gmail.com>
Fri, 8 Dec 2017 17:34:30 +0000 (12:34 -0500)
committerBill Erickson <berickxx@gmail.com>
Mon, 11 Dec 2017 17:39:51 +0000 (12:39 -0500)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/webby-src/src/app/share/catalog/catalog.service.ts
Open-ILS/webby-src/src/app/staff/catalog/catalog.module.ts
Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html
Open-ILS/webby-src/src/app/staff/catalog/record/record.component.ts
Open-ILS/webby-src/src/app/staff/catalog/result/record.component.css
Open-ILS/webby-src/src/app/staff/catalog/result/record.component.html
Open-ILS/webby-src/src/app/staff/catalog/result/results.component.html
Open-ILS/webby-src/src/app/staff/catalog/result/results.component.ts
Open-ILS/webby-src/src/app/staff/catalog/search-form.component.css
Open-ILS/webby-src/src/app/staff/catalog/search-form.component.html

index 02e67e0..daf9783 100644 (file)
@@ -45,6 +45,12 @@ export class EgCatalogService {
     ccvmMap: {[ccvm:string] : EgIdlObject[]} = {};
     cmfMap: {[cmf:string] : EgIdlObject} = {};
 
+    // Keep a reference to the most recently retrieved facet data,
+    // since facet data is consistent across a given search.
+    // No need to re-fetch with every page of search data.
+    lastFacetData: any;
+    lastFacetKey: string;
+
     constructor(
         private net: EgNetService,
         private org: EgOrgService,
@@ -76,7 +82,7 @@ export class EgCatalogService {
                 ctx.searchState = CatalogSearchState.COMPLETE;
 
                 let promises = [];
-                result.ids.forEach(blob => {
+                result.ids.forEach((blob, idx) => {
                     promises.push(
                         this.getBibSummary(blob[0], 
                             ctx.searchOrg.id(), 
@@ -84,7 +90,8 @@ export class EgCatalogService {
                                 ctx.org.root().ou_type().depth() :
                                 ctx.searchOrg.ou_type().depth()
                         ).then(
-                            summary => ctx.result.records.push(summary)
+                            // idx maintains result sort order
+                            summary => ctx.result.records[idx] = summary
                         )
                     );
                 });
@@ -96,7 +103,13 @@ export class EgCatalogService {
 
     fetchFacets(ctx: CatalogSearchContext): Promise<void> {
 
-        if (!ctx.result) return Promise.resolve();
+        if (!ctx.result)
+            return Promise.reject('Cannot fetch facets without results');
+
+        if (this.lastFacetKey == ctx.result.facet_key) {
+            ctx.result.facetData = this.lastFacetData;
+            return Promise.resolve();
+        }
 
         return new Promise((resolve, reject) => {
             this.net.request('open-ils.search', 
@@ -128,7 +141,8 @@ export class EgCatalogService {
                     };
                 });
 
-                ctx.result.facetData = facetData;
+                this.lastFacetKey = ctx.result.facet_key;
+                this.lastFacetData = ctx.result.facetData = facetData;
                 resolve();
             });
         })
@@ -246,7 +260,7 @@ export class EgCatalogService {
 
         while(node = result.iterateNext()) {
             response.ccvms[node.getAttribute('name')] = {
-                code : node.getAttribute('value'),
+                code : node.textContent,
                 label : node.getAttribute('coded-value')
             }
         }
index e5d65f3..72e4e4f 100644 (file)
@@ -13,6 +13,7 @@ import {ResultPaginationComponent} from './result/pagination.component';
 import {ResultFacetsComponent} from './result/facets.component';
 import {ResultRecordComponent} from './result/record.component';
 import {StaffCatalogService} from './staff-catalog.service';
+import {StaffRecordService} from './record/record.service';
 
 @NgModule({
   declarations: [
@@ -33,7 +34,8 @@ import {StaffCatalogService} from './staff-catalog.service';
     EgUnapiService,
     EgCatalogService,
     EgCatalogUrlService,
-    StaffCatalogService
+    StaffCatalogService,
+    StaffRecordService
   ]
 })
 
index c1e383e..13d805d 100644 (file)
@@ -1,13 +1,56 @@
 
 <div id="staff-catalog-record-container">
-  RECORD {{recordId}}
 
-  <div class="d-flex flex-row">
-    <div class="flex-2 p-2 border">SMALL</div>
-    <div class="flex-1 p-2 border">MED</div>
-    <div class="flex-3 p-2 border">asdf</div>
-    <div class="flex-cell p-2 border">asdfsada</div>
+  <!-- TODO MOVE RECORD SUMMARY TO SHARE MODULE -->
+  <style>
+    .eg-bib-record-summary {
+    }
+    .eg-bib-record-summary .card-body {
+      padding: .25rem;
+    }
+    .eg-bib-record-summary .list-group-item {
+      padding: .25rem;
+    }
+  </style>
+  <div class='eg-bib-record-summary card w-100' *ngIf="staffRecord.bibSummary">
+    <div class="card-header font-weight-bold" i18n>
+      Record Summary
+      <!-- TODO expandy at right-->
+    </div>
+    <div class="card-body">
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">
+          <div class="d-flex">
+            <div class="flex-1 font-weight-bold" i18n>Title</div>
+            <div class="flex-3">{{staffRecord.bibSummary.title}}</div>
+            <div class="flex-1 font-weight-bold pl-1" i18n>Edition</div>
+            <div class="flex-2">{{staffRecord.bibSummary.edition}}</div>
+            <div class="flex-1 font-weight-bold" i18n>TCN</div>
+            <div class="flex-1">{{staffRecord.bibSummary.tcn_value}}</div>
+            <div class="flex-1 font-weight-bold pl-1" i18n>Created By</div>
+            <div class="flex-2" *ngIf="staffRecord.bibSummary.creator.usrname">
+              {{staffRecord.bibSummary.creator.usrname()}}
+            </div>
+          </div>
+        </li>
+        <li class="list-group-item">
+          <div class="d-flex">
+            <div class="flex-1 font-weight-bold" i18n>Author</div>
+            <div class="flex-3">{{staffRecord.bibSummary.author}}</div>
+            <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate</div>
+            <div class="flex-2">{{staffRecord.bibSummary.pubdate}}</div>
+            <div class="flex-1 font-weight-bold" i18n>Database ID</div>
+            <div class="flex-1">{{staffRecord.bibSummary.id}}</div>
+            <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By</div>
+            <div class="flex-2" *ngIf="staffRecord.bibSummary.editor.usrname">
+              {{staffRecord.bibSummary.editor.usrname()}}
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
+
 </div>
 
 
index d367230..21a9a4b 100644 (file)
@@ -5,6 +5,7 @@ import {EgIdlObject} from '@eg/core/idl';
 import {CatalogSearchContext, CatalogSearchState} 
   from '@eg/share/catalog/search-context';
 import {StaffCatalogService} from '../staff-catalog.service';
+import {StaffRecordService} from './record.service';
 
 @Component({
   selector: 'eg-catalog-record',
@@ -16,18 +17,16 @@ export class RecordComponent implements OnInit {
     recordId: number;
     searchContext: CatalogSearchContext;
 
-    // Cache record creator/editor since this will likely be a 
-    // reasonably small set of data w/ lots of repitition.
-    userCache: {[id:number] : EgIdlObject} = {};
-
     constructor(
         private route: ActivatedRoute,
         private pcrud: EgPcrudService,
-        private staffCat: StaffCatalogService
+        private staffCat: StaffCatalogService,
+        private staffRecord: StaffRecordService
     ) {}
 
     ngOnInit() { 
-        this.recordId = +this.route.snapshot.paramMap.get('id');
+        this.searchContext = this.staffCat.searchContext;
+        this.staffRecord.setRecord(+this.route.snapshot.paramMap.get('id'));
     }
 }
 
index 63571f3..1bc7c31 100644 (file)
@@ -17,6 +17,9 @@
       <div class="row">
         <div class="col-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:;' routerLink="/staff/catalog/record/{{bibSummary.id}}">
             {{bibSummary.title || '&nbsp;'}}
           </a>
       </div>
       <div class="row pt-2">
         <div class="col-12">
+          <!--
           <span>#{{index + 1 + searchContext.pager.offset}}</span>
+          -->
           <span>
-            <img class="pad-right-min" ng-cloak
+            <img class="pad-right-min"
               src="/images/format_icons/icon_format/{{bibSummary.ccvms.icon_format.code}}.png"/>
             <span>{{bibSummary.ccvms.icon_format.label}}</span>
           </span>
         </div>
       </div>
     </div>
-    <div class="col-1"></div>
-    <div class="col-3">
+    <div class="col-1">
       <div class="row">
-        <div class="col-4">
-          <div class="float-right weak-text-1">
-            TCN: {{bibSummary.tcn_value}}
-          </div>
+        <div class="w-100">
+          TCN: {{bibSummary.tcn_value}}
         </div>
-        <div class="col-8">
+      </div>
+      <div class="row">
+        <div class="w-100">
+          Holds: {{bibSummary.holdCount}}
+        </div>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="row">
+        <div class="col-12">
           <div class="float-right weak-text-1">
             Created {{bibSummary.create_date | date:'shortDate'}} by
             <!-- creator if fleshed after the initial data set is loaded -->
         </div>
       </div>
       <div class="row pt-2">
-        <div class="col-4">
-          <div class="float-right weak-text-1">
-            Holds: {{bibSummary.holdCount}}
-          </div>
-        </div>
-        <div class="col-8">
+        <div class="col-12">
           <div class="float-right weak-text-1">
             Edited {{bibSummary.edit_date | date:'shortDate'}} by
             <a *ngIf="bibSummary.editor.usrname" target="_self" 
index 9304143..be7c36a 100644 (file)
@@ -1,5 +1,5 @@
 
-<div id="staff-catalog-results-container" class="mt-3" *ngIf="searchIsDone()">
+<div id="staff-catalog-results-container" *ngIf="searchIsDone()">
   <div class="row">
     <div class="col-2"><!--match pagination margin-->
       <h3 i18n>Search Results ({{searchContext.result.count}})</h3>
                <div class="col-10">
                        <div *ngIf="searchContext.result">
                                <div *ngFor="let bibSummary of searchContext.result.records; let idx = index">
-                                       <eg-catalog-result-record [bibSummary]="bibSummary" [index]="idx">
-                                       </eg-catalog-result-record>
+          <div *ngIf="bibSummary">
+                                         <eg-catalog-result-record [bibSummary]="bibSummary" [index]="idx">
+                                         </eg-catalog-result-record>
+          </div>
                                </div>
                        </div>
                </div>
index f2d1b30..c1b1c25 100644 (file)
@@ -18,8 +18,6 @@ import {EgIdlObject} from '@eg/core/idl';
 export class ResultsComponent implements OnInit {
 
     searchContext: CatalogSearchContext;
-    facetCache: any;
-    facetKey: string;
 
     // Cache record creator/editor since this will likely be a 
     // reasonably small set of data w/ lots of repitition.
@@ -60,16 +58,7 @@ export class ResultsComponent implements OnInit {
         if (!this.searchContext.query[0]) return;
 
         this.cat.search(this.searchContext).then(ok => {
-            // Only need to fetch facets once per search
-            // TODO: move last-facet cache to this.cat.fetchFacets;
-            if (this.facetKey == this.searchContext.result.facet_key) {
-                this.searchContext.result.facetData = this.facetCache;
-            } else {
-                this.cat.fetchFacets(this.searchContext).then(ok => {;
-                    this.facetKey = this.searchContext.result.facet_key;
-                    this.facetCache = this.searchContext.result.facetData;
-                });
-            }
+            this.cat.fetchFacets(this.searchContext);
             this.fleshSearchResults();
         });
     }
index 09e2da9..f67d8fa 100644 (file)
@@ -3,3 +3,7 @@
 .checkbox label {
   margin-bottom: .1rem;
 }
+
+#staffcat-search-form {
+  border-bottom: 2px dashed rgba(0,0,0,.225);
+}
index a51d6c8..42c512f 100644 (file)
@@ -1,7 +1,7 @@
 <!--
 TODO focus search input
 -->
-<div id='staffcat-search-form' class='mb-3'>
+<div id='staffcat-search-form' class='pb-2 mb-3'>
   <div class="row"
     *ngFor="let q of searchContext.query; let idx = index; trackBy:trackByIdx">
     <div class="col-9 d-flex flex-row">