Fill in details automatically

cloudapp/src/app/app.service.ts

@@ -1,19 +1,27 @@
 
 import { Injectable } from '@angular/core';
-import { AlertService, CloudAppConfigService, CloudAppEventsService, InitService } from '@exlibris/exl-cloudapp-angular-lib';
+import { AlertService, CloudAppConfigService, CloudAppEventsService, CloudAppRestService, InitService } from '@exlibris/exl-cloudapp-angular-lib';
 import { cloneDeep } from 'lodash';
-import { BehaviorSubject, Observable, of } from 'rxjs';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { concatMap, map, take, tap } from 'rxjs/operators';
 
 export interface N8nFormItem {
     id: number,
     name: string,
     description: string,
-    url: string,
+    path: string,
     createdDate: number,
     createdBy: string,
     modifiedDate: number,
-    modifiedBy: string
+    modifiedBy: string,
+    formWorkflow: N8nFormTriggeredWorkflow
+}
+
+export interface N8nFormTriggeredWorkflow {
+    id: string;
+    name: string;
+    formPath: string;
+    formTitle: string;
 }
 
 interface ConfigMetadata {
@@ -31,13 +39,39 @@ export class AppService {
     private forms: N8nFormItem[];
     private metadata: ConfigMetadata;
 
+    private almaUrl: Promise<string>;
+    private n8nUrl: Promise<string>;
+    private formTriggeredWorkflows: Promise<N8nFormTriggeredWorkflow[]>;
+
     constructor(private initService: InitService,
         private configService: CloudAppConfigService,
         private eventsService: CloudAppEventsService,
-        private alertService: AlertService) { }
+        private alertService: AlertService,
+        private restService: CloudAppRestService) {
+        this.almaUrl = this.eventsService.getInitData().pipe(take(1),
+            map(data => data.urls.alma)).toPromise();
+        this.n8nUrl = this.restService.call('/almaws/v1/conf/mapping-tables/WorkflowAutomationToolConfig')
+            .pipe(map((data: any) => data.row.find(r => r.column0 === '02_wat_url').column2))
+            .toPromise();
+        this.formTriggeredWorkflows = this.restService.call<N8nFormTriggeredWorkflow[]>
+            ('/library-open-workflows/workflows/form-triggered').toPromise();
+    }
+
+    getAlmaUrl() {
+        return from(this.almaUrl);
+    }
+
+    getN8nInstanceUrl() {
+        return from(this.n8nUrl);
+    }
+
+    getFormTriggersFromInstance() {
+        return from(this.formTriggeredWorkflows);
+    }
 
     getCurrentUserId() {
-        return this.eventsService.getInitData().pipe(take(1), map(data => data.user.primaryId));
+        return this.eventsService.getInitData().pipe(take(1),
+            map(data => data.user.primaryId));
     }
 
     setTitle(title: string) {

cloudapp/src/app/configuration/configuration.component.html

@@ -18,7 +18,7 @@
     <mat-card *ngFor="let form of forms" [style.margin.px]="5">
         <mat-card-header>
             <mat-card-title>{{ form.name }}</mat-card-title>
-            <mat-card-subtitle>{{ form.url }}</mat-card-subtitle>
+            <mat-card-subtitle>{{ form.path }}</mat-card-subtitle>
         </mat-card-header>
         <mat-card-content>
             <p>{{ form.description }}</p>

cloudapp/src/app/configuration/configuration.component.ts

@@ -15,7 +15,7 @@ export class ConfigurationComponent implements OnInit {
   displayedColumns = ['id', 'name', 'description', 'url', 'actions'];
   forms: N8nFormItem[] = [];
   saving = false;
-  
+
   private changed = false;
 
   constructor(private appService: AppService, public dialog: MatDialog) {
@@ -24,7 +24,10 @@ export class ConfigurationComponent implements OnInit {
 
   ngOnInit(): void {
     this.appService.getForms().subscribe(forms => {
-      this.forms = forms;
+      this.forms = forms ?? [];
+    });
+    this.appService.getFormTriggersFromInstance().subscribe(workflows => {
+
     });
   }
 

cloudapp/src/app/configuration/edit-dialog/edit-dialog.component.html

@@ -2,12 +2,20 @@ <h1 mat-dialog-title>Edit Entry</h1>
 <div mat-dialog-content>
     <form [formGroup]="formGroup">
         <mat-form-field>
-            <mat-label>Name</mat-label>
-            <input matInput formControlName="name" required>
+            <mat-label>Form</mat-label>
+            <mat-select formControlName="form" required>
+                <mat-option *ngFor="let wflow of formTriggeredWorkflows" [value]="wflow.id + '+' + wflow.formPath">
+                    {{wflow.formTitle}} ({{wflow.name}})
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Path</mat-label>
+            <input matInput formControlName="path" required>
         </mat-form-field>
         <mat-form-field>
-            <mat-label>URL</mat-label>
-            <input matInput formControlName="url" required>
+            <mat-label>Name</mat-label>
+            <input matInput formControlName="name" required>
         </mat-form-field>
         <mat-form-field>
             <mat-label>Description</mat-label>

cloudapp/src/app/configuration/edit-dialog/edit-dialog.component.ts

@@ -1,8 +1,9 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { isEmpty } from 'lodash';
 import { debounceTime } from 'rxjs/operators';
-import { AppService, N8nFormItem } from '../../app.service';
+import { AppService, N8nFormItem, N8nFormTriggeredWorkflow } from '../../app.service';
 
 @Component({
   selector: 'app-edit-dialog',
@@ -12,21 +13,45 @@ import { AppService, N8nFormItem } from '../../app.service';
 export class EditDialogComponent implements OnInit {
 
   formGroup: FormGroup;
+  formTriggeredWorkflows: N8nFormTriggeredWorkflow[] = [];
+  editMode = false;
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: { form: N8nFormItem },
     private dialogRef: MatDialogRef<EditDialogComponent>,
     private appService: AppService) { }
 
   ngOnInit(): void {
     const { form } = this.data;
-    this.formGroup = new FormGroup({
-      name: new FormControl(form?.name ?? '', Validators.required),
-      url: new FormControl(form?.url ?? '', Validators.required),
-      description: new FormControl(form?.description ?? '')
+    this.editMode = !isEmpty(this.data?.form);
+    this.appService.getFormTriggersFromInstance().subscribe(formTriggeredWorkflows => {
+      this.formTriggeredWorkflows = formTriggeredWorkflows;
     });
+    if (this.editMode) {
+      this.formGroup = new FormGroup({
+        form: new FormControl({
+          value: `${form.formWorkflow.id}+${form.formWorkflow.formPath}`,
+          disabled: true
+        }, Validators.required),
+        name: new FormControl(form.name, Validators.required),
+        path: new FormControl({ value: form.path, disabled: true }, Validators.required),
+        description: new FormControl(form.description ?? '')
+      });
+    } else {
+      this.formGroup = new FormGroup({
+        form: new FormControl('', Validators.required),
+        name: new FormControl('', Validators.required),
+        path: new FormControl({ value: '', disabled: true }, Validators.required),
+        description: new FormControl('')
+      });
+    }
+    this.formGroup.get('form')?.valueChanges.subscribe(formVal => {
+      const form = this.formTriggeredWorkflows.find(wf => `${wf.id}+${wf.formPath}` === formVal);
+      this.formGroup.get('name').setValue(`${form.formTitle} (${form.name})`);
+      this.formGroup.get('path').setValue(form.formPath);
+    })
     this.formGroup.valueChanges.pipe(debounceTime(100)).subscribe(value => {
-      const { name, url, description } = form;
-      if (this.formGroup.dirty && JSON.stringify(value) === JSON.stringify({ name, url, description })) {
+      const { name, path, description } = form;
+      if (this.formGroup.dirty && JSON.stringify(value) === JSON.stringify({ name, path, description })) {
         this.formGroup.markAsPristine();
       }
     })
@@ -37,14 +62,18 @@ export class EditDialogComponent implements OnInit {
       this.dialogRef.close(() => {
         const { form } = this.data;
         form.name = this.formGroup.get('name').value;
-        form.url = this.formGroup.get('url').value;
+        form.path = this.formGroup.get('path').value;
         form.description = this.formGroup.get('description').value;
         form.modifiedBy = userId;
         form.modifiedDate = Date.now();
         if (!form.id) {
           form.createdBy = userId;
           form.createdDate = Date.now();
         }
+        if (!form.formWorkflow) {
+          form.formWorkflow = this.formTriggeredWorkflows
+            .find(wf => `${wf.id}+${wf.formPath}` === this.formGroup.get('form').value);
+        }
         return form;
       });
     })

cloudapp/src/app/form/form.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
+import { forkJoin } from 'rxjs';
 import { AppService, N8nFormItem } from '../app.service';
 
 @Component({
@@ -22,12 +23,15 @@ export class FormComponent implements OnInit {
 
   ngOnInit(): void {
     this.route.paramMap.subscribe(params => {
-      this.appService.getForms().subscribe(forms => {
+      forkJoin([
+        this.appService.getForms(),
+        this.appService.getN8nInstanceUrl()
+      ]).subscribe(([forms, url]) => {
         this.form = forms.find(f => f.id === +params.get('id'));
         this.notFound = !this.form;
         if (this.form) {
           this.appService.setTitle(this.form.name);
-          this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.form.url);
+          this.url = this.sanitizer.bypassSecurityTrustResourceUrl(`${url}/form/${this.form.path}`);
         }
       })
     });

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

@@ -1,4 +1,4 @@
-<mat-form-field class="search-field">
+<mat-form-field class="search-field" *ngIf="forms?.length > 10">
   <mat-label>Search</mat-label>
   <input matInput type="text" [ngModel]="searchValue" (ngModelChange)="onSearchChange($event)">
   <mat-spinner *ngIf="searching" matSuffix diameter="16"></mat-spinner>
@@ -8,9 +8,9 @@
   </button>
 </mat-form-field>
 <mat-action-list *ngIf="forms?.length > 0">
-  <button mat-list-item *ngFor="let form of forms" [routerLink]="['/form', form.id]"
+  <button mat-list-item *ngFor="let form of forms; index as i" [routerLink]="['/form', form.id]"
     routerLinkActive="router-link-active">
-    <h3 matLine> {{form.name}} </h3>
+    <h3 matLine>{{i+1}}. {{form.name}} </h3>
     <p matLine>
       <span> {{form.description}} </span>
     </p>

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

@@ -22,7 +22,7 @@ export class MainComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.appService.getForms().subscribe(forms => {
-      this._forms = forms;
+      this._forms = forms ?? [];
       this.forms = [...this._forms];
     })
   }