@operato/form 2.0.0-alpha.127 → 2.0.0-alpha.133

package/src/filters/filter-styles.ts

@@ -80,15 +80,29 @@ export const FilterStyles = css`
       --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
-    input[from],
-    input[to] {
-      max-width: 44%;
+    ox-input-barcode {
+      max-width: unset;
+      flex: 1;
     }
 
-    input[type*='datetime'][from],
-    input[type*='datetime'][to] {
-      padding-right: var(--padding-narrow);
-      min-width: 91%;
+    ox-input-search {
+      max-width: unset;
+    }
+
+    ox-select {
+      max-width: unset;
+    }
+
+    ox-checkbox {
+      max-width: unset;
+    }
+
+    input[type='number'] {
+      max-width: unset;
+    }
+
+    input {
+      flex: 1;
     }
   }
 `

package/src/filters/ox-filter-personalizer.ts

@@ -0,0 +1,195 @@
+import '@material/web/button/outlined-button.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { OxPopupList } from '@operato/popup'
+
+import { FilterConfig, PersonalFilterPreference } from '../types.js'
+import { OxCheckbox } from '@operato/input'
+
+import { OxFiltersFormBase } from './ox-filters-form-base'
+
+@customElement('ox-filter-personalizer')
+export class OxFilterPersonalizer extends LitElement {
+  static styles = [
+    css`
+      md-icon {
+        --md-icon-size: 16px;
+        width: 36px;
+        height: 36px;
+        color: var(--md-sys-color-secondary-container);
+        cursor: pointer;
+
+        display: flex;
+        place-content: center;
+        place-items: center;
+        position: relative;
+
+        &:hover {
+          color: var(--md-sys-color-primary-container);
+        }
+      }
+
+      md-ripple {
+        border-radius: 50%;
+        inset: unset;
+        height: 36px;
+        width: 36px;
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: true }) debug: boolean = false
+
+  @state() private preference?: PersonalFilterPreference
+
+  render() {
+    return html`
+      <md-icon
+        @click=${async (e: MouseEvent) => {
+          const form = this.closest('ox-filters-form-base') as OxFiltersFormBase
+          const { filters, personalFilters = [] } = form
+          const queryFilters = await form.getQueryFilters()
+
+          this.preference = {
+            filters: (
+              personalFilters.map(filter => {
+                const originFilter = filters.find(f => f.name == filter.name)
+
+                if (!originFilter) {
+                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */
+                  return
+                }
+
+                return {
+                  name: filter.name,
+                  hidden: filter.hidden,
+                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */
+                  value: originFilter!.value ?? queryFilters.find(f => f.name == filter.name)?.value
+                }
+              }) || []
+            ).filter(Boolean) as Partial<FilterConfig>[]
+          }
+
+          const template = html`
+            <div class="personalizer-header" slot="header">
+              <md-icon
+                style="margin-left: auto;"
+                @click=${async (e: MouseEvent) => {
+                  if (form.personalConfigProvider) {
+                    form.personalConfig = await form.personalConfigProvider.save({
+                      ...form.personalConfig,
+                      ...this.preference
+                    })
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.save'))}
+                >keep</md-icon
+              ><md-icon
+                @click=${async (e: MouseEvent) => {
+                  if (form.personalConfigProvider) {
+                    form.personalConfig = await form.personalConfigProvider.save({
+                      ...form.personalConfig,
+                      filters: []
+                    })
+
+                    this.preference = {}
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.delete'))}
+                >keep_off</md-icon
+              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
+                >close</md-icon
+              >
+            </div>
+
+            ${this.preference?.filters!.map(
+              filter => html`
+                <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${filter.name} option
+                  >${filter.name}<span style="position: absolute; right: 10px; cursor: move;" handle
+                    >☰</span
+                  ></ox-checkbox
+                >
+              `
+            )}
+          `
+
+          const popup = OxPopupList.open({
+            template,
+            multiple: true,
+            sortable: true,
+            debug: this.debug,
+            attrSelected: 'checked',
+            top: e.pageY,
+            left: e.pageX,
+            styles: css`
+              :host {
+                width: 240px;
+                max-height: 300px;
+                overflow: auto;
+              }
+
+              ::slotted(.personalizer-header) {
+                --md-icon-size: 1.4em;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                text-transform: capitalize;
+                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+              }
+
+              ::slotted([option]) {
+                position: relative;
+                user-select: none;
+              }
+            `
+          })
+
+          popup.onselect = (e: Event) => {
+            const selected = (e as CustomEvent).detail
+
+            const pconfig: PersonalFilterPreference = { ...form.personalConfig }
+            const pfilters = this.preference?.filters || form.filters
+
+            pconfig.filters = pfilters.map(filter => {
+              return {
+                name: filter.name,
+                hidden: selected.indexOf(filter.name) == -1,
+                value: filter.value
+              }
+            })
+
+            form.personalConfig = this.preference = pconfig
+
+            form.applyUpdatedConfiguration()
+          }
+
+          popup.addEventListener('sorted', (e: Event) => {
+            const sorted = (e as CustomEvent).detail as HTMLElement[]
+
+            const pconfig: PersonalFilterPreference = { ...form.personalConfig }
+
+            pconfig.filters = sorted.map(element => {
+              const name = (element as OxCheckbox).value
+              return {
+                name,
+                hidden: !element.hasAttribute('checked'),
+                value: filters.find(filter => filter.name == name)?.value
+              }
+            })
+
+            form.personalConfig = this.preference = pconfig
+
+            form.applyUpdatedConfiguration()
+          })
+        }}
+        >settings<md-ripple></md-ripple
+      ></md-icon>
+    `
+  }
+}

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

@@ -5,13 +5,14 @@ import '@operato/input/ox-input-search.js'
 
 import json5 from 'json5'
 import { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
-import { customElement, property, queryAsync } from 'lit/decorators.js'
+import { customElement, property, queryAsync, state } from 'lit/decorators.js'
 
 import { getDefaultValue } from '@operato/time-calculator'
+import { PagePreferenceProvider } from '@operato/p13n'
 
 import { FilterStyles } from './filter-styles.js'
 import { getFilterRenderer } from './registry.js'
-import { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue } from '../types.js'
+import { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue, PersonalFilterPreference } from '../types.js'
 
 export type QueryFilterRangeValue = [from: number, to: number]
 
@@ -43,8 +44,9 @@ export class OxFiltersFormBase extends LitElement {
       }
 
       @media only screen and (max-width: 460px) {
-        label[between] {
-          display: block;
+        form {
+          flex-direction: column;
+          flex-flow: column;
         }
       }
     `
@@ -54,6 +56,10 @@ export class OxFiltersFormBase extends LitElement {
   @property({ type: Array }) filters: FilterConfig[] = []
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
   @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
+  @property({ type: Object }) personalConfigProvider?: PagePreferenceProvider
+
+  @state() personalConfig?: PersonalFilterPreference
+  @state() personalFilters?: FilterConfig[]
 
   @queryAsync('form') form!: HTMLFormElement
 
@@ -73,7 +79,7 @@ export class OxFiltersFormBase extends LitElement {
         operator,
         value: defaultValue,
         onchange
-      } = this.filters.find(filter => filter.name == name) || {}
+      } = (this.personalFilters || []).find(filter => filter.name == name) || {}
 
       if (this.autoUpdateTargetsOnChange[name]) {
         /* 
@@ -112,7 +118,7 @@ export class OxFiltersFormBase extends LitElement {
       return
     }
     if (operator == 'between') {
-      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
+      return defaultValue instanceof Array && (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
     } else {
       return getDefaultValue(defaultValue, this)
     }
@@ -125,35 +131,39 @@ export class OxFiltersFormBase extends LitElement {
           e.preventDefault()
         }}
       >
-        ${this.filters.map((filter: FilterConfig) => {
-          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 ?? this.buildDefaultValue(operator!, defaultValue)
-
-          if (!renderer) {
-            return nothing
-          }
+        ${(this.personalFilters || [])
+          .filter(filter => !filter.hidden)
+          .map((filter: FilterConfig) => {
+            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 ?? this.buildDefaultValue(operator!, defaultValue)
+
+            if (!renderer) {
+              return nothing
+            }
 
-          return type === 'search'
-            ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
-            : type === 'boolean' || type === 'checkbox'
-              ? renderer(filter, value, this)
-              : type !== 'select'
-                ? html`
-                    <label filter-title ?between=${operator == 'between'}
-                      ><span>${label}</span> ${renderer(filter, value, this)}
-                    </label>
-                  `
-                : this.renderSelect(filter, value, renderer)
-        })}
+            return type === 'search'
+              ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
+              : type === 'boolean' || type === 'checkbox'
+                ? renderer(filter, value, this)
+                : type !== 'select'
+                  ? html`
+                      <label filter-title ?between=${operator == 'between'}
+                        ><span>${label}</span> ${renderer(filter, value, this)}
+                      </label>
+                    `
+                  : this.renderSelect(filter, value, renderer)
+          })}
       </form>
+
+      <slot name="setting"></slot>
     `
   }
 
@@ -203,10 +213,6 @@ export class OxFiltersFormBase extends LitElement {
         `
   }
 
-  getFieldByName(name: string) {
-    return this.renderRoot.querySelector(`[name=${name}]`)
-  }
-
   async updated(changes: PropertyValues<this>) {
     if (changes.has('urlParamsSensitive')) {
       if (this.urlParamsSensitive) {
@@ -269,29 +275,77 @@ export class OxFiltersFormBase extends LitElement {
       }
     }
 
-    if (changes.has('filters')) {
-      this.autoUpdateTargetsOnChange = {}
-      this.filters
-        ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)
-        .map(({ name, boundTo }) => {
-          boundTo!.forEach(to => {
-            const origin = this.autoUpdateTargetsOnChange[to] || []
-            if (name && !origin.includes(name)) {
-              this.autoUpdateTargetsOnChange[to] = [...origin, name]
+    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+      this.personalConfig = await this.personalConfigProvider.load()
+    } else if (changes.has('filters') || changes.has('personalConfig')) {
+      this.applyUpdatedConfiguration()
+    }
+  }
+
+  async applyUpdatedConfiguration() {
+    if (!this.personalConfig) {
+      this.personalFilters = [...this.filters]
+    } else {
+      const { filters: personalFilters } = this.personalConfig
+
+      if (personalFilters) {
+        const xfilters = this.filters.map((filter: Partial<FilterConfig>) => {
+          const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name)
+          return personalFilter ? { ...filter, ...personalFilter } : filter
+        })
+
+        function reorderList(a: Partial<FilterConfig>[], b: Partial<FilterConfig>[]): Partial<FilterConfig>[] {
+          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
+          const result = new Array(a.length)
+
+          // b 배열에 없는 아이템은 원래 위치로 채움
+          a.forEach((item, index) => {
+            if (!item.name || !b.find(bi => bi.name == item.name)) {
+              result[index] = item
             }
           })
-        })
 
-      if (!this.urlParamsSensitive) {
-        this.value = await this.getQueryFilters()
+          b.forEach(item => {
+            const ai = a.find(ai => ai.name == item.name)
+            if (ai) {
+              result[result.findIndex(slot => slot === undefined)] = ai
+            }
+          })
+
+          return result
+        }
+
+        // 배열 재정렬 실행
+        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterConfig[]
       }
     }
+
+    this.autoUpdateTargetsOnChange = {}
+
+    this.personalFilters
+      ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)
+      .map(({ name, boundTo }) => {
+        boundTo!.forEach(to => {
+          const origin = this.autoUpdateTargetsOnChange[to] || []
+          if (name && !origin.includes(name)) {
+            this.autoUpdateTargetsOnChange[to] = [...origin, name]
+          }
+        })
+      })
+
+    if (!this.urlParamsSensitive) {
+      this.value = await this.getQueryFilters()
+    }
+  }
+
+  getFieldByName(name: string) {
+    return this.renderRoot.querySelector(`[name=${name}]`)
   }
 
   async getQueryFilters(): Promise<FilterValue[]> {
     const formData = new FormData(await this.form)
 
-    var filters = this.filters
+    var filters = (this.personalFilters || [])
       .map((filter: FilterConfig) => {
         const { name, type, operator } = filter
 

package/src/types.ts

@@ -63,6 +63,7 @@ export type FilterConfig = {
     | { name: string; [params: string]: any }[]
     | undefined
   boundTo?: string[]
+  hidden?: boolean
   onchange?: FilterChangedCallback
 }
 
@@ -97,3 +98,7 @@ export type SearchFormField = {
   handlers?: { [event: string]: EventListener }
   onchange?: SearchFilterChangedCallback
 }
+
+export type PersonalFilterPreference = {
+  filters?: Partial<FilterConfig>[]
+}

package/stories/ox-filters-form-base-page-preference.stories.ts

@@ -0,0 +1,192 @@
+import '../src/filters/ox-filters-form-base.js'
+import '../src/filters/ox-filter-personalizer.js'
+
+import { html, TemplateResult } from 'lit'
+import { sleep } from '@operato/utils'
+import { CommonHeaderStyles } from '@operato/styles'
+
+import { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'
+import { PersonalFilterPreference } from '../src/types.js'
+
+export default {
+  title: 'ox-filters-form-base page-preference',
+  component: 'ox-filters-form-base',
+  argTypes: {
+    value: { control: 'object' },
+    filters: { control: 'object' },
+    urlParamsSensitive: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value?: FilterValue[]
+  filters?: FilterConfig[]
+  urlParamsSensitive: boolean
+}
+
+const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+  <link href="/themes/input-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+      height: 500px;
+    }
+  </style>
+
+  <style>
+    ox-filters-form-base {
+      --input-gap-vertical: 8px;
+      --input-gap-horizontal: 16px;
+
+      --ox-filters-input-placeholder-color: var(--primary-color);
+
+      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+      --ox-filters-input-focus-border: 1px solid var(--primary-color);
+      --ox-filters-input-font: normal 14px var(--theme-font);
+      --ox-filters-input-color: var(--primary-text-color);
+      --ox-filters-input-focus-color: var(--primary-color);
+      --ox-filters-label-font: normal 14px var(--theme-font);
+      --ox-filters-label-color: var(--primary-text-color);
+
+      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+      --ox-filters-input-padding: 6px 2px;
+    }
+
+    div.filters {
+      position: relative;
+    }
+
+    ox-filter-personalizer {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div class="header">
+    <div class="filters">
+      <ox-filters-form-base
+        .value=${value!}
+        .filters=${filters!}
+        ?url-params-sensitive=${urlParamsSensitive}
+        .personalConfigProvider=${{
+          async load() {
+            await sleep(1000)
+            return {
+              filters: [
+                { name: 'name', hidden: false, value: 'abc' },
+                { name: 'description', hidden: true }
+              ]
+            }
+          },
+          async save(preference: PersonalFilterPreference) {
+            await sleep(1000)
+            console.log('saving preference', preference)
+            return preference
+          },
+          async reset() {
+            await sleep(1000)
+          }
+        }}
+        @filters-change=${(e: CustomEvent) => {
+          console.log('filters changed', e.detail)
+        }}
+      >
+        <ox-filter-personalizer slot="setting"></ox-filter-personalizer>
+      </ox-filters-form-base>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  filters: [
+    {
+      name: 'search',
+      type: 'search',
+      label: 'search',
+      operator: 'eq'
+    },
+    {
+      name: 'test',
+      type: 'string',
+      label: 'name',
+      operator: 'eq',
+      value: 'No Name'
+    },
+    {
+      name: 'active',
+      type: 'boolean',
+      label: 'active',
+      operator: 'eq',
+      value: true,
+      onchange: (value, formBase: OxFiltersFormBase) => {
+        const sss = formBase.getFieldByName('sss') as HTMLInputElement
+        sss.value = value ? 'DEF' : 'ABC'
+
+        return false
+      }
+    },
+    {
+      name: 'sss',
+      type: 'select',
+      label: 'sss',
+      operator: 'eq',
+      options: () => {
+        return [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'ABC',
+            value: 'ABC'
+          },
+          {
+            display: 'DEF',
+            value: 'DEF'
+          }
+        ]
+      }
+    },
+    {
+      name: 'range',
+      type: 'number',
+      label: 'range',
+      operator: 'between'
+    },
+    {
+      name: 'date-range',
+      type: 'date',
+      label: 'date',
+      operator: 'between',
+      value: [
+        { name: 'week', params: { relativeWeeks: -1 } },
+        { name: 'today', params: { relativeDays: +1 } }
+      ]
+    }
+  ]
+}

package/stories/ox-search-form-change-handler.stories.ts

@@ -214,7 +214,11 @@ RegularContact.args = {
       name: 'name',
       type: 'text',
       placeholder: 'type your name.',
-      props: { searchOper: 'i_like' }
+      props: { searchOper: 'i_like' },
+      onchange: value => {
+        console.log('changed', value)
+        return false
+      }
     },
     {
       label: 'email',