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

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',
+              relativeDate: 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
-  }
-}