add(actions-dialog): add action parameter selection dialog

src/app/features/home/details/actions/actions.page.ts

@@ -1,16 +1,16 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
-import { AlertController } from '@ionic/angular';
-import { AlertInput } from '@ionic/core';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { combineLatest } from 'rxjs';
 import { catchError, concatMap, map, tap } from 'rxjs/operators';
+import { ActionsDialogComponent } from '../../../../shared/actions/actions-dialog/actions-dialog.component';
 import {
   Action,
   ActionsService,
-} from '../../../../shared/actions/actions.service';
+} from '../../../../shared/actions/service/actions.service';
 import { BlockingActionService } from '../../../../shared/blocking-action/blocking-action.service';
 import { DiaBackendAuthService } from '../../../../shared/dia-backend/auth/dia-backend-auth.service';
 import { ErrorService } from '../../../../shared/error/error.service';
@@ -33,12 +33,12 @@ export class ActionsPage {
   constructor(
     private readonly actionsService: ActionsService,
     private readonly errorService: ErrorService,
-    private readonly alertController: AlertController,
     private readonly translocoService: TranslocoService,
     private readonly blockingActionService: BlockingActionService,
     private readonly route: ActivatedRoute,
     private readonly authService: DiaBackendAuthService,
-    private readonly snackBar: MatSnackBar
+    private readonly snackBar: MatSnackBar,
+    private readonly dialog: MatDialog
   ) {}
 
   openAction(action: Action) {
@@ -51,39 +51,20 @@ export class ActionsPage {
         concatMap(
           ([params, token, id]) =>
             new Promise<void>(resolve => {
-              this.alertController
-                .create({
-                  header: action.title_text,
-                  message: action.description_text,
-                  inputs: params.map(
-                    param =>
-                      ({
-                        name: param.name_text,
-                        label: param.display_text_text,
-                        type: param.type_text,
-                        placeholder: param.placeholder_text,
-                        value: param.default_values_list_text[0],
-                        disabled: !param.user_input_boolean,
-                      } as AlertInput)
-                  ),
-                  buttons: [
-                    {
-                      text: this.translocoService.translate('cancel'),
-                      role: 'cancel',
-                    },
-                    {
-                      text: this.translocoService.translate('ok'),
-                      handler: value => {
-                        const body = { ...value, token: token, cid: id };
-                        return this.sendAction(action, body);
-                      },
-                    },
-                  ],
-                })
-                .then(alert => {
-                  alert.present();
-                  resolve();
-                });
+              const dialogRef = this.dialog.open(ActionsDialogComponent, {
+                disableClose: true,
+                data: {
+                  action: action,
+                  params: params,
+                },
+              });
+              dialogRef.afterClosed().subscribe(data => {
+                if (data !== undefined) {
+                  const body = { ...data, token: token, cid: id };
+                  return this.sendAction(action, body);
+                }
+              });
+              resolve();
             })
         ),
         untilDestroyed(this)

src/app/shared/actions/actions-dialog/actions-dialog.component.html

@@ -0,0 +1,20 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ title }}</h2>
+  <p>{{ description }}</p>
+
+  <form [formGroup]="form">
+    <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+  </form>
+  <mat-dialog-actions align="end">
+    <button mat-button (click)="cancel()">{{ t('cancel') }}</button>
+    <button
+      mat-button
+      [disabled]="!form.valid"
+      color="primary"
+      cdkFocusInitial
+      (click)="send()"
+    >
+      {{ t('ok') }}
+    </button>
+  </mat-dialog-actions>
+</div>

src/app/shared/actions/actions-dialog/actions-dialog.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { SharedTestingModule } from '../../shared-testing.module';
+import { ActionsDialogComponent } from './actions-dialog.component';
+
+describe('ActionsDialogComponent', () => {
+  let component: ActionsDialogComponent;
+  let fixture: ComponentFixture<ActionsDialogComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ActionsDialogComponent],
+        imports: [SharedTestingModule],
+        providers: [
+          { provide: MatDialogRef, useValue: {} },
+          { provide: MAT_DIALOG_DATA, useValue: {} },
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(ActionsDialogComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/actions/actions-dialog/actions-dialog.component.ts

@@ -0,0 +1,96 @@
+import { Component, Inject } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { Action, Param } from '../service/actions.service';
+
+@Component({
+  selector: 'app-actions-dialog',
+  templateUrl: './actions-dialog.component.html',
+  styleUrls: ['./actions-dialog.component.scss'],
+})
+export class ActionsDialogComponent {
+  readonly form = new FormGroup({});
+  readonly fields: FormlyFieldConfig[] = [];
+  readonly model: any = {};
+
+  readonly title: string = '';
+  readonly description: string = '';
+  readonly params: Param[] = [];
+
+  constructor(
+    private readonly dialogRef: MatDialogRef<ActionsDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: MatDialogData
+  ) {
+    if (data.action !== undefined && data.params !== undefined) {
+      this.title = data.action.title_text;
+      this.description = data.action.description_text;
+      this.params = data.params;
+      this.createFormModel();
+      this.createFormFields();
+    }
+  }
+
+  private createFormModel() {
+    for (const param of this.params)
+      this.model[param.name_text] = param.default_values_list_text[0] || '';
+  }
+
+  private createFormFields() {
+    for (const param of this.params) {
+      if (param.type_text === 'dropdown')
+        this.fields.push({
+          key: param.name_text,
+          type: 'select',
+          templateOptions: {
+            options: param.default_values_list_text.map(value => ({
+              label: value,
+              value: value,
+            })),
+            placeholder: param.placeholder_text,
+            disabled: !param.user_input_boolean,
+            required: true,
+          },
+        });
+      else if (param.type_text === 'number')
+        this.fields.push({
+          key: param.name_text,
+          type: 'input',
+          templateOptions: {
+            type: 'number',
+            label: param.display_text_text,
+            placeholder: param.placeholder_text,
+            disabled: !param.user_input_boolean,
+            max: param.max_number,
+            min: param.min_number,
+            required: true,
+          },
+        });
+      else
+        this.fields.push({
+          key: param.name_text,
+          type: 'input',
+          templateOptions: {
+            type: 'text',
+            label: param.display_text_text,
+            placeholder: param.placeholder_text,
+            disabled: !param.user_input_boolean,
+            required: true,
+          },
+        });
+    }
+  }
+
+  send() {
+    this.dialogRef.close(this.model);
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+}
+
+interface MatDialogData {
+  action: Action | undefined;
+  params: Param[] | undefined;
+}

src/app/shared/actions/actions.service.spec.ts → src/app/shared/actions/service/actions.service.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { SharedTestingModule } from '../shared-testing.module';
+import { SharedTestingModule } from '../../shared-testing.module';
 import { ActionsService } from './actions.service';
 
 describe('ActionsService', () => {

src/app/shared/actions/actions.service.ts → src/app/shared/actions/service/actions.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { defer, forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { BUBBLE_DB_URL } from '../dia-backend/secret';
+import { BUBBLE_DB_URL } from '../../dia-backend/secret';
 
 @Injectable({
   providedIn: 'root',
@@ -50,8 +50,10 @@ export interface Param {
   readonly display_text_text: string;
   readonly name_text: string;
   readonly placeholder_text: string;
-  readonly type_text: string;
+  readonly type_text: 'number' | 'text' | 'dropdown';
   readonly user_input_boolean: boolean;
+  readonly max_number: number;
+  readonly min_number: number;
 }
 
 export interface GetActionsResponse<T> {

src/app/shared/shared.module.ts

@@ -2,9 +2,13 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 import { IonicModule } from '@ionic/angular';
 import { TranslocoModule } from '@ngneat/transloco';
 import { ReactiveComponentModule } from '@ngrx/component';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import { ActionsDialogComponent } from './actions/actions-dialog/actions-dialog.component';
 import { AvatarComponent } from './avatar/avatar.component';
 import { CapacitorPluginsModule } from './capacitor-plugins/capacitor-plugins.module';
 import { ContactSelectionDialogComponent } from './contact-selection-dialog/contact-selection-dialog.component';
@@ -16,6 +20,7 @@ import { StartsWithPipe } from './pipes/starts-with/starts-with.pipe';
 
 const declarations = [
   MigratingDialogComponent,
+  ActionsDialogComponent,
   AvatarComponent,
   MediaComponent,
   StartsWithPipe,
@@ -33,6 +38,9 @@ const imports = [
   MaterialModule,
   CapacitorPluginsModule,
   ReactiveComponentModule,
+  MatDialogModule,
+  FormlyModule,
+  FormlyMaterialModule,
 ];
 
 @NgModule({