@operato/data-grist 2.0.0-alpha.20 → 2.0.0-alpha.23

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

@@ -14,7 +14,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 
 - `relativeYears?: number`: 상대적인 연도를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 연도 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3년 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 연도를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 ```typescript
 const relativeYearDate = getRelativeYearDate({
   relativeYears: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.20",
+  "version": "2.0.0-alpha.23",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -61,6 +61,7 @@
     "@operato/popup": "^2.0.0-alpha.9",
     "@operato/pull-to-refresh": "^2.0.0-alpha.0",
     "@operato/styles": "^2.0.0-alpha.0",
+    "@operato/time-calculator": "^2.0.0-alpha.23",
     "@operato/utils": "^2.0.0-alpha.8",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
@@ -100,5 +101,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "942ad6bf3a182a0412bc01473691ff221f419d5d"
+  "gitHead": "a8741296e49c13e6e3fd2894e8bd1618e72bd558"
 }

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'
 import { parseToNumberOrNull } from '@operato/utils'
 
 const STYLE = css`

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/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.

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/src/value-generator/date-generator.ts

@@ -1,35 +0,0 @@
-export type RelativeDateParams = {
-  relativeDate?: number
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-}
-
-export const getRelativeDate = (params: RelativeDateParams = {}): Date | number | string => {
-  const { relativeDate = 0, timeZone, format } = params
-  const relativeSeconds = relativeDate * 24 * 60 * 60
-
-  const now = new Date()
-  let currentDate: Date
-
-  if (timeZone) {
-    const options: Intl.DateTimeFormatOptions = { 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)
-  }
-}

package/src/value-generator/hour-time-generator.ts

@@ -1,43 +0,0 @@
-export type RelativeHourTimeParams = {
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-  relativeHour?: number
-  relativeSeconds?: number
-}
-
-export const getRelativeHourTime = (params: RelativeHourTimeParams = {}): Date | number | string => {
-  const { relativeHour = 0, relativeSeconds = 0, timeZone, format } = params
-
-  const now = new Date()
-  let currentDate: Date
-
-  if (timeZone) {
-    const options: Intl.DateTimeFormatOptions = { timeZone }
-    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]
-    currentDate = new Date(currentDateISOString)
-  } else {
-    currentDate = now
-  }
-
-  const startOfHour = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth(),
-    currentDate.getDate(),
-    currentDate.getHours(),
-    0,
-    0,
-    0
-  )
-  const targetTime = startOfHour.getTime() + relativeHour * 60 * 60 * 1000 + 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)
-  }
-}

package/src/value-generator/index.ts

@@ -1 +0,0 @@
-export * from './registry'

package/src/value-generator/minute-time-generator.ts

@@ -1,43 +0,0 @@
-export type RelativeMinuteTimeParams = {
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-  relativeMinutes?: number
-  relativeSeconds?: number
-}
-
-export const getRelativeMinuteTime = (params: RelativeMinuteTimeParams = {}): Date | number | string => {
-  const { relativeMinutes = 0, relativeSeconds = 0, timeZone, format } = params
-
-  const now = new Date()
-  let currentDate: Date
-
-  if (timeZone) {
-    const options: Intl.DateTimeFormatOptions = { timeZone }
-    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]
-    currentDate = new Date(currentDateISOString)
-  } else {
-    currentDate = now
-  }
-
-  const startOfMinute = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth(),
-    currentDate.getDate(),
-    currentDate.getHours(),
-    currentDate.getMinutes(),
-    0,
-    0
-  )
-  const targetTime = startOfMinute.getTime() + relativeMinutes * 60 * 1000 + 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)
-  }
-}

package/src/value-generator/month-date-generator.ts

@@ -1,38 +0,0 @@
-export type RelativeMonthDateParams = {
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-  relativeMonths?: number
-  relativeDates?: number
-}
-
-export const getRelativeMonthDate = (params: RelativeMonthDateParams = {}): Date | number | string => {
-  const { relativeMonths = 0, relativeDates = 0, timeZone, format } = params
-
-  const now = new Date()
-  let currentDate: Date
-
-  if (timeZone) {
-    const options: Intl.DateTimeFormatOptions = { timeZone }
-    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]
-    currentDate = new Date(currentDateISOString)
-  } else {
-    currentDate = now
-  }
-
-  const targetMonth = currentDate.getMonth() + relativeMonths
-  const targetYear = currentDate.getFullYear() + Math.floor(targetMonth / 12)
-  const targetMonthRemainder = targetMonth % 12
-
-  const targetDate = new Date(targetYear, targetMonthRemainder, currentDate.getDate() + relativeDates)
-
-  if (format === 'date') {
-    return targetDate
-  } else if (format === 'timestamp') {
-    return targetDate.getTime()
-  } else if (format) {
-    const formatter = new Intl.DateTimeFormat(undefined, format)
-    return formatter.format(targetDate)
-  } else {
-    return targetDate
-  }
-}

package/src/value-generator/now-generator.ts

@@ -1,10 +0,0 @@
-import { getRelativeTime } from './time-generator'
-
-export const getCurrentTime = (
-  params: { timeZone?: string; format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions } = {}
-): Date | number | string => {
-  return getRelativeTime({
-    ...params,
-    relativeSeconds: 0
-  })
-}

package/src/value-generator/registry.ts

@@ -1,58 +0,0 @@
-import { NOOP } from '../const'
-import { ValueGeneratorFn } from '../types'
-
-import { getCurrentTime } from './now-generator'
-import { getToday } from './today-generator'
-import { getRelativeDate } from './date-generator'
-import { getRelativeWeekDate } from './week-date-generator'
-import { getRelativeMonthDate } from './month-date-generator'
-import { getRelativeYearDate } from './year-date-generator'
-import { getRelativeTime } from './time-generator'
-import { getRelativeMinuteTime } from './minute-time-generator'
-import { getRelativeHourTime } from './hour-time-generator'
-
-var VALUE_GENERATORS: { [name: string]: ValueGeneratorFn } = {
-  now: getCurrentTime,
-  today: getToday,
-  date: getRelativeDate,
-  time: getRelativeTime,
-  getCurrentTime,
-  getToday,
-  getRelativeDate,
-  getRelativeWeekDate,
-  getRelativeMonthDate,
-  getRelativeYearDate,
-  getRelativeMinuteTime,
-  getRelativeHourTime
-}
-
-export function registerValueGenerator(name: string, generator: ValueGeneratorFn) {
-  VALUE_GENERATORS[name] = generator
-}
-
-export function unregisterValueGenerator(name: string) {
-  delete VALUE_GENERATORS[name]
-}
-
-export function getValueGenerators() {
-  return { ...VALUE_GENERATORS }
-}
-
-export function getValueGenerator(name: string) {
-  return VALUE_GENERATORS[name] || NOOP
-}
-
-export function getDefaultValue(parameter: { name: string; params?: any[] } | Function | any, binder?: any) {
-  if (typeof parameter == 'function') {
-    return parameter.call(binder || null)
-  } else if (typeof parameter == 'object') {
-    const { name, params } = parameter
-    const generator = getValueGenerator(name)
-
-    if (generator !== NOOP) {
-      return generator.call(binder || null, params)
-    }
-  }
-
-  return parameter
-}

package/src/value-generator/time-generator.ts

@@ -1,33 +0,0 @@
-export type RelativeTimeParams = {
-  relativeSeconds?: number
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-}
-
-export const getRelativeTime = (params: RelativeTimeParams = {}): string | number | Date => {
-  const { relativeSeconds = 0, timeZone, format } = params
-
-  const now = new Date()
-
-  let currentDate: Date
-  if (timeZone) {
-    const options = { timeZone }
-    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]
-    currentDate = new Date(currentDateISOString)
-  } else {
-    currentDate = now
-  }
-
-  const targetTime = currentDate.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 targetTime
-  }
-}

package/src/value-generator/today-generator.ts

@@ -1,10 +0,0 @@
-import { getRelativeDate } from './date-generator'
-
-export const getToday = (
-  params: { timeZone?: string; format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions } = {}
-): Date | number | string => {
-  return getRelativeDate({
-    ...params,
-    relativeDate: 0
-  })
-}

package/src/value-generator/week-date-generator.ts

@@ -1,40 +0,0 @@
-export type RelativeWeekDateParams = {
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-  relativeWeeks?: number
-  relativeDates?: number
-}
-
-export const getRelativeWeekDate = (params: RelativeWeekDateParams = {}): Date | number | string => {
-  const { relativeWeeks = 0, relativeDates = 0, timeZone, format } = params
-
-  const now = new Date()
-  let currentDate: Date
-
-  if (timeZone) {
-    const options: Intl.DateTimeFormatOptions = { timeZone }
-    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]
-    currentDate = new Date(currentDateISOString)
-  } else {
-    currentDate = now
-  }
-
-  const startOfWeek = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth(),
-    currentDate.getDate() - currentDate.getDay() + 1
-  )
-  const targetDate =
-    startOfWeek.getTime() + relativeWeeks * 7 * 24 * 60 * 60 * 1000 + relativeDates * 24 * 60 * 60 * 1000
-
-  if (format === 'date') {
-    return new Date(targetDate)
-  } else if (format === 'timestamp') {
-    return targetDate
-  } else if (format) {
-    const formatter = new Intl.DateTimeFormat(undefined, format)
-    return formatter.format(new Date(targetDate))
-  } else {
-    return targetDate
-  }
-}

package/src/value-generator/year-date-generator.ts

@@ -1,36 +0,0 @@
-export type RelativeYearDateParams = {
-  timeZone?: string
-  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions
-  relativeYears?: number
-  relativeDates?: number
-}
-
-export const getRelativeYearDate = (params: RelativeYearDateParams = {}): Date | number | string => {
-  const { relativeYears = 0, relativeDates = 0, timeZone, format } = params
-
-  const now = new Date()
-  let currentDate: Date
-
-  if (timeZone) {
-    const options: Intl.DateTimeFormatOptions = { timeZone }
-    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]
-    currentDate = new Date(currentDateISOString)
-  } else {
-    currentDate = now
-  }
-
-  const targetYear = currentDate.getFullYear() + relativeYears
-
-  const targetDate = new Date(targetYear, currentDate.getMonth(), currentDate.getDate() + relativeDates)
-
-  if (format === 'date') {
-    return targetDate
-  } else if (format === 'timestamp') {
-    return targetDate.getTime()
-  } else if (format) {
-    const formatter = new Intl.DateTimeFormat(undefined, format)
-    return formatter.format(targetDate)
-  } else {
-    return targetDate
-  }
-}