terrier-engine 4.74.0 → 4.75.0

package/package.json

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

package/terrier/api-subscriber.ts

@@ -342,7 +342,7 @@ export class PollingSubscriber<TResult, TParams extends SubscriptionParams> exte
 
         this.logger?.debug("polling in", intervalMs, "milliseconds")
 
-        this.timeoutHandle = setTimeout(this.makeRequest.bind(this), intervalMs)
+        this.timeoutHandle = window.setTimeout(this.makeRequest.bind(this), intervalMs)
     }
 }
 

package/terrier/parts/multi-select-field-part.ts

@@ -0,0 +1,138 @@
+import Messages from "tuff-core/messages"
+import { PartTag } from "tuff-core/parts"
+import { SelectOption, SelectOptions } from "tuff-core/forms"
+import TerrierPart from "./terrier-part"
+
+export type MultiSelectFieldState = {
+    options: SelectOptions
+    selected_values: string[]
+    placeholder?: string
+    name?: string
+    disabled?: boolean
+}
+
+export class MultiSelectFieldPart extends TerrierPart<MultiSelectFieldState> {
+    selectionChangedKey = Messages.typedKey<{ selected_values: string[] }>()
+    protected addOptionKey = Messages.untypedKey()
+    protected removeValueKey = Messages.typedKey<{ value: string }>()
+
+    async init() {
+        await super.init()
+
+        this.onChange(this.addOptionKey, m => {
+            if (m.value?.length) this.addValue(m.value)
+        })
+
+        this.onClick(this.removeValueKey, m => {
+            this.removeValue(m.data.value)
+        })
+    }
+
+    get parentClasses(): Array<string> {
+        const classes = ['tt-multi-select-field', ...super.parentClasses]
+        if (this.state.disabled) classes.push('disabled')
+        return classes
+    }
+
+
+    /// Selection
+
+    get selectedValues(): string[] {
+        return this.state.selected_values
+    }
+
+    setSelectedValues(values: string[]) {
+        this.state.selected_values = [...values]
+        this.onSelectionChanged()
+    }
+
+    addValue(value: string) {
+        if (this.state.selected_values.includes(value)) return
+        this.state.selected_values = [...this.state.selected_values, value]
+        this.onSelectionChanged()
+    }
+
+    removeValue(value: string) {
+        if (!this.state.selected_values.includes(value)) return
+        this.state.selected_values = this.state.selected_values.filter(v => v != value)
+        this.onSelectionChanged()
+    }
+
+    protected onSelectionChanged() {
+        this.dirty()
+        this.emitMessage(this.selectionChangedKey, { selected_values: this.state.selected_values })
+    }
+
+
+    /// Options
+
+    protected get flatOptions(): SelectOption[] {
+        return this.state.options.flatMap(opt => 'group' in opt ? opt.options : [opt])
+    }
+
+    titleForValue(value: string): string {
+        return this.flatOptions.find(opt => `${opt.value}` == value)?.title ?? value
+    }
+
+    protected isSelectable(opt: SelectOption): boolean {
+        return opt.value != null && `${opt.value}`.length > 0
+    }
+
+    protected isSelected(value: string | null): boolean {
+        return value != null && this.state.selected_values.includes(`${value}`)
+    }
+
+
+    /// Rendering
+
+    render(parent: PartTag) {
+        parent.div('.tt-multi-select-field-container', container => {
+            this.renderAddSelect(container)
+            this.renderChips(container)
+            if (this.state.name) {
+                container.input('.tt-multi-select-values', {
+                    type: 'hidden',
+                    name: this.state.name,
+                    value: this.state.selected_values.join(',')
+                })
+            }
+        })
+    }
+    protected renderAddSelect(parent: PartTag) {
+        const blankText = this.state.selected_values.length ? '' : (this.state.placeholder ?? 'Select…')
+        parent.select('.tt-multi-select-add', this.state.disabled ? { disabled: true } : {}, select => {
+            select.option({ value: '', text: blankText })
+            for (const opt of this.state.options) {
+                if ('group' in opt) {
+                    const available = opt.options.filter(o => this.isSelectable(o) && !this.isSelected(o.value))
+                    if (!available.length) continue
+                    select.optgroup({ label: opt.group }, group => {
+                        for (const o of available) this.renderAddOption(group, o)
+                    })
+                } else if (this.isSelectable(opt) && !this.isSelected(opt.value)) {
+                    this.renderAddOption(select, opt)
+                }
+            }
+        }).emitChange(this.addOptionKey)
+    }
+
+    protected renderAddOption(parent: PartTag, opt: SelectOption) {
+        parent.option({ value: `${opt.value}`, text: opt.title })
+    }
+    protected renderChips(parent: PartTag) {
+        parent.div('.tt-multi-select-chips', container => {
+            for (const value of this.state.selected_values) {
+                container.div('.tt-multi-select-chip', chip => {
+                    chip.div('.tt-multi-select-chip-label', { text: this.titleForValue(value) })
+                    if (!this.state.disabled) {
+                        chip.a('.tt-multi-select-chip-remove')
+                            .emitClick(this.removeValueKey, { value })
+                    }
+                })
+            }
+        })
+    }
+
+}
+
+export default MultiSelectFieldPart