Initial update

cloudapp/jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "target": "es5"
+  }
+}

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MainComponent } from './main/main.component';
+
+const routes: Routes = [
+  { path: '', component: MainComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

cloudapp/src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { AppService } from './app.service';
+
+@Component({
+  selector: 'app-root',
+  template: '<cloudapp-alert></cloudapp-alert><router-outlet></router-outlet>'
+})
+export class AppComponent {
+
+  constructor(private appService: AppService) { }
+
+}

cloudapp/src/app/app.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MaterialModule, getTranslateModule, AlertModule } from '@exlibris/exl-cloudapp-angular-lib';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { MainComponent } from './main/main.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    MainComponent
+  ],
+  imports: [
+    MaterialModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    HttpClientModule,
+    AlertModule,
+    getTranslateModule(),
+  ],
+  providers: [
+    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'standard' } },
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

cloudapp/src/app/app.service.ts

@@ -0,0 +1,12 @@
+
+import { Injectable } from '@angular/core';
+import { InitService } from '@exlibris/exl-cloudapp-angular-lib';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppService {
+
+    constructor(private initService: InitService) {}
+
+}

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

@@ -0,0 +1,42 @@
+<section>
+  <h1>
+    Welcome!
+  </h1>
+  <p>Use this sample app to get you started. The app includes the following:</p>
+  <ul>
+    <li>Listener for the <code>onPageLoad</code> event</li>
+    <li>Performs an API call using the <code>restService</code> service</li>
+    <li>Updates the object using the <code>restService</code> service</li>
+    <li>Refreshes the page in Alma</li>
+  </ul>
+  <p>Use these building blocks to be on your way to developing your own Cloud App.</p>
+</section>
+
+<section>
+  <mat-card class="example-card">
+    <mat-card-header>
+      <mat-card-title>Page Entity</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <pre>{{ pageEntities | json }}</pre>
+    </mat-card-content>
+  </mat-card>
+</section>
+
+<section>
+  <mat-card class="example-card">
+    <mat-card-header>
+      <mat-card-title>API Result</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <textarea #apiResultArea [value]="apiResult | json"></textarea>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-raised-button color="primary" (click)="update(apiResultArea.value)"
+        [disabled]="!hasApiResult || loading">Update</button>
+    </mat-card-actions>
+  </mat-card>
+</section>
+<div class="loading-shade" *ngIf="loading">
+  <mat-spinner diameter="50"></mat-spinner>
+</div>

cloudapp/src/app/main/main.component.scss

@@ -0,0 +1,31 @@
+section>h1 {
+  padding: 5px 10px;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+textarea {
+  padding: 2px;
+  border-width: 1px;
+  $width: calc(100% - 6px);
+  width: $width;
+  max-width: $width;
+  height: 150px;
+  font-family: monospace;
+  display: block;
+}
+
+textarea,
+section {
+  margin-bottom: 10px;
+}
+
+pre {
+  overflow: auto;
+  max-height: 200px;
+}
+
+pre,
+textarea {
+  font-size: 0.9em;
+}

cloudapp/src/app/main/main.component.theme.scss

@@ -0,0 +1,6 @@
+@mixin main-component-theme($theme, $typgraphy) {
+  section>h1 {
+    background-color: mat-color(map-get($theme, primary));
+    color: mat-color(map-get($theme, primary), default-contrast);
+  }
+}

cloudapp/src/app/main/main.component.ts

@@ -0,0 +1,103 @@
+import { Subscription } from 'rxjs';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  CloudAppRestService, CloudAppEventsService, Request, HttpMethod,
+  Entity, PageInfo, RestErrorResponse, AlertService
+} from '@exlibris/exl-cloudapp-angular-lib';
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+export class MainComponent implements OnInit, OnDestroy {
+
+  private pageLoad$: Subscription;
+  pageEntities: Entity[];
+  private _apiResult: any;
+
+  hasApiResult: boolean = false;
+  loading = false;
+
+  constructor(private restService: CloudAppRestService,
+    private eventsService: CloudAppEventsService,
+    private alert: AlertService ) { }
+
+  ngOnInit() {
+    this.pageLoad$ = this.eventsService.onPageLoad(this.onPageLoad);
+  }
+
+  ngOnDestroy(): void {
+    this.pageLoad$.unsubscribe();
+  }
+
+  get apiResult() {
+    return this._apiResult;
+  }
+
+  set apiResult(result: any) {
+    this._apiResult = result;
+    this.hasApiResult = result && Object.keys(result).length > 0;
+  }
+
+  onPageLoad = (pageInfo: PageInfo) => {
+    this.pageEntities = pageInfo.entities;
+    if ((pageInfo.entities || []).length == 1) {
+      const entity = pageInfo.entities[0];
+      this.restService.call(entity.link).subscribe(result => this.apiResult = result);
+    } else {
+      this.apiResult = {};
+    }
+  }
+
+  update(value: any) {
+    this.loading = true;
+    let requestBody = this.tryParseJson(value);
+    if (!requestBody) {
+      this.loading = false;
+      return this.alert.error('Failed to parse json');
+    }
+    this.sendUpdateRequest(requestBody);
+  }
+
+  refreshPage = () => {
+    this.loading = true;
+    this.eventsService.refreshPage().subscribe({
+      next: () => this.alert.success('Success!'),
+      error: e => {
+        console.error(e);
+        this.alert.error('Failed to refresh page');
+      },
+      complete: () => this.loading = false
+    });
+  }
+
+  private sendUpdateRequest(requestBody: any) {
+    let request: Request = {
+      url: this.pageEntities[0].link,
+      method: HttpMethod.PUT,
+      requestBody
+    };
+    this.restService.call(request).subscribe({
+      next: result => {
+        this.apiResult = result;
+        this.refreshPage();
+      },
+      error: (e: RestErrorResponse) => {
+        this.alert.error('Failed to update data');
+        console.error(e);
+        this.loading = false;
+      }
+    });
+  }
+
+  private tryParseJson(value: any) {
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      console.error(e);
+    }
+    return undefined;
+  }
+
+}

cloudapp/src/assets/manifest.json

@@ -0,0 +1,5 @@
+{
+   "id": "my-alma-cloud-app",
+   "title": "My Alma Cloud App",
+   "description": "My Alma Cloud App"
+}

cloudapp/src/main.scss

@@ -0,0 +1,11 @@
+
+@import './app/main/main.component.theme';
+
+@mixin themed-styles($theme, $typography) {
+    /* Include themed component mixins or theme dependent styles here */
+    @include main-component-theme($theme, $typography);
+}
+
+@mixin global-styles {
+    /* Add global styles here */
+}