terrier-engine 4.0.21 → 4.3.0

package/parts/terrier-part.ts

@@ -0,0 +1,89 @@
+import {Part} from "tuff-core/parts"
+import {TerrierApp} from "../app"
+import Loading from "../loading"
+import Theme from "../theme"
+import Toasts, {ToastOptions} from "../toasts"
+
+/**
+ * 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
+    }
+
+
+    /**
+     * Shows the loading animation on top of the part.
+     */
+    startLoading() {
+        const elem = this.getLoadingContainer()
+        if (!elem) {
+            return
+        }
+        Loading.showOverlay(elem, this.theme)
+    }
+
+    /**
+     * Removes the loading animation from the part.
+     */
+    stopLoading() {
+        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()
+            }
+        }
+    }
+
+
+    /// 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)
+    }
+
+}

package/schema.ts

@@ -1,4 +1,5 @@
 import Api from "./api"
+import inflection from "inflection";
 
 ////////////////////////////////////////////////////////////////////////////////
 // Schema Definitions
@@ -60,8 +61,34 @@ async function get(): Promise<SchemaDef> {
     return res.schema
 }
 
+
+////////////////////////////////////////////////////////////////////////////////
+// Utilities
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Generated a string used to display a `BelongsToDef` to the user.
+ * If the name differs from the model, the name will be included in parentheses.
+ * @param belongsTo
+ */
+function belongsToDisplay(belongsTo: BelongsToDef): string {
+    if (belongsTo.name != inflection.singularize(inflection.tableize(belongsTo.model))) {
+        // the model is different than the name of the association
+        return `${belongsTo.model} (${belongsTo.name})`
+    }
+    else {
+        return belongsTo.model
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
 const Schema = {
-    get
+    get,
+    belongsToDisplay
 }
 
 export default Schema

package/tabs.ts

@@ -0,0 +1,164 @@
+import {Logger} from "tuff-core/logging"
+import {typedKey} from "tuff-core/messages"
+import {Part, PartParent, PartTag, StatelessPart} from "tuff-core/parts"
+import TerrierPart from "./parts/terrier-part"
+import {Action, IconName} from "./theme";
+
+const log = new Logger("Tabs")
+
+/**
+ * Parameters used for initial tab creation
+ */
+export type TabParams = {
+    key: string
+    title: string
+    icon?: IconName
+    state?: 'enabled' | 'disabled' | 'hidden'
+}
+
+/**
+ * Properties required to render a tab
+ */
+export type TabDefinition = TabParams & {
+    part: Part<unknown>
+}
+
+const Sides = ['top', 'left', 'bottom', 'right'] as const
+
+export type TabSide = typeof Sides[number]
+
+export type TabContainerState = {
+    side: TabSide
+    currentTab? : string
+}
+
+export class TabContainerPart extends TerrierPart<TabContainerState> {
+
+    private tabs = {} as Record<string, TabDefinition>
+    changeTabKey = typedKey<{ tabKey: string }>()
+    changeSideKey = typedKey<{ side: TabSide }>()
+
+    async init() {
+        this.onClick(this.changeTabKey, m => {
+            log.info(`Clicked on tab ${m.data.tabKey}`)
+            this.showTab(m.data.tabKey)
+        })
+
+        this.onChange(this.changeSideKey, m => {
+            log.info(`Change tab side: ${m.data.side}`)
+            this.state.side = m.data.side
+            this.dirty()
+        })
+    }
+
+    /**
+     * Adds or overwrites an existing tab.
+     * @param tab initial parameters for the tab
+     * @param constructor constructor for the part that will make up the contents of the tab
+     * @param state initial state for the content part
+     */
+    upsertTab<PartType extends Part<PartStateType>, PartStateType, InferredPartStateType extends PartStateType>(
+        tab: TabParams,
+        constructor: { new(p: PartParent, id: string, state: PartStateType): PartType; },
+        state: InferredPartStateType
+    ): PartType {
+        const existingTab = this.tabs[tab.key] ?? {}
+        this.tabs[tab.key] = Object.assign(existingTab, {state: 'enabled'}, tab)
+        const part = this.makePart(constructor, state)
+        existingTab.part = part
+        this.dirty()
+        return part
+    }
+
+    /**
+     * Updates an existing tab with the given params
+     * @param tab
+     */
+    updateTab(tab: TabParams): void {
+        const existingTab = this.tabs[tab.key]
+        if (!existingTab) throw `Tab with key '${tab.key}' does not exist!`
+        Object.assign(existingTab, tab)
+        this.dirty()
+    }
+
+    /**
+     * Changes this tab container to show the tab with the given key
+     * @param tabKey
+     */
+    showTab(tabKey: string) {
+        if (!(tabKey in this.tabs)) {
+            throw `Unknown tab key ${tabKey}`
+        }
+        if (this.tabs[tabKey].state != 'enabled') return // tab exists but is not enabled
+        if (this.state.currentTab === tabKey) return // tab is already selected
+
+        this.state.currentTab = tabKey
+        this.dirty()
+    }
+
+
+    _beforeAction?: Action
+
+    setBeforeAction(action: Action) {
+        this._beforeAction = action
+        this.dirty()
+    }
+
+    _afterAction?: Action
+
+    setAfterAction(action: Action) {
+        this._afterAction = action
+        this.dirty()
+    }
+
+
+
+    render(parent: PartTag) {
+        let currentTabKey = this.state.currentTab
+        if (!currentTabKey) {
+            log.debug("no current tab specified, selecting first enabled tab")
+            currentTabKey = Object.values(this.tabs).find(t => t.state == 'enabled')?.key
+        }
+        parent.div('tt-tab-container', this.state.side, container => {
+            container.div('.tt-flex.tt-tab-list', tabList => {
+                if (this._beforeAction) {
+                    this.theme.renderActions(tabList, [this._beforeAction], {defaultClass: 'action'})
+                }
+                for (const tab of Object.values(this.tabs)) {
+                    if (tab.state == 'hidden') continue
+
+                    tabList.a('.tab', a => {
+                        a.class(tab.state || 'enabled')
+                        if (tab.key === currentTabKey) {
+                            a.class('active')
+                        }
+                        if (tab.icon) {
+                            this.theme.renderIcon(a, tab.icon)
+                        }
+                        a.span({text: tab.title})
+                        a.emitClick(this.changeTabKey, {tabKey: tab.key})
+                    })
+                }
+                if (this._afterAction) {
+                    tabList.div('.spacer')
+                    this.theme.renderActions(tabList, [this._afterAction], {defaultClass: 'action'})
+                }
+            })
+
+            if (currentTabKey) {
+                const currentTabPart = this.tabs[currentTabKey].part
+                container.div('.tt-tab-content', panel => {
+                    panel.part(currentTabPart as StatelessPart)
+                })
+            }
+        })
+    }
+
+}
+
+const Tabs = {
+    TabContainerPart,
+    Sides
+}
+
+export default Tabs

package/theme.ts

@@ -1,5 +1,7 @@
 import {PartTag} from "tuff-core/parts"
 import {messages} from "tuff-core"
+import {GlypName} from "./glyps"
+import HubIcons, {HubIconName} from "./gen/hub-icons"
 
 export interface ThemeType {
     readonly icons: string
@@ -7,6 +9,15 @@ export interface ThemeType {
 }
 
 
+export type IconName = GlypName | HubIconName
+
+const ColorNames = [
+    'link', 'primary', 'secondary', 'active', 'pending', 'success', 'alert', 'white', 'inactive'
+] as const
+
+export type ColorName = typeof ColorNames[number]
+
+
 /**
  * A combination of a message key and its associated data.
  */
@@ -18,10 +29,10 @@ export type Packet = {
 /**
  * An action that generates a button or link.
  */
-export type Action<TT extends ThemeType> = {
+export type Action = {
     title?: string
     tooltip?: string
-    icon?: TT['icons']
+    icon?: IconName
     href?: string
     classes?: string[]
     click?: Packet
@@ -31,20 +42,38 @@ export type Action<TT extends ThemeType> = {
 /**
  * Options to pass to `render` that control how the actions are displayed.
  */
-export type RenderActionOptions<TT extends ThemeType> = {
-    iconColor?: TT['colors'] | null
-    badgeColor?: TT['colors']
+export type RenderActionOptions = {
+    iconColor?: ColorName | null
+    badgeColor?: ColorName
     defaultClass?: string
 }
 
-export default abstract class Theme<TT extends ThemeType> {
-    abstract renderIcon(parent: PartTag, icon: TT['icons'], color?: TT['colors'] | null): void
-
-    abstract renderCloseIcon(parent: PartTag, color?: TT['colors'] | null): void
+export default class Theme {
+    
+    renderIcon(parent: PartTag, icon: IconName, color?: ColorName | null): void {
+        if (HubIcons.Names.includes(icon as HubIconName)) {
+            HubIcons.renderIcon(parent, icon as HubIconName, color)
+        }
+        else { // a regular font icon
+            const classes: string[] = [icon]
+            if (color?.length) {
+                classes.push(color)
+            }
+            parent.i().class(...classes)
+        }
+    }
 
-    abstract colorValue(name: TT['colors']): string
+    renderCloseIcon(parent: PartTag, color?: ColorName | null): void {
+        const classes = ['glyp-close', 'close']
+        if (color?.length) {
+            classes.push(color)
+        }
+        parent.i(...classes)
+    }
 
-    abstract getLoaderSrc(): string
+    getLoaderSrc(): string {
+        return ""
+    }
 
     /**
      * Renders one ore more `Action`s into a parent tag.
@@ -52,7 +81,7 @@ export default abstract class Theme<TT extends ThemeType> {
      * @param actions the action or actions to render
      * @param options additional rendering options
      */
-    renderActions(parent: PartTag, actions: Action<TT> | Action<TT>[], options?: RenderActionOptions<TT>) {
+    renderActions(parent: PartTag, actions: Action | Action[], options?: RenderActionOptions) {
         if (!Array.isArray(actions)) {
             actions = [actions]
         }

package/toasts.ts

@@ -1,12 +1,12 @@
-import { Logger } from "tuff-core/logging"
-import { createElement } from "tuff-core/html"
-import Theme, {ThemeType} from "./theme"
+import {Logger} from "tuff-core/logging"
+import Html from "tuff-core/html"
+import Theme, {ColorName, IconName} from "./theme"
 
 const log = new Logger('Toasts')
 
-export type ToastOptions<TT extends ThemeType> = {
-    color: TT['colors']
-    icon?: TT['icons']
+export type ToastOptions = {
+    color: ColorName
+    icon?: IconName
 }
 
 /**
@@ -15,21 +15,21 @@ export type ToastOptions<TT extends ThemeType> = {
  * @param options
  * @param theme the theme used to render the toast
  */
-function show<TT extends ThemeType>(message: string, options: ToastOptions<TT>, theme: Theme<TT>) {
+function show(message: string, options: ToastOptions, theme: Theme) {
     log.info(`Show ${options.color  }: ${message}`)
 
     // ensure the container exists
     let container = document.getElementById('tt-toasts')
     if (!container) {
         log.debug(`Creating toasts container`)
-        container = createElement('div', (div) => {
-            div.sel('#tt-toasts.flex.column.padded')
+        container = Html.createElement('div', (div) => {
+            div.sel('#tt-toasts.tt-flex.column.padded')
         })
         document.body.appendChild(container)
     }
 
     // create the toast element
-    const toast = createElement('div', (parent) => {
+    const toast = Html.createElement('div', (parent) => {
         parent.class('tt-toast')
         parent.class(options.color)
         if (options?.icon) {

package/tooltips.ts

@@ -1,5 +1,5 @@
 import { Logger } from "tuff-core/logging"
-import { createElement } from "tuff-core/html"
+import Html from "tuff-core/html"
 import Overlays from "./overlays"
 
 const log = new Logger('Tooltips')
@@ -11,7 +11,7 @@ function ensureContainer(): HTMLElement {
     if (container) {
         return container
     }
-    container = createElement('div', div => {
+    container = Html.createElement('div', div => {
         div.sel('#tooltip')
     })
     document.body.appendChild(container)