@operato/data-grist 0.3.14 → 0.3.18

package/src/sorters/sorters-control.ts

@@ -0,0 +1,111 @@
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { DataGrist } from '../data-grist'
+import { ColumnConfig, GristConfig, SorterConfig } from '../types'
+
+@customElement('ox-sorters-control')
+export class SortersControl extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ]
+
+  @state() config!: GristConfig
+  @state() columns: ColumnConfig[] = []
+  @state() sorters: SorterConfig[] = []
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    const grist = this.closest('ox-grist') as DataGrist
+
+    if (grist) {
+      this.config = grist.config
+
+      this.closest('ox-grist')?.addEventListener('sorters-change', e => {
+        this.sorters = (e as CustomEvent).detail as SorterConfig[]
+      })
+    }
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('config')) {
+      const sorters = this.config.sorters || []
+
+      this.columns = sorters
+        .map(({ name }) => this.config.columns.find(column => column.name === name))
+        .filter(column => !!column) as ColumnConfig[]
+
+      this.sorters = this.config.sorters || []
+    }
+  }
+
+  render(): TemplateResult {
+    const columns = this.columns
+
+    const current = this.sorters || []
+
+    return html`
+      ${columns.map(column => {
+        const { name } = column
+        var rank = current.findIndex(sorter => sorter.name === name) + 1
+        var desc = rank !== 0 ? current[rank - 1].desc : null
+
+        if (current.length <= 1) {
+          rank = 0
+        }
+
+        return html`
+          <div
+            option
+            @click=${(e: MouseEvent) => {
+              this.onChangeSort(name)
+            }}
+          >
+            ${column.header /*.renderer.call(this, column) */}
+            ${desc === null
+              ? html``
+              : html`
+                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>
+                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
+                `}
+          </div>
+        `
+      })}
+    `
+  }
+
+  onChangeSort(name: string) {
+    var sorters = [...this.sorters]
+
+    var idx = sorters.findIndex(sorter => sorter.name == name)
+    if (idx !== -1) {
+      let sorter = sorters[idx]
+      if (sorter.desc) {
+        sorters.splice(idx, 1)
+      } else {
+        sorter.desc = true
+      }
+    } else {
+      var sorter = {
+        name
+      }
+
+      sorters.push(sorter)
+    }
+
+    this.sorters = sorters
+
+    this.dispatchEvent(
+      new CustomEvent('sorters-change', {
+        bubbles: true,
+        composed: true,
+        detail: this.sorters
+      })
+    )
+  }
+}

package/src/types.ts

@@ -19,36 +19,38 @@ export type GristConfig = {
 
 export type SorterConfig = { name: string; desc?: boolean }
 export type SortersConfig = SorterConfig[]
-export type FilterConfig =
-  | {
-      type: string
-      operator?:
-        | 'eq'
-        | 'between'
-        | 'gte'
-        | 'lte'
-        | 'is_not_true'
-        | 'in'
-        | 'like'
-        | 'i_like'
-        | 'noteq'
-        | 'is_empty_num_id'
-        | 'is_blank'
-        | 'is_present'
-        | 'is_not_false'
-        | 'is_true'
-        | 'is_false'
-        | 'is_not_null'
-        | 'is_null'
-        | 'notin_with_null'
-        | 'notin'
-        | 'gt'
-        | 'lt'
-        | 'i_nlike'
-        | 'nlike'
-      options?: { [key: string]: any }
-    }
-  | boolean
+export type FilterOperator =
+  | 'search'
+  | 'eq'
+  | 'between'
+  | 'gte'
+  | 'lte'
+  | 'is_not_true'
+  | 'in'
+  | 'like'
+  | 'i_like'
+  | 'noteq'
+  | 'is_empty_num_id'
+  | 'is_blank'
+  | 'is_present'
+  | 'is_not_false'
+  | 'is_true'
+  | 'is_false'
+  | 'is_not_null'
+  | 'is_null'
+  | 'notin_with_null'
+  | 'notin'
+  | 'gt'
+  | 'lt'
+  | 'i_nlike'
+  | 'nlike'
+
+export type FilterConfigObject = {
+  type: string
+  operator?: FilterOperator
+  options?: { [key: string]: any }
+}
+export type FilterConfig = FilterConfigObject | FilterOperator | boolean
 
 export type PaginationConfig = {
   page?: number
@@ -126,7 +128,15 @@ export type FieldRenderer = (
   column: ColumnConfig,
   record: GristRecord,
   rowIndex: number,
-  owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField
+  owner:
+    | RecordCard
+    | DataCardGutter
+    | DataCardField
+    | DataListGutter
+    | DataListField
+    | RecordPartial
+    | DataReportField
+    | Element
 ) => TemplateResult | string | void
 export type FieldEditor = (
   value: any,