From: Bill Erickson <berickxx@gmail.com>
Date: Tue, 31 Dec 2019 18:02:57 +0000 (-0500)
Subject: LP1850546 Call number browse grid
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=4155a7a2abeffe73db0403a25f7a514514090ba3;p=evergreen%2Ftadl.git

LP1850546 Call number browse grid

Return to grid-shaped call number browse with denser data display for
main CN browse UI.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Ruth Frasur <rfrasur@gmail.com>
---

diff --git a/Open-ILS/src/eg2/src/app/share/catalog/catalog-url.service.ts b/Open-ILS/src/eg2/src/app/share/catalog/catalog-url.service.ts
index 4c45a4e3c7..7b9698f2d3 100644
--- a/Open-ILS/src/eg2/src/app/share/catalog/catalog-url.service.ts
+++ b/Open-ILS/src/eg2/src/app/share/catalog/catalog-url.service.ts
@@ -126,6 +126,7 @@ export class CatalogUrlService {
         if (context.cnBrowseSearch.isSearchable()) {
             params.cnBrowseTerm = context.cnBrowseSearch.value;
             params.cnBrowsePage = context.cnBrowseSearch.offset;
+            params.cnBrowsePageSize = context.cnBrowseSearch.limit;
         }
 
         return params;
@@ -198,6 +199,7 @@ export class CatalogUrlService {
         if (params.has('cnBrowseTerm')) {
             context.cnBrowseSearch.value = params.get('cnBrowseTerm');
             context.cnBrowseSearch.offset = Number(params.get('cnBrowsePage'));
+            context.cnBrowseSearch.limit = Number(params.get('cnBrowsePageSize'));
         }
 
         const ts = context.termSearch;
diff --git a/Open-ILS/src/eg2/src/app/share/catalog/catalog.service.ts b/Open-ILS/src/eg2/src/app/share/catalog/catalog.service.ts
index 3b50f61e43..c80d0b2683 100644
--- a/Open-ILS/src/eg2/src/app/share/catalog/catalog.service.ts
+++ b/Open-ILS/src/eg2/src/app/share/catalog/catalog.service.ts
@@ -431,7 +431,7 @@ export class CatalogService {
         return this.net.request(
             'open-ils.supercat',
             'open-ils.supercat.call_number.browse',
-            cbs.value, ctx.searchOrg.shortname(), ctx.pager.limit, cbs.offset
+            cbs.value, ctx.searchOrg.shortname(), cbs.limit, cbs.offset
         ).pipe(tap(result => ctx.searchState = CatalogSearchState.COMPLETE));
     }
 }
diff --git a/Open-ILS/src/eg2/src/app/share/catalog/search-context.ts b/Open-ILS/src/eg2/src/app/share/catalog/search-context.ts
index f993b8ccbc..7010d9eff3 100644
--- a/Open-ILS/src/eg2/src/app/share/catalog/search-context.ts
+++ b/Open-ILS/src/eg2/src/app/share/catalog/search-context.ts
@@ -158,9 +158,14 @@ export class CatalogCnBrowseContext {
     // e.g. -2 means 2 pages back (alphabetically) from the original search.
     offset: number;
 
+    // Maintain a separate page size limit since it will generally
+    // differ from other search page sizes.
+    limit: number;
+
     reset() {
         this.value = '';
         this.offset = 0;
+        this.limit = 5; // UI will modify
     }
 
     isSearchable() {
@@ -171,6 +176,7 @@ export class CatalogCnBrowseContext {
         const ctx = new CatalogCnBrowseContext();
         ctx.value = this.value;
         ctx.offset = this.offset;
+        ctx.limit = this.limit;
         return ctx;
     }
 
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.html
index 09a1f4e870..4aff584464 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.html
@@ -32,13 +32,30 @@
     </div>
   </div>
 
-  <div class="row" *ngFor="let result of results; let idx = index">
-    <div class="col-lg-12" *ngIf="result._bibSummary">
-      <eg-catalog-result-record [summary]="result._bibSummary" 
-        [index]="idx" [callNumber]="result">
-      </eg-catalog-result-record>
+  <ng-container *ngIf="results && results.length">
+    <div class="row mb-3" *ngFor="let rowIdx of rowIndexList">
+      <ng-container *ngFor="let callNumber of resultSlice(rowIdx); let colIdx = index">
+        <ng-container *ngIf="callNumber._bibSummary">
+          <div class="col-lg-4 pt-2 d-flex border"
+            [ngClass]="{'border-primary': isCenter(rowIdx, colIdx)}">
+            <div class="flex-1">
+              <div class="font-weight-bold">
+                {{callNumber.prefix().label()}} {{callNumber.label()}}
+                {{callNumber.suffix().label()}}
+                @ {{orgName(callNumber.owning_lib())}}
+              </div>
+              <div>{{callNumber._bibSummary.display.title}}</div>
+              <div>{{callNumber._bibSummary.display.author}}</div>
+            </div>
+            <div class="ml-2">
+              <img src="/opac/extras/ac/jacket/small/r/{{callNumber._bibSummary.id}}"/>
+            </div>
+          </div>
+        </ng-container>
+      </ng-container>
     </div>
-  </div>
+  </ng-container>
+
 
   <div class="row mb-2">
     <div class="col-lg-3">
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.ts
index 037b9ea88f..bddf40efd1 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/cnbrowse/results.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, OnDestroy} from '@angular/core';
+import {Component, Input, OnInit, OnDestroy} from '@angular/core';
 import {ActivatedRoute, Router, ParamMap} from '@angular/router';
 import {Subscription} from 'rxjs';
 import {IdlObject} from '@eg/core/idl.service';
@@ -8,6 +8,7 @@ import {CatalogUrlService} from '@eg/share/catalog/catalog-url.service';
 import {CatalogSearchContext, CatalogSearchState} from '@eg/share/catalog/search-context';
 import {StaffCatalogService} from '../catalog.service';
 import {BibRecordSummary} from '@eg/share/catalog/bib-record.service';
+import {OrgService} from '@eg/core/org.service';
 
 @Component({
   selector: 'eg-catalog-cn-browse-results',
@@ -15,6 +16,12 @@ import {BibRecordSummary} from '@eg/share/catalog/bib-record.service';
 })
 export class CnBrowseResultsComponent implements OnInit, OnDestroy {
 
+    @Input() rowCount = 5;
+    rowIndexList: number[] = [];
+
+    // hard-coded because it requires template changes.
+    colCount = 3;
+
     searchContext: CatalogSearchContext;
     results: any[];
     routeSub: Subscription;
@@ -22,6 +29,7 @@ export class CnBrowseResultsComponent implements OnInit, OnDestroy {
     constructor(
         private router: Router,
         private route: ActivatedRoute,
+        private org: OrgService,
         private cat: CatalogService,
         private bib: BibRecordService,
         private catUrl: CatalogUrlService,
@@ -30,6 +38,11 @@ export class CnBrowseResultsComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.searchContext = this.staffCat.searchContext;
+
+        for (let idx = 0; idx < this.rowCount; idx++) {
+            this.rowIndexList.push(idx);
+        }
+
         this.routeSub = this.route.queryParamMap.subscribe(
             (params: ParamMap) => this.browseByUrl(params)
         );
@@ -42,6 +55,7 @@ export class CnBrowseResultsComponent implements OnInit, OnDestroy {
     browseByUrl(params: ParamMap): void {
         this.catUrl.applyUrlParams(this.searchContext, params);
         const cbs = this.searchContext.cnBrowseSearch;
+        cbs.limit = this.rowCount * this.colCount;
 
         if (cbs.isSearchable()) {
             this.results = [];
@@ -117,6 +131,20 @@ export class CnBrowseResultsComponent implements OnInit, OnDestroy {
         this.router.navigate(
             ['/staff/catalog/record/' + summary.id], {queryParams: params});
     }
+
+    resultSlice(rowIdx: number): number[] {
+        const offset = rowIdx * this.colCount;
+        return this.results.slice(offset, offset + this.colCount);
+    }
+
+    isCenter(rowIdx: number, colIdx: number): boolean {
+        const total = this.rowCount * this.colCount;
+        return Math.floor(total / 2) === ((rowIdx * this.colCount) + colIdx);
+    }
+
+    orgName(orgId: number): string {
+        return this.org.get(orgId).shortname();
+    }
 }