@operato/form 2.0.0-alpha.0 → 2.0.0-alpha.23

package/src/filters/ox-filters-form-base.ts

@@ -7,9 +7,11 @@ import json5 from 'json5'
 import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property, queryAsync } from 'lit/decorators.js'
 
+import { getDefaultValue } from '@operato/time-calculator'
+
 import { FilterStyles } from './filter-styles.js'
 import { getFilterRenderer } from './registry.js'
-import { FilterConfig, FilterOperator, FilterValue } from './types.js'
+import { FilterConfig, FilterOperator, FilterValue } from '../types.js'
 
 export type QueryFilterRangeValue = [from: number, to: number]
 
@@ -20,7 +22,7 @@ export type QueryFilter = {
 }
 
 @customElement('ox-filters-form-base')
-export class FiltersFormBase extends LitElement {
+export class OxFiltersFormBase extends LitElement {
   static styles = [
     FilterStyles,
     css`
@@ -53,8 +55,8 @@ export class FiltersFormBase extends LitElement {
     `
   ]
 
-  @property({ type: Object }) value: FilterValue[] = []
-  @property({ type: Object }) filters: FilterConfig[] = []
+  @property({ type: Array }) value: FilterValue[] = []
+  @property({ type: Array }) filters: FilterConfig[] = []
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
   @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
 
@@ -80,6 +82,17 @@ export class FiltersFormBase 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)
+    }
+  }
+
   render(): TemplateResult {
     return html`
       <form
@@ -88,14 +101,16 @@ export class FiltersFormBase extends LitElement {
         }}
       >
         ${this.filters.map((filter: FilterConfig) => {
-          const { name, label, type, operator } = filter
+          const { name, label, type, operator, value: defaultValue } = filter
           const idx = operator === 'between' ? 1 : 0
           const renderer = getFilterRenderer(
             operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
               ? '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!, defaultValue)
 
           if (!renderer) {
             return html``

package/src/filters/registry.ts

@@ -4,7 +4,7 @@ import { FilterInput } from './filter-input.js'
 import { FilterRangeDate } from './filter-range-date.js'
 import { FilterRangeNumber } from './filter-range-number.js'
 import { FilterSelect } from './filter-select.js'
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 var RENDERERS: {
   [name: string]: FilterSelectRenderer[]

package/src/{filters/types.ts → types.ts}

@@ -32,6 +32,15 @@ export type FilterConfig = {
   type: string
   operator?: FilterOperator
   options?: { [key: string]: any }
+  value?:
+    | string
+    | number
+    | boolean
+    | { name: string; [params: string]: any }
+    | string[]
+    | number[]
+    | { name: string; [params: string]: any }[]
+    | undefined
 }
 
 export type FilterValue = {

package/stories/ox-filter-form-base.stories.ts

@@ -1,6 +1,7 @@
 import '../src/filters/ox-filters-form-base.js'
 
 import { html, TemplateResult } from 'lit'
+import { FilterConfig, FilterValue } from '../src/index.js'
 
 export default {
   title: 'ox-filters-form-base',
@@ -19,8 +20,8 @@ interface Story<T> {
 }
 
 interface ArgTypes {
-  value?: object
-  filters?: object
+  value?: FilterValue[]
+  filters?: FilterConfig[]
   urlParamsSensitive: boolean
 }
 
@@ -34,8 +35,8 @@ const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTy
   </style>
 
   <ox-filters-form-base
-    .value=${value}
-    .filters=${filters}
+    .value=${value!}
+    .filters=${filters!}
     ?url-params-sensitive=${urlParamsSensitive}
     @filters-change=${(e: CustomEvent) => {
       console.log('filters changed', e.detail)
@@ -51,13 +52,15 @@ Regular.args = {
       name: 'test',
       type: 'string',
       label: 'name',
-      operator: 'eq'
+      operator: 'eq',
+      value: 'No Name'
     },
     {
       name: 'active',
       type: 'boolean',
       label: 'active',
-      operator: 'eq'
+      operator: 'eq',
+      value: true
     },
     {
       name: 'sss',
@@ -89,9 +92,13 @@ Regular.args = {
     },
     {
       name: 'date-range',
-      type: 'datetime',
+      type: 'date',
       label: 'date',
-      operator: 'between'
+      operator: 'between',
+      value: [
+        { name: 'week', params: { relativeWeeks: -1 } },
+        { name: 'today', params: { relativeDays: +1 } }
+      ]
     }
   ]
 }

package/dist/src/filters/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/filters/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfig = {\n  name: string\n  label: string\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n}\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\nexport type FilterSelectRenderer = (\n  filter: FilterConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n"]}