refactor app wizards completely

frontend/package.json

@@ -51,6 +51,7 @@
     "patch-db-client": "file: ../../../patch-db/client",
     "pbkdf2": "^3.1.2",
     "rxjs": "^6.6.7",
+    "swiper": "^8.2.4",
     "ts-matches": "^5.1.0",
     "tslib": "^2.3.0",
     "uuid": "^8.3.2",

frontend/projects/marketplace/src/types/marketplace-manifest.ts

@@ -22,7 +22,6 @@ export interface MarketplaceManifest<T = unknown> {
     uninstall: string | null
     restore: string | null
     start: string | null
-    stop: string | null
   }
   dependencies: Record<string, Dependency<T>>
 }

frontend/projects/ui/src/app/app/preloader/preloader.component.html

@@ -3,6 +3,9 @@
 
 <!-- 3rd party components -->
 <qr-code value="hello"></qr-code>
+<swiper>
+  <ng-template swiperSlide>Slide 1</ng-template>
+</swiper>
 
 <!-- Ionic components -->
 <ion-action-sheet></ion-action-sheet>
@@ -46,7 +49,6 @@
 <ion-segment-button></ion-segment-button>
 <ion-select></ion-select>
 <ion-select-option></ion-select-option>
-<ion-slides></ion-slides>
 <ion-spinner name="lines"></ion-spinner>
 <ion-text></ion-text>
 <ion-text><strong>load bold font</strong></ion-text>

frontend/projects/ui/src/app/app/preloader/preloader.module.ts

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common'
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
 import { QrCodeModule } from 'ng-qrcode'
-
+import { SwiperModule } from 'swiper/angular'
 import { PreloaderComponent } from './preloader.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, QrCodeModule],
+  imports: [CommonModule, IonicModule, QrCodeModule, SwiperModule],
   declarations: [PreloaderComponent],
   exports: [PreloaderComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

frontend/projects/ui/src/app/components/app-wizard/alert/alert.component.html

@@ -0,0 +1,4 @@
+<h1>
+  <ion-text color="warning">Warning</ion-text>
+</h1>
+<div class="ion-text-left" [innerHTML]="params.message | markdown"></div>

frontend/projects/ui/src/app/components/app-wizard/alert/alert.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core'
+import { BaseSlide } from '../wizard-types'
+
+@Component({
+  selector: 'alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['../app-wizard.component.scss'],
+})
+export class AlertComponent implements BaseSlide {
+  @Input() params: {
+    message: string
+  }
+
+  async load() {}
+
+  loading = false
+}

frontend/projects/ui/src/app/components/app-wizard/app-wizard.component.html

@@ -0,0 +1,90 @@
+<ion-header>
+  <ion-toolbar>
+    <div style="padding: 10px 0">
+      <ion-title style="font-size: 32px">{{ params.title }}</ion-title>
+      <div class="underline"></div>
+      <ion-title>
+        <i
+          >{{ params.action | titlecase
+          }}<span *ngIf="params.version"
+            >: {{ params.version | displayEmver }}</span
+          ></i
+        >
+      </ion-title>
+    </div>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div style="padding: 36px; height: 100%">
+    <swiper
+      *ngIf="!error; else hasError"
+      (swiper)="setSwiperInstance($event)"
+      (slideNextTransitionStart)="loadSlide()"
+    >
+      <ng-template swiperSlide *ngFor="let slide of params.slides">
+        <alert
+          #components
+          *ngIf="slide.selector === 'alert'"
+          [params]="slide.params"
+        ></alert>
+        <notes
+          #components
+          *ngIf="slide.selector === 'notes'"
+          [params]="slide.params"
+        ></notes>
+        <dependents
+          #components
+          *ngIf="slide.selector === 'dependents'"
+          [params]="slide.params"
+          (onSuccess)="next()"
+          (onError)="setError($event)"
+        ></dependents>
+        <complete
+          #components
+          *ngIf="slide.selector === 'complete'"
+          [params]="slide.params"
+          (onSuccess)="dismiss('success')"
+          (onError)="setError($event)"
+        ></complete>
+      </ng-template>
+    </swiper>
+
+    <ng-template #hasError>
+      <p>
+        <ion-text color="danger">{{ error }}</ion-text>
+      </p>
+    </ng-template>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ng-container *ngIf="!initializing && swiper">
+      <ion-buttons slot="end" style="padding-right: 8px">
+        <ion-button
+          *ngIf="error; else noError"
+          (click)="dismiss()"
+          class="enter-click"
+        >
+          <b>Dismiss</b>
+        </ion-button>
+        <ng-template #noError>
+          <ion-button
+            *ngIf="!currentSlide.loading && !swiper.isEnd"
+            (click)="next()"
+            class="enter-click"
+            [class.no-click]="currentSlide.loading"
+          >
+            <b>Continue</b>
+          </ion-button>
+        </ng-template>
+      </ion-buttons>
+    </ng-container>
+  </ion-toolbar>
+</ion-footer>

frontend/projects/ui/src/app/components/install-wizard/install-wizard.component.module.ts → frontend/projects/ui/src/app/components/app-wizard/app-wizard.component.module.ts

@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { InstallWizardComponent } from './install-wizard.component'
+import { AppWizardComponent } from './app-wizard.component'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { EmverPipesModule } from '@start9labs/shared'
 import { DependentsComponentModule } from './dependents/dependents.component.module'
 import { CompleteComponentModule } from './complete/complete.component.module'
 import { NotesComponentModule } from './notes/notes.component.module'
 import { AlertComponentModule } from './alert/alert.component.module'
+import { SwiperModule } from 'swiper/angular'
 
 @NgModule({
-  declarations: [InstallWizardComponent],
+  declarations: [AppWizardComponent],
   imports: [
     CommonModule,
     IonicModule,
@@ -20,7 +21,8 @@ import { AlertComponentModule } from './alert/alert.component.module'
     CompleteComponentModule,
     NotesComponentModule,
     AlertComponentModule,
+    SwiperModule,
   ],
-  exports: [InstallWizardComponent],
+  exports: [AppWizardComponent],
 })
-export class InstallWizardComponentModule {}
+export class AppWizardComponentModule {}

frontend/projects/ui/src/app/components/app-wizard/app-wizard.component.scss

@@ -0,0 +1,6 @@
+.underline {
+  margin: 6px 0 8px 16px;
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+  border-color: #404040;
+}