terrier-engine 4.8.2 → 4.9.0

package/terrier/images/badges/badge-wildlife-sales.svg

@@ -1,20 +1,20 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
   <defs>
-    <filter id="a1" width="125%" height="126.9%" x="-12.5%" y="-9.6%" filterUnits="objectBoundingBox">
+    <filter id="awildlife1" width="125%" height="126.9%" x="-12.5%" y="-9.6%" filterUnits="objectBoundingBox">
       <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
       <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
       <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0"/>
     </filter>
-    <path id="b1" d="M20.069 2.97c1.45.179 2.655 1.04 3.414 2.388.354.629.605 1.37.724 2.172 1.222-.37 2.464-.253 3.548.372 1.265.73 2.038 1.995 2.21 3.532.142 1.276-.153 2.753-.93 4.098-.777 1.346-1.908 2.34-3.084 2.854a5.356 5.356 0 0 1-.88.299c.92 1.673 1.429 3.288 1.429 4.315 0 1.76-.784 3.21-1.96 4.255C23.268 28.386 21.53 29 20 29c-1.448 0-2.32-.368-3.126-.729l-.225-.106A1.464 1.464 0 0 0 16 28c-.262 0-.46.078-.649.165l-.225.106C14.32 28.632 13.448 29 12 29c-1.529 0-3.268-.614-4.54-1.745C6.284 26.211 5.5 24.76 5.5 23c0-1.027.508-2.642 1.428-4.317a5.171 5.171 0 0 1-.879-.297c-1.176-.514-2.307-1.508-3.084-2.854-.777-1.345-1.072-2.822-.93-4.098.172-1.537.945-2.801 2.21-3.532 1.084-.626 2.326-.742 3.55-.374.117-.8.368-1.541.722-2.17.759-1.347 1.964-2.21 3.414-2.388 1.45-.178 2.829.367 3.891 1.491.06.064.12.13.177.197.06-.067.119-.133.179-.197 1.062-1.124 2.44-1.669 3.89-1.49Z"/>
+    <path id="bwildlife1" d="M20.069 2.97c1.45.179 2.655 1.04 3.414 2.388.354.629.605 1.37.724 2.172 1.222-.37 2.464-.253 3.548.372 1.265.73 2.038 1.995 2.21 3.532.142 1.276-.153 2.753-.93 4.098-.777 1.346-1.908 2.34-3.084 2.854a5.356 5.356 0 0 1-.88.299c.92 1.673 1.429 3.288 1.429 4.315 0 1.76-.784 3.21-1.96 4.255C23.268 28.386 21.53 29 20 29c-1.448 0-2.32-.368-3.126-.729l-.225-.106A1.464 1.464 0 0 0 16 28c-.262 0-.46.078-.649.165l-.225.106C14.32 28.632 13.448 29 12 29c-1.529 0-3.268-.614-4.54-1.745C6.284 26.211 5.5 24.76 5.5 23c0-1.027.508-2.642 1.428-4.317a5.171 5.171 0 0 1-.879-.297c-1.176-.514-2.307-1.508-3.084-2.854-.777-1.345-1.072-2.822-.93-4.098.172-1.537.945-2.801 2.21-3.532 1.084-.626 2.326-.742 3.55-.374.117-.8.368-1.541.722-2.17.759-1.347 1.964-2.21 3.414-2.388 1.45-.178 2.829.367 3.891 1.491.06.064.12.13.177.197.06-.067.119-.133.179-.197 1.062-1.124 2.44-1.669 3.89-1.49Z"/>
   </defs>
   <g fill="none" fill-rule="evenodd">
-    <use xlink:href="#b1" fill="#000" filter="url(#a1)"/>
-    <use xlink:href="#b1" fill="#FFF"/>
+    <use xlink:href="#bwildlife1" fill="#000" filter="url(#awildlife1)"/>
+    <use xlink:href="#bwildlife1" fill="#FFF"/>
     <path fill="#76502D" fill-rule="nonzero" d="M16 14c4.5 0 8.5 6.5 8.5 9S22 27 20 27s-2.5-1-4-1-2 1-4 1-4.5-1.5-4.5-4 4-9 8.5-9Zm-6.239-2.391c1.069 1.85.927 4.046-.548 4.898-1.475.851-3.447-.124-4.516-1.975-1.068-1.85-.927-4.046.548-4.898 1.475-.851 3.448.124 4.516 1.975Zm16.994-1.975c1.475.852 1.616 3.048.548 4.898-1.069 1.85-3.041 2.826-4.516 1.975-1.475-.852-1.617-3.048-.548-4.898 1.068-1.851 3.04-2.826 4.516-1.975ZM15.56 8.537c.26 2.121-.728 4.087-2.419 4.295-1.69.207-3.125-1.461-3.385-3.582-.26-2.12.728-4.087 2.418-4.294 1.69-.208 3.125 1.46 3.386 3.581Zm4.264-3.581c1.69.207 2.678 2.173 2.418 4.294-.26 2.121-1.695 3.79-3.385 3.582-1.69-.208-2.679-2.174-2.419-4.295.26-2.12 1.696-3.789 3.386-3.581Z"/>
   </g>
   <defs>
-    <filter id="b2" width="103.1%" height="103.1%" x="-1.6%" y="-1.6%" filterUnits="objectBoundingBox">
+    <filter id="bsales2" width="103.1%" height="103.1%" x="-1.6%" y="-1.6%" filterUnits="objectBoundingBox">
       <feOffset dy=".5" in="SourceAlpha" result="shadowOffsetInner1"/>
       <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
       <feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
@@ -26,20 +26,20 @@
         <feMergeNode in="shadowMatrixInner2"/>
       </feMerge>
     </filter>
-    <filter id="d2" width="105.2%" height="105.2%" x="-2.6%" y="-2.6%" filterUnits="objectBoundingBox">
+    <filter id="dsales2" width="105.2%" height="105.2%" x="-2.6%" y="-2.6%" filterUnits="objectBoundingBox">
       <feOffset dy=".5" in="SourceAlpha" result="shadowOffsetInner1"/>
       <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
       <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
     </filter>
-    <circle id="a2" cx="24" cy="24" r="8"/>
-    <path id="c2" d="M28.42 19.33a.25.25 0 0 1 .25.25v5.146a.25.25 0 0 1-.426.177L26.73 23.39l-5.104 5.105a1.5 1.5 0 1 1-2.122-2.122l5.104-5.104-1.512-1.513a.25.25 0 0 1-.064-.112l-.009-.064a.25.25 0 0 1 .25-.25Z"/>
+    <circle id="asales2" cx="24" cy="24" r="8"/>
+    <path id="csales2" d="M28.42 19.33a.25.25 0 0 1 .25.25v5.146a.25.25 0 0 1-.426.177L26.73 23.39l-5.104 5.105a1.5 1.5 0 1 1-2.122-2.122l5.104-5.104-1.512-1.513a.25.25 0 0 1-.064-.112l-.009-.064a.25.25 0 0 1 .25-.25Z"/>
   </defs>
   <g fill="none" fill-rule="evenodd">
-    <use xlink:href="#a2" fill="#01B201"/>
-    <use xlink:href="#a2" fill="#000" filter="url(#b2)"/>
+    <use xlink:href="#asales2" fill="#01B201"/>
+    <use xlink:href="#asales2" fill="#000" filter="url(#bsales2)"/>
     <g fill-rule="nonzero">
-      <use xlink:href="#c2" fill="#FFF"/>
-      <use xlink:href="#c2" fill="#000" filter="url(#d2)"/>
+      <use xlink:href="#csales2" fill="#FFF"/>
+      <use xlink:href="#csales2" fill="#000" filter="url(#dsales2)"/>
     </g>
   </g>
 </svg>

package/terrier/list-viewer.ts

@@ -0,0 +1,146 @@
+import TerrierPart from "./parts/terrier-part"
+import {PartTag} from "tuff-core/parts"
+import Messages from "tuff-core/messages"
+import {Logger} from "tuff-core/logging"
+import Html from "tuff-core/html"
+
+const log = new Logger('List Viewer')
+
+const detailsSelector = '.tt-list-viewer-details'
+
+/**
+ * Part for viewing a list of items and the details associated with them.
+ * Each item must have an `id` so that they can be distinguished.
+ */
+export abstract class ListViewerPart<T extends {id: string}> extends TerrierPart<any> {
+
+    items: T[] = []
+    itemMap: Record<string, T> = {}
+
+    itemClickedKey = Messages.typedKey<{id: string}>()
+
+    /**
+     * A message with this key gets emitted whenever the details are shown.
+     */
+    detailsShownKey = Messages.typedKey<{ id: string }>()
+
+    async init() {
+        await super.init()
+
+        await this.reload()
+
+        this.onClick(this.itemClickedKey, m => {
+            log.info(`Clicked on list item ${m.data.id}`, m)
+            this.showDetails(m.data.id)
+        })
+    }
+
+
+    /// Fetching
+
+    abstract fetchItems(): Promise<T[]>
+
+    async reload() {
+        this.items = await this.fetchItems()
+        this.items.forEach((item) => {
+            this.itemMap[item.id] = item
+        })
+        this.dirty()
+    }
+
+
+    /// Rendering
+
+    get parentClasses(): Array<string> {
+        return ['tt-list-viewer']
+    }
+
+    render(parent: PartTag): any {
+        parent.div('.tt-list-viewer-list', list => {
+            for (const item of this.items) {
+                list.a('.tt-list-viewer-item', {id: `item-${item.id}`}, itemView => {
+                    this.renderListItem(itemView, item)
+                }).emitClick(this.itemClickedKey, {id: item.id})
+            }
+        })
+        parent.div('.tt-list-viewer-details-container', detailsView => {
+            detailsView.div(detailsSelector)
+        })
+    }
+    abstract renderListItem(parent: PartTag, item: T): any
+
+    abstract renderItemDetail(parent: PartTag, item: T): any
+
+
+    // Details
+
+    private setCurrent(id: string) {
+        // clear any existing current item
+        const existingCurrents = this.element!.querySelectorAll('.tt-list-viewer-list a.current')
+        existingCurrents.forEach((elem) => {
+            elem.classList.remove('current')
+        })
+
+        // add .current to the new item
+        const itemView = this.element!.querySelector(`#item-${id}`)
+        if (itemView) {
+            itemView.classList.add('current')
+        }
+    }
+
+    /**
+     * Show the details view for the item with the given id
+     * @param id
+     */
+    showDetails(id: string) {
+        this.setCurrent(id)
+        const item = this.itemMap[id]
+        if (!item) {
+            throw `No item ${id}`
+        }
+        const container = this.element!.querySelector(detailsSelector)
+        if (container) {
+            // render the details
+            const detailsView = Html.createElement('div', div => {
+                this.renderItemDetail(div, item)
+            })
+            container.innerHTML = detailsView.innerHTML
+            this.arrangeDetails(id, container as HTMLElement)
+
+            // let the world know
+            this.emitMessage(this.detailsShownKey, {id})
+        }
+        else {
+            log.warn(`Tried to show item ${id} but there was no ${detailsSelector}`)
+        }
+    }
+
+    /**
+     * If necessary, move the details next to the item
+     * @param id the item id
+     * @param detailsView
+     */
+    arrangeDetails(id: string, detailsView: HTMLElement) {
+        const itemView = this.element!.querySelector(`#item-${id}`)
+        if (itemView) {
+            // const listView = itemIVew.parentElement
+            log.info(`Item is ${itemView.clientWidth} wide and the window is ${window.innerWidth} wide`)
+            // crude but effective way to determine if the list is collapsed due to the media breakpoint
+            if (itemView.clientWidth > window.innerWidth * 0.8) {
+                // move the details to right after the list item
+                itemView.after(detailsView)
+            }
+            else {
+                // move the details back to the container
+                const detailsContainer = this.element!.querySelector(`.tt-list-viewer-details-container`)
+                if (detailsContainer) {
+                    detailsContainer.append(detailsView)
+                }
+            }
+        }
+        else {
+            log.warn(`No item view for ${id}`)
+        }
+    }
+
+}