action success modal

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { ActionSuccessPage } from './action-success.page'
+import { SharingModule } from 'src/app/modules/sharing.module'
+import { FormsModule } from '@angular/forms'
+import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
+import { QrCodeModule } from 'ng-qrcode'
+
+@NgModule({
+  declarations: [ActionSuccessPage],
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    SharingModule,
+    QrCodeModule,
+  ],
+  exports: [ActionSuccessPage],
+})
+export class ActionSuccessPageModule { }

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

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ header }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <div style="height: 100%">
+   <h2 style="margin: 0; text-align: center;">{{ message }}</h2>
+
+    <ion-item *ngIf="value" style="width: 250px; margin: auto; margin-top: 20px;" color="light">
+      <ion-label>
+        <p>{{ value }}</p>
+      </ion-label>
+      <ion-button *ngIf="copyable" fill="clear" (click)="copy(value)">
+        <ion-icon slot="icon-only" name="copy-outline" size="small"></ion-icon>
+      </ion-button>
+    </ion-item>
+    <div *ngIf="qr" class="ion-padding" style="text-align: center;">
+      <qr-code [value]="value" size="150"></qr-code>
+    </div>
+
+
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons *ngIf="!loadingText" slot="end" class="ion-padding-end">
+      <ion-button *ngIf="!hasConfig" fill="outline" (click)="dismiss()" class="enter-click">
+        Close
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+

ui/src/app/modals/action-success/action-success.page.scss

@@ -0,0 +1,11 @@
+.close-button {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px;
+}
+
+.main-content {
+  color: var(--ion-color-dark);
+}

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

@@ -0,0 +1,44 @@
+import { Component, Input } from '@angular/core'
+import { ModalController, ToastController } from '@ionic/angular'
+import { QRComponent } from 'src/app/components/qr/qr.component'
+import { copyToClipboard } from 'src/app/util/web.util'
+
+@Component({
+  selector: 'action-success',
+  templateUrl: './action-success.page.html',
+  styleUrls: ['./action-success.page.scss'],
+})
+export class ActionSuccessPage {
+  @Input() version: string
+  @Input() header: string
+  @Input() message: string
+  @Input() value: string
+  @Input() qr: boolean = false
+  @Input() copyable: boolean = false
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+    private readonly toastCtrl: ToastController,
+  ) { }
+
+  ngOnInit () {
+    console.log(this.qr)
+  }
+
+  async copy (address: string) {
+    let message = ''
+    await copyToClipboard(address || '')
+      .then(success => { message = success ? 'copied to clipboard!' : 'failed to copy'})
+
+    const toast = await this.toastCtrl.create({
+      header: message,
+      position: 'bottom',
+      duration: 1000,
+    })
+    await toast.present()
+  }
+
+  async dismiss () {
+    return this.modalCtrl.dismiss()
+  }
+}

ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts

@@ -7,6 +7,7 @@ import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.module'
 import { AppRestoreComponentModule } from 'src/app/modals/app-restore/app-restore.component.module'
+import { ActionSuccessPageModule } from 'src/app/modals/action-success/action-success.module'
 
 const routes: Routes = [
   {
@@ -24,6 +25,7 @@ const routes: Routes = [
     SharingModule,
     GenericFormPageModule,
     AppRestoreComponentModule,
+    ActionSuccessPageModule,
   ],
   declarations: [
     AppActionsPage,

ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts

@@ -11,6 +11,7 @@ import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { AppRestoreComponent } from 'src/app/modals/app-restore/app-restore.component'
 import { isEmptyObject } from 'src/app/util/misc.util'
+import { ActionSuccessPage } from 'src/app/modals/action-success/action-success.page'
 
 @Component({
   selector: 'app-actions',
@@ -157,20 +158,21 @@ export class AppActionsPage {
         'action-id': actionId,
         input,
       })
-
+      this.modalCtrl.dismiss()
-      const successAlert = await this.alertCtrl.create({
+      // console.log('action res', res)
-        header: 'Execution Complete',
+      const successModal = await this.modalCtrl.create({
-        message: res.message.split('\n').join('</br ></br />'),
+        component: ActionSuccessPage,
-        buttons: [
+        cssClass: res.qr ? 'action-success-modal-qr' : 'action-success-modal',
-          {
+        componentProps: {
-            text: 'Ok',
+          header: 'Execution Complete',
-            role: 'cancel',
+          message: res.message,
-            cssClass: 'enter-click',
+          value: res.value,
-          },
+          qr: res.qr,
-        ],
+          copyable: res.copyable,
+        },
       })
 
-      setTimeout(() => successAlert.present(), 400)
+      setTimeout(() => successModal.present(), 400)
 
     } catch (e) {
       this.errToast.present(e)

ui/src/global.scss

@@ -187,6 +187,24 @@ ion-button {
   }
 }
 
+.action-success-modal {
+  .modal-wrapper {
+    width: 320px !important;
+    height: 320px !important;
+    top: unset !important;
+    left: unset !important;
+  }
+}
+
+.action-success-modal-qr {
+  .modal-wrapper {
+    width: 320px !important;
+    height: 450px !important;
+    top: unset !important;
+    left: unset !important;
+  }
+}
+
 .modal-wrapper {
   position: absolute;
   height: 90% !important;