files for config

2026-03-26 10:21:52 +00:00 · 2023-03-21 12:00:15 -06:00
parent e76ccba2f7
commit dacd5d3e6b
8 changed files with 103 additions and 42 deletions
--- 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",
--- 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",
--- 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',
--- 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>
--- 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 || '',
--- 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',
--- 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',
--- 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