Add XML tutorial

Author: jweisman

cloudapp/src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { ThemingComponent } from './theming/theming.component';
 import { SettingsComponent } from './settings/settings.component';
 import { ParallelComponent } from './parallel/parallel.component';
 import { ExternalComponent } from './external/external.component';
+import { XmlComponent } from './xml/xml.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
@@ -14,6 +15,7 @@ const routes: Routes = [
   { path: 'settings', component: SettingsComponent },
   { path: 'parallel', component: ParallelComponent },
   { path: 'external', component: ExternalComponent },
+  { path: 'xml', component: XmlComponent },
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ThemingComponent } from './theming/theming.component';
 import { SettingsComponent } from './settings/settings.component';
 import { ParallelComponent } from './parallel/parallel.component';
 import { ExternalComponent } from './external/external.component';
+import { XmlComponent } from './xml/xml.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -32,7 +33,8 @@ export function getToastrModule() {
       ThemingComponent,
       SettingsComponent,
       ParallelComponent,
-      ExternalComponent
+      ExternalComponent,
+      XmlComponent
    ],
    imports: [
       MaterialModule,

cloudapp/src/app/external/external.component.scss

@@ -1,16 +1,3 @@
-.commands-container {
-  margin: 20px 0;
-  width: fit-content;
-}
-
-.spinner {
-  float: right;
-}
-
-.commands-container button {
-  margin-right: 10px;
-}
-
 .settings-section {
   display: flex;
   align-content: center;

cloudapp/src/app/main/main.component.html

@@ -9,5 +9,6 @@ <h1>
     <li><a [routerLink]="['settings']">Using the Settings Service</a></li>
     <li><a [routerLink]="['parallel']">Making parallel API requests</a></li>
     <li><a [routerLink]="['external']">Reaching outside your app</a></li>
+    <li><a [routerLink]="['xml']">Working with bibliographic records in XML</a></li>
   </ul>
 </section>

cloudapp/src/app/settings/settings.component.scss

@@ -1,16 +1,3 @@
-.commands-container {
-  margin: 20px 0;
-  width: fit-content;
-}
-
-.spinner {
-  float: right;
-}
-
-.commands-container button {
-  margin-right: 10px;
-}
-
 .settings-section {
   display: flex;
   align-content: center;

cloudapp/src/app/xml/bib-utils.ts

@@ -0,0 +1,69 @@
+import { CloudAppRestService, HttpMethod } from "@exlibris/exl-cloudapp-angular-lib";
+import { Observable } from "rxjs";
+import { map } from "rxjs/operators";
+
+export interface Bib {
+  link: string,
+  mms_id: string;
+  title: string;
+  record_format: string;
+  anies: any;
+}
+
+export class BibUtils {
+  private _restService: CloudAppRestService;
+
+  constructor(restService: CloudAppRestService) {
+    this._restService = restService;
+  }
+
+  /** Retrieve a single BIB record */
+  getBib (mmsId: string): Observable<Bib> {
+    return this._restService.call(`/bibs/${mmsId}`);
+  }   
+
+  /** Update a BIB record with the specified MARCXML */
+  updateBib( bib: Bib ): Observable<Bib> {
+    return this._restService.call( {
+      url: `/bibs/${bib.mms_id}`,
+      headers: { 
+        "Content-Type": "application/xml",
+        Accept: "application/json" },
+      requestBody: `<bib>${bib.anies}</bib>`,
+      method: HttpMethod.PUT
+    });
+  }    
+
+  /** Adds a 500 note field to a MARC21 Bibliographic Record */
+  addNoteToBib(bib: Bib) {
+    const doc = new DOMParser().parseFromString(bib.anies, "application/xml");
+    const datafield = dom("datafield", { 
+      parent: doc.documentElement, 
+      attributes: [ ["tag", "500"], ["ind1", " "], ["ind2", " "] ]
+    });
+    dom("subfield", { 
+      parent: datafield, 
+      text: `Record processed at ${(new Date()).toLocaleString()}`, 
+      attributes: [ ["code", "a"] ]
+    });
+    bib.anies = new XMLSerializer().serializeToString(doc.documentElement);
+    return bib;
+  }   
+}
+
+/** Adds Element to dom and returns it */
+const dom = (name: string, options: {parent?: Element | Node, text?: 
+  string, className?: string, id?: string, attributes?: string[][]} = {}
+  ): Element => {
+
+  let ns = options.parent ? options.parent.namespaceURI : '';
+  let element = document.createElementNS(ns, name);
+
+  if (options.parent) options.parent.appendChild(element);
+  if (options.text) element.innerHTML = options.text;
+  if (options.className) element.className = options.className;
+  if (options.id) element.id = options.id;
+  if (options.attributes) options.attributes.forEach(([att, val]) => element.setAttribute(att, val));
+
+  return element;  
+}

cloudapp/src/app/xml/xml.component.html

@@ -0,0 +1,17 @@
+<div>
+  <div *ngIf="bib; else nobib">
+    <p>Bibliographic record:</p>
+    <ul>
+      <li><strong>MMS ID: </strong>{{ bib.mms_id }}</li>
+      <li><strong>Title: </strong>{{ bib.title }}</li>
+      <li><strong>Author: </strong>{{ bib.author }}</li>
+    </ul>
+    <div class="commands-container">
+      <button mat-stroked-button (click)="addNote()" color="primary">Add Note</button>
+      <mat-spinner diameter="30" class="spinner" *ngIf="running"></mat-spinner>
+    </div>
+  </div>
+  <ng-template #nobib>      
+      Please navigate to a bibliographic record.
+  </ng-template>
+</div>

cloudapp/src/app/xml/xml.component.scss

@@ -0,0 +1,59 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { AppService } from '../app.service';
+import { Subscription } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { CloudAppEventsService, PageInfo, EntityType, CloudAppRestService } from '@exlibris/exl-cloudapp-angular-lib';
+import { ToastrService } from 'ngx-toastr';
+import { Bib, BibUtils } from './bib-utils';
+
+@Component({
+  selector: 'app-xml',
+  templateUrl: './xml.component.html',
+  styleUrls: ['./xml.component.scss']
+})
+export class XmlComponent implements OnInit, OnDestroy {
+
+  private pageLoad$: Subscription;
+  private bibUtils: BibUtils;
+  bib: Bib;
+  running = false;
+
+  constructor(
+    private appService: AppService,
+    private eventsService: CloudAppEventsService,
+    private restService: CloudAppRestService,
+    private toastr: ToastrService
+  ) { }
+
+  ngOnInit() {
+    this.appService.setTitle('Working with XML');
+    this.bibUtils = new BibUtils(this.restService);
+    this.pageLoad$ = this.eventsService.onPageLoad((pageInfo: PageInfo) => {
+      const entities = (pageInfo.entities||[]).filter(e=>[EntityType.BIB_MMS, 'IEP', 'BIB'].includes(e.type));
+      if (entities.length > 0) {
+        this.bibUtils.getBib(entities[0].id).subscribe(bib=>
+          this.bib = (bib.record_format=='marc21') ? bib : null
+        )
+      } else {
+        this.bib = null;
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.pageLoad$.unsubscribe();
+  }
+
+  addNote() {
+    if (!confirm(`Add a note to ${this.bib.mms_id}?`)) return;
+    this.running = true;
+    this.bib = this.bibUtils.addNoteToBib(this.bib);
+    this.bibUtils.updateBib(this.bib).pipe(finalize(()=>this.running=false))
+      .subscribe(
+        bib=>this.eventsService.refreshPage().subscribe(
+          ()=>this.toastr.success("Note added to Bib")
+        ),
+        (e) => this.toastr.error(e.message)
+      )
+  }
+}

cloudapp/src/app/xml/xml.component.ts

@@ -9,5 +9,16 @@
 }
 
 @mixin global-styles {
-    /* Add global styles here */
+  .commands-container {
+      margin: 20px 0;
+      width: fit-content;
+  }
+
+  .spinner {
+    float: right;
+  }
+
+  .commands-container button {
+    margin-right: 10px;
+  }
 }