action inputs

ui/src/app/modals/app-action-input/app-action-input.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { AppActionInputPage } from './app-action-input.page'
+import { ObjectConfigComponentModule } from 'src/app/components/object-config/object-config.component.module'
+import { ConfigHeaderComponentModule } from 'src/app/components/config-header/config-header.component.module'
+
+@NgModule({
+  declarations: [AppActionInputPage],
+  imports: [
+    CommonModule,
+    IonicModule,
+    ObjectConfigComponentModule,
+    ConfigHeaderComponentModule,
+  ],
+  entryComponents: [AppActionInputPage],
+  exports: [AppActionInputPage],
+})
+export class AppActionInputPageModule { }

ui/src/app/modals/app-action-input/app-action-input.page.html

@@ -0,0 +1,27 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon name="close-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ action.name }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button [disabled]="error" (click)="save()">
+        Save
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <config-header [spec]="spec" [error]="error"></config-header>
+
+  <!-- object -->
+  <ion-item-group>
+    <ion-item-divider></ion-item-divider>
+    <object-config [cursor]="cursor" (onEdit)="handleObjectEdit()"></object-config>
+  </ion-item-group>
+
+</ion-content>

ui/src/app/modals/app-action-input/app-action-input.page.ts

@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core'
+import { LoadingController, ModalController } from '@ionic/angular'
+import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
+import { ValueSpecObject } from 'src/app/pkg-config/config-types'
+import { LoaderService } from 'src/app/services/loader.service'
+import { Action } from 'src/app/services/patch-db/data-model'
+
+@Component({
+  selector: 'app-action-input',
+  templateUrl: './app-action-input.page.html',
+  styleUrls: ['./app-action-input.page.scss'],
+})
+export class AppActionInputPage {
+  @Input() action: Action
+  @Input() cursor: ConfigCursor<'object'>
+  @Input() execute: () => Promise<void>
+  spec: ValueSpecObject
+  value: object
+  error: string
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+    private readonly loadingCtrl: LoadingController,
+    private loaderService: LoaderService,
+  ) { }
+
+  ngOnInit () {
+    this.spec = this.cursor.spec()
+    this.value = this.cursor.config()
+    this.error = this.cursor.checkInvalid()
+  }
+
+  async dismiss (): Promise<void> {
+    this.modalCtrl.dismiss()
+  }
+
+  async save (): Promise<void> {
+    this.loaderService.of({
+      spinner: 'lines',
+      message: 'Executing action',
+      cssClass: 'loader-ontop-of-all',
+    }).displayDuringAsync(async () => {
+      try {
+        await this.execute()
+        this.modalCtrl.dismiss()
+      } catch (e) {
+        this.error = e.message
+      }
+    })
+  }
+
+  handleObjectEdit (): void {
+    this.error = this.cursor.checkInvalid()
+  }
+}

ui/src/app/modals/app-config-value/app-config-value.page.ts

@@ -57,7 +57,7 @@ export class AppConfigValuePage {
     if ((!!this.saveFn && this.edited) || (!this.saveFn && this.error)) {
       await this.presentAlert()
     } else {
-      await this.modalCtrl.dismiss()
+      await this.modalCtrl.dismiss(this.value)
     }
   }
 

ui/src/app/modals/markdown/markdown.page.html

@@ -10,7 +10,7 @@
 </ion-header>
 
 <ion-content>
-  <text-spinner *ngIf="loading; else loaded" [text]="'fetching ' + title"></text-spinner>
+  <text-spinner *ngIf="loading; else loaded" [text]="'Loading ' + title | titlecase"></text-spinner>
   <ng-template #loaded>
     <ion-item *ngIf="error" style="margin-bottom: 16px;">
       <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>