@operato/data-grist 2.0.0-alpha.119 → 2.0.0-alpha.120

package/src/data-grist.ts

@@ -176,6 +176,7 @@ export class DataGrist extends LitElement implements DataConsumer {
     save(
       preference?: PersonalGristPreference
     ): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
+    reset(): void | Promise<void>
   }
 
   @state() personalConfig?: {
@@ -314,17 +315,41 @@ export class DataGrist extends LitElement implements DataConsumer {
   }
 
   public applyUpdatedConfiguration() {
-    const config = this.config
-    const { columns } = config
+    const config = { ...this.config }
+    const columns: Partial<ColumnConfig>[] = config.columns
 
     if (this.personalConfig) {
       const { columns: personalColumns } = this.personalConfig
 
       if (personalColumns) {
-        config.columns = columns.map((column: Partial<ColumnConfig>) => {
+        const xcolumns = columns.map((column: Partial<ColumnConfig>) => {
           const personalColumn = personalColumns.find(pcolumn => pcolumn.name == column.name)
           return personalColumn ? { ...column, ...personalColumn } : column
         })
+
+        function reorderList(a: { name: string }[], b: { name: string }[]): { name: string }[] {
+          // 결과 배열 초기화, 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
+            }
+          })
+
+          b.forEach(item => {
+            const ai = a.find(ai => ai.name == item.name)
+            if (ai) {
+              result[result.findIndex(slot => slot === undefined)] = ai
+            }
+          })
+
+          return result
+        }
+
+        // 배열 재정렬 실행
+        config.columns = reorderList(xcolumns as any, personalColumns as any)
       }
     }
 

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

@@ -6,8 +6,9 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next } from '@operato/i18n'
 import { OxPopupList } from '@operato/popup'
 
-import { GristConfig, PersonalGristPreference } from '../types'
+import { ColumnConfig, PersonalGristPreference } from '../types'
 import { DataGrist } from '../data-grist'
+import { OxCheckbox } from '@operato/input'
 
 @customElement('ox-grist-personalizer')
 export class OxGristPersonalizer extends LitElement {
@@ -31,6 +32,7 @@ export class OxGristPersonalizer extends LitElement {
 
   @property({ type: String }) page!: string
   @property({ type: String }) element!: string
+  @property({ type: Boolean, attribute: true }) debug: boolean = false
 
   @state() private preference?: PersonalGristPreference
 
@@ -43,8 +45,11 @@ export class OxGristPersonalizer extends LitElement {
           const { config, compiledConfig } = grist
           const { columns: compiledColumns } = compiledConfig
 
-          const columns = (config as GristConfig).columns
-            .filter(column => column.name && column.type !== 'gutter' && !column.hidden)
+          const columns = compiledColumns
+            .filter(ccolumn => {
+              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)
+              return column && column.name && column.type !== 'gutter' && !column.hidden
+            })
             .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)
 
           this.preference = {
@@ -59,48 +64,70 @@ export class OxGristPersonalizer extends LitElement {
 
           const template = html`
             <div class="personalizer-header" slot="header">
-              ${i18next.t('text.column visibility setting')}<md-outlined-button
+              <md-icon
                 style="margin-left: auto;"
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
-                    this.preference = await grist.personalConfigProvider.save(this.preference)
+                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save(this.preference)
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.save'))}
+                >keep</md-icon
+              ><md-icon
+                @click=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    grist.personalConfig = this.preference = {}
+                    await grist.personalConfigProvider.reset()
                   }
-                  ;((e.target as HTMLElement).closest('ox-popup-list') as OxPopupList)?.close()
+                  popup.close()
                 }}
-                >${i18next.t('button.save')}</md-outlined-button
+                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>
 
             ${columns.map(
-              column =>
-                html`<ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option />${column.header.renderer(column)}</ox-checkbox>`
+              column => html`
+                <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
+                  >${column.header.renderer(column)}<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: 360px;
-                overflow: scroll;
+                max-height: 300px;
+                overflow: auto;
               }
 
               ::slotted(.personalizer-header) {
-                --md-icon-size: 1.2em;
-                --md-outlined-button-container-height: 24px;
-                --md-outlined-button-container-shape: 4px;
-                --md-outlined-button-leading-space: 4px;
-                --md-outlined-button-trailing-space: 4px;
+                --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;
               }
             `
           })
@@ -109,7 +136,9 @@ export class OxGristPersonalizer extends LitElement {
             const selected = (e as CustomEvent).detail
 
             const pconfig: PersonalGristPreference = grist.personalConfig || {}
-            pconfig.columns = columns.map(column => {
+            const pcolumns = this.preference?.columns || columns
+
+            pconfig.columns = pcolumns.map(column => {
               return {
                 name: column.name,
                 hidden: selected.indexOf(column.name) == -1,
@@ -123,6 +152,27 @@ export class OxGristPersonalizer extends LitElement {
 
             grist.applyUpdatedConfiguration()
           }
+
+          popup.addEventListener('sorted', (e: Event) => {
+            const sorted = (e as CustomEvent).detail as HTMLElement[]
+
+            const pconfig: PersonalGristPreference = grist.personalConfig || {}
+
+            pconfig.columns = sorted.map(element => {
+              const name = (element as OxCheckbox).value
+              return {
+                name,
+                hidden: !element.hasAttribute('checked'),
+                width: columns.find(column => column.name == name)?.width
+              }
+            })
+
+            this.preference = pconfig
+
+            grist.personalConfig = this.preference
+
+            grist.applyUpdatedConfiguration()
+          })
         }}
         >settings</md-icon
       >

package/stories/grid-setting.stories.ts

@@ -345,7 +345,8 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    debug: { control: 'boolean' }
   }
 }
 
@@ -360,9 +361,16 @@ interface ArgTypes {
   mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
   fetchHandler: FetchHandler
+  debug: boolean
 }
 
-const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  debug = 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"
@@ -402,6 +410,9 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
           await sleep(1000)
           console.log('saving preference', preference)
           return preference
+        },
+        async reset() {
+          await sleep(1000)
         }
       }}
       ?url-params-sensitive=${urlParamsSensitive}
@@ -440,7 +451,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         </ox-record-creator>
       </div>
 
-      <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      <ox-grist-personalizer slot="setting" ?debug=${debug}></ox-grist-personalizer>
     </ox-grist>`
 
 export const Regular = Template.bind({})