terrier-engine 4.32.4 → 4.34.0

package/data-dive/plots/dive-plot-editor.ts

@@ -131,10 +131,9 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
         parent.div(".tt-flex.column.padded.large-gap", mainColumn => {
 
             mainColumn.div(".dd-plot-axes-and-preview.tt-flex.column.gap", axesAndPreview => {
-                this.fields.compoundField(axesAndPreview, field => {
-                    field.label(".required").text("Title")
-                    this.fields.textInput(field, 'title', {class: 'shrink plot-title'})
-                }).class('plot-title-field')
+                this.fields.compoundField(axesAndPreview, 'title', 'plot-title-field')
+                    .label("Title", '.required')
+                    .textInput({class: 'shrink plot-title'})
                 axesAndPreview.div('.tt-flex.gap', row => {
                     this.leftAxisFields.render(row)
                     row.part(this.renderPart)

package/data-dive/plots/dive-plot-traces.ts

@@ -55,18 +55,17 @@ class TraceStyleFields extends TerrierFormFields<TraceStyle> {
 
         render(parent: PartTag) {
             parent.div('.tt-form.tt-flex.gap.wrap', container => {
-                this.compoundField(container, field => {
-                    field.label().text("Color")
-                    this.textInput(field, 'stroke', {placeholder: 'Color'})
-                })
-                this.compoundField(container, field => {
-                    field.label().text("Width")
-                    this.numberInput(field, 'strokeWidth', {placeholder: 'Width'})
-                })
-                this.compoundField(container, field => {
-                    field.label().text("Dashes")
-                    this.textInput(field, 'strokeDasharray', {placeholder: 'Dashes'})
-                })
+                this.compoundField(container, 'stroke')
+                    .label("Color")
+                    .textInput({placeholder: 'Color'})
+
+                this.compoundField(container, 'strokeWidth')
+                    .label("Width")
+                    .numberInput({placeholder: 'Width'})
+
+                this.compoundField(container, 'strokeDasharray')
+                    .label("Dashes")
+                    .textInput({placeholder: 'Dashes'})
             })
         }
 
@@ -165,10 +164,10 @@ export class DivePlotTraceEditor extends ModalPart<DivePlotTraceState> {
     renderContent(parent: PartTag): void {
         parent.div(".tt-form.tt-flex.large-gap.column.padded", mainColumn => {
             // query
-            this.fields.compoundField(mainColumn, field => {
-                field.label().text("Query")
-                this.fields.select(field, 'query_id', this.queryOptions)
-            })
+            this.fields
+                .compoundField(mainColumn, 'query_id')
+                .label("Query")
+                .select(this.queryOptions)
 
             // axes
             mainColumn.div('.tt-flex.gap', row => {

package/package.json

@@ -4,7 +4,7 @@
   "files": [
     "*"
   ],
-  "version": "4.32.4",
+  "version": "4.34.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"

package/terrier/forms.ts

@@ -1,13 +1,26 @@
-import {Field, FormFields, FormPartData, InputType, KeyOfType, SelectOptions} from "tuff-core/forms"
+import {FieldConstructor, FormFields, FormPartData, InputType, KeyOfType, SelectOptions} from "tuff-core/forms"
 import {DbErrors} from "./db-client"
 import {PartTag} from "tuff-core/parts"
-import {DivTag, InputTag, InputTagAttrs, SelectTag, SelectTagAttrs, TextAreaTag, TextAreaTagAttrs} from "tuff-core/html"
+import {
+    DefaultTagAttrs,
+    DivTag,
+    InputTag,
+    InputTagAttrs,
+    SelectTag,
+    SelectTagAttrs,
+    TextAreaTag,
+    TextAreaTagAttrs
+} from "tuff-core/html"
 import TerrierPart from "./parts/terrier-part"
 import GlypPicker from "./parts/glyp-picker"
 import Glyps from "./glyps"
 import Messages from "tuff-core/messages"
 import {Logger} from "tuff-core/logging"
 import Strings from "tuff-core/strings"
+import Theme, {Action, ColorName, IconName} from "./theme"
+import Objects from "tuff-core/objects"
+import {InlineStyle} from "tuff-core/tags"
+import Hints, {Hint, HintRenderOptions} from "./hints"
 
 const log = new Logger("TerrierForms")
 
@@ -86,33 +99,27 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
         })
     }
 
-    protected input<Key extends KeyOfType<T, any> & string>(parent: PartTag, type: InputType, name: Key, serializerType: {
-        new(name: string): Field<any, Element>
-    }, attrs?: InputTagAttrs): InputTag {
+    protected addErrorClass(name: string, attrs: DefaultTagAttrs) {
         if (this.errors && this.errors[name]) {
             attrs ||= {}
             attrs.classes ||= []
             attrs.classes.push('error')
         }
+    }
+
+    input<Key extends KeyOfType<T,any> & string>(parent: PartTag, type: InputType, name: Key, serializerType: FieldConstructor<any, Element>, attrs: InputTagAttrs={}): InputTag {
+        this.addErrorClass(name, attrs)
         return super.input(parent, type, name, serializerType, attrs);
     }
 
-    select<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, options?: SelectOptions, attrs: SelectTagAttrs = {}): SelectTag {
-        if (this.errors && this.errors[name]) {
-            attrs ||= {}
-            attrs.classes ||= []
-            attrs.classes.push('error')
-        }
-        return super.select(parent, name, options, attrs);
+    select<Key extends keyof T & string, TSerializer extends FieldConstructor<T[Key], HTMLSelectElement>>(parent: PartTag, name: Key, options?: SelectOptions, attrs: SelectTagAttrs = {}, serializerType?: TSerializer): SelectTag {
+        this.addErrorClass(name, attrs)
+        return super.select(parent, name, options, attrs, serializerType);
     }
 
-    textArea<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, attrs: TextAreaTagAttrs={}): TextAreaTag {
-        if (this.errors && this.errors[name]) {
-            attrs ||= {}
-            attrs.classes ||= []
-            attrs.classes.push('error')
-        }
-        return super.textArea(parent, name, attrs);
+    textArea<Key extends keyof T & string, TSerializer extends FieldConstructor<T[Key], HTMLTextAreaElement>>(parent: PartTag, name: Key, attrs: SelectTagAttrs = {}, serializerType?: TSerializer): TextAreaTag {
+        this.addErrorClass(name, attrs)
+        return super.textArea(parent, name, attrs, serializerType);
     }
 
     /**
@@ -142,17 +149,12 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
         }).emitClick(this.pickGlypKey, {key})
     }
 
+    compoundField<Key extends keyof T & string>(parent: PartTag, key: Key, ...classes: string[]): CompoundFieldBuilder<T, Key> {
+        return new CompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
+    }
 
-    /**
-     * Creates a .tt-compound-field tag and passes the field to the nested function.
-     * I suppose it's just a slight convenience over having `parent.div(".tt-compound-field"...` everywhere.
-     * @param parent
-     * @param fun a function that accepts the field as an argument, to actually populate the field
-     */
-    compoundField(parent: PartTag, fun: (field: DivTag) => any) {
-        return parent.div(".tt-compound-field", field => {
-            fun(field)
-        })
+    fileCompoundField<Key extends KeyOfType<T, File> & string>(parent: PartTag, key: Key, ...classes: string[]): FileCompoundFieldBuilder<T, Key> {
+        return new FileCompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
     }
 
     /**
@@ -163,7 +165,7 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
      * @param title the title to put in the label span
      * @param attrs attributes for the radio input
      */
-    radioLabel<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, value: string, title?: string, attrs: InputTagAttrs = {}) {
+    radioLabel<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, value: T[Key], title?: string, attrs: InputTagAttrs = {}) {
         return parent.label('.body-size', label => {
             this.radio(label, name, value, attrs)
             label.span().text(title || value)
@@ -172,6 +174,147 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
 
 }
 
+class CompoundFieldBuilder<T extends Record<string, unknown>, K extends keyof T & string> {
+
+    field!: DivTag
+
+    constructor(readonly formFields: TerrierFormFields<T>, readonly parent: PartTag, readonly key: K, readonly theme: Theme, ...classes: string[]) {
+        this.field = parent.div('.tt-compound-field')
+        // add the error class if this key (or key_id) is in the errors object
+        if (formFields.errors && (formFields.errors[key] || formFields.errors[`${key}_id`] || formFields.errors[key.replace(/_id$/,'')])) {
+            this.field.class('error')
+        }
+        if (classes.length) {
+            this.field.class(...classes)
+        }
+    }
+
+    hiddenInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.hiddenInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    textInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.textInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    numberInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.numberInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    emailInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.emailInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    phoneInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.phoneInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    passwordInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.passwordInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    searchInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.searchInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    urlInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.urlInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    textArea(attrs?: TextAreaTagAttrs, serializerType?: FieldConstructor<T[K], HTMLTextAreaElement>): this {
+        this.formFields.textArea(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    dateInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.dateInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    timeInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.timeInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    dateTimeInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.dateTimeInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    monthInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.monthInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    weekInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.weekInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    radio(value: T[K], attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.radio(this.field, this.key, value, attrs ?? {}, serializerType)
+        return this
+    }
+    checkbox(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.checkbox(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+    select(selectOptions?: SelectOptions, attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLSelectElement>): this {
+        this.formFields.select(this.field, this.key, selectOptions, attrs ?? {}, serializerType)
+        return this
+    }
+    colorInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.colorInput(this.field, this.key, attrs ?? {}, serializerType)
+        return this
+    }
+
+    readonly(text?: string): this {
+        this.field.div('.readonly-field', {text: text ?? Objects.safeToString(this.formFields.data[this.key]) })
+        return this
+    }
+
+    label(text: string, ...classes: string[]): this {
+        this.field.label({ text, htmlFor: `${this.formFields.part.id}-${this.key}`, classes })
+        return this
+    }
+
+    tooltip(text: string): this {
+        this.field.dataAttr('tooltip', text)
+        return this
+    }
+
+    hint(hint: Hint, options?: HintRenderOptions): this {
+        Hints.renderHint(this.theme, this.field, hint, options)
+        return this
+    }
+
+    icon(icon: IconName, color: ColorName | null = 'secondary'): this {
+        this.field.label('.icon-only', label => {
+            this.theme.renderIcon(label, icon, color)
+        })
+        return this
+    }
+
+    css(styles: InlineStyle): this {
+        this.field.css(styles)
+        return this
+    }
+
+    action(action: Action, color: ColorName = 'link'): this {
+        action.classes ||= []
+        action.classes.push(color)
+        this.theme.renderActions(this.field, action, {iconColor: color})
+        return this
+    }
+
+    class(...s: string[]): this {
+        this.field.class(...s)
+        return this
+    }
+}
+
+class FileCompoundFieldBuilder<T extends Record<string, unknown>, K extends KeyOfType<T, File> & string> extends CompoundFieldBuilder<T, K> {
+    fileInput(attrs?: InputTagAttrs): this {
+        this.formFields.fileInput(this.field, this.key, attrs ?? {})
+        return this
+    }
+}
+
+
 
 
 ////////////////////////////////////////////////////////////////////////////////