@operato/data-grist 0.3.16 → 0.3.20

package/src/data-list/record-partial.ts

@@ -7,6 +7,7 @@ import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
+import { RecordViewHandler } from '../record-view/record-view-handler'
 import { GristConfig, GristData, GristRecord } from '../types'
 import { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'
 import { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'
@@ -122,32 +123,6 @@ export class RecordPartial extends LitElement {
     super.attributeChangedCallback(name, oldval, newval)
   }
 
-  onFieldChange(e: Event) {
-    /* record-view의 이벤트를 부모에게로 전달한다. */
-    this.dispatchEvent(
-      new CustomEvent('field-change', {
-        bubbles: true,
-        composed: true,
-        detail: (e as any).detail
-      })
-    )
-  }
-
-  get recordView() {
-    if (!this._recordView) {
-      this._recordView = document.createElement('ox-record-view')
-      this._recordView.addEventListener('field-change', (e: CustomEvent) => this.onFieldChange(e))
-    }
-
-    var columns = this.config.columns
-
-    this._recordView.columns = columns
-    this._recordView.record = this.record
-    this._recordView.rowIndex = this.rowIndex
-
-    return this._recordView
-  }
-
   firstUpdated() {
     /*
       long-press
@@ -158,6 +133,8 @@ export class RecordPartial extends LitElement {
     // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
     this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)
     this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)
+
+    this.addEventListener('show-record-view', () => this.popupRecordView())
   }
 
   updated(changes: PropertyValues<this>) {
@@ -234,53 +211,17 @@ export class RecordPartial extends LitElement {
       title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)
     }
 
-    document.dispatchEvent(
-      new CustomEvent('open-popup', {
-        detail: {
-          template: this.recordView,
-          options: {
-            backdrop: true,
-            size: 'large',
-            title
-          },
-          callback: (popup: any) => {
-            this.recordView.addEventListener('reset', () => {
-              this.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    record: this.record,
-                    row: this.rowIndex
-                  }
-                })
-              )
-            })
-
-            this.recordView.addEventListener('cancel', () => {
-              this.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    record: this.record,
-                    row: this.rowIndex
-                  }
-                })
-              )
-              popup.close()
-            })
-
-            this.recordView.addEventListener('ok', () => {
-              popup.close()
-            })
-
-            popup.onclosed = () => {
-              delete this._recordView
-            }
-          }
-        }
-      })
+    this._recordView = RecordViewHandler(
+      this.config.columns,
+      this.record,
+      this.rowIndex,
+      this,
+      {
+        title
+      },
+      () => {
+        delete this._recordView
+      }
     )
   }
 }

package/src/editors/image-input.ts

@@ -0,0 +1,29 @@
+import '@operato/input/ox-input-image.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { InputEditor } from './input-editors'
+
+@customElement('ox-image-input')
+export class ImageInput extends InputEditor {
+  get editorTemplate() {
+    return html` <ox-input-image .value=${this.value}></ox-input-image> `
+  }
+
+  _onchange(e: Event) {
+    e.stopPropagation()
+    this._dirtyValue = this.formatFromEditor(e)
+    this._onfocusout()
+  }
+
+  formatFromEditor(e: Event) {
+    // value가 image file object인지, image url인지 확인
+    const input = e.target as HTMLInputElement
+    if (input.files?.[0]) {
+      return input.files[0]
+    } else {
+      return input.value
+    }
+  }
+}

package/src/editors/index.ts

@@ -1,3 +1,4 @@
 export * from './registry'
 
 export * from './input-editors'
+export * from './image-input'

package/src/editors/input-editors.ts

@@ -1,9 +1,9 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, GristRecord } from '../types'
 
 const STYLE = css`
   :host {
@@ -17,7 +17,7 @@ const STYLE = css`
   }
 
   :host > * {
-    display: block;
+    display: flex;
 
     width: 100%;
     height: 100%;
@@ -279,49 +279,6 @@ export class CheckboxInput extends InputEditor {
   }
 }
 
-@customElement('ox-image-input')
-export class ImageInput extends InputEditor {
-  @query('input[type=file]') imageInput!: HTMLElement
-
-  get editorTemplate() {
-    return html`${this.value
-        ? html`<span
-            >${this.value.name || this.value}<button
-              @click=${() => {
-                this.imageInput.dispatchEvent(
-                  new Event('change', {
-                    bubbles: true
-                  })
-                )
-              }}
-            >
-              X
-            </button></span
-          >`
-        : ''} <input type="file" accept="image/*" /> `
-  }
-
-  focus() {
-    if (!this.value) this.imageInput.click()
-  }
-
-  _onchange(e: Event) {
-    e.stopPropagation()
-    this._dirtyValue = this.formatFromEditor(e)
-    this._onfocusout()
-  }
-
-  formatFromEditor(e: Event) {
-    // value가 image file object인지, image url인지 확인
-    const input = e.target as HTMLInputElement
-    if (input.files?.[0]) {
-      return input.files[0]
-    } else {
-      return input.value
-    }
-  }
-}
-
 @customElement('ox-select-input')
 export class Select extends InputEditor {
   get editorTemplate() {

package/src/editors/registry.ts

@@ -1,12 +1,12 @@
 import { DataGridField } from '../data-grid/data-grid-field'
 import { ColumnConfig, FieldEditor, GristRecord } from '../types'
+import { ImageInput } from './image-input'
 import {
   CheckboxInput,
   ColorInput,
   DateInput,
   DateTimeInput,
   EmailInput,
-  ImageInput,
   InputEditor,
   MonthInput,
   NumberInput,

package/src/filters/filter-checkbox.ts

@@ -1,9 +1,10 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from '../types'
+import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 export const FilterCheckbox: FilterSelectRenderer = (column, owner) => {
-  const options = typeof column.filter !== 'boolean' && column.filter?.options
+  const filter = column.filter as FilterConfigObject
+  const options = filter?.options
 
   return html`
     <input

package/src/filters/filter-input.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from '../types'
+import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 export const FilterInput: FilterSelectRenderer = (column, owner) => {
-  const filter = column.filter
-  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
+  const filter = column.filter as FilterConfigObject
+  const type = filter?.type || column.type
 
   return html` <input type=${type} name="${column.name}" /> `
 }

package/src/filters/filter-range-date.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from '../types'
+import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 export const FilterRangeDate: FilterSelectRenderer = (column, owner) => {
-  const filter = column.filter
-  var type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
+  const filter = column.filter as FilterConfigObject
+  var type = filter?.type || column.type
   if (type === 'datetime') {
     type = 'datetime-local'
   }

package/src/filters/filter-range-number.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from '../types'
+import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 export const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {
-  const filter = column.filter
-  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
+  const filter = column.filter as FilterConfigObject
+  const type = filter?.type || column.type
 
   return html`
     <input name="${column.name}" type="number" placeholder="minimum" /> ~

package/src/filters/filter-select.ts

@@ -2,10 +2,11 @@ import '@operato/input/ox-checkbox.js'
 
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from '../types'
+import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 export const FilterSelect: FilterSelectRenderer = (column, owner) => {
-  const options = (typeof column.filter !== 'boolean' && column.filter?.options) || []
+  const filter = column.filter as FilterConfigObject
+  const options = filter?.options || []
 
   return html`
     ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}

package/src/filters/filters-form.ts

@@ -1,12 +1,14 @@
 import '@operato/input/ox-checkbox.js'
 import '@operato/input/ox-select.js'
 import '@operato/popup/ox-popup-list.js'
+import '@operato/input/ox-input-search.js'
 
-import { css, html, LitElement, TemplateResult } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { customElement, queryAsync, state } from 'lit/decorators.js'
 
-import { ColumnConfig } from '..'
-import { GristConfig } from '../types'
+import { FilterConfigObject } from '..'
+import { DataGrist } from '../data-grist'
+import { ColumnConfig, FilterOperator, GristConfig } from '../types'
 import { FilterStyles } from './filter-styles'
 import { getFilterRenderer } from './registry'
 
@@ -14,30 +16,7 @@ export type QueryFilterRangeValue = [from: number, to: number]
 
 export type QueryFilter = {
   name: 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'
+  operator: FilterOperator
   value: any
 }
 
@@ -61,16 +40,57 @@ export class FiltersForm extends LitElement {
     `
   ]
 
-  @property({ type: Object }) config!: GristConfig
-  @property({ type: String }) defaultOperator: string = 'eq'
-  @query('form') form!: HTMLFormElement
+  @state() config!: GristConfig
 
-  render(): TemplateResult {
-    const columns = this.config.columns.filter(columnConfig => columnConfig.filter)
+  @state() filterColumns: ColumnConfig[] = []
+  @state() searchColumns: ColumnConfig[] = []
+
+  @queryAsync('form') form!: HTMLFormElement
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    const grist = this.closest('ox-grist') as DataGrist
+
+    if (grist) {
+      this.config = grist.compiledConfig
+      grist.addEventListener('config-change', (e: Event) => {
+        this.config = (e as CustomEvent).detail
+      })
+
+      this.renderRoot.addEventListener('change', async (e: Event) => {
+        e.stopPropagation()
+
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: await this.getQueryFilters()
+          })
+        )
+      })
+    }
+  }
 
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('config')) {
+      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
+      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {
+        const filter = columnConfig.filter as FilterConfigObject
+        return filter!.operator !== 'search'
+      })
+      this.searchColumns = filters.filter(columnConfig => {
+        const filter = columnConfig.filter as FilterConfigObject
+        return filter!.operator === 'search'
+      })
+    }
+  }
+
+  render(): TemplateResult {
     return html`
       <form>
-        ${columns.map((column: ColumnConfig) => {
+        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name="search"></ox-input-search> `}
+        ${this.filterColumns.map((column: ColumnConfig) => {
           const { name, label, filter } = column
           const placeholder =
             typeof label === 'string'
@@ -81,8 +101,8 @@ export class FiltersForm extends LitElement {
               ? label.renderer()
               : name
 
-          const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
-          const idx = typeof filter === 'boolean' ? 0 : filter!.operator === 'between' ? 1 : 0
+          const type = (filter as FilterConfigObject).type
+          const idx = (filter as FilterConfigObject).operator === 'between' ? 1 : 0
           const renderer = getFilterRenderer(type)[idx]
 
           if (!renderer) {
@@ -103,14 +123,14 @@ export class FiltersForm extends LitElement {
     `
   }
 
-  get queryFilters(): QueryFilter[] {
-    var formData = new FormData(this.form)
+  async getQueryFilters(): Promise<QueryFilter[]> {
+    const formData = new FormData(await this.form)
+    const search: string | undefined = formData.get('search')?.toString()
 
-    return this.config.columns
-      .filter(columnConfig => columnConfig.filter)
+    var filters = this.filterColumns
       .map((column: ColumnConfig) => {
         const { name, filter } = column
-        const operator = typeof filter === 'boolean' ? 'eq' : filter!.operator || 'eq'
+        const operator = (filter as FilterConfigObject).operator
 
         var value = formData.getAll(name)
         if (value.length == 0) {
@@ -128,5 +148,21 @@ export class FiltersForm extends LitElement {
         }
       })
       .filter(result => result !== undefined) as QueryFilter[]
+
+    if (search) {
+      filters = filters.concat(
+        this.searchColumns.map((column: ColumnConfig) => {
+          const { name } = column
+
+          return {
+            name,
+            operator: 'search',
+            value: `%${search}%`
+          }
+        })
+      )
+    }
+
+    return filters
   }
 }

package/src/handlers/record-view-handler.ts

@@ -1,9 +1,5 @@
-import '../record-view/record-view'
-
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
 import { DataGridField } from '../data-grid/data-grid-field'
-import { html } from 'lit'
+import { ColumnConfig, GristData, GristRecord } from '../types'
 
 /*
  * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
@@ -18,46 +14,14 @@ export const RecordViewHandler = function (
   rowIndex: number,
   field: DataGridField
 ): void {
-  document.dispatchEvent(
-    new CustomEvent('open-popup', {
+  field.dispatchEvent(
+    new CustomEvent('show-record-view', {
+      bubbles: true,
+      composed: true,
       detail: {
-        template: html`
-          <record-view
-            .field=${field}
-            .columns=${columns}
-            .column=${column}
-            .record=${record}
-            .rowIndex=${rowIndex}
-            @reset=${(e: Event) => {
-              field.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: record
-                })
-              )
-            }}
-            @cancel=${(e: Event) => {
-              field.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: record
-                })
-              )
-              // popup.close()
-            }}
-            @ok=${(e: Event) => {
-              // popup.close()
-            }}
-          ></record-view>
-        `
-      },
-      options: {
-        backdrop: true,
-        size: 'large',
-        title: record['name']
+        record,
+        row: rowIndex
       }
-    } as any)
+    })
   )
 }

package/src/handlers/select-row-toggle.ts

@@ -1,6 +1,5 @@
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
 import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, GristData, GristRecord } from '../types'
 
 /*
  * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,

package/src/record-view/event-handlers/record-view-body-click-handler.ts

@@ -24,5 +24,7 @@ export function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void
   }
 
   this.currentTarget = target
-  target.setAttribute('editing', 'true')
+  if (!this.onlyForEdit) {
+    target.setAttribute('editing', 'true')
+  }
 }

package/src/record-view/event-handlers/record-view-body-keydown-handler.ts

@@ -6,8 +6,6 @@ import { RecordViewBody } from '../record-view-body'
  * - handler의 this 는 ox-record-view-body임.
  */
 export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {
-  // e.preventDefault()
-
   switch ((e as KeyboardEvent).key) {
     case 'Esc':
     case 'Escape':
@@ -25,91 +23,4 @@ export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Even
       break
     default:
   }
-
-  // arrow-key
-  // var keyCode = e.keyCode
-  // var { row = 0, column = 0 } = this.focused || {}
-  // var { records = [] } = this.data || {}
-  // var maxrow = this.config.rows.appendable ? records.length : records.length - 1
-  // var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1
-
-  // if (this.currentTarget) {
-  //   switch (keyCode) {
-  //     case KEYCODE.KEY_ESC:
-  //     /* TODO 편집이 취소되어야 한다. */
-  //     case KEYCODE.KEY_ENTER:
-  //       this.currentTarget = null
-  //       this.focus()
-  //       return
-
-  //     // case KEYCODE.KEY_TAP:
-  //     //   this.currentTarget = null
-  //     //   column = Math.min(maxcolumn, column + 1)
-  //     //   this.focus()
-  //     //   break
-
-  //     // case KEYCODE.KEY_DOWN:
-  //     //   this.currentTarget = null
-  //     //   row = Math.min(maxrow, row + 1)
-  //     //   this.focus()
-  //     //   break
-
-  //     default:
-  //       return
-  //   }
-  // } else {
-  //   switch (keyCode) {
-  //     case KEYCODE.KEY_UP:
-  //       row = Math.max(0, row - 1)
-  //       break
-
-  //     case KEYCODE.KEY_DOWN:
-  //       row = Math.min(maxrow, row + 1)
-  //       break
-
-  //     case KEYCODE.KEY_ENTER:
-  //       this.startEditTarget(row, column)
-  //       return
-
-  //     case KEYCODE.KEY_LEFT:
-  //     case KEYCODE.KEY_BACKSPACE:
-  //       column = Math.max(0, column - 1)
-  //       break
-
-  //     case KEYCODE.KEY_RIGHT:
-  //     case KEYCODE.KEY_TAP:
-  //       column = Math.min(maxcolumn, column + 1)
-  //       break
-
-  //     case KEYCODE.KEY_PAGEUP:
-  //       /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-  //       row = Math.max(0, row - 10)
-  //       break
-
-  //     case KEYCODE.KEY_PAGEDOWN:
-  //       row = Math.min(maxrow, row + 10)
-  //       break
-
-  //     case KEYCODE.KEY_ESC:
-  //       return
-
-  //     default:
-  //       if (
-  //         (keyCode > 47 && keyCode < 58) || // number keys
-  //         keyCode == 32 ||
-  //         keyCode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
-  //         (keyCode > 64 && keyCode < 91) || // letter keys
-  //         (keyCode > 95 && keyCode < 112) || // numpad keys
-  //         (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
-  //         (keyCode > 218 && keyCode < 223) // [\]' (in order)
-  //       ) {
-  //         this.startEditTarget(row, column)
-  //       }
-  //       return
-  //   }
-  // }
-
-  // if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-  //   this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))
-  // }
 }

package/src/record-view/index.ts

@@ -1 +1,2 @@
 export * from './record-view'
+export * from './record-creator'