@operato/data-grist 0.3.17 → 0.3.21

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/record-view/record-view-body.ts

@@ -85,11 +85,13 @@ export class RecordViewBody extends LitElement {
 
     return html`
       ${columns.map(column => {
-        let { editable } = column.record
+        let { editable, mandatory } = column.record
         let dirtyFields = record['__dirtyfields__'] || {}
 
         return html`
-          <label ?editable=${editable}><span>${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label>
+          <label ?editable=${editable}
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+          >
           <ox-grid-field
             .rowIndex=${rowIndex}
             .column=${column}

package/src/sorters/sorters-control.ts

@@ -9,7 +9,21 @@ export class SortersControl extends LitElement {
   static styles = [
     css`
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        white-space: nowrap;
+      }
+
+      [option] {
+        flex: 1;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [option] > span {
+        margin-right: auto;
       }
     `
   ]
@@ -24,9 +38,12 @@ export class SortersControl extends LitElement {
     const grist = this.closest('ox-grist') as DataGrist
 
     if (grist) {
-      this.config = grist.config
+      this.config = grist.compiledConfig
+      grist.addEventListener('config-change', (e: Event) => {
+        this.config = (e as CustomEvent).detail
+      })
 
-      this.closest('ox-grist')?.addEventListener('sorters-change', e => {
+      grist.addEventListener('sorters-change', e => {
         this.sorters = (e as CustomEvent).detail as SorterConfig[]
       })
     }
@@ -36,10 +53,7 @@ export class SortersControl extends LitElement {
     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.columns = this.config.columns.filter(column => column.sortable)
       this.sorters = this.config.sorters || []
     }
   }
@@ -66,7 +80,7 @@ export class SortersControl extends LitElement {
               this.onChangeSort(name)
             }}
           >
-            ${column.header /*.renderer.call(this, column) */}
+            <span>${column.header.renderer.call(this, column)}</span>
             ${desc === null
               ? html``
               : html`

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
@@ -115,6 +117,7 @@ export type RecordConfig = {
   renderer: FieldRenderer
   editor?: FieldEditor
   editable?: boolean
+  mandatory?: boolean
   classifier: GristClassifier
   align?: 'left' | 'right' | 'center'
   options: { [key: string]: any }

package/dist/src/editors/image-editor.d.ts

@@ -1,9 +0,0 @@
-import '@operato/input/ox-input-image.js';
-import { InputEditor } from './input-editors';
-export declare class ImageInput extends InputEditor {
-    imageInput: HTMLElement;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-    focus(): void;
-    _onchange(e: Event): void;
-    formatFromEditor(e: Event): string | File;
-}

package/dist/src/editors/image-editor.js

@@ -1,53 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/input/ox-input-image.js';
-import { html } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import { InputEditor } from './input-editors';
-let ImageInput = class ImageInput extends InputEditor {
-    get editorTemplate() {
-        return html ` <ox-input-image .value=${this.value}></ox-input-image> `;
-        // return html`${this.value
-        //     ? html`<span
-        //         ><button
-        //           @click=${() => {
-        //             this.imageInput.dispatchEvent(
-        //               new Event('change', {
-        //                 bubbles: true
-        //               })
-        //             )
-        //           }}
-        //         >
-        //           X</button
-        //         >${this.value.name || this.value}</span
-        //       >`
-        //     : ''} <input type="file" accept="image/*" /> `
-    }
-    focus() {
-        if (!this.value)
-            this.imageInput.click();
-    }
-    _onchange(e) {
-        e.stopPropagation();
-        this._dirtyValue = this.formatFromEditor(e);
-        this._onfocusout();
-    }
-    formatFromEditor(e) {
-        var _a;
-        // value가 image file object인지, image url인지 확인
-        const input = e.target;
-        if ((_a = input.files) === null || _a === void 0 ? void 0 : _a[0]) {
-            return input.files[0];
-        }
-        else {
-            return input.value;
-        }
-    }
-};
-__decorate([
-    query('input[type=file]')
-], ImageInput.prototype, "imageInput", void 0);
-ImageInput = __decorate([
-    customElement('ox-image-input')
-], ImageInput);
-export { ImageInput };
-//# sourceMappingURL=image-editor.js.map

package/dist/src/editors/image-editor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-editor.js","sourceRoot":"","sources":["../../../src/editors/image-editor.ts"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAGzC,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,qBAAqB,CAAA;QACrE,2BAA2B;QAC3B,mBAAmB;QACnB,mBAAmB;QACnB,6BAA6B;QAC7B,6CAA6C;QAC7C,sCAAsC;QACtC,gCAAgC;QAChC,mBAAmB;QACnB,gBAAgB;QAChB,eAAe;QACf,YAAY;QACZ,sBAAsB;QACtB,kDAAkD;QAClD,WAAW;QACX,qDAAqD;IACvD,CAAC;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;IAC1C,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QAC3C,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,gBAAgB,CAAC,CAAQ;;QACvB,6CAA6C;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,MAAA,KAAK,CAAC,KAAK,0CAAG,CAAC,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;SACtB;aAAM;YACL,OAAO,KAAK,CAAC,KAAK,CAAA;SACnB;IACH,CAAC;CACF,CAAA;AAxC4B;IAA1B,KAAK,CAAC,kBAAkB,CAAC;8CAAyB;AADxC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAyCtB;SAzCY,UAAU","sourcesContent":["import '@operato/input/ox-input-image.js'\n\nimport { html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { InputEditor } from './input-editors'\n\n@customElement('ox-image-input')\nexport class ImageInput extends InputEditor {\n  @query('input[type=file]') imageInput!: HTMLElement\n\n  get editorTemplate() {\n    return html` <ox-input-image .value=${this.value}></ox-input-image> `\n    // return html`${this.value\n    //     ? html`<span\n    //         ><button\n    //           @click=${() => {\n    //             this.imageInput.dispatchEvent(\n    //               new Event('change', {\n    //                 bubbles: true\n    //               })\n    //             )\n    //           }}\n    //         >\n    //           X</button\n    //         >${this.value.name || this.value}</span\n    //       >`\n    //     : ''} <input type=\"file\" accept=\"image/*\" /> `\n  }\n\n  focus() {\n    if (!this.value) this.imageInput.click()\n  }\n\n  _onchange(e: Event) {\n    e.stopPropagation()\n    this._dirtyValue = this.formatFromEditor(e)\n    this._onfocusout()\n  }\n\n  formatFromEditor(e: Event) {\n    // value가 image file object인지, image url인지 확인\n    const input = e.target as HTMLInputElement\n    if (input.files?.[0]) {\n      return input.files[0]\n    } else {\n      return input.value\n    }\n  }\n}\n"]}

package/dist/src/editors/input-editors copy.d.ts

@@ -1,75 +0,0 @@
-import { LitElement } from 'lit';
-import { DataGridField } from '../data-grid/data-grid-field';
-import { ColumnConfig, GristRecord } from '../types';
-export declare class InputEditor extends LitElement {
-    static styles: import("lit").CSSResult;
-    value?: any;
-    column: ColumnConfig;
-    record: GristRecord;
-    rowIndex?: number;
-    field?: DataGridField;
-    row?: number;
-    protected _dirtyValue?: any;
-    render(): import("lit-html").TemplateResult<1>;
-    get editor(): HTMLElement | null;
-    firstUpdated(): Promise<void>;
-    select(): void;
-    focus(): void;
-    formatForEditor(value: any): any;
-    formatFromEditor(e: Event): any;
-    _onfocusout(): void;
-    _onchange(e: Event): void;
-    _onclick(e: Event): void;
-    _ondblclick(e: Event): void;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class TextInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class EmailInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class TelInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class NumberInput extends InputEditor {
-    formatFromEditor(e: Event): number;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class PasswordInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class DateInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class MonthInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class WeekInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class TimeInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class DateTimeInput extends InputEditor {
-    formatForEditor(timestamp: any): string;
-    formatFromEditor(e: Event): number;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class ColorInput extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class CheckboxInput extends InputEditor {
-    formatFromEditor(e: Event): boolean;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}
-export declare class ImageInput extends InputEditor {
-    imageInput: HTMLElement;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-    focus(): void;
-    _onchange(e: Event): void;
-    formatFromEditor(e: Event): string | File;
-}
-export declare class Select extends InputEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}