chore: update Taiga UI and migrate some more forms (#2252)

frontend/projects/shared/src/public-api.ts

@@ -40,6 +40,7 @@ export * from './pipes/unit-conversion/unit-conversion.pipe'
 
 export * from './services/download-html.service'
 export * from './services/emver.service'
+export * from './services/error.service'
 export * from './services/error-toast.service'
 export * from './services/http.service'
 

frontend/projects/shared/src/services/error.service.ts

@@ -0,0 +1,43 @@
+import { ErrorHandler, inject, Injectable } from '@angular/core'
+import { TuiAlertService, TuiNotification } from '@taiga-ui/core'
+import { HttpError } from '../classes/http-error'
+
+// TODO: Enable this as ErrorHandler
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorService extends ErrorHandler {
+  private readonly alerts = inject(TuiAlertService)
+
+  override handleError(error: HttpError | string, link?: string) {
+    console.error(error)
+
+    this.alerts
+      .open(getErrorMessage(error, link), {
+        label: 'Error',
+        autoClose: false,
+        status: TuiNotification.Error,
+      })
+      .subscribe()
+  }
+}
+
+function getErrorMessage(e: HttpError | string, link?: string): string {
+  let message = ''
+
+  if (typeof e === 'string') {
+    message = e
+  } else if (e.code === 0) {
+    message =
+      'Request Error. Your browser blocked the request. This is usually caused by a corrupt browser cache or an overly aggressive ad blocker. Please clear your browser cache and/or adjust your ad blocker and try again'
+  } else if (!e.message) {
+    message = 'Unknown Error'
+    link = 'https://docs.start9.com/latest/support/faq'
+  } else {
+    message = e.message
+  }
+
+  return link
+    ? `${message}<br /><br /><a href=${link} target="_blank" rel="noreferrer">Get Help</a>`
+    : message
+}

frontend/projects/ui/src/app/modals/form/form.page.html

@@ -1,5 +1,5 @@
 <form
-  novalidate
+  (submit.capture.prevent)="0"
   (reset.capture.prevent.stop)="onReset()"
   [formGroup]="form"
   (tuiValueChanges)="markAsDirty()"

frontend/projects/ui/src/app/pages/developer-routes/dev-config/dev-config.page.ts

@@ -1,17 +1,15 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ModalController } from '@ionic/angular'
-import { debounce, ErrorToastService } from '@start9labs/shared'
+import { debounce, ErrorService } from '@start9labs/shared'
 import * as yaml from 'js-yaml'
 import { filter, take } from 'rxjs/operators'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { PatchDB } from 'patch-db-client'
 import { getProjectId } from 'src/app/util/get-project-id'
-import {
-  GenericFormPage,
-  GenericFormOptions,
-} from '../../../modals/generic-form/generic-form.page'
 import { DataModel } from 'src/app/services/patch-db/data-model'
+import { FormDialogService } from '../../../services/form-dialog.service'
+import { FormPage } from '../../../modals/form/form.page'
 
 @Component({
   selector: 'dev-config',
@@ -25,8 +23,9 @@ export class DevConfigPage {
   saving: boolean = false
 
   constructor(
+    private readonly formDialog: FormDialogService,
+    private readonly errorHandler: ErrorService,
     private readonly route: ActivatedRoute,
-    private readonly errToast: ErrorToastService,
     private readonly modalCtrl: ModalController,
     private readonly patch: PatchDB<DataModel>,
     private readonly api: ApiService,
@@ -46,26 +45,21 @@ export class DevConfigPage {
     try {
       doc = yaml.load(this.code)
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorHandler.handleError(e)
     }
 
-    const options: GenericFormOptions = {
-      title: 'Config Sample',
-      spec: JSON.parse(JSON.stringify(doc, null, 2)),
-      buttons: [
-        {
-          text: 'OK',
-          handler: async () => true,
-          isSubmit: true,
-        },
-      ],
-    }
-
-    const modal = await this.modalCtrl.create({
-      component: GenericFormPage,
-      componentProps: options,
+    this.formDialog.open(FormPage, {
+      label: 'Config Sample',
+      data: {
+        spec: JSON.parse(JSON.stringify(doc, null, 2)),
+        buttons: [
+          {
+            text: 'OK',
+            handler: async () => true,
+          },
+        ],
+      },
     })
-    await modal.present()
   }
 
   @debounce(1000)
@@ -77,7 +71,7 @@ export class DevConfigPage {
         this.code,
       )
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorHandler.handleError(e)
     } finally {
       this.saving = false
     }

frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts

@@ -1,16 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { LoadingController, ModalController } from '@ionic/angular'
-import {
-  GenericFormPage,
-  GenericFormOptions,
-} from 'src/app/modals/generic-form/generic-form.page'
 import { BasicInfo, getBasicInfoSpec } from './form-info'
 import { PatchDB } from 'patch-db-client'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
 import { getProjectId } from 'src/app/util/get-project-id'
 import { DataModel, DevProjectData } from 'src/app/services/patch-db/data-model'
+import { FormDialogService } from '../../../services/form-dialog.service'
+import { FormPage } from '../../../modals/form/form.page'
+import { LoadingService } from '../../../modals/loading/loading.service'
 
 @Component({
   selector: 'developer-menu',
@@ -23,40 +21,32 @@ export class DeveloperMenuPage {
   readonly projectData$ = this.patch.watch$('ui', 'dev', this.projectId)
 
   constructor(
+    private readonly formDialog: FormDialogService,
+    private readonly loader: LoadingService,
+    private readonly errorHandler: ErrorService,
     private readonly route: ActivatedRoute,
-    private readonly modalCtrl: ModalController,
-    private readonly loadingCtrl: LoadingController,
     private readonly api: ApiService,
-    private readonly errToast: ErrorToastService,
     private readonly patch: PatchDB<DataModel>,
   ) {}
 
   async openBasicInfoModal(data: DevProjectData) {
-    const options: GenericFormOptions = {
-      title: 'Basic Info',
-      spec: getBasicInfoSpec(data),
-      buttons: [
-        {
-          text: 'Save',
-          handler: async (basicInfo: BasicInfo) =>
-            this.saveBasicInfo(basicInfo),
-          isSubmit: true,
-        },
-      ],
-    }
-
-    const modal = await this.modalCtrl.create({
-      component: GenericFormPage,
-      componentProps: options,
+    this.formDialog.open(FormPage, {
+      label: 'Basic Info',
+      data: {
+        spec: getBasicInfoSpec(data),
+        buttons: [
+          {
+            text: 'Save',
+            handler: async (basicInfo: BasicInfo) =>
+              this.saveBasicInfo(basicInfo),
+          },
+        ],
+      },
     })
-    await modal.present()
   }
 
   async saveBasicInfo(basicInfo: BasicInfo): Promise<boolean> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Saving...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Saving...').subscribe()
 
     try {
       await this.api.setDbValue<BasicInfo>(
@@ -65,10 +55,10 @@ export class DeveloperMenuPage {
       )
       return true
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorHandler.handleError(e)
       return false
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 }