terrier-engine 4.24.2 → 4.25.0

package/data-dive/dives/dive-list.ts

@@ -186,7 +186,6 @@ export class DiveListPart extends TerrierPart<DiveListState> {
     }
 
     renderDiveSchedule(row: PartTag, dive: DdDive) {
-        log.info(`Rendering dive schedule: ${dive.delivery_schedule?.schedule_type}`, dive.delivery_schedule)
         if (!dive.delivery_schedule || dive.delivery_schedule.schedule_type == 'none') {
             return
         }
@@ -194,7 +193,7 @@ export class DiveListPart extends TerrierPart<DiveListState> {
         if (dive.delivery_recipients?.length) {
             description += ` to:<br>${dive.delivery_recipients.join('<br>')}`
         }
-        row.div(".glyp-setup.with-icon").text(inflection.titleize(dive.delivery_schedule.schedule_type))
+        row.div(".glyp-setup.with-icon.tt-flex.align-center").text(inflection.titleize(dive.delivery_schedule.schedule_type))
             .data({tooltip: description})
     }
 

package/package.json

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

package/terrier/hints.ts

@@ -0,0 +1,182 @@
+import Html, {DivTag, HtmlParentTag} from "tuff-core/html"
+import Messages from "tuff-core/messages"
+import {PartPlugin} from "tuff-core/plugins"
+import Theme, {IconName} from "./theme"
+import PagePart from "./parts/page-part"
+import TerrierPart from "./parts/terrier-part"
+
+export type Hint = {
+    title?: string
+    icon?: IconName
+    tooltip?: string
+}
+
+export type HintRenderOptions = {
+    classes?: string[]
+    side?: 'inline' | 'top' | 'right' | 'bottom' | 'left' | 'inline-top' | 'inline-right' | 'inline-bottom' | 'inline-left'
+    hideIcon?: boolean
+}
+
+/**
+ * Render a hint into the given tag
+ * @param theme the theme to render the hint icon with
+ * @param parent the parent tag to render the hint into
+ * @param hint the hint to render
+ * @param options options to modify how the hint is rendered
+ */
+function renderHint(theme: Theme, parent: HtmlParentTag, hint: Hint, options?: HintRenderOptions): DivTag {
+    const hintTag = parent.div('.tt-hint')
+
+    if (hint.tooltip) hintTag.dataAttr('tooltip', hint.tooltip)
+    if (options?.classes) hintTag.class(...options.classes)
+    if (options?.side && options.side != 'inline') hintTag.dataAttr('tt-hint-side', options.side)
+
+    const hideIcon = options?.hideIcon ?? false
+    if (!hideIcon) {
+        const icon = hint.icon ?? 'glyp-hint'
+        theme.renderIcon(hintTag, icon)
+    }
+
+    if (hint.title) hintTag.span('.tt-hint-title').text(hint.title)
+
+    return hintTag
+}
+
+/**
+ * Add a hint element to the given parent element
+ * @param theme the theme to render the hint icon with
+ * @param parentElement the element to add the hint element to
+ * @param hint the hint to add
+ * @param options options to modify how the hint is rendered
+ * @param insertPosition specify where to insert the hint relative to the parent element
+ */
+function injectHint(theme: Theme, parentElement: Element, hint: Hint, options?: HintRenderOptions, insertPosition: InsertPosition = 'beforeend'): HTMLDivElement {
+    const elem = Html.createElement('div', div => renderHint(theme, div, hint, options)).firstElementChild as HTMLDivElement
+    parentElement.insertAdjacentElement(insertPosition, elem)
+    return elem
+}
+
+export type DynamicHint = {
+    selector: string
+    hint: Hint
+    options?: HintRenderOptions
+    insertPosition?: InsertPosition
+    onlyFirstMatch?: boolean // only add a hint to the first element that matches the selector
+}
+
+/**
+ * Adds dynamic hints to a given part. Dynamic hints will detect changes to the DOM to update where they are rendered
+ * @param part the part to add dynamic hints to. Dynamic hints will only be added to matching elements under the part's root element
+ * @param hints the hints to add.
+ */
+function addDynamicHints(part: TerrierPart<any>, hints: DynamicHint[]) {
+    part.makePlugin(DynamicHintsPlugin, hints)
+}
+
+class DynamicHintsPlugin extends PartPlugin<DynamicHint[]> {
+    observer: MutationObserver = new MutationObserver(this.handleMutations.bind(this))
+
+    async init() {
+        if (!('theme' in this.part)) throw new Error("DynamicHintsPlugin requires a TerrierPart")
+    }
+
+    update(elem: HTMLElement) {
+        super.update(elem)
+
+        this.addDynamicHints(elem)
+        this.observer.disconnect()
+        this.observer.observe(elem, { childList: true, subtree: true })
+    }
+
+    private handleMutations(mutations: MutationRecord[], _observer: MutationObserver): void {
+        // Ignore mutations that added hint elements (prevents infinite recursion)
+        const addedHints = mutations.some(m =>
+            Array.from(m.addedNodes).some(n => n instanceof HTMLElement && n.dataset.hintSource === 'DynamicHintsPlugin')
+        )
+        if (addedHints) return
+        if (!this.part.element) return
+        this.addDynamicHints(this.part.element)
+    }
+
+    private addDynamicHints(elem: HTMLElement) {
+        const theme = (this.part as TerrierPart<any>).theme
+
+        elem.querySelectorAll('.tt-hint[data-hint-source=DynamicHintsPlugin]').forEach(e => e.remove())
+
+        for (const dynamicHint of this.state) {
+            const matches = elem.querySelectorAll(dynamicHint.selector)
+            if (!matches.length) continue
+            if (dynamicHint.onlyFirstMatch) {
+                this.addDynamicHint(theme, matches[0], dynamicHint)
+            } else {
+                matches.forEach(match => this.addDynamicHint(theme, match, dynamicHint))
+            }
+        }
+    }
+
+    private addDynamicHint(theme: Theme, elem: Element, hint: DynamicHint) {
+        const hintElement = injectHint(theme, elem, hint.hint, hint.options, hint.insertPosition ?? 'beforeend')
+        hintElement.dataset.hintSource = 'DynamicHintsPlugin'
+    }
+}
+
+/**
+ * Adds a hints toggle checkbox to a page's toolbar and handles persisting the state of the checkbox between visits.
+ * @param part the page to add a checkbox to
+ * @param hintKey a key for this page so that the checkbox state can be persisted
+ */
+function addHintToggle(part: PagePart<any>, hintKey: string) {
+    part.makePlugin(HintTogglePlugin, { hintKey })
+}
+
+class HintTogglePlugin extends PartPlugin<{ hintKey: string }> {
+
+    checkboxChangedKey = Messages.untypedKey()
+    storageKey = `show-hints-${this.state.hintKey}`
+
+    get storedValue() {
+        const stored = localStorage.getItem(this.storageKey)
+        return stored == null ? true : stored == 'true'
+    }
+
+    set storedValue(value: boolean) {
+        localStorage.setItem(this.storageKey, value.toString())
+    }
+
+    async init() {
+        document.body.classList.toggle('tt-hints-hidden', !this.storedValue)
+
+        const part = this.part as PagePart<any>
+        part.addToolbarInput('show-hints', 'checkbox', {
+            title: "Hints",
+            icon: 'glyp-hint',
+            onChangeKey: this.checkboxChangedKey,
+            onInputKey: this.checkboxChangedKey,
+        })
+
+        part.onInput(this.checkboxChangedKey, m => {
+            const checked = (m.event.target as HTMLInputElement).checked
+            this.storedValue = checked
+            document.body.classList.toggle('tt-hints-hidden', !checked)
+        })
+    }
+
+    update(elem: HTMLElement) {
+        super.update(elem)
+
+        const checkbox = elem.querySelector(`[data-toolbar-field-name=show-hints]`)
+
+        if (checkbox instanceof HTMLInputElement) {
+            checkbox.checked = this.storedValue
+        }
+    }
+}
+
+const Hints = {
+    renderHint,
+    injectHint,
+    addDynamicHints,
+    addHintToggle,
+}
+
+export default Hints

package/terrier/parts/page-part.ts

@@ -4,6 +4,7 @@ import {PartTag} from "tuff-core/parts"
 import {optionsForSelect, SelectOptions} from "tuff-core/forms"
 import {UntypedKey} from "tuff-core/messages"
 import {Logger} from "tuff-core/logging"
+import {InputTagAttrs, SelectTagAttrs} from "tuff-core/html"
 
 const log = new Logger("Terrier PagePart")
 
@@ -35,10 +36,10 @@ type ToolbarFieldDefOptions = {
     icon?: IconName
 }
 
-type ToolbarSelectDef = { type: 'select', options: SelectOptions } & BaseFieldDef
+type ToolbarSelectDef = { type: 'select', options: SelectOptions, attrs?: SelectTagAttrs } & BaseFieldDef
 
 type ValuedInputType = 'text' | 'color' | 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week' | 'checkbox'
-type ToolbarValuedInputDef = { type: ValuedInputType } & BaseFieldDef
+type ToolbarValuedInputDef = { type: ValuedInputType, attrs?: InputTagAttrs } & BaseFieldDef
 
 /**
  * Defines a field to be rendered in the page's toolbar
@@ -90,7 +91,7 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
      * @param selectOptions an array of select options
      * @param opts
      */
-    addToolbarSelect(name: string, selectOptions: SelectOptions, opts?: ToolbarFieldDefOptions) {
+    addToolbarSelect(name: string, selectOptions: SelectOptions, opts?: ToolbarFieldDefOptions & { attrs?: SelectTagAttrs }) {
         this.addToolbarFieldDef({ type: 'select', name, options: selectOptions, ...opts })
     }
 
@@ -100,7 +101,7 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
      * @param type the type attribute of the input field
      * @param opts
      */
-    addToolbarInput(name: string, type: ValuedInputType, opts?: ToolbarFieldDefOptions) {
+    addToolbarInput(name: string, type: ValuedInputType, opts?: ToolbarFieldDefOptions & { attrs?: InputTagAttrs }) {
         this.addToolbarFieldDef({ type, name, ...opts })
     }
 
@@ -203,6 +204,10 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
                         })
                         if (def.onChangeKey) select.emitChange(def.onChangeKey)
                         if (def.onInputKey) select.emitInput(def.onInputKey)
+
+                        if (def.attrs) select.attrs(def.attrs)
+
+                        select.dataAttr('toolbar-field-name', name)
                     } else {
                         const input = label.input({name: def.name, type: def.type, value: def.defaultValue})
                         if (def.type == 'checkbox' && def.defaultValue?.length) {
@@ -210,8 +215,11 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
                         }
                         if (def.onChangeKey) input.emitChange(def.onChangeKey)
                         if (def.onInputKey) input.emitInput(def.onInputKey)
-                    }
 
+                        if (def.attrs) input.attrs(def.attrs)
+
+                        input.dataAttr('toolbar-field-name', name)
+                    }
 
                     if (def.tooltip?.length) label.dataAttr('tooltip', def.tooltip)
                 })

package/terrier/theme.ts

@@ -2,6 +2,7 @@ import {PartTag} from "tuff-core/parts"
 import {GlypName} from "./glyps"
 import HubIcons, {HubIconName} from "./gen/hub-icons"
 import {Key} from "tuff-core/messages"
+import Hints, {Hint, HintRenderOptions} from "./hints";
 
 export interface ThemeType {
     readonly icons: string
@@ -38,6 +39,10 @@ export type Action = {
     classes?: string[]
     click?: Packet
     badge?: string
+    hint?: {
+        hint: Hint
+        options?: HintRenderOptions
+    }
 }
 
 /**
@@ -115,6 +120,10 @@ export default class Theme {
                     const badgeColor = options?.badgeColor || 'alert'
                     a.div(`.badge.${badgeColor}`, {text: action.badge})
                 }
+
+                if (action.hint) {
+                    Hints.renderHint(this, a, action.hint.hint, action.hint.options)
+                }
             })
         }
     }