From 6dfd3980475b7b4472a0fa2dc972534c87620e6c Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Mon, 21 Oct 2019 10:41:15 -0400
Subject: [PATCH] LP1849137 Staff catalog Patron View tab

Adds a tab to the Angular staff catalog record detail page which
displays an embedded display of the patron OPAC view of the record
detail page.  This replaces the View In Catalog button.

The iframe is not linked or tied into the parent Angular app in any way.
It's just an iframe with a source.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Garry Collum <gcollum@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
 .../src/app/staff/catalog/catalog.module.ts   |  2 ++
 .../catalog/record/actions.component.html     |  4 ---
 .../staff/catalog/record/opac.component.html  |  5 +++
 .../staff/catalog/record/opac.component.ts    | 34 +++++++++++++++++++
 .../catalog/record/record.component.html      |  6 ++++
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.html
 create mode 100644 Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.ts

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/catalog.module.ts b/Open-ILS/src/eg2/src/app/staff/catalog/catalog.module.ts
index d56168908a..810b9507fd 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/catalog.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/catalog.module.ts
@@ -11,6 +11,7 @@ import {SearchFormComponent} from './search-form.component';
 import {ResultsComponent} from './result/results.component';
 import {RecordComponent} from './record/record.component';
 import {CopiesComponent} from './record/copies.component';
+import {OpacViewComponent} from './record/opac.component';
 import {ResultPaginationComponent} from './result/pagination.component';
 import {ResultFacetsComponent} from './result/facets.component';
 import {ResultRecordComponent} from './result/record.component';
@@ -52,6 +53,7 @@ import {MarcEditModule} from '@eg/staff/share/marc-edit/marc-edit.module';
     HoldingsMaintenanceComponent,
     SearchTemplatesComponent,
     CnBrowseComponent,
+    OpacViewComponent,
     CnBrowseResultsComponent
   ],
   imports: [
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/actions.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/actions.component.html
index 62008a47df..9a64f73fad 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/actions.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/actions.component.html
@@ -15,10 +15,6 @@
 
 <div class="row ml-0 mr-0">
 
-  <a target="_blank" href="/eg/opac/record/{{recId}}">
-    <button class="btn btn-outline-primary ml-1" i18n>View in Catalog</button>
-  </a>
-
   <a routerLink="/staff/catalog/hold/T" [queryParams]="{target: recId}">
     <button class="btn btn-outline-primary ml-1" i18n>Place Hold</button>
   </a>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.html
new file mode 100644
index 0000000000..119b888579
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.html
@@ -0,0 +1,5 @@
+
+<ng-container *ngIf="url">
+  <iframe class="w-100" height="450px" [src]="url"></iframe> 
+</ng-container>
+
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.ts
new file mode 100644
index 0000000000..22eee58728
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/opac.component.ts
@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+const OPAC_BASE_URL = '/eg/opac/record';
+
+@Component({
+  selector: 'eg-opac-record-detail',
+  templateUrl: 'opac.component.html'
+})
+export class OpacViewComponent {
+
+    url; // SafeResourceUrlImpl
+
+    _recordId: number;
+    @Input() set recordId(id: number) {
+
+        // Verify record ID is numeric only
+        if (id && (id + '').match(/^\d+$/)) {
+            this._recordId = id;
+            this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
+                `${OPAC_BASE_URL}/${id}`);
+        } else {
+            this._recordId = null;
+            this.url = null;
+        }
+    }
+
+    get recordId(): number {
+        return this._recordId;
+    }
+
+    constructor(private sanitizer: DomSanitizer) {}
+}
+
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
index 9b9fe3cbab..98a270b6d2 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
@@ -74,6 +74,12 @@
           </eg-catalog-record-conjoined>
         </ng-template>
       </ngb-tab>
+      <ngb-tab title="Patron View" i18n-title id="opac">
+        <ng-template ngbTabContent>
+          <eg-opac-record-detail [recordId]="recordId">
+          </eg-opac-record-detail>
+        </ng-template>
+      </ngb-tab>
     </ngb-tabset>
   </div>
 </div>
-- 
2.43.2