@operato/data-grist 2.0.0-alpha.5 → 2.0.0-alpha.52

package/src/editors/ox-grist-editor-image.ts

@@ -12,17 +12,20 @@ export class OxGristEditorImage extends OxGristEditor {
 
   _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
+
+    // value가 image file object인지, image url인지 확인
     if (input.files?.[0]) {
-      return input.files[0]
+      this._dirtyValue = this.formatFromEditor(input.files[0])
     } else {
-      return input.value
+      this._dirtyValue = this.formatFromEditor(input.value)
     }
+
+    this._onfocusout()
+  }
+
+  formatFromEditor(value: any) {
+    return value
   }
 }

package/src/editors/ox-grist-editor-number.ts

@@ -1,20 +1,22 @@
 import { OxGristEditor } from './ox-grist-editor.js'
 import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { parseToNumberOrNull } from '@operato/utils'
 
 @customElement('ox-grist-editor-number')
 export class OxGristEditorNumber extends OxGristEditor {
-  formatFromEditor(e: Event) {
-    let value = (e.target as HTMLInputElement).value
+  get inlineEditable() {
+    return true
+  }
+
+  formatFromEditor(value: any) {
+    const parsed = parseToNumberOrNull(value) || null
 
-    switch (this.column.type) {
-      case 'float':
-        return Number.parseFloat(value)
-      case 'integer':
-        return Number.parseInt(value)
-      default:
-        return Number(value)
+    if (parsed !== null && this.column.type == 'integer') {
+      return Math.floor(parsed)
     }
+
+    return parsed
   }
 
   get editorTemplate() {

package/src/editors/ox-grist-editor-text.ts

@@ -4,6 +4,10 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-text')
 export class OxGristEditorText extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
   get editorTemplate() {
     return html` <input type="text" .value=${this.value} /> `
   }

package/src/editors/ox-grist-editor-textarea.ts

@@ -6,6 +6,10 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-textarea')
 export class OxGristEditorTextarea extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
   get editorTemplate() {
     return html` <ox-input-textarea .value=${this.value}></ox-input-textarea> `
   }

package/src/editors/ox-grist-editor.ts

@@ -4,7 +4,7 @@ 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'
-import { getDefaultValue } from '../value-generator'
+import { getDefaultValue } from '@operato/time-calculator'
 
 const STYLE = css`
   :host {
@@ -91,8 +91,8 @@ export class OxGristEditor extends LitElement {
     return this.renderRoot.firstElementChild as HTMLElement
   }
 
-  get directEditable() {
-    return true
+  get inlineEditable() {
+    return false
   }
 
   async firstUpdated() {
@@ -121,19 +121,21 @@ export class OxGristEditor extends LitElement {
       currentValue = getDefaultValue(defaultValue, this.record)
     }
 
+    this.value = this._dirtyValue = this.formatForEditor(currentValue)
+
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
-    const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    this.value = this._dirtyValue = this.field?.type === 'number' ? Number(editorValue) : editorValue
+    const valueWith = this.inlineEditable && this.field?.valueWith
+    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)
 
     requestAnimationFrame(() => {
       this.focus()
-      this.select()
+      !valueWith && this.select()
     })
   }
 
   select() {
     const editor = this.editor
-    if ((editor as HTMLInputElement)?.select && !this.field?.valueWithEdit) {
+    if ((editor as HTMLInputElement)?.select) {
       return (editor as HTMLInputElement).select()
     }
   }
@@ -149,8 +151,8 @@ export class OxGristEditor extends LitElement {
     return value == null ? '' : value
   }
 
-  formatFromEditor(e: Event): any {
-    return (e.target as HTMLInputElement).value
+  formatFromEditor(value: any): any {
+    return value
   }
 
   _onfocusout() {
@@ -180,7 +182,9 @@ export class OxGristEditor extends LitElement {
   _onchange(e: Event): void {
     e.stopPropagation()
 
-    this._dirtyValue = this.formatFromEditor(e)
+    const value = (e.target as any)?.value
+
+    this._dirtyValue = this.formatFromEditor(value)
   }
 
   _onkeydown(e: Event): void {}

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

@@ -2,16 +2,31 @@ import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 import { html } from 'lit-html'
 
+function formatDate(type: string, date: Date) {
+  var year = date.getFullYear()
+  var month = ('0' + (date.getMonth() + 1)).slice(-2)
+  var day = ('0' + date.getDate()).slice(-2)
+  var hours = ('0' + date.getHours()).slice(-2)
+  var minutes = ('0' + date.getMinutes()).slice(-2)
+
+  var formatDate = year + '-' + month + '-' + day
+
+  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes
+}
+
 export const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {
   const filter = column.filter as FilterConfigObject
 
-  const [from, to] = value instanceof Array ? value : []
+  var [from, to] = value instanceof Array ? value : []
 
   var type: any = filter?.type || column.type
   if (type === 'datetime') {
     type = 'datetime-local'
   }
 
+  from = formatDate(type, new Date(from))
+  to = formatDate(type, new Date(to))
+
   return html`
     <input
       name=${column.name}

package/src/filters/filters-form.ts

@@ -6,6 +6,8 @@ import '@operato/input/ox-input-search.js'
 import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'
 import { customElement, property, queryAsync, state } from 'lit/decorators.js'
 
+import { getDefaultValue } from '@operato/time-calculator'
+
 import { FilterConfigObject } from '..'
 import { DataGrist } from '../data-grist'
 import { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'
@@ -72,7 +74,6 @@ export class FiltersForm extends LitElement {
 
     if (grist) {
       this.config = grist.compiledConfig
-      this.value = grist.filters || []
 
       grist.addEventListener('config-change', (e: Event) => {
         this.config = (e as CustomEvent).detail
@@ -102,6 +103,17 @@ export class FiltersForm extends LitElement {
     }
   }
 
+  buildDefaultValue(operator: string, defaultValue: any) {
+    if (defaultValue === undefined) {
+      return
+    }
+    if (operator == 'between') {
+      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
+    } else {
+      return getDefaultValue(defaultValue, this)
+    }
+  }
+
   updated(changes: PropertyValues<this>) {
     if (changes.has('config')) {
       const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
@@ -114,6 +126,15 @@ export class FiltersForm extends LitElement {
         return filter!.operator === 'search'
       })
 
+      const grist = this.closest('ox-grist') as DataGrist
+
+      this.value = (grist.filters || []).map(filter => {
+        return {
+          ...filter,
+          value: this.buildDefaultValue(filter!.operator, filter!.value)
+        }
+      })
+
       this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0
     }
   }
@@ -160,7 +181,9 @@ export class FiltersForm extends LitElement {
                   ? 'text'
                   : type
               )[idx]
-              const value = this.value?.find(filter => filter.name == name)?.value
+              const value =
+                this.value?.find(filter => filter.name == name)?.value ??
+                this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)
 
               if (!renderer) {
                 return html``

package/src/handlers/contextmenu-tree-mutation.ts

@@ -9,7 +9,7 @@ function dispatchEvent(field: DataGridField, event: string) {
     new CustomEvent(event, {
       bubbles: true,
       composed: true,
-      detail: field
+      detail: field.record
     })
   )
 }
@@ -54,24 +54,6 @@ export const ContextMenuTreeMutation = function (
         <mwc-icon slot="icon">playlist_add</mwc-icon>
       </ox-popup-menuitem>
 
-      <ox-popup-menuitem
-        label="move up"
-        @click=${() => {
-          dispatchEvent(field, 'move-up')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_upward</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move down"
-        @click=${() => {
-          dispatchEvent(field, 'move-down')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_downward</mwc-icon>
-      </ox-popup-menuitem>
-
       <div separator></div>
 
       <ox-popup-menuitem

package/src/index.ts

@@ -12,6 +12,5 @@ export * from './gutters'
 export * from './filters'
 export * from './sorters/sorters-control'
 export * from './record-view'
-export * from './value-generator'
 
 export * from './utils/list-param'

package/src/types.ts

@@ -427,15 +427,6 @@ export type HeaderConfig = {
  */
 export type HeaderRenderer = (column: ColumnConfig) => any
 
-/**
- * Function type for generating values.
- *
- * @callback ValueGeneratorFn
- * @param {...any} args - The arguments used for generating a value.
- * @returns {*} - The generated value.
- */
-export type ValueGeneratorFn = (...args: any[]) => any
-
 /**
  * Configuration for specifying default values for fields in a record.
  * Default values can be set using predefined value generator functions or custom user-defined functions.
@@ -627,6 +618,7 @@ export type ImexConfig = {
 export type RowsConfig = {
   accumulator?: boolean
   appendable: boolean
+  editable: boolean
   insertable: boolean
   selectable?: RowSelectableConfig
   groups: GroupConfig[]

package/stories/accumulator.stories.ts

@@ -79,7 +79,8 @@ const config = {
       },
       filter: 'search',
       sortable: true,
-      width: 120
+      width: 120,
+      fixed: true
     },
     {
       type: 'string',
@@ -105,6 +106,10 @@ const config = {
         align: 'right'
       },
       accumulator: 'avg',
+      // accumulator: {
+      //   type: 'avg',
+      //   tag: true
+      // },
       sortable: true,
       width: 130
     },
@@ -115,7 +120,10 @@ const config = {
       header: 'accval2',
       record: {
         editable: true,
-        align: 'right'
+        align: 'right',
+        renderer: (value: any, column: any, record: any) => {
+          return value && Intl.NumberFormat('en-US').format(value)
+        }
       },
       accumulator: {
         type: 'sum',
@@ -162,9 +170,6 @@ const config = {
     {
       name: 'name',
       desc: true
-    },
-    {
-      name: 'email'
     }
   ],
   pagination: {

package/stories/dynamic-editable.stories.ts

@@ -24,6 +24,7 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
           description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
           number: idx,
+          float: 1.3,
           date: '2023-09-20',
           routing: {
             id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
@@ -101,7 +102,8 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
           editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
             return record?.name !== 'heartyoh-3'
           }
-        }
+        },
+        width: 40
       },
       {
         type: 'number',
@@ -117,6 +119,15 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         },
         width: 80
       },
+      {
+        type: 'float',
+        name: 'float',
+        header: 'float',
+        record: {
+          editable: true
+        },
+        width: 80
+      },
       {
         type: 'date',
         name: 'date',
@@ -182,102 +193,101 @@ interface ArgTypes {
   headerFilter: boolean
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
-    rel="stylesheet"
-  />
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-  <style>
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
+    <style>
+      [slot='headroom'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: var(--padding-default) var(--padding-wide);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
 
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--margin-default);
-      padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
-      position: relative;
-      color: var(--secondary-color);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
-
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+        --mdc-icon-size: 24px;
+      }
+      #sorters mwc-icon,
+      #modes mwc-icon {
+        --mdc-icon-size: 18px;
+      }
+      #sorters {
+        margin-left: auto;
+        margin-right: var(--margin-default);
+        padding-left: var(--padding-narrow);
+        border-bottom: var(--border-dark-color);
+        position: relative;
+        color: var(--secondary-color);
+        font-size: var(--fontsize-default);
+        user-select: none;
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
 
-  <ox-grist
-    .config=${buildConfig({ headerFilter })}
-    mode="GRID"
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-    @field-change="${(e: any) => {
-      console.log(e.detail.record.name, e.detail.record.number)
-    }}"
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form></ox-filters-form>
-      </div>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
 
-      <div id="sorters">
-        Sort
-        <mwc-icon
-          @click=${(e: Event) => {
-            const target = e.currentTarget as HTMLElement
-            ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-              right: 0,
-              top: target.offsetTop + target.offsetHeight
-            })
-          }}
-          >expand_more</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
-      </div>
+        #modes {
+          display: none;
+        }
+      }
+    </style>
 
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+      @field-change=${(e: any) => {
+        const { name, number, chk } = e.detail.record
+        console.log(name, number, chk)
+      }}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+
+        <div id="sorters">
+          Sort
+          <mwc-icon
+            @click=${(e: Event) => {
+              const target = e.currentTarget as HTMLElement
+              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                right: 0,
+                top: target.offsetTop + target.offsetHeight
+              })
+            }}
+            >expand_more</mwc-icon
+          >
+          <ox-popup id="sorter-control">
+            <ox-sorters-control> </ox-sorters-control>
+          </ox-popup>
+        </div>
+
+        <ox-record-creator id="add" light-popup>
+          <button><mwc-icon>add</mwc-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/fixed-column.stories.ts

@@ -144,8 +144,7 @@ const config = {
       },
       filter: 'search',
       sortable: true,
-      width: 120,
-      fixed: true
+      width: 120
     },
     {
       type: 'string',

package/stories/grist-modes.stories.ts

@@ -237,7 +237,10 @@ const config = {
         editable: true,
         defaultValue: 10000.1
       },
-      filter: 'between',
+      filter: {
+        operator: 'between',
+        value: [1, 100]
+      },
       sortable: true,
       width: 50
     },
@@ -266,7 +269,25 @@ const config = {
           name: 'now'
         }
       },
-      filter: 'between',
+      filter: {
+        operator: 'between',
+        type: 'datetime',
+        value: [
+          {
+            name: 'today',
+            params: {
+              type: 'datetime'
+            }
+          },
+          {
+            name: 'now',
+            params: {
+              type: 'datetime',
+              relativeDays: 1
+            }
+          }
+        ]
+      },
       sortable: true,
       width: 180
     },

package/themes/grist-theme.css

@@ -41,7 +41,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: 0 0 0 var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);

package/dist/src/value-generator/date-generator.d.ts

@@ -1,6 +0,0 @@
-export type RelativeDateParams = {
-    relativeDate?: number;
-    timeZone?: string;
-    format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions;
-};
-export declare const getRelativeDate: (params?: RelativeDateParams) => Date | number | string;

package/dist/src/value-generator/date-generator.js

@@ -1,30 +0,0 @@
-export const getRelativeDate = (params = {}) => {
-    const { relativeDate = 0, timeZone, format } = params;
-    const relativeSeconds = relativeDate * 24 * 60 * 60;
-    const now = new Date();
-    let currentDate;
-    if (timeZone) {
-        const options = { timeZone };
-        const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0];
-        currentDate = new Date(currentDateISOString);
-    }
-    else {
-        currentDate = now;
-    }
-    const startOfDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
-    const targetTime = startOfDay.getTime() + relativeSeconds * 1000;
-    if (format === 'date') {
-        return new Date(targetTime);
-    }
-    else if (format === 'timestamp') {
-        return targetTime;
-    }
-    else if (format) {
-        const formatter = new Intl.DateTimeFormat(undefined, format);
-        return formatter.format(new Date(targetTime));
-    }
-    else {
-        return new Date(targetTime);
-    }
-};
-//# sourceMappingURL=date-generator.js.map