@operato/data-grist 2.0.0-alpha.102 → 2.0.0-alpha.104

package/docs/default-value/value-generator/hour-time-generator.md

@@ -30,14 +30,47 @@ function getRelativeHourTime(params: RelativeHourTimeParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeHourTime = getRelativeHourTime({
   relativeHour: 2,
   relativeSeconds: 120,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeHourTime)
 ```
 
+```typescript
+/* text format style */
+const relativeHourTime = getRelativeHourTime({
+  relativeHour: 2,
+  relativeSeconds: 120,
+  timeZone: 'Asia/Seoul',
+  format: 'h:mm:ss'
+})
+
+console.log(relativeHourTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeHourTime = getRelativeHourTime({
+  relativeHour: 2,
+  relativeSeconds: 120,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeHourTime)
+```
+
 이 코드는 현재 시간으로부터 2시간 후와 2분 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/minute-time-generator.md

@@ -30,14 +30,47 @@ function getRelativeMinuteTime(params: RelativeMinuteTimeParams = {}): string |
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeMinuteTime = getRelativeMinuteTime({
   relativeMinutes: 15,
   relativeSeconds: 30,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeMinuteTime)
 ```
 
+```typescript
+/* text format style */
+const relativeMinuteTime = getRelativeMinuteTime({
+  relativeMinutes: 15,
+  relativeSeconds: 30,
+  timeZone: 'Asia/Seoul',
+  format: 'mm:ss'
+})
+
+console.log(relativeMinuteTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeMinuteTime = getRelativeMinuteTime({
+  relativeMinutes: 15,
+  relativeSeconds: 30,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeMinuteTime)
+```
+
 이 코드는 현재 시간으로부터 15분 30초 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/month-date-generator.md

@@ -30,10 +30,12 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeMonthDate = getRelativeMonthDate({
   relativeMonths: 2,
   relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 

package/docs/default-value/value-generator/now-generator.md

@@ -28,12 +28,41 @@ function getCurrentTime(
 ## 예제
 
 ```typescript
+/* get Date() object */
 const currentTime = getCurrentTime({
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(currentTime)
 ```
 
+```typescript
+/* text format style */
+const relativeDate = getCurrentTime({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeDate = getCurrentTime({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeDate)
+```
+
 이 코드는 현재 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/time-generator.md

@@ -28,13 +28,44 @@ function getRelativeTime(params: RelativeTimeParams = {}): string | number | Dat
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeTime = getRelativeTime({
   relativeSeconds: 3600,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeTime)
 ```
 
+```typescript
+/* text format style */
+const relativeTime = getRelativeTime({
+  relativeSeconds: 3600,
+  timeZone: 'Asia/Seoul',
+  format: 'hh:mm:ss'
+})
+
+console.log(relativeTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeTime = getRelativeTime({
+  relativeSeconds: 3600,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeTime)
+```
+
 이 코드는 현재 시간으로부터 1시간 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/today-generator.md

@@ -28,12 +28,41 @@ function getToday(
 ## 예제
 
 ```typescript
+/* get Date() object */
 const todayDate = getToday({
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(todayDate)
 ```
 
+```typescript
+/* text format style */
+const relativeDate = getToday({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeDate = getToday({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeDate)
+```
+
 이 코드는 오늘의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/week-date-generator.md

@@ -30,14 +30,45 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeWeekDate = getRelativeWeekDate({
   relativeWeeks: 2,
   relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeWeekDate)
 ```
 
+```typescript
+/* text format style */
+const relativeWeekDate = getRelativeWeekDate({
+  relativeWeeks: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeWeekDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeWeekDate = getRelativeWeekDate({
+  relativeWeeks: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeWeekDate)
+```
+
 이 코드는 현재 시간으로부터 2주 후와 3일 후의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/year-date-generator.md

@@ -30,14 +30,45 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeYearDate = getRelativeYearDate({
   relativeYears: 2,
   relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeYearDate)
 ```
 
+```typescript
+/* text format style */
+const relativeYearDate = getRelativeYearDate({
+  relativeYears: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeYearDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeYearDate = getRelativeYearDate({
+  relativeYears: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeYearDate)
+```
+
 이 코드는 현재 시간으로부터 2년 후와 3일 후의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.102",
+  "version": "2.0.0-alpha.104",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
     "@operato/popup": "^2.0.0-alpha.102",
     "@operato/pull-to-refresh": "^2.0.0-alpha.57",
     "@operato/styles": "^2.0.0-alpha.102",
-    "@operato/time-calculator": "^2.0.0-alpha.57",
+    "@operato/time-calculator": "^2.0.0-alpha.104",
     "@operato/utils": "^2.0.0-alpha.68",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
@@ -101,5 +101,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2c56687a2c8170f73a8bcbfbf916386c0c234f1f"
+  "gitHead": "804d35e90d66abb8d769a19f4787b440873ecd66"
 }

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

@@ -1,6 +1,38 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { until } from 'lit/directives/until.js'
+
+import { OxGristEditor } from './ox-grist-editor.js'
+import { SelectOption, SelectOptionObject } from '../types.js'
+
+function buildOptions(options: SelectOption[], value: any) {
+  const selectOptionObjects = options.map(option => {
+    switch (typeof option) {
+      case 'string':
+        return {
+          display: option,
+          value: option
+        }
+      case 'object':
+        return {
+          display: option.display || option.name,
+          value: option.value
+        }
+      default:
+        return option
+    }
+  }) as SelectOptionObject[]
+
+  return html`
+    <select>
+      ${selectOptionObjects.map(
+        (option: any) => html`
+          <option ?selected=${option.value == value} value=${option.value}>${option.display}</option>
+        `
+      )}
+    </select>
+  `
+}
 
 @customElement('ox-grist-editor-select')
 export class OxGristEditorSelect extends OxGristEditor {
@@ -10,33 +42,14 @@ export class OxGristEditorSelect extends OxGristEditor {
 
     if (typeof options == 'function') {
       options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)
-    }
 
-    options = options.map((option: any) => {
-      switch (typeof option) {
-        case 'string':
-          return {
-            display: option,
-            value: option
-          }
-        case 'object':
-          return {
-            display: option.display,
-            value: option.value
-          }
-        default:
-          return option
+      if (options instanceof Promise) {
+        return html`${until(options.then(options => buildOptions(options, this.value)))}`
+      } else {
+        return buildOptions((options || []) as SelectOption[], rowOptionField.display || this.value)
       }
-    })
-
-    return html`
-      <select>
-        ${options.map(
-          (option: any) => html`
-            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
-          `
-        )}
-      </select>
-    `
+    } else {
+      return buildOptions((options || []) as SelectOption[], this.value)
+    }
   }
 }

package/src/filters/filter-select.ts

@@ -1,26 +1,14 @@
 import '@operato/input/ox-checkbox.js'
 
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
+import { html } from 'lit'
+import { until } from 'lit/directives/until.js'
 
-import { html } from 'lit-html'
+import { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types'
+import { OxFiltersForm } from './filters-form'
+import { DataGridHeader } from '../data-grid/data-grid-header'
 
-export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
-  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
-  const filter = column.filter as FilterConfigObject
-  const operator = filter?.operator
-
-  var options = filter?.options || column.record.options || []
-
-  if (typeof options === 'function') {
-    if (!filter?.options) {
-      console.warn(
-        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
-      )
-    }
-    options = options.call(column, owner)
-  }
-
-  options = options.map((option: any) => {
+function buildOptions(options: SelectOption[], operator?: FilterOperator) {
+  const selectOptionObjects = options.map(option => {
     switch (typeof option) {
       case 'string':
         return {
@@ -29,27 +17,52 @@ export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
         }
       case 'object':
         return {
-          display: option.display,
+          display: option.display || option.name,
           value: option.value
         }
       default:
         return option
     }
-  })
+  }) as SelectOptionObject[]
 
   return operator === 'in'
     ? html`
-        ${options
-          ?.filter((option: { display: string; value: any }) => !!option)
+        ${selectOptionObjects
+          ?.filter(option => !!option)
           .map(
-            (option: { display: string; value: any }) =>
-              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `
           )}
       `
     : html`
-        ${options?.map(
-          (option: { display: string; value: any }) =>
-            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
+        ${selectOptionObjects?.map(
+          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `
         )}
       `
 }
+
+export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
+  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+  const filter = column.filter as FilterConfigObject
+  const operator = filter?.operator
+  const form = owner as OxFiltersForm | DataGridHeader
+
+  var options = filter?.options || column.record.options || []
+
+  if (typeof options === 'function') {
+    if (!filter?.options) {
+      console.warn(
+        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
+      )
+    }
+
+    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner)
+
+    if (options instanceof Promise) {
+      return html`${until(options.then(options => buildOptions(options, operator)))}`
+    } else {
+      return buildOptions((options || []) as SelectOption[], operator)
+    }
+  } else {
+    return buildOptions((options || []) as SelectOption[], operator)
+  }
+}

package/src/filters/filters-form.ts

@@ -23,7 +23,7 @@ export type QueryFilter = {
 }
 
 @customElement('ox-filters-form')
-export class FiltersForm extends LitElement {
+export class OxFiltersForm extends LitElement {
   static styles = [
     FilterStyles,
     css`
@@ -68,6 +68,9 @@ export class FiltersForm extends LitElement {
 
   @queryAsync('form') form!: HTMLFormElement
 
+  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
+  private objectValue?: object
+
   connectedCallback(): void {
     super.connectedCallback()
 
@@ -90,21 +93,42 @@ export class FiltersForm extends LitElement {
       })
 
       this.renderRoot.addEventListener('change', async (e: Event) => {
-        this.dispatchEvent(
-          new CustomEvent('fetch-params-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              filters: await this.getQueryFilters(),
-              from: 'filters-form'
+        const { target, detail: value } = e as CustomEvent
+        const name = (target as HTMLInputElement).name
+        const { filter } = this.filterColumns.find(filter => filter.name == name) || {}
+
+        if (this.autoUpdateTargetsOnChange[name]) {
+          /* 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함. */
+          ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
+            const target = this.renderRoot.querySelector(`[name='${name}']`)
+            if (target) {
+              ;(target as HTMLInputElement).value = ''
             }
           })
-        )
+
+          await this.updateObjectValues()
+          this.requestUpdate()
+        }
+
+        const onchange = typeof filter == 'object' ? filter.onchange : null
+        const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
+
+        keepGoing &&
+          this.dispatchEvent(
+            new CustomEvent('fetch-params-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                filters: await this.getQueryFilters(),
+                from: 'filters-form'
+              }
+            })
+          )
       })
     }
   }
 
-  buildDefaultValue(operator: string, defaultValue: any) {
+  buildDefaultValue(operator: FilterOperator, defaultValue: any) {
     if (defaultValue === undefined) {
       return
     }
@@ -137,6 +161,22 @@ export class FiltersForm extends LitElement {
       })
 
       this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0
+
+      this.autoUpdateTargetsOnChange = {}
+      this.filterColumns
+        ?.filter(({ filter }) => {
+          return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0
+        })
+        .map(({ name, filter }) => {
+          const boundTo = (filter as FilterConfigObject).boundTo
+
+          boundTo!.forEach(to => {
+            const origin = this.autoUpdateTargetsOnChange[to] || []
+            if (name && !origin.includes(name)) {
+              this.autoUpdateTargetsOnChange[to] = [...origin, name]
+            }
+          })
+        })
     }
   }
 
@@ -319,4 +359,28 @@ export class FiltersForm extends LitElement {
     const input = this.renderRoot.querySelector(`form [name="${name}"]`) as HTMLInputElement
     return input?.value
   }
+
+  private async updateObjectValues() {
+    const form = await this.form
+    if (!form) return []
+
+    const formData = new FormData(form)
+
+    const object = {} as any
+    formData.forEach((value, key) => {
+      const prev = object[key]
+
+      if (key in object) {
+        object[key] = prev instanceof Array ? [...prev, value] : [prev, value]
+      } else {
+        object[key] = value
+      }
+    })
+
+    this.objectValue = object
+  }
+
+  public getFormObjectValue() {
+    return this.objectValue
+  }
 }