terrier-engine 4.11.0 → 4.13.0

package/data-dive/queries/queries.ts

@@ -20,12 +20,18 @@ const log = new Logger("Queries")
 // Query
 ////////////////////////////////////////////////////////////////////////////////
 
+export type OrderBy = {
+    column: string
+    dir: string
+}
+
 export type Query = {
     id: string
     name: string
     notes: string
     from: TableRef
     columns?: string[]
+    order_by?: OrderBy[]
 }
 
 

package/data-dive/queries/query-editor.ts

@@ -11,6 +11,7 @@ import {TabContainerPart} from "../../terrier/tabs"
 import Messages from "tuff-core/messages"
 import Validation, {QueryClientValidation} from "./validation"
 import ColumnOrderModal from "./column-order-modal"
+import RowOrderModal from "./row-order-modal"
 
 const log = new Logger("QueryEditor")
 
@@ -78,8 +79,18 @@ class SortingPart extends ContentPart<SubEditorState> {
         })
 
         this.onClick(this.sortRowsKey, _ => {
-            this.showToast("I said it was coming soon!", {color: 'alert', icon: 'glyp-developer'})
+            log.info("Sorting rows")
+            this.app.showModal(RowOrderModal, {
+                query: this.state.query,
+                onSorted: (newOrderBys) =>  {
+                    log.info(`New row sort order`, newOrderBys)
+                    this.state.query.order_by = newOrderBys
+                    this.state.editor.dirty()
+                    this.emitMessage(DiveEditor.diveChangedKey, {})
+                }
+            })
         })
+
     }
 
     renderContent(parent: PartTag): void {
@@ -104,8 +115,19 @@ class SortingPart extends ContentPart<SubEditorState> {
             })
             row.div(".tt-flex.gap.column.full-height", col => {
                 col.h3(".glyp-rows").text("Rows")
-                col.div(".dive-query-columns.stretch", orderList => {
-                    orderList.div(".text-center").text("Coming Soon")
+                col.div(".dive-query-order-bys.stretch", orderList => {
+                    if (query.order_by?.length) {
+                        for (const orderBy of query.order_by) {
+                            orderList.div('.order-by', line => {
+                                line.div(".column").text(orderBy.column)
+                                const dir = orderBy.dir == 'asc' ? 'ascending' : 'descending'
+                                line.div(`.dir.glyp-${dir}`).text(dir)
+                            })
+                        }
+                    }
+                    else {
+                        orderList.div(".text-center").text("Unspecified")
+                    }
                 })
                 col.a(".tt-button.shrink", button => {
                     button.i(".glyp-edit")

package/data-dive/queries/row-order-modal.ts

@@ -0,0 +1,151 @@
+import {ModalPart} from "../../terrier/modals"
+import Queries, {OrderBy, Query} from "./queries"
+import Messages from "tuff-core/messages"
+import {PartTag} from "tuff-core/parts"
+import {optionsForSelect, SelectOption} from "tuff-core/forms"
+import {Logger} from "tuff-core/logging"
+import Forms from "../../terrier/forms"
+import SortablePlugin from "tuff-sortable/sortable-plugin";
+
+const log = new Logger("RowOrderModal")
+
+export type RowOrderState = {
+    query: Query
+    onSorted: (orderBys: OrderBy[]) => any
+}
+
+export default class RowOrderModal extends ModalPart<RowOrderState> {
+
+    submitKey = Messages.untypedKey()
+    newClauseKey = Messages.untypedKey()
+    changedKey = Messages.untypedKey()
+    orderBys: OrderBy[] = []
+    columnOptions: SelectOption[] = []
+    removeClauseKey = Messages.typedKey<{index: number}>()
+
+    async init() {
+        this.setTitle("Row Order")
+        this.setIcon("glyp-sort")
+
+        this.addAction({
+            title: "Apply",
+            icon: "glyp-checkmark",
+            click: {key: this.submitKey}
+        })
+
+        this.onClick(this.submitKey, _ => {
+            this.state.onSorted(this.orderBys)
+            this.pop()
+        })
+
+        this.addAction({
+            title: "New Clause",
+            icon: "glyp-plus",
+            click: {key: this.newClauseKey}
+        }, 'secondary')
+
+        this.onClick(this.newClauseKey, _ => {
+            this.addClause()
+        })
+
+        this.onClick(this.removeClauseKey, m => {
+            this.removeClause(m.data.index)
+        })
+
+        // collect the column options
+        const query = this.state.query
+        Queries.eachColumn(query, (_, col) => {
+            this.columnOptions.push({title: col.name, value: col.name})
+        })
+
+        // initialize the order=bys from the query, if present
+        if (query.order_by?.length) {
+            this.orderBys = query.order_by
+        }
+        else {
+            // start with something by default
+            this.addClause()
+        }
+
+        // serialize on input change
+        this.onChange(this.changedKey, _ => {
+            this.serialize()
+        })
+
+        // make the list sortable
+        this.makePlugin(SortablePlugin, {
+            zoneClass: 'dive-row-sort-zone',
+            targetClass: 'order-by',
+            onSorted: (_plugin, _evt) => {
+                this.serialize()
+            }
+        })
+    }
+
+    addClause() {
+        this.orderBys.push({column: this.columnOptions[0]?.value || '', dir: 'asc'})
+        log.info(`Added a line, orderBys is now ${this.orderBys.length} long`, this.orderBys)
+        this.dirty()
+    }
+
+    removeClause(index: number) {
+        log.info(`Removing clause ${index}`)
+        this.orderBys.splice(index, 1)
+        log.info(`Removed line ${index}, orderBys is now ${this.orderBys.length} long`, this.orderBys)
+        this.dirty()
+    }
+
+    serialize() {
+        log.info("Serializing...")
+        if (this.element) {
+            this.orderBys = []
+            this.element.querySelectorAll<HTMLElement>(".order-by").forEach(line => {
+                const column = line.querySelector<HTMLSelectElement>("select.column")?.value!!
+                const dir = Forms.getRadioValue(line, "input.dir") || "asc"
+                this.orderBys.push({column, dir})
+            })
+            log.info("Serialized", this.orderBys)
+        }
+    }
+
+    renderContent(parent: PartTag): void {
+        parent.div('.tt-flex.column.padded.gap.tt-form', container => {
+            container.p().text("Drag and drop the clauses to change their order:")
+            container.div(".dive-row-sort-zone", zone => {
+                let index = 0 // for making unique radio names
+                for (const orderBy of this.orderBys) {
+                    zone.div(".order-by", {data: {index: index.toString()}}, line => {
+                        line.a(".drag.glyp-navicon")
+                            .data({tooltip: "Re-order this clause"})
+                        line.select('.column', colSelect => {
+                            optionsForSelect(colSelect, this.columnOptions, orderBy.column)
+                        }).emitChange(this.changedKey)
+                        line.label('.caption-size', label => {
+                            label.input('.dir.dir-asc', {
+                                type: "radio",
+                                name: `sort-dir-${index}`,
+                                value: "asc",
+                                checked: orderBy.dir == 'asc'
+                            }).emitChange(this.changedKey)
+                            label.span().text("ascending")
+                        })
+                        line.label('.caption-size', label => {
+                            label.input('.dir.dir-desc', {
+                                type: "radio",
+                                name: `sort-dir-${index}`,
+                                value: "desc",
+                                checked: orderBy.dir == 'desc'
+                            }).emitChange(this.changedKey)
+                            label.span().text("descending")
+                        })
+                        line.a(".remove.glyp-close")
+                            .data({tooltip: "Remove this clause"})
+                            .emitClick(this.removeClauseKey, {index})
+                    })
+                    index += 1
+                }
+            })
+        })
+    }
+
+}

package/package.json

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

package/terrier/forms.ts

@@ -11,6 +11,26 @@ import Strings from "tuff-core/strings"
 
 const log = new Logger("TerrierForms")
 
+////////////////////////////////////////////////////////////////////////////////
+// Utilities
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Get the value of the checked radio with the given selector.
+ * @param container contains the radios
+ * @param selector the CSS selector used to select the radios from the container
+ */
+function getRadioValue(container: HTMLElement, selector: string): string | undefined {
+    let value: string | undefined = undefined
+    container.querySelectorAll<HTMLInputElement>(selector).forEach(radio => {
+        if (radio.checked) {
+            value = radio.value
+        }
+    })
+    return value
+}
+
+
 ////////////////////////////////////////////////////////////////////////////////
 // Options
 ////////////////////////////////////////////////////////////////////////////////
@@ -112,7 +132,8 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
 ////////////////////////////////////////////////////////////////////////////////
 
 const Forms = {
-    titleizeOptions
+    titleizeOptions,
+    getRadioValue
 }
 
 export default Forms