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

package/src/personalizer/index.ts

@@ -0,0 +1 @@
+export * from './ox-grist-personalizer'

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

@@ -1,8 +1,9 @@
-import '@material/web/icon/icon.js'
+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 { GristConfig, PersonalGristPreference } from '../types'
@@ -39,22 +40,26 @@ export class OxGristPersonalizer extends LitElement {
         @click=${(e: MouseEvent) => {
           const grist = this.closest('ox-grist') as DataGrist
 
-          const { compiledConfig: config } = grist
-          const columns = (config as GristConfig).columns.filter(
-            column => column.name && column.type !== 'gutter' && column.name != 'id'
-          )
-
-          this.preference = columns.map(column => {
-            return {
-              name: column.name,
-              hidden: column.hidden,
-              width: column.width
-            }
-          })
+          const { config, compiledConfig } = grist
+          const { columns: compiledColumns } = compiledConfig
+
+          const columns = (config as GristConfig).columns
+            .filter(column => column.name && column.type !== 'gutter' && !column.hidden)
+            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)
+
+          this.preference = {
+            columns: columns.map(column => {
+              return {
+                name: column.name,
+                hidden: column.hidden,
+                width: column.width
+              }
+            })
+          }
 
           const template = html`
             <div class="personalizer-header" slot="header">
-              select to show<md-icon
+              ${i18next.t('text.column visibility setting')}<md-outlined-button
                 style="margin-left: auto;"
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
@@ -62,13 +67,13 @@ export class OxGristPersonalizer extends LitElement {
                   }
                   ;((e.target as HTMLElement).closest('ox-popup-list') as OxPopupList)?.close()
                 }}
-                >save</md-icon
+                >${i18next.t('button.save')}</md-outlined-button
               >
             </div>
 
             ${columns.map(
               column =>
-                html`<ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>`
+                html`<ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option />${column.header.renderer(column)}</ox-checkbox>`
             )}
           `
 
@@ -80,13 +85,17 @@ export class OxGristPersonalizer extends LitElement {
             left: e.pageX,
             styles: css`
               :host {
-                width: 200px;
-                max-height: 300px;
+                width: 240px;
+                max-height: 360px;
                 overflow: scroll;
               }
 
               ::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;
 
                 display: flex;
                 flex-direction: row;

package/stories/grid-setting.stories.ts

@@ -1,6 +1,8 @@
 import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
+import { sleep } from '@operato/utils'
+
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
@@ -387,7 +389,8 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       .config=${config}
       .fetchHandler=${fetchHandler}
       .personalConfigProvider=${{
-        load() {
+        async load() {
+          await sleep(1000)
           return {
             columns: [
               { name: 'name', hidden: false, width: 200 },
@@ -395,7 +398,8 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
             ]
           }
         },
-        save(preference: PersonalGristPreference) {
+        async save(preference: PersonalGristPreference) {
+          await sleep(1000)
           console.log('saving preference', preference)
           return preference
         }