From dacd5d3e6bef1fba8b267a6da050c1cb1206a2e2 Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Tue, 21 Mar 2023 12:00:15 -0600
Subject: [PATCH] files for config

---
 frontend/package-lock.json                    | 10 +--
 frontend/package.json                         |  2 +-
 .../form-label/form-label.component.ts        |  4 +-
 .../form-object/form-object.component.html    | 71 ++++++++++++++-----
 .../form-object/form-object.component.ts      | 22 +++---
 .../form-union/form-union.component.ts        |  2 +-
 .../ui/src/app/services/api/api.fixures.ts    |  9 +++
 .../ui/src/app/services/form.service.ts       | 25 +++++--
 8 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 11454d816..fee7c9c24 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "embassy-os",
-  "version": "0.3.4",
+  "version": "0.3.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -49,7 +49,7 @@
         "patch-db-client": "file: ../../../patch-db/client",
         "pbkdf2": "^3.1.2",
         "rxjs": "^7.5.6",
-        "start-sdk": "^0.4.0-lib0.alpha6",
+        "start-sdk": "^0.4.0-lib0.alpha8",
         "swiper": "^8.2.4",
         "ts-matches": "^5.2.1",
         "tslib": "^2.3.0",
@@ -13771,9 +13771,9 @@
       }
     },
     "node_modules/start-sdk": {
-      "version": "0.4.0-lib0.alpha6",
-      "resolved": "https://registry.npmjs.org/start-sdk/-/start-sdk-0.4.0-lib0.alpha6.tgz",
-      "integrity": "sha512-DshqK1GFbxojoRK8/RjPm0+xmNZ0Ac41JhhwhqvpSIdbk7l4vkLm38KIOVJ9nAFw592Ob9vu1NHKySuYOXgQ8Q==",
+      "version": "0.4.0-lib0.alpha8",
+      "resolved": "https://registry.npmjs.org/start-sdk/-/start-sdk-0.4.0-lib0.alpha8.tgz",
+      "integrity": "sha512-qErlv8ikV8nYqyCxxSN856dUwddGK5OOwTXk62IiJPxY3si03P1NQ3MnFch6Vx3NXiOmKeNNqw4/bj26TdUWRA==",
       "dependencies": {
         "@iarna/toml": "^2.2.5",
         "lodash": "^4.17.21",
diff --git a/frontend/package.json b/frontend/package.json
index fe7327e4e..dfc0c517a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -74,7 +74,7 @@
     "patch-db-client": "file: ../../../patch-db/client",
     "pbkdf2": "^3.1.2",
     "rxjs": "^7.5.6",
-    "start-sdk": "^0.4.0-lib0.alpha6",
+    "start-sdk": "^0.4.0-lib0.alpha8",
     "swiper": "^8.2.4",
     "ts-matches": "^5.2.1",
     "tslib": "^2.3.0",
diff --git a/frontend/projects/ui/src/app/components/form-object/form-label/form-label.component.ts b/frontend/projects/ui/src/app/components/form-object/form-label/form-label.component.ts
index 45b7a0144..3bac36d41 100644
--- a/frontend/projects/ui/src/app/components/form-object/form-label/form-label.component.ts
+++ b/frontend/projects/ui/src/app/components/form-object/form-label/form-label.component.ts
@@ -12,7 +12,7 @@ export class FormLabelComponent {
     name: string
     new: boolean
     edited: boolean
-    description?: string
+    description: string | null
     required?: boolean
     newOptions?: boolean
   }
@@ -22,7 +22,7 @@ export class FormLabelComponent {
   async presentAlertDescription() {
     const alert = await this.alertCtrl.create({
       header: this.data.name,
-      message: this.data.description,
+      message: this.data.description!,
       buttons: [
         {
           text: 'OK',
diff --git a/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.html b/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.html
index b1c0b1529..020539d8c 100644
--- a/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.html
+++ b/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.html
@@ -1,10 +1,10 @@
 <ion-item-group [formGroup]="formGroup">
-  <div *ngFor="let entry of formGroup.controls | keyvalue: asIsOrder">
+  <div *ngFor="let entry of formGroup.controls | keyvalue : asIsOrder">
     <div *ngIf="objectSpec[entry.key] as spec">
       <!-- string or number -->
       <ng-container *ngIf="spec.type === 'string' || spec.type === 'number'">
         <!-- label -->
-        <h4 class="input-label">
+        <p class="input-label">
           <form-label
             [data]="{
               name: spec.name,
@@ -14,11 +14,11 @@
               required: !spec.nullable
             }"
           ></form-label>
-        </h4>
+        </p>
         <ion-item [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'">
           <ion-textarea
             *ngIf="spec.type === 'string' && spec.textarea; else notTextArea"
-            [placeholder]="spec.placeholder || 'Enter ' + spec.name"
+            [placeholder]="spec.placeholder"
             [formControlName]="entry.key"
             (ionFocus)="presentAlertChangeWarning(entry.key, spec)"
             (ionChange)="handleInputChange()"
@@ -34,7 +34,7 @@
                 !unmasked[entry.key]
               "
               [inputmode]="spec.type === 'number' ? 'tel' : 'text'"
-              [placeholder]="spec.placeholder || 'Enter ' + spec.name"
+              [placeholder]="spec.placeholder"
               [formControlName]="entry.key"
               (ionFocus)="presentAlertChangeWarning(entry.key, spec)"
               (ionChange)="handleInputChange()"
@@ -63,20 +63,24 @@
           </ion-note>
         </ion-item>
         <p class="error-message">
-          <span *ngIf="(formGroup | getControl: entry.key).errors as errors">
-            {{ errors | getError: $any(spec)['pattern-description'] }}
+          <span *ngIf="(formGroup | getControl : entry.key).errors as errors">
+            {{ errors | getError : $any(spec)['pattern-description'] }}
           </span>
         </p>
       </ng-container>
-      <!-- boolean or enum -->
+      <!-- boolean, enum, or file -->
       <ion-item
-        *ngIf="spec.type === 'boolean' || spec.type === 'enum'"
+        *ngIf="
+          spec.type === 'boolean' ||
+          spec.type === 'enum' ||
+          spec.type === 'file'
+        "
         style="--padding-start: 0"
       >
         <ion-button
-          *ngIf="spec.description"
+          *ngIf="spec.description as desc"
           fill="clear"
-          (click)="presentAlertBoolEnumDescription($event, spec)"
+          (click.stop)="presentAlertDescription(spec.name, desc)"
           style="--padding-start: 0"
         >
           <ion-icon
@@ -126,6 +130,35 @@
             {{ spec['value-names'][option] }}
           </ion-select-option>
         </ion-select>
+
+        <div
+          *ngIf="spec.type === 'file' && formGroup.get(entry.key) as control"
+          slot="end"
+        >
+          <ion-button
+            *ngIf="!control.value; else hasFile"
+            strong
+            color="dark"
+            size="small"
+          >
+            <label for="upload-file">Browse...</label>
+            <input
+              type="file"
+              [accept]="spec.extensions.join(',')"
+              style="position: absolute; opacity: 0; height: 100%"
+              id="upload-file"
+              (change)="handleFileInput($event, control)"
+            />
+          </ion-button>
+          <ng-template #hasFile>
+            <div class="inline">
+              <p class="ion-padding-end">{{ control.value.name }}</p>
+              <div style="cursor: pointer" (click)="clearFile(control)">
+                <ion-icon name="close"></ion-icon>
+              </div>
+            </div>
+          </ng-template>
+        </div>
       </ion-item>
       <!-- object -->
       <ng-container *ngIf="spec.type === 'object'">
@@ -159,7 +192,7 @@
         <!-- body -->
         <tui-expand
           [expanded]="objectDisplay[entry.key].expanded"
-          [id]="objectId | toElementId: entry.key"
+          [id]="objectId | toElementId : entry.key"
         >
           <div class="nested-wrapper">
             <form-object
@@ -209,7 +242,7 @@
             </ion-button>
           </ion-item-divider>
           <p class="error-message" style="margin-bottom: 8px">
-            <span *ngIf="(formGroup | getControl: entry.key).errors as errors">
+            <span *ngIf="(formGroup | getControl : entry.key).errors as errors">
               {{ errors | getError }}
             </span>
           </p>
@@ -257,7 +290,7 @@
                 <tui-expand
                   style="padding-left: 24px"
                   [expanded]="objectListDisplay[entry.key][i].expanded"
-                  [id]="objectId | toElementId: entry.key:i"
+                  [id]="objectId | toElementId : entry.key : i"
                 >
                   <form-object
                     *ngIf="spec.subtype === 'object'"
@@ -294,7 +327,7 @@
               <!-- string or number -->
               <div
                 *ngIf="spec.subtype === 'string' || spec.subtype === 'number'"
-                [id]="objectId | toElementId: entry.key:i"
+                [id]="objectId | toElementId : entry.key : i"
               >
                 <ion-item
                   [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'"
@@ -320,10 +353,10 @@
                 <p class="error-message">
                   <span
                     *ngIf="
-                      (formGroup | getControl: entry.key:i).errors as errors
+                      (formGroup | getControl : entry.key : i).errors as errors
                     "
                   >
-                    {{ errors | getError: $any(spec)['pattern-description'] }}
+                    {{ errors | getError : $any(spec)['pattern-description'] }}
                   </span>
                 </p>
               </div>
@@ -356,14 +389,14 @@
             (click)="presentModalEnumList(entry.key, $any(spec), formArr.value)"
           >
             <ion-label style="white-space: nowrap !important">
-              <h2>{{ formArr.value | toEnumListDisplay: $any(spec.spec) }}</h2>
+              <h2>{{ formArr.value | toEnumListDisplay : $any(spec.spec) }}</h2>
             </ion-label>
             <ion-button slot="end" fill="clear" color="light">
               <ion-icon slot="icon-only" name="chevron-down"></ion-icon>
             </ion-button>
           </ion-item>
           <p class="error-message">
-            <span *ngIf="(formGroup | getControl: entry.key).errors as errors">
+            <span *ngIf="(formGroup | getControl : entry.key).errors as errors">
               {{ errors | getError }}
             </span>
           </p>
diff --git a/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.ts b/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.ts
index 87566d548..439c5d10d 100644
--- a/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.ts
+++ b/frontend/projects/ui/src/app/components/form-object/form-object/form-object.component.ts
@@ -7,14 +7,18 @@ import {
   inject,
   SimpleChanges,
 } from '@angular/core'
-import { FormArray, UntypedFormArray, UntypedFormGroup } from '@angular/forms'
+import {
+  AbstractControl,
+  FormArray,
+  UntypedFormArray,
+  UntypedFormGroup,
+} from '@angular/forms'
 import { AlertButton, AlertController, ModalController } from '@ionic/angular'
 import {
   InputSpec,
   ListValueSpecOf,
   ValueSpec,
   ValueSpecBoolean,
-  ValueSpecEnum,
   ValueSpecList,
   ValueSpecListOf,
   ValueSpecUnion,
@@ -236,13 +240,15 @@ export class FormObjectComponent {
     await alert.present()
   }
 
-  async presentAlertBoolEnumDescription(
-    event: Event,
-    spec: ValueSpecBoolean | ValueSpecEnum,
-  ) {
-    event.stopPropagation()
-    const { name, description } = spec
+  handleFileInput(e: any, control: AbstractControl) {
+    control.patchValue(e.target.files[0])
+  }
 
+  clearFile(control: AbstractControl) {
+    control.patchValue(null)
+  }
+
+  async presentAlertDescription(name: string, description: string) {
     const alert = await this.alertCtrl.create({
       header: name,
       message: description || '',
diff --git a/frontend/projects/ui/src/app/components/form-object/form-union/form-union.component.ts b/frontend/projects/ui/src/app/components/form-object/form-union/form-union.component.ts
index ca30083ac..e865ea44f 100644
--- a/frontend/projects/ui/src/app/components/form-object/form-union/form-union.component.ts
+++ b/frontend/projects/ui/src/app/components/form-object/form-union/form-union.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { UntypedFormGroup } from '@angular/forms'
 import { v4 } from 'uuid'
 import { FormService } from 'src/app/services/form.service'
-import { ValueSpecUnion } from 'src/app/pkg-config/config-types'
+import { ValueSpecUnion } from 'start-sdk/types/config-types'
 
 @Component({
   selector: 'form-union',
diff --git a/frontend/projects/ui/src/app/services/api/api.fixures.ts b/frontend/projects/ui/src/app/services/api/api.fixures.ts
index 3e3651014..c2bdd5d39 100644
--- a/frontend/projects/ui/src/app/services/api/api.fixures.ts
+++ b/frontend/projects/ui/src/app/services/api/api.fixures.ts
@@ -843,6 +843,15 @@ export module Mock {
       warning: 'Chain will have to resync!',
       default: true,
     },
+    document: {
+      name: 'Needed File',
+      type: 'file',
+      description: 'A file we need',
+      placeholder: 'Testing placeholder',
+      warning: 'Testing warning',
+      nullable: false,
+      extensions: ['.png'],
+    },
     'object-list': {
       name: 'Object List',
       type: 'list',
diff --git a/frontend/projects/ui/src/app/services/form.service.ts b/frontend/projects/ui/src/app/services/form.service.ts
index bbb7a0f54..1cc1fc6cd 100644
--- a/frontend/projects/ui/src/app/services/form.service.ts
+++ b/frontend/projects/ui/src/app/services/form.service.ts
@@ -18,6 +18,7 @@ import {
   UniqueBy,
   ValueSpec,
   ValueSpecEnum,
+  ValueSpecFile,
   ValueSpecList,
   ValueSpecNumber,
   ValueSpecObject,
@@ -102,31 +103,33 @@ export class FormService {
     let value: any
     switch (spec.type) {
       case 'string':
-        validators = stringValidators(spec)
         if (currentValue !== undefined) {
           value = currentValue
         } else {
           value = spec.default ? getDefaultString(spec.default) : null
         }
-        return this.formBuilder.control(value, validators)
+        return this.formBuilder.control(value, stringValidators(spec))
       case 'number':
-        validators = numberValidators(spec)
         if (currentValue !== undefined) {
           value = currentValue
         } else {
           value = spec.default || null
         }
-        return this.formBuilder.control(value, validators)
+        return this.formBuilder.control(value, numberValidators(spec))
       case 'object':
         return this.getFormGroup(spec.spec, [], currentValue)
       case 'list':
-        validators = listValidators(spec)
         const mapped = (
           Array.isArray(currentValue) ? currentValue : (spec.default as any[])
         ).map(entry => {
           return this.getListItem(spec, entry)
         })
-        return this.formBuilder.array(mapped, validators)
+        return this.formBuilder.array(mapped, listValidators(spec))
+      case 'file':
+        return this.formBuilder.control(
+          currentValue || null,
+          fileValidators(spec),
+        )
       case 'union':
         const currentSelection = currentValue?.[spec.tag.id]
         const isValid = !!spec.variants[currentSelection]
@@ -204,6 +207,16 @@ function listValidators(spec: ValueSpecList): ValidatorFn[] {
   return validators
 }
 
+function fileValidators(spec: ValueSpecFile): ValidatorFn[] {
+  const validators: ValidatorFn[] = []
+
+  if (!spec.nullable) {
+    validators.push(Validators.required)
+  }
+
+  return validators
+}
+
 export function numberInRange(stringRange: string): ValidatorFn {
   return control => {
     const value = control.value