terrier-engine 4.67.4 → 4.67.5

package/tmp/dist/terrier/parts/panel-part.ts

@@ -0,0 +1,109 @@
+import { DivTag, DivTagAttrs } from "tuff-core/html"
+import { PartTag } from "tuff-core/parts"
+import { TagArgs } from "tuff-core/tags"
+import Fragments from "../fragments"
+import CollapsiblePlugin, { CollapsibleOptions, CollapsibleState } from "../plugins/collapsible-plugin"
+import ContentPart from "./content-part"
+
+export type CollapsibleConfig = {
+    collapsed?: boolean
+    chevronSide?: 'left' | 'right'
+}
+/**
+ * A part that renders content inside a panel.
+ */
+export default abstract class PanelPart<TState> extends ContentPart<TState & { collapsible?: CollapsibleConfig | CollapsibleOptions}> {
+    collapsiblePlugin?: CollapsiblePlugin
+
+    async init() {
+        const collapsibleConfig = this.state.collapsible
+        if (collapsibleConfig) {
+            this.collapsiblePlugin = this.makePlugin(CollapsiblePlugin, { collapsibleState: this.getCollapsibleState(collapsibleConfig) })
+        }
+    }
+
+    getCollapsibleState(collapsibleConfig: CollapsibleConfig | CollapsibleOptions): CollapsibleState {
+        if ('collapsibleState' in collapsibleConfig && collapsibleConfig.collapsibleState) {
+            return collapsibleConfig.collapsibleState
+        } else if ('collapsed' in collapsibleConfig) {
+            return collapsibleConfig.collapsed ? 'collapsed' : 'expanded'
+        } else {
+            return 'expanded'
+        }
+    }
+
+    assignState(state: TState & { collapsible?: CollapsibleConfig | CollapsibleOptions }): boolean {
+        if (state.collapsible) {
+            const collapsibleState = this.getCollapsibleState(state.collapsible)
+            if (this.collapsiblePlugin) {
+                this.collapsiblePlugin.assignState({...this.collapsiblePlugin.state, collapsibleState})
+            } else {
+                this.collapsiblePlugin = this.makePlugin(CollapsiblePlugin, {collapsibleState})
+            }
+        }
+        return super.assignState(state);
+    }
+
+    getLoadingContainer() {
+        return this.element?.getElementsByClassName('tt-panel')[0]
+    }
+
+    protected get panelClasses(): string[] {
+        return []
+    }
+
+    render(parent: PartTag) {
+        const collapsibleConfig = this.state.collapsible
+        parent.div('.tt-panel', panel => {
+            panel.class(...this.panelClasses)
+            if (this._title?.length || this.hasActions('tertiary')) {
+                panel.div('.panel-header', header => {
+                    if (collapsibleConfig && (!('chevronSide' in collapsibleConfig) || collapsibleConfig?.chevronSide == 'left')) {
+                        this.collapsiblePlugin!.renderCollapser(header, collapser => {
+                            this.renderChevronIcon(collapser, this.collapsiblePlugin!.state.collapsibleState!)
+                        })
+                    }
+
+                    header.h2(h2 => {
+                        if (this._icon) {
+                            this.app.theme.renderIcon(h2, this._icon, 'link')
+                        }
+                        h2.div('.title', {text: this._title || 'Call setTitle()'})
+                    })
+                    header.div('.tertiary-actions', actions => {
+                        this.theme.renderActions(actions, this.getActions('tertiary'))
+                    })
+
+                    if (collapsibleConfig && ('chevronSide' in collapsibleConfig) && collapsibleConfig?.chevronSide == 'right') {
+                        this.collapsiblePlugin!.renderCollapser(header, collapser => {
+                            this.renderChevronIcon(collapser, this.collapsiblePlugin!.state.collapsibleState!)
+                        })
+                    }
+                })
+            }
+
+            this.renderPanelContent(panel, wrapper => {
+                wrapper.class('panel-content', ...this.contentClasses)
+                wrapper.div('.content-container', container => {
+                    this.renderContent(container)
+                })
+            })
+
+            Fragments.panelActions(panel, this.getAllActions(), this.theme)
+        })
+    }
+
+    renderPanelContent(parent: PartTag, ...args: TagArgs<DivTag,DivTagAttrs>[]): DivTag {
+        if (this.collapsiblePlugin) {
+            return this.collapsiblePlugin.renderContainer(parent, collapsibleWrapper => {
+                collapsibleWrapper.div(...args)
+            })
+        } else {
+            return parent.div(...args)
+        }
+    }
+
+    renderChevronIcon(parent: PartTag, _collapsibleState: CollapsibleState) {
+        this.app.theme.renderIcon(parent, 'glyp-chevron_down', null)
+    }
+}

package/tmp/dist/terrier/parts/select-field-part.ts

@@ -0,0 +1,213 @@
+import {SelectOption, SelectOptions} from "tuff-core/forms"
+import Messages, { TypedKey } from "tuff-core/messages"
+import {PartTag} from "tuff-core/parts"
+import {Dropdown} from "../dropdowns"
+import Overlays, {AnchorResult} from "../overlays"
+import TerrierPart from "./terrier-part";
+
+/**
+ * Replacement part for a 'select' field that retrieves its options from a centralized data source
+ * rather than appending them to the DOM. When there are multiple select fields on the same page
+ * with the same set of options, this is more efficient than the standard 'select' field.
+ */
+
+export type SelectFieldState = {
+    /** the options to add */
+    options: SelectOptions
+    /** the currently selected option value */
+    selected_option: SelectOption
+}
+
+export class SelectFieldPart<T extends SelectFieldState> extends TerrierPart<T> {
+    _toggleDropdownKey = Messages.untypedKey()
+
+    selectedOptionKey = Messages.typedKey<{ selected_option: SelectOption }>()
+
+    async init() {
+        await super.init()
+        this.state.selected_option = this.populateOptionIfBlank(this.state.selected_option)
+        this.onClick(this._toggleDropdownKey, m => {
+            const target = m.event.currentTarget as HTMLElement
+            if (target.classList.contains('disabled')) return
+            this.toggleDropdown(SelectOptionsDropdown, {
+                options: this.state.options,
+                selected_option: this.state.selected_option,
+                select_key: this.selectedOptionKey
+            }, this.element)
+        })
+        this.listenMessage(this.selectedOptionKey, m => {
+            this.onOptionSelected(m.data.selected_option)
+        }, { attach: "passive" })
+    }
+
+    get parentClasses(): Array<string> {
+        return ['tt-select-field', ...super.parentClasses]
+    }
+
+    onOptionSelected(selectedOption: SelectOption) {
+        this.assignState({ ...this.state, selected_option: selectedOption })
+    }
+
+    assignState(state: T) {
+        if (state == this.state) {
+            return false
+        }
+        this.state = state
+        this.state.selected_option = this.populateOptionIfBlank(this.state.selected_option)
+        this.dirty()
+        return true
+    }
+
+    populateOptionIfBlank(option: SelectOption) {
+        if (option.title === undefined) {
+            // consider option groups and flatten the options
+            const options = this.state.options.flatMap((option) => {
+                if ('group' in option) {
+                    return option.options
+                } else return option
+            })
+
+            // find the option where title is empty and use that as the blank option value
+            return options.find((opt) => {
+                if ('value' in opt) {
+                    return opt.value == ''
+                } else return false
+            }) || option
+        } else {
+            return option
+        }
+    }
+
+    render(parent: PartTag) {
+        parent.div({ text: this.state.selected_option.title })
+        parent.emitClick(this._toggleDropdownKey)
+    }
+}
+
+/**
+ * Dropdown part to accompany the centralized data select field
+ */
+
+export type SelectFieldDropdownState = SelectFieldState & {
+    select_key: TypedKey<{ selected_option: SelectOption }>
+}
+export class SelectOptionsDropdown extends Dropdown<SelectFieldDropdownState> {
+    _clickedOptionKey = Messages.typedKey<{ selected_option: SelectOption }>()
+    _clearDropdownKey = Messages.untypedKey()
+
+    async init() {
+        await super.init()
+        this.onClick(this._clickedOptionKey, m => {
+            this.emitMessage(this.state.select_key, {selected_option: m.data.selected_option})
+            this.clear()
+        })
+
+        this.onClick(this._clearDropdownKey, _ => {
+            this.clear()
+        })
+    }
+
+    get autoClose(): boolean {
+        return true
+    }
+
+    get parentClasses(): Array<string> {
+        return ['tt-select-options-dropdown-container', ...super.parentClasses]
+    }
+
+    renderContent(parent: PartTag) {
+        parent.div('.tt-select-options-dropdown', dropdown => {
+            for (const opt of this.state.options) {
+                if ('group' in opt) {
+                    dropdown.div('.tt-select-options-group-header', {text: opt.group})
+                    for (const groupOpt of opt.options) {
+                        this.renderOption(dropdown, groupOpt)
+                    }
+                } else {
+                    this.renderOption(dropdown, opt)
+                }
+            }
+        })
+        parent.emitClick(this._clearDropdownKey)
+    }
+
+    renderOption(parent: PartTag, opt: SelectOption) {
+        parent.div({text: opt.title}, option => {
+            if (this.state.selected_option.value == opt.value) option.class('selected')
+        }).emitClick(this._clickedOptionKey, {selected_option: opt})
+    }
+
+    update(elem: HTMLElement) {
+        const dropdown = elem.querySelector('.tt-dropdown-content') as HTMLElement
+        if (dropdown) {
+            const selectedElement = dropdown.querySelector('.selected') as HTMLElement
+            if (this.anchorTarget && selectedElement) {
+                this.anchorSelectDropdown(dropdown, this.anchorTarget, selectedElement)
+            }
+        }
+    }
+
+    /**
+     * Anchors a select dropdown on top of a select field. Uses the currently selected child option to determine positioning.
+     * Assumes that all child elements have the same height.
+     * @param dropdown the element to reposition
+     * @param selectField the anchor select field
+     * @param selectedElement the selected option that will be positioned directly above the select field
+     */
+    anchorSelectDropdown(dropdownContainer: HTMLElement, selectField: HTMLElement, selectedElement: HTMLElement) {
+        const dropdown = dropdownContainer.querySelector('.tt-select-options-dropdown') as HTMLElement
+        const dropdownContainerSize = Overlays.getElementSize(dropdownContainer)
+        const selectOptionSize = Overlays.getElementSize(selectedElement)
+
+        const selectedOptionIndex = Array.prototype.indexOf.call(dropdown.childNodes, selectedElement)
+
+        const anchorRect = selectField.getBoundingClientRect()
+        const win = Overlays.getWindowSize()
+
+        const result: AnchorResult = {
+            top: 0,
+            left: anchorRect.x,
+            valid: true
+        }
+
+        Overlays.clampAnchorResult(result, dropdownContainerSize, win)
+
+        if (dropdownContainerSize.width < anchorRect.width) {
+            result.width = anchorRect.width
+        }
+
+        let scrollAmount = selectedElement.offsetTop - anchorRect.top
+        let scrollTop = anchorRect.y + (anchorRect.height / 2) - (selectOptionSize.height / 2)
+
+        if (dropdown.offsetHeight > win.height - anchorRect.top || anchorRect.top - dropdown.offsetHeight < 0) { // attempting to fill the whole window height with the dropdownContainer, so we need to adjust scroll of dropdownContainer
+            if (scrollAmount < 0) { // space above the dropdown
+                dropdown.style.marginTop = `${-scrollAmount}px`
+                scrollTop = 0
+            } else if (dropdown.offsetHeight - scrollAmount < win.height) { // space below the dropdown
+                dropdown.style.marginBottom = `${win.height - (dropdown.offsetHeight - scrollAmount) - 8}px`
+                scrollTop = scrollAmount
+            } else { // fills the whole screen
+                scrollTop = scrollAmount
+            }
+        } else { // dropdown is less tall than the window
+            result.top = anchorRect.y - (selectOptionSize.height * selectedOptionIndex) - 4
+            if (this.state.options.find((o) => 'group' in o)) {
+                result.top += selectOptionSize.height
+            }
+        }
+
+        let styleString = ""
+        for (const key of ['top', 'left', 'width', 'height'] as const) {
+            if (result[key] != null) {
+                styleString += `${key}: ${result[key]}px;`
+            }
+        }
+
+        dropdownContainer.setAttribute('style', styleString)
+        dropdownContainer.scrollTo({top: scrollTop})
+
+        dropdownContainer.classList.add('show')
+        selectedElement.classList.add('hover')
+        selectedElement.addEventListener('mouseleave', () => selectedElement.classList.remove('hover'))
+    }
+}

package/tmp/dist/terrier/parts/terrier-form-part.ts

@@ -0,0 +1,23 @@
+import {FormPart, FormPartData} from "tuff-core/forms"
+import Theme from "../theme"
+import {TerrierApp} from "../app"
+
+
+/**
+ * Form part that implements the Terrier platform methods like `app` and `theme`.
+ */
+export default abstract class TerrierFormPart<TState extends FormPartData> extends FormPart<TState> {
+
+    get app(): TerrierApp<any> {
+        return this.root as unknown as TerrierApp<any> // this should always be true
+    }
+
+    get theme(): Theme {
+        return this.app.theme
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['tt-form']
+    }
+}

package/tmp/dist/terrier/parts/terrier-part.ts

@@ -0,0 +1,206 @@
+import { Part, PartConstructor, PartTag } from "tuff-core/parts"
+import {TerrierApp} from "../app"
+import Loading from "../loading"
+import Theme, {IconName} from "../theme"
+import Toasts, {ToastOptions} from "../toasts"
+import {DbErrors} from "../db-client"
+import * as inflection from "inflection"
+import {Dropdown} from "../dropdowns";
+
+/**
+ * Base class for ALL parts in a Terrier application.
+ */
+export default abstract class TerrierPart<TState> extends Part<TState> {
+
+    get app(): TerrierApp<any> {
+        return this.root as TerrierApp<any>
+    }
+
+    get theme(): Theme {
+        return this.app.theme
+    }
+
+    /// Loading
+
+    /**
+     * This can be overloaded if the loading overlay should go
+     * somewhere other than the part's root element.
+     */
+    getLoadingContainer(): Element | null | undefined {
+        return this.element
+    }
+
+    protected _isLoading = false
+
+
+    /**
+     * Shows the loading animation on top of the part.
+     */
+    startLoading() {
+        this._isLoading = true
+        const elem = this.getLoadingContainer()
+        if (!elem) {
+            return
+        }
+        Loading.showOverlay(elem, this.theme)
+    }
+
+    /**
+     * Removes the loading animation from the part.
+     */
+    stopLoading() {
+        this._isLoading = false
+        const elem = this.getLoadingContainer()
+        if (!elem) {
+            return
+        }
+        Loading.removeOverlay(elem)
+    }
+
+    /**
+     * Shows the loading overlay until the given function completes (either returns successfully or throws an exception)
+     * @param func
+     */
+    showLoading(func: () => void): void
+    showLoading(func: () => Promise<void>): Promise<void>
+    showLoading(func: () => void | Promise<void>): void | Promise<void>  {
+        this.startLoading()
+        let stopImmediately = true
+        try {
+            const res = func()
+            if (res) {
+                stopImmediately = false
+                return res.finally(() => {
+                    this.stopLoading()
+                })
+            }
+        } finally {
+            if (stopImmediately) {
+                this.stopLoading()
+            }
+        }
+    }
+
+    update(elem: HTMLElement) {
+        super.update(elem);
+        if (!this._isLoading) return
+
+        const loadingContainer = this.getLoadingContainer()
+        if (!loadingContainer) return
+
+        const existingOverlay = Loading.getOverlay(elem)
+        const existingLoadingContainer = existingOverlay?.parentElement
+
+        if (
+            existingLoadingContainer &&
+            existingLoadingContainer != loadingContainer &&
+            existingLoadingContainer.contains(loadingContainer)
+        ) {
+            // If there's an existing overlay on this part, but on an ancestor of our loading container,
+            // remove the existing overlay so our loading container gets the overlay.
+            // This case happens most frequently when the loading container doesn't yet exist on first render, but
+            // does exist on subsequent renders. In that case, we prefer the more specific loading container.
+            Loading.removeOverlay(elem)
+        }
+
+        Loading.showOverlay(loadingContainer, this.theme)
+    }
+
+
+    /// Errors
+
+    renderErrorBubble(parent: PartTag, errors: DbErrors<any>) {
+        parent.div('.tt-bubble.alert', bubble => {
+            bubble.ul(ul => {
+                for (const kv of Object.entries(errors)) {
+                    const name = inflection.titleize(kv[0])
+                    ul.li().text(`${name} ${kv[1]}`)
+                }
+            })
+        })
+    }
+
+
+    /// Toasts
+
+    /**
+     * Shows a toast message in a bubble in the upper right corner.
+     * @param message the message text
+     * @param options
+     */
+    showToast(message: string, options: ToastOptions) {
+        Toasts.show(message, options, this.theme)
+    }
+
+    /**
+     * Show an alert toast with the given message.
+     * @param message
+     * @param icon
+     */
+    alertToast(message: string, icon?: IconName) {
+        this.showToast(message, {icon, color: 'alert'})
+    }
+
+    /**
+     * Show an info toast with the given message.
+     * @param message
+     * @param icon
+     */
+    infoToast(message: string, icon?: IconName) {
+        this.showToast(message, {icon, color: 'primary'})
+    }
+
+    /**
+     * Show a success toast with the given message.
+     * @param message
+     * @param icon
+     */
+    successToast(message: string, icon?: IconName) {
+        this.showToast(message, {icon, color: 'success'})
+    }
+
+
+    /// Dropdowns
+
+    /**
+     * Shows the given dropdown part on the page.
+     * It's generally better to call `toggleDropdown` instead so that the dropdown will be
+     * hidden upon a subsequent click on the target.
+     * @param constructor a constructor for a dropdown part
+     * @param state the dropdown's state
+     * @param target the target element around which to show the dropdown
+     */
+    makeDropdown<DropdownType extends Dropdown<DropdownStateType>, DropdownStateType extends {}>(
+        constructor: PartConstructor<DropdownType, DropdownStateType>,
+        state: NoInfer<DropdownStateType>,
+        target: EventTarget | null) {
+        const dropdown = this.app.addOverlay(constructor, state, 'dropdown')
+        dropdown.parentPart = this
+        if (target && target instanceof HTMLElement) {
+            dropdown.anchor(target)
+            this.app.lastDropdownTarget = target
+        }
+    }
+
+    clearDropdowns() {
+        this.app.clearDropdowns()
+    }
+
+    /**
+     * Calls `makeDropdown` only if there's not a dropdown currently originating from the target.
+     * @param constructor a constructor for a dropdown part
+     * @param state the dropdown's state
+     * @param target the target element around which to show the dropdown
+     */
+    toggleDropdown<DropdownType extends Dropdown<DropdownStateType>, DropdownStateType extends {}>(
+        constructor: PartConstructor<DropdownType, DropdownStateType>,
+        state: NoInfer<DropdownStateType>,
+        target: EventTarget | null) {
+        if (target && target instanceof HTMLElement && target == this.app.lastDropdownTarget) {
+            this.clearDropdowns()
+        } else {
+            this.makeDropdown(constructor, state, target)
+        }
+    }
+
+}

package/tmp/dist/terrier/plugins/collapsible-plugin.ts

@@ -0,0 +1,118 @@
+import { AnchorTag, AnchorTagAttrs, DivTag, DivTagAttrs } from "tuff-core/html"
+import Messages from "tuff-core/messages"
+import { PartTag } from "tuff-core/parts"
+import { PartPlugin } from "tuff-core/plugins"
+import Strings from "tuff-core/strings"
+import { InlineStyle, TagArgs } from "tuff-core/tags"
+
+export type CollapsibleState = 'expanded' | 'collapsed'
+export type CollapsibleOptions = {
+    collapsibleState?: CollapsibleState
+    collapserTransitionOptions?: TransitionOptions
+    containerTransitionOptions?: TransitionOptions
+}
+export type TransitionOptions = {
+    css?: InlineStyle
+    durationMs?: number
+}
+
+export default class CollapsiblePlugin extends PartPlugin<CollapsibleOptions> {
+    transitionKey = Messages.typedKey<{ forceState?: CollapsibleState }>()
+
+    async init() {
+        this.state.collapsibleState ??= 'expanded'
+        this.state.collapserTransitionOptions ??= {}
+        this.state.collapserTransitionOptions.css ??= { rotate: '-0.25turn' }
+
+        this.part.onClick(this.transitionKey, () => {
+            this.toggleState()
+        })
+    }
+
+    toggleState(forceState?: CollapsibleState) {
+        if (this.state.collapsibleState === forceState) return
+        if (forceState) {
+            this.state.collapsibleState = forceState
+        } else {
+            this.state.collapsibleState = this.state.collapsibleState == 'collapsed' ? 'expanded' : 'collapsed'
+        }
+        this.part.stale()
+    }
+
+    renderCollapser(parent: PartTag, ...args: TagArgs<AnchorTag,AnchorTagAttrs>[]): AnchorTag {
+        const collapser = parent.child(AnchorTag, 'a', '.tt-collapser', ...args)
+            .dataAttr('collapsibleState', this.state.collapsibleState)
+            .dataAttr('collapsiblePluginId', this.id)
+
+        if (this.state.collapsibleState == 'collapsed') {
+            collapser.css(this.state.collapserTransitionOptions!.css!)
+        }
+
+        collapser.css({ transitionProperty: Object.keys(this.state.collapserTransitionOptions!.css!).join(", ") })
+        if (this.state.collapserTransitionOptions?.durationMs) {
+            collapser.cssVar('--tt-animation-duration', `${this.state.collapserTransitionOptions.durationMs}ms`)
+        }
+
+        collapser.emitClick(this.transitionKey, {})
+        return collapser
+    }
+
+    renderContainer(parent: PartTag, ...args: TagArgs<DivTag,DivTagAttrs>[]): DivTag {
+        const container = parent.div('.tt-collapsible-container')
+            .dataAttr('collapsible-state', this.state.collapsibleState)
+            .dataAttr('collapsiblePluginId', this.id)
+
+        container.child(DivTag, 'div', '.tt-collapsible-content', ...args)
+
+        const transitionProperties = ['grid-template-rows']
+        if (this.state.containerTransitionOptions?.css) {
+            transitionProperties.push(...Object.keys(this.state.containerTransitionOptions.css).map(Strings.ropeCase))
+
+            if (this.state.collapsibleState == 'collapsed') {
+                container.css(this.state.containerTransitionOptions.css)
+            }
+        }
+        container.css({ transitionProperty: transitionProperties.join(", ") })
+        if (this.state.containerTransitionOptions?.durationMs) {
+            container.cssVar('--tt-animation-duration', `${this.state.containerTransitionOptions.durationMs}ms`)
+        }
+        return container
+    }
+
+    update(elem: HTMLElement) {
+        super.update(elem)
+
+        const containers = elem.querySelectorAll<HTMLElement>(`.tt-collapsible-container[data-collapsible-plugin-id=${this.id}]`)
+        const collapsers = elem.querySelectorAll<HTMLElement>(`.tt-collapser[data-collapsible-plugin-id=${this.id}]`)
+
+        containers.forEach(container => {
+            container.dataset.collapsibleState = this.state.collapsibleState
+            if (this.state.containerTransitionOptions?.css && this.state.collapsibleState == 'collapsed') {
+                setCssProperties(container, this.state.containerTransitionOptions.css)
+            } else if (this.state.containerTransitionOptions?.css) {
+                unsetCssProperties(container, Object.keys(this.state.containerTransitionOptions.css))
+            }
+        })
+
+        collapsers.forEach(collapser => {
+            collapser.dataset.collapsibleState = this.state.collapsibleState
+            if (this.state.collapsibleState == 'collapsed') {
+                setCssProperties(collapser, this.state.collapserTransitionOptions!.css!)
+            } else {
+                unsetCssProperties(collapser, Object.keys(this.state.collapserTransitionOptions!.css!))
+            }
+        })
+    }
+}
+
+function setCssProperties(elem: HTMLElement, properties: InlineStyle) {
+    for (const [prop, value] of Object.entries(properties)) {
+        elem.style.setProperty(Strings.ropeCase(prop), value as string)
+    }
+}
+
+function unsetCssProperties(elem: HTMLElement, properties: string[]) {
+    for (const prop of properties) {
+        elem.style.removeProperty(Strings.ropeCase(prop))
+    }
+}