terrier-engine 4.24.3 → 4.26.0

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

@@ -4,9 +4,19 @@ import TerrierPart from "../../terrier/parts/terrier-part"
 import {RegularSchedule, RegularScheduleForm} from "../../terrier/schedules"
 import {Logger} from "tuff-core/logging"
 import {EmailListForm} from "../../terrier/emails"
+import {DdDiveRun} from "../gen/models"
+import Db from "../dd-db"
+import dayjs from "dayjs"
+import Dates from "../queries/dates"
+import DiveRuns from "./dive-runs";
 
 const log = new Logger("Dive Delivery")
 
+
+////////////////////////////////////////////////////////////////////////////////
+// Delivery Form
+////////////////////////////////////////////////////////////////////////////////
+
 export type DiveDeliverySettings = {
     delivery_schedule: RegularSchedule
     delivery_recipients: string[]
@@ -16,11 +26,13 @@ export class DiveDeliveryForm extends TerrierPart<DiveEditorState> {
 
     scheduleForm!: RegularScheduleForm
     recipientsForm!: EmailListForm
+    deliveryList!: DiveDeliveryList
 
     async init() {
         const schedule = this.state.dive.delivery_schedule || {schedule_type: 'none'}
         this.scheduleForm = this.makePart(RegularScheduleForm, schedule)
         this.recipientsForm = this.makePart(EmailListForm, {emails: this.state.dive.delivery_recipients || []})
+        this.deliveryList = this.makePart(DiveDeliveryList, this.state)
 
         this.listen('datachanged', this.scheduleForm.dataChangedKey, m => {
             log.info(`Schedule form data changed`, m.data)
@@ -42,6 +54,11 @@ export class DiveDeliveryForm extends TerrierPart<DiveEditorState> {
         parent.part(this.scheduleForm)
         parent.h3(".glyp-users").text("Recipients")
         parent.part(this.recipientsForm)
+        parent.div('.deliveries', deliveriesContainer => {
+            // it looks better without the gap between the header and list
+            deliveriesContainer.h3(".glyp-inbox").text("Deliveries")
+            deliveriesContainer.part(this.deliveryList)
+        })
     }
 
     /**
@@ -55,3 +72,46 @@ export class DiveDeliveryForm extends TerrierPart<DiveEditorState> {
     }
 
 }
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Delivery List
+////////////////////////////////////////////////////////////////////////////////
+
+class DiveDeliveryList extends TerrierPart<DiveEditorState> {
+
+    runs: DdDiveRun[] = []
+
+    async init() {
+        this.runs = await Db().query("dd_dive_run")
+            .where({dd_dive_id: this.state.dive.id})
+            .where("delivery_recipients is not null")
+            .orderBy("created_at desc")
+            .limit(100)
+            .exec()
+
+        this.dirty()
+    }
+
+    get parentClasses(): Array<string> {
+        return ['dive-delivery-list']
+    }
+
+    render(parent: PartTag) {
+        for (const run of this.runs) {
+            parent.div(".run", view => {
+                view.div(".recipients.glyp-users.with-icon").text(run.delivery_recipients?.join("; ") || "No Recipients")
+                view.div('.datetime', dateTimeView => {
+                    const d = dayjs(run.created_at)
+                    dateTimeView.div(".date").text(d.format(Dates.displayFormat))
+                    dateTimeView.div(".time").text(d.format("H:mm A"))
+                })
+                run.dd_dive = this.state.dive // so that the filename is better
+                view.a(".download.glyp-download", {href: DiveRuns.outputUrl(run), target: '_blank'})
+                    .data({tooltip: "Download the dive results for this delivery"})
+            })
+        }
+    }
+
+}
+

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

@@ -15,12 +15,18 @@ import {TerrierFormFields} from "../../terrier/forms"
 import * as inflection from "inflection"
 import Dates, {DateLiteral, DatePeriodPickerPart, DatePeriodPickerState, LiteralDateRange} from "../queries/dates"
 import dayjs from "dayjs"
-import {ProgressBarPart} from "../../terrier/progress";
-import {LogListPart} from "../../terrier/logging";
+import {ProgressBarPart} from "../../terrier/progress"
+import {LogListPart} from "../../terrier/logging"
 import Messages from "tuff-core/messages"
+import Format from "../../terrier/format"
 
 const log = new Logger("DiveRuns")
 
+
+////////////////////////////////////////////////////////////////////////////////
+// Run Modal
+////////////////////////////////////////////////////////////////////////////////
+
 type RunQueryResult = {
     id: string
     time: string
@@ -309,4 +315,34 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
         })
     }
 
-}
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Utilities
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Generates a relative URL to download the output of the given run with an optional custom file name.
+ * @param run
+ * @param filename
+ */
+function outputUrl(run: DdDiveRun, filename?: string): string {
+    if (!filename?.length) {
+        const nameComps: string[] = []
+        const dive = run.dd_dive
+        if (dive) {
+            nameComps.push(inflection.underscore(dive.name))
+        }
+        const d = dayjs(run.created_at)
+        nameComps.push(d.format('YYYY-MM-DD_HHmmss'))
+        filename = nameComps.join('_') + '.xlsx'
+    }
+    return `/data_dive/download_run/${run.id}/${filename}?t=${dayjs().format(Format.timestamp)}`
+}
+
+const DiveRuns = {
+    outputUrl
+}
+export default DiveRuns
+

package/package.json

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

package/terrier/format.ts

@@ -12,13 +12,20 @@ function cents(c: number | string): string {
     return '$' + (num/100).toFixed(2)
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// Dates and Times
+////////////////////////////////////////////////////////////////////////////////
+
+const timestamp = 'YYYYMMDDHHMMSS'
+
 
 ////////////////////////////////////////////////////////////////////////////////
 // Export
 ////////////////////////////////////////////////////////////////////////////////
 
 const Format = {
-    cents
+    cents,
+    timestamp
 }
 
 export default Format

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)
+                }
             })
         }
     }