From: Bill Erickson Date: Sat, 9 Dec 2017 15:57:59 +0000 (-0500) Subject: LP#626157 Ang2 experiments X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=009ccce832e3ba465daf24172913ecd9a118f6e1;p=working%2FEvergreen.git LP#626157 Ang2 experiments Signed-off-by: Bill Erickson --- diff --git a/Open-ILS/webby-src/src/app/staff/catalog/catalog.module.ts b/Open-ILS/webby-src/src/app/staff/catalog/catalog.module.ts index 8c4176c8e2..420d27140f 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/catalog.module.ts +++ b/Open-ILS/webby-src/src/app/staff/catalog/catalog.module.ts @@ -16,6 +16,7 @@ import {ResultFacetsComponent} from './result/facets.component'; import {ResultRecordComponent} from './result/record.component'; import {StaffCatalogService} from './staff-catalog.service'; import {StaffRecordService} from './record/record.service'; +import {RecordPaginationComponent} from './record/pagination.component'; @NgModule({ declarations: [ @@ -27,7 +28,8 @@ import {StaffRecordService} from './record/record.service'; SearchFormComponent, ResultRecordComponent, ResultFacetsComponent, - ResultPaginationComponent + ResultPaginationComponent, + RecordPaginationComponent ], imports: [ EgStaffModule, diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/copies.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/record/copies.component.ts index 0af98a5eff..4dd4c907f3 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/record/copies.component.ts +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/copies.component.ts @@ -12,9 +12,17 @@ import {EgOrgService} from '@eg/core/org'; }) export class CopiesComponent implements OnInit { - @Input() recordId: number; pager: Pager; copies: any[]; + recId: number; + initDone: boolean = false; + + @Input() set recordId(id: number) { + this.recId = id; + // Only force new data collection when recordId() + // is invoked after ngInit() has already run. + if (this.initDone) this.collectData(); + } constructor( private net: EgNetService, @@ -24,9 +32,14 @@ export class CopiesComponent implements OnInit { ) {} ngOnInit() { - if (!this.recordId) return; + this.initDone = true; + this.collectData(); + } + + collectData() { + if (!this.recId) return; this.pager = new Pager(); - this.pager.limit = 10; // TODO + this.pager.limit = 10; // TODO UI this.fetchCopies(); } @@ -39,7 +52,7 @@ export class CopiesComponent implements OnInit { this.net.request( 'open-ils.search', 'open-ils.search.bib.copies.staff', - this.recordId, + this.recId, this.staffCat.searchContext.searchOrg.id(), this.staffCat.searchContext.searchOrg.ou_type().depth(), // TODO this.pager.limit, diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.css b/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.css new file mode 100644 index 0000000000..262903d6cf --- /dev/null +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.css @@ -0,0 +1,5 @@ + +/* Bootstrap default is 20px */ +.pagination {margin: 0px 0px 0px 0px} + + diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.html b/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.html new file mode 100644 index 0000000000..cc89f43f26 --- /dev/null +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.html @@ -0,0 +1,44 @@ + +current index = {{index}} + diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.ts new file mode 100644 index 0000000000..45347c4dd8 --- /dev/null +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/pagination.component.ts @@ -0,0 +1,119 @@ +import {Component, OnInit, Input} from '@angular/core'; +import {Router} from '@angular/router'; +import {EgCatalogService} from '@eg/share/catalog/catalog.service'; +import {CatalogSearchContext} from '@eg/share/catalog/search-context'; +import {EgCatalogUrlService} from '@eg/share/catalog/catalog-url.service'; +import {StaffCatalogService} from '../staff-catalog.service'; +import {StaffRecordService} from './record.service'; + + +@Component({ + selector: 'eg-catalog-record-pagination', + styleUrls: ['pagination.component.css'], + templateUrl: 'pagination.component.html' +}) +export class RecordPaginationComponent implements OnInit { + + searchContext: CatalogSearchContext; + index: number = 0; + id: number; + initDone: boolean = false; + + @Input() set recordId(id: number) { + this.id = id; + // Only apply new record data after the initial load + if (this.initDone) this.setIndex(); + } + + constructor( + private router: Router, + private cat: EgCatalogService, + private catUrl: EgCatalogUrlService, + private staffCat: StaffCatalogService, + private staffRecord: StaffRecordService + ) {} + + ngOnInit() { + this.initDone = true; + this.setIndex(); + } + + firstRecord(): void { + } + + lastRecord(): void { + } + + nextRecord(): void { + this.findRecordAtIndex(this.index + 1).then(id => { + let params = this.catUrl.toUrlParams(this.searchContext); + this.router.navigate( + ['/staff/catalog/record/' + id], {queryParams: params}); + }); + } + + prevRecord(): void { + this.findRecordAtIndex(this.index - 1) + .then(id => { + // navigate to record + // teach record.component to update record w/ route navigation! + }); + } + + returnToSearch(): void { + } + + + // Returns the offset of the record within the search results as a whole. + searchIndex(idx: number): number { + return idx + this.searchContext.pager.offset; + } + + setIndex(): Promise { + this.searchContext = this.staffCat.searchContext; + this.index = null; + + return new Promise((resolve, reject) => { + + // First see if the select record sits in the current page + // of search results. This will be the common case. + this.searchContext.result.records.forEach((rec, idx) => { + if (rec.id == this.id) { + this.index = this.searchIndex(idx) + resolve(); + } + }); + + if (this.index !== null) return; + + // Record not found in current page of search results. + // Re-run the search with a broad range to see if we + // can track it down. + reject('no search index found for record ' + this.id); + }); + } + + findRecordAtIndex(index: number): Promise { + + // First see if the select record sits in the current page + // of search results. + return new Promise((resolve, reject) => { + + // See if the record is avaialable in the current search page. + this.searchContext.result.records.forEach((rec, idx) => { + if (this.searchIndex(idx) == index) { + resolve(rec.id); + } + }); + + // Otherwise, expand the search + reject('no record found at index ' + index); + }); + } + + navigatToRecord(): void { + } + +} + + diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html b/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html index 3d10950bd4..c04998bf43 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html @@ -1,8 +1,15 @@
-
- - +
+
+ + +
+
+
+ + +
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.ts index f7f7af8bff..1c0558ccb3 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.ts +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.ts @@ -26,9 +26,13 @@ export class RecordComponent implements OnInit { ) {} ngOnInit() { - this.recordId = +this.route.snapshot.paramMap.get('id'); this.searchContext = this.staffCat.searchContext; - this.staffRecord.setRecord(this.recordId); + + // Watch for URL record ID changes + this.route.paramMap.subscribe((params: ParamMap) => { + this.recordId = +params.get('id'); + this.staffRecord.setRecord(this.recordId); + }) } } diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/record.service.ts b/Open-ILS/webby-src/src/app/staff/catalog/record/record.service.ts index 224ba06cb9..fcd80cddbc 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/record/record.service.ts +++ b/Open-ILS/webby-src/src/app/staff/catalog/record/record.service.ts @@ -1,6 +1,4 @@ import {Injectable} from '@angular/core'; -import {Router, ActivatedRoute} from '@angular/router'; -import {EgOrgService} from '@eg/core/org'; import {EgCatalogService} from '@eg/share/catalog/catalog.service'; import {EgCatalogUrlService} from '@eg/share/catalog/catalog-url.service'; import {CatalogSearchContext} from '@eg/share/catalog/search-context'; @@ -19,9 +17,6 @@ export class StaffRecordService { searchContext: CatalogSearchContext; constructor( - private router: Router, - private route: ActivatedRoute, - private org: EgOrgService, private pcrud: EgPcrudService, private cat: EgCatalogService, private staffCat: StaffCatalogService, diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts index ff1746ccd0..917491dfab 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts +++ b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts @@ -27,7 +27,6 @@ export class ResultPaginationComponent implements OnInit { } prevPage(): void { - console.log('HERE'); this.searchContext.pager.decrement(); this.staffCat.search(); } diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.html b/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.html index 1bc7c312e7..a9268bc33f 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.html +++ b/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.html @@ -20,7 +20,8 @@ #{{index + 1 + searchContext.pager.offset}} - + {{bibSummary.title || ' '}}
@@ -28,17 +29,14 @@
- + {{bibSummary.author || ' '}}
- diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.ts index b1bfde5f4e..b7fc776eb2 100644 --- a/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.ts +++ b/Open-ILS/webby-src/src/app/staff/catalog/result/record.component.ts @@ -1,8 +1,10 @@ import {Component, OnInit, Input} from '@angular/core'; +import {Router} from '@angular/router'; import {EgOrgService} from '@eg/core/org'; import {EgCatalogService} from '@eg/share/catalog/catalog.service'; import {CatalogSearchContext} from '@eg/share/catalog/search-context'; import {EgNetService} from '@eg/core/net'; +import {EgCatalogUrlService} from '@eg/share/catalog/catalog-url.service'; import {StaffCatalogService} from '../staff-catalog.service'; @Component({ @@ -17,9 +19,11 @@ export class ResultRecordComponent implements OnInit { searchContext: CatalogSearchContext; constructor( + private router: Router, private org: EgOrgService, private net: EgNetService, private cat: EgCatalogService, + private catUrl: EgCatalogUrlService, private staffCat: StaffCatalogService ) {} @@ -54,6 +58,16 @@ export class ResultRecordComponent implements OnInit { this.staffCat.search(); } + /** + * Propagate the search params along when navigating to each record. + */ + navigatToRecord(id: number) { + let params = this.catUrl.toUrlParams(this.searchContext); + + this.router.navigate( + ['/staff/catalog/record/' + id], {queryParams: params}); + } + } diff --git a/Open-ILS/webby-src/src/styles.css b/Open-ILS/webby-src/src/styles.css index b8dd531fd6..3646a77f84 100644 --- a/Open-ILS/webby-src/src/styles.css +++ b/Open-ILS/webby-src/src/styles.css @@ -5,21 +5,26 @@ */ +/** BS default fonts are huge */ body, .form-control, .btn { /* This more or less matches the font size of the angularjs client. * The default BS4 font of 1rem is comically large. */ font-size: .88rem; } - -/** BS default fonts are huge */ h2 {font-size: 1.25rem} h3 {font-size: 1.15rem} h4 {font-size: 1.05rem} h5 {font-size: .95rem} + +/** Ang5 routes on clicks to href's with no values, so we can't have + * bare href's to force anchor styling. Use this for anchors w/ no href. + * TODO: should we style all of them? a:not([href]) .... + * */ .no-href { cursor: pointer; + color: #007bff; }