@operato/data-grist 2.0.0-alpha.133 → 2.0.0-alpha.136

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

@@ -0,0 +1,191 @@
+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 { FilterConfigObject, FilterPreference, PersonalGristPreference } from '../types.js'
+
+import { OxFiltersForm } from '../filters/filters-form'
+
+@customElement('ox-grist-filter-personalizer')
+export class OxGristFilterPersonalizer 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?: PersonalGristPreference
+
+  render() {
+    return html`
+      <md-icon
+        @click=${async (e: MouseEvent) => {
+          const form = this.closest('ox-filters-form') as OxFiltersForm
+          const { filterColumns, personalFilters = [] } = form
+          const queryFilters = await form.getQueryFilters()
+
+          this.preference = {
+            filters: (
+              personalFilters.map((filter: FilterPreference) => {
+                const originFilterColumn =
+                  filter.name == 'search'
+                    ? { filter: { name: 'search' } }
+                    : filterColumns.find(f => f.name == filter.name)
+
+                if (!originFilterColumn) {
+                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */
+                  return
+                }
+
+                const { value } = originFilterColumn.filter! as FilterConfigObject
+
+                return {
+                  name: filter.name,
+                  hidden: filter.hidden,
+                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */
+                  value: value ?? queryFilters.find(f => f.name == filter.name)?.value
+                }
+              }) || []
+            ).filter(Boolean) as FilterPreference[]
+          }
+
+          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(this.preference)
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.save'))}
+                >keep</md-icon
+              ><md-icon
+                @click=${async (e: MouseEvent) => {
+                  if (form.personalConfigProvider) {
+                    form.personalConfig = this.preference = {}
+                    await form.personalConfigProvider.reset()
+                  }
+                  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: PersonalGristPreference = { ...form.personalConfig }
+            const pfilters = this.preference?.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: PersonalGristPreference = { ...form.personalConfig }
+            const pfilters = this.preference?.filters!
+
+            pconfig.filters = sorted
+              .map(element => {
+                const name = (element as HTMLInputElement).value
+                return pfilters.find(filter => filter.name == name)!
+              })
+              .filter(Boolean)
+
+            form.personalConfig = this.preference = pconfig
+
+            form.applyUpdatedConfiguration()
+          })
+        }}
+        >settings<md-ripple></md-ripple
+      ></md-icon>
+    `
+  }
+}

package/src/personalizer/ox-grist-personalizer.ts

@@ -72,7 +72,13 @@ export class OxGristPersonalizer extends LitElement {
                 style="margin-left: auto;"
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
-                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save(this.preference)
+                    const { mode, columns, sorters, pagination } = this.preference || {}
+                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save({
+                      mode,
+                      columns,
+                      sorters,
+                      pagination
+                    })
                   }
                   popup.close()
                 }}

package/src/types.ts

@@ -106,6 +106,7 @@ export type FilterChangedCallback = (value: any, form: OxFiltersForm) => boolean
  * @property {string} type - The type of the filter condition.
  * @property {FilterOperator} [operator] - The filter operator used to compare values (optional).
  * @property {Object} [options] - Additional options or parameters for the filter condition (optional).
+ * @property {boolean|undefined} [hidden] - The hidden flag for the filter condition (optional).
  * @property {string|number|boolean|string[]|number[]|undefined} [value] - The value to compare with in the filter condition (optional).
  * @property {string} [label] - The label to display for the filter condition (optional).
  */
@@ -116,6 +117,7 @@ export type FilterConfigObject = {
   value?: string | number | boolean | string[] | number[] | undefined
   label?: string
   boundTo?: string[]
+  hidden?: boolean
   onchange?: FilterChangedCallback
 }
 
@@ -775,5 +777,15 @@ export type GristSelectFunction = (record: GristRecord) => boolean
  */
 export type PersonalGristPreference = {
   columns?: Partial<ColumnConfig>[]
+  filters?: FilterPreference[]
+  pagination?: PaginationConfig
+  sorters?: SortersConfig
+  mode?: 'GRID' | 'LIST' | 'CARD'
   [key: string]: any
 }
+
+export type FilterPreference = {
+  name: string
+  hidden?: boolean
+  value?: any
+}

package/stories/accumulator-format.stories.ts

@@ -187,7 +187,8 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    withoutSearch: { control: 'boolean' }
   }
 }
 
@@ -201,10 +202,17 @@ interface ArgTypes {
   config: object
   mode: string
   urlParamsSensitive: boolean
+  withoutSearch: boolean
   fetchHandler: object
 }
 
-const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  withoutSearch = false,
+  fetchHandler
+}: ArgTypes) =>
   html` <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
@@ -246,7 +254,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     >
       <div slot="headroom" class="header">
         <div class="filters">
-          <ox-filters-form autofocus></ox-filters-form>
+          <ox-filters-form ?without-search=${withoutSearch} autofocus></ox-filters-form>
           <ox-record-creator id="add" light-popup>
             <button><md-icon>add</md-icon></button>
           </ox-record-creator>

package/stories/grid-setting.stories.ts

@@ -8,6 +8,7 @@ import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '../src/record-view/record-creator.js'
 import '../src/personalizer/ox-grist-personalizer.js'
+import '../src/personalizer/ox-grist-filter-personalizer.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -346,6 +347,7 @@ export default {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
+    withoutSearch: { control: 'boolean' },
     debug: { control: 'boolean' }
   }
 }
@@ -360,14 +362,27 @@ interface ArgTypes {
   config: object
   mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
+  withoutSearch: boolean
   fetchHandler: FetchHandler
   debug: boolean
 }
 
+var personalConfig: PersonalGristPreference = {
+  columns: [
+    { name: 'name', hidden: false, width: 200 },
+    { name: 'description', hidden: true }
+  ],
+  pagination: {
+    pages: [20, 30, 50, 100, 200],
+    limit: 30
+  }
+}
+
 const Template: Story<ArgTypes> = ({
   config,
   mode = 'GRID',
   urlParamsSensitive = false,
+  withoutSearch = false,
   debug = false,
   fetchHandler
 }: ArgTypes) =>
@@ -399,23 +414,19 @@ const Template: Story<ArgTypes> = ({
       .personalConfigProvider=${{
         async load() {
           await sleep(1000)
-          return {
-            columns: [
-              { name: 'name', hidden: false, width: 200 },
-              { name: 'description', hidden: true }
-            ],
-            pagination: {
-              pages: [20, 30, 50, 100, 200],
-              limit: 30
-            }
-          }
+          return personalConfig
         },
         async save(preference: PersonalGristPreference) {
           await sleep(1000)
-          console.log('saving preference', preference)
+          personalConfig = {
+            ...personalConfig,
+            ...preference
+          }
+          console.log('saving preference', personalConfig)
           return preference
         },
         async reset() {
+          personalConfig = {}
           await sleep(1000)
         }
       }}
@@ -424,24 +435,9 @@ const Template: Story<ArgTypes> = ({
     >
       <div slot="headroom">
         <div id="filters">
-          <ox-filters-form autofocus></ox-filters-form>
-        </div>
-
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
+          <ox-filters-form autofocus ?without-search=${withoutSearch}>
+            <ox-grist-filter-personalizer slot="setting"></ox-grist-filter-personalizer>
+          </ox-filters-form>
         </div>
 
         <div id="modes">