@operato/data-grist 1.0.0-beta.7 → 1.0.0

package/src/filters/filter-input-barcode.ts

@@ -0,0 +1,33 @@
+import '@operato/input/ox-input-barcode.js'
+
+import { html } from 'lit-html'
+
+import { FilterConfigObject, FilterSelectRenderer } from '../types.js'
+
+export const FilterInputBarcode: FilterSelectRenderer = (column, value, owner) => {
+  const filter = column.filter as FilterConfigObject
+  const { englishOnly, selectAfterChange } = filter.options || {}
+
+  return html`
+    <ox-input-barcode
+      name=${column.name}
+      ?english-only=${englishOnly}
+      ?select-after-change=${selectAfterChange}
+      .value=${value == null ? '' : value}
+      @change=${(e: CustomEvent) => {
+        const input = e.target as HTMLInputElement
+        input.dispatchEvent(
+          new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              name: column.name,
+              operator: filter.operator,
+              value: input.value
+            }
+          })
+        )
+      }}
+    />
+  `
+}

package/src/filters/filter-input.ts

@@ -1,7 +1,7 @@
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
-
 import { html } from 'lit-html'
 
+import { FilterConfigObject, FilterSelectRenderer } from '../types'
+
 export const FilterInput: FilterSelectRenderer = (column, value, owner) => {
   const filter = column.filter as FilterConfigObject
   const type = filter?.type || column.type
@@ -10,7 +10,7 @@ export const FilterInput: FilterSelectRenderer = (column, value, owner) => {
     <input
       type=${type}
       name=${column.name}
-      .value=${value === undefined ? '' : value}
+      .value=${value == null ? '' : value}
       @change=${(e: CustomEvent) => {
         const input = e.target as HTMLInputElement
         input.dispatchEvent(

package/src/filters/filter-styles.ts

@@ -6,35 +6,83 @@ export const FilterStyles = css`
 
     --ox-input-padding: var(--padding-narrow) var(--padding-default);
     --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
+    --ox-input-focus-border: 1px solid var(--primary-color);
     --ox-input-border-radius: var(--border-radius);
     --ox-input-font: normal 14px var(--theme-font);
     --ox-input-color: var(--primary-text-color);
+
+    --ox-filters-form-gap: var(--margin-wide);
+    --ox-filters-form-label-font: var(--label-font);
+    --ox-filters-form-label-color: var(--label-color);
+    --ox-select-padding: 0 var(--padding-narrow);
+  }
+
+  label {
+    font: var(--ox-filters-form-label-font);
+    color: var(--ox-filters-form-label-color);
+  }
+  span {
+    margin-right: var(--margin-narrow);
+    text-transform: capitalize;
   }
 
-  [filter] input::placeholder {
+  input::placeholder {
     color: var(--ox-input-placeholder-color);
-    opacity: 0.7;
+    opacity: 0.6;
   }
-  [filter] input {
-    margin: 0 10px 5px 10px;
-    padding: var(--ox-input-padding);
-    border: var(--ox-input-border);
-    border-radius: var(--ox-input-border-radius);
+
+  ox-select,
+  input {
+    padding: var(--input-padding);
+    border: none;
+    border-bottom: var(--ox-input-border);
     font: var(--ox-input-font);
-    color: var(--ox-input-color, #3a5877);
+    color: var(--ox-input-color);
   }
-  [filter] input[type='number'] {
-    padding-right: var(--padding-narrow);
-    max-width: 100px;
+
+  ox-select:focus,
+  input:focus {
+    outline: none;
+    border-bottom: var(--ox-input-focus-border);
+    color: var(--primary-color);
+  }
+  ox-select {
+    padding: var(--ox-select-padding);
   }
-  [filter] input[type='datetime-local'] {
+
+  input[type='number'] {
     padding-right: var(--padding-narrow);
-    max-width: 170px;
+    max-width: 90px;
   }
-  [filter] input[name='from'] {
-    margin: 0 0 5px 10px;
+
+  input[type*='date'],
+  input[type*='time'],
+  input[type='week'],
+  input[type='month'] {
+    padding: 8px var(--padding-narrow) 8px var(--padding-default);
+    max-width: 170px;
   }
-  [filter] input[name='to'] {
-    margin: 0 10px 5px 0;
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      --ox-filters-form-label-font: bold 13px var(--theme-font);
+      --ox-input-font: normal 16px var(--theme-font);
+      --ox-filters-form-gap: var(--margin-narrow);
+    }
+
+    ox-checkbox {
+      margin-top: var(--margin-narrow);
+    }
+
+    input[from],
+    input[to] {
+      max-width: 44%;
+    }
+
+    input[type*='datetime'][from],
+    input[type*='datetime'][to] {
+      padding-right: var(--padding-narrow);
+      min-width: 91%;
+    }
   }
 `

package/src/filters/filters-form.ts

@@ -33,16 +33,25 @@ export class FiltersForm extends LitElement {
         flex: 1;
 
         display: flex;
-        flex-direction: row;
-
-        justify-content: space-between;
-        align-items: center;
+        flex-flow: row wrap;
+        gap: var(--ox-filters-form-gap);
       }
 
-      label {
+      form > * {
         display: flex;
         align-items: center;
-        justify-content: center;
+      }
+
+      @media only screen and (max-width: 460px) {
+        form {
+          flex-direction: column;
+        }
+
+        label,
+        label span,
+        ox-select {
+          display: block;
+        }
       }
     `
   ]
@@ -68,7 +77,7 @@ export class FiltersForm extends LitElement {
         this.config = (e as CustomEvent).detail
       })
 
-      grist.addEventListener('filters-change', (e: Event) => {
+      grist.addEventListener('fetch-params-change', (e: Event) => {
         const { filters, from } = (e as CustomEvent).detail || {}
         if (from === 'filters-form') {
           return
@@ -79,7 +88,7 @@ export class FiltersForm extends LitElement {
 
       this.renderRoot.addEventListener('change', async (e: Event) => {
         this.dispatchEvent(
-          new CustomEvent('filters-change', {
+          new CustomEvent('fetch-params-change', {
             bubbles: true,
             composed: true,
             detail: {
@@ -107,6 +116,14 @@ export class FiltersForm extends LitElement {
   }
 
   render(): TemplateResult {
+    const { name: firstSearchFilterName } = this.searchColumns[0] || {}
+    const searchValue =
+      (firstSearchFilterName &&
+        (this.value?.find(filter => filter.name === firstSearchFilterName)?.value as string)?.match(
+          /^\%(.*)\%$/
+        )?.[1]) ||
+      ''
+
     return html`
       <form
         @submit=${(e: Event) => {
@@ -118,7 +135,11 @@ export class FiltersForm extends LitElement {
           grist && grist.fetch()
         }}
       >
-        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name="search"></ox-input-search> `}
+        ${this.searchColumns.length === 0
+          ? html``
+          : html`
+              <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
+            `}
         ${this.filterColumns.map((column: ColumnConfig) => {
           const { name, header, label, filter } = column
           const labelText =

package/src/filters/registry.ts

@@ -1,9 +1,10 @@
-import { FilterSelectRenderer } from '../types'
-import { FilterCheckbox } from './filter-checkbox'
-import { FilterInput } from './filter-input'
-import { FilterRangeDate } from './filter-range-date'
-import { FilterRangeNumber } from './filter-range-number'
-import { FilterSelect } from './filter-select'
+import { FilterSelectRenderer } from '../types.js'
+import { FilterCheckbox } from './filter-checkbox.js'
+import { FilterInputBarcode } from './filter-input-barcode.js'
+import { FilterInput } from './filter-input.js'
+import { FilterRangeDate } from './filter-range-date.js'
+import { FilterRangeNumber } from './filter-range-number.js'
+import { FilterSelect } from './filter-select.js'
 
 var RENDERERS: {
   [name: string]: FilterSelectRenderer[]
@@ -27,7 +28,9 @@ var RENDERERS: {
   progress: [FilterInput, FilterRangeNumber],
   link: [FilterInput],
   image: [FilterInput],
-  json5: [FilterInput]
+  json5: [FilterInput],
+  scanner: [FilterInputBarcode],
+  barcode: [FilterInputBarcode]
 }
 
 export function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]) {
@@ -43,7 +46,7 @@ export function getFilterRenderers(): { [name: string]: FilterSelectRenderer[] }
 }
 
 export function getFilterRenderer(type: string): FilterSelectRenderer[] {
-  if (typeof type == 'function') {
+  if (typeof type === 'function') {
     return type
   }
 

package/src/gutters/gutter-button.ts

@@ -6,7 +6,7 @@ import { FieldRenderer, HeaderRenderer } from '../types'
 
 export class GutterButton {
   static instance(config: any = {}) {
-    var { icon = 'edit' } = config
+    var { icon = 'edit', title } = config
 
     var iconFn = typeof icon == 'function' ? icon : () => icon
 
@@ -23,17 +23,18 @@ export class GutterButton {
         sortable: false,
         header: {
           renderer: function (column) {
-            return html` <mwc-icon style=${inlineHeaderStyle}>${iconFn()}</mwc-icon> `
+            return html` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `
           } as HeaderRenderer
         },
         record: {
           align: 'center',
           renderer: function (value, column, record, rowIndex, field) {
-            return html` <mwc-icon style=${inlineRecordStyle}>${iconFn(record)}</mwc-icon> `
+            return html` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `
           } as FieldRenderer
         },
         forGrid: true,
-        forList: true
+        forList: true,
+        forCard: true
       },
       config
     )

package/src/gutters/gutter-dirty.ts

@@ -1,9 +1,10 @@
 import '@material/mwc-icon'
 
-import { ColumnConfig, FieldRenderer } from '../types'
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ColumnConfig, FieldRenderer, GristEventHandler } from '../types'
+
 @customElement('ox-gutter-dirty-element')
 class GutterDirtyElement extends LitElement {
   static styles = css`
@@ -65,7 +66,24 @@ export class GutterDirty {
           } as FieldRenderer
         },
         forGrid: true,
-        forList: false
+        forList: false,
+        forCard: false,
+        handlers: {
+          dblclick: ((columns, data, column, record, rowIndex, target) => {
+            target.dispatchEvent(
+              new CustomEvent('set-select-block', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  startRow: rowIndex,
+                  startColumn: 0,
+                  endRow: rowIndex,
+                  endColumn: -1
+                }
+              })
+            )
+          }) as GristEventHandler
+        }
       },
       config
     )

package/src/gutters/gutter-row-selector.ts

@@ -77,7 +77,8 @@ export class GutterRowSelector {
           } as FieldRenderer
         },
         forGrid: true,
-        forList: true
+        forList: true,
+        forCard: true
       },
       config
     )

package/src/gutters/gutter-sequence.ts

@@ -1,8 +1,7 @@
-import { ColumnWidthCallback, FieldRenderer } from '../types'
-
 import { DataCard } from '../data-card/data-card'
 import { DataGrid } from '../data-grid/data-grid'
 import { DataList } from '../data-list/data-list'
+import { ColumnWidthCallback, FieldRenderer, GristEventHandler } from '../types'
 
 export class GutterSequence {
   static instance(config = {} as any) {
@@ -31,6 +30,23 @@ export class GutterSequence {
       },
       forGrid: true,
       forList: false,
+      forCard: false,
+      handlers: {
+        dblclick: ((columns, data, column, record, rowIndex, target) => {
+          target.dispatchEvent(
+            new CustomEvent('set-select-block', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                startRow: rowIndex,
+                startColumn: 0,
+                endRow: rowIndex,
+                endColumn: -1
+              }
+            })
+          )
+        }) as GristEventHandler
+      },
       ...config
     }
   }

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

@@ -12,7 +12,7 @@ export function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void
   /* target should be 'ox-grid-field' */
   var target = e.target as DataGridField
 
-  if (!this.onlyForEdit && this.currentTarget) {
+  if (this.currentTarget) {
     this.focus()
     this.currentTarget.removeAttribute('editing')
   }
@@ -24,7 +24,5 @@ export function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void
   }
 
   this.currentTarget = target
-  if (!this.onlyForEdit) {
-    target.setAttribute('editing', 'true')
-  }
+  target.setAttribute('editing', 'true')
 }

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

@@ -12,9 +12,9 @@ export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Even
     /* TODO 편집이 취소되어야 한다. */
     case 'Enter':
       /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
-      !this.onlyForEdit && this.focus()
+      this.focus()
 
-      if (!this.onlyForEdit && this.currentTarget) {
+      if (this.currentTarget) {
         this.currentTarget.removeAttribute('editing')
       }
 

package/src/record-view/record-creator.ts

@@ -53,7 +53,6 @@ export class RecordCreator extends LitElement {
       template: html`
         <div title>${title}</div>
         <ox-record-view
-          only-for-edit
           @field-change=${(e: CustomEvent) => {
             const view = e.currentTarget as RecordView
 
@@ -116,7 +115,6 @@ export class RecordCreator extends LitElement {
 
     var recordView = document.createElement('ox-record-view') as RecordView
 
-    recordView.setAttribute('only-for-edit', '')
     recordView.columns = columns
     recordView.record = record
     recordView.rowIndex = rowIndex

package/src/record-view/record-view-body.ts

@@ -65,7 +65,6 @@ export class RecordViewBody extends LitElement {
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
-  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false
 
   public currentTarget: any
 
@@ -98,7 +97,6 @@ export class RecordViewBody extends LitElement {
             .record=${record}
             .value=${record[column.name]}
             ?dirty=${!!dirtyFields[column.name]}
-            ?editing=${this.onlyForEdit}
           ></ox-grid-field>
         `
       })}

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

@@ -63,16 +63,10 @@ export class RecordView extends LitElement {
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
-  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false
 
   render() {
     return html`
-      <ox-record-view-body
-        .columns=${this.columns}
-        .record=${this.record}
-        .rowIndex=${this.rowIndex}
-        ?only-for-edit=${this.onlyForEdit}
-      >
+      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
       </ox-record-view-body>
       <div footer>
         <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>

package/src/renderers/ox-grist-renderer-color.ts

@@ -1,8 +1,9 @@
-import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
+import { FieldRenderer } from '../types'
+
 export const OxGristRendererColor: FieldRenderer = (value, column, record, rowIndex, field) => {
-  value = value === undefined ? '#000' : value
+  value = value == null ? '#000' : value
 
   return html`
     <div

package/src/renderers/ox-grist-renderer-json5.ts

@@ -1,7 +1,8 @@
-import { FieldRenderer } from '../types'
 import JSON5 from 'json5'
 import { html } from 'lit'
 
+import { FieldRenderer } from '../types'
+
 function onmouseover(e: Event) {
   const element = e.target as HTMLPreElement
   var parsed
@@ -26,6 +27,6 @@ export const OxGristRendererJson5: FieldRenderer = (value, column, record, rowIn
     } catch {}
   }
 
-  const text = parsed === undefined || parsed === null ? '' : JSON5.stringify(parsed)
+  const text = parsed == null ? '' : JSON5.stringify(parsed)
   return html`<pre @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</pre>`
 }

package/src/renderers/ox-grist-renderer-link.ts

@@ -1,10 +1,11 @@
-import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
+import { FieldRenderer } from '../types'
+
 export const OxGristRendererLink: FieldRenderer = (value, column, record, rowIndex, field) => {
   var { href, target } = column.record.options || {}
 
-  value = value === undefined ? '' : value
+  value = value == null ? '' : value
 
   if (typeof href == 'function') {
     href = href(value, column, record, rowIndex, field)

package/src/renderers/ox-grist-renderer-select.ts

@@ -3,7 +3,7 @@ import { html } from 'lit'
 import { FieldRenderer } from '../types'
 
 export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) {
+  if (value == null) {
     return ''
   }
   var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]
@@ -15,7 +15,7 @@ export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowI
     options = options.call(null, value, column, record, rowIndex, field)
   }
 
-  var res = options ? options.filter((option: any) => option.value == value) : []
+  var res = options ? options.filter((option: any) => option.value == String(value == null ? '' : value)) : []
   if (res.length) {
     return html`<span>${res[0].display}</span>`
   }

package/src/renderers/ox-grist-renderer-text.ts

@@ -1,6 +1,6 @@
 import { html } from 'lit'
 
-import { detectOverflow } from '@operato/utils'
+import { detectOverflow, format as formatter } from '@operato/utils'
 
 import { FieldRenderer } from '../types'
 
@@ -17,6 +17,12 @@ function onmouseout(e: Event) {
 }
 
 export const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {
-  const text = value === undefined ? '' : value
+  var { format } = column.record || {}
+
+  var text = value == null ? '' : value
+  if (format) {
+    text = formatter(format, text)
+  }
+
   return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`
 }

package/src/sorters/sorters-control.ts

@@ -1,8 +1,8 @@
-import { ColumnConfig, GristConfig, SorterConfig } from '../types'
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
+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 {
@@ -55,22 +55,19 @@ export class SortersControl extends LitElement {
         this.config = (e as CustomEvent).detail
       })
 
-      grist.addEventListener('sorters-change', e => {
+      grist.addEventListener('fetch-params-change', e => {
         const { sorters, from } = (e as CustomEvent).detail || {}
         if (from === 'sorters-control') {
           return
         }
 
-        this.sorters = sorters
+        sorters && (this.sorters = sorters)
       })
     }
   }
 
   updated(changes: PropertyValues<this>) {
-    // TODO config 에 의한 sorters 설정은 제거해야 한다.
     if (changes.has('config')) {
-      const sorters = this.config.sorters || []
-
       this.columns = this.config.columns.filter(column => column.sortable)
       this.sorters = this.sorters || this.config.sorters || []
     }
@@ -102,7 +99,7 @@ export class SortersControl extends LitElement {
             ${desc === null
               ? html``
               : html`
-                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>
+                  <mwc-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</mwc-icon>
                   ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
                 `}
           </div>
@@ -133,7 +130,7 @@ export class SortersControl extends LitElement {
     this.sorters = sorters
 
     this.dispatchEvent(
-      new CustomEvent('sorters-change', {
+      new CustomEvent('fetch-params-change', {
         bubbles: true,
         composed: true,
         detail: {

package/src/types.ts

@@ -1,14 +1,16 @@
+import { TemplateResult } from 'lit-html'
+
 import { DataCardField } from './data-card/data-card-field'
 import { DataCardGutter } from './data-card/data-card-gutter'
+import { RecordCard } from './data-card/record-card'
 import { DataGridField } from './data-grid/data-grid-field'
 import { DataListField } from './data-list/data-list-field'
 import { DataListGutter } from './data-list/data-list-gutter'
+import { RecordPartial } from './data-list/record-partial'
 import { DataReportField } from './data-report/data-report-field'
 import { OxGristEditor } from './editors'
+import { QueryFilter } from './filters'
 import { OxGristRenderer } from './renderers/ox-grist-renderer'
-import { RecordCard } from './data-card/record-card'
-import { RecordPartial } from './data-list/record-partial'
-import { TemplateResult } from 'lit-html'
 
 export type GristConfig = {
   columns: ColumnConfig[]
@@ -50,6 +52,7 @@ export type FilterConfigObject = {
   type: string
   operator?: FilterOperator
   options?: { [key: string]: any }
+  value?: string | number | boolean | string[] | number[] | undefined
 }
 export type FilterConfig = FilterConfigObject | FilterOperator | boolean
 
@@ -70,7 +73,8 @@ export type FetchOption = {
   page?: number
   limit?: number
   sorters?: SortersConfig
-  filters?: FilterConfigObject[]
+  sortings?: SortersConfig
+  filters?: QueryFilter[]
   options?: object
 }
 export type FetchResult = {