@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.0

package/stories/fixed-column.stories.ts

@@ -6,6 +6,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import {
   ColumnConfig,
@@ -17,6 +18,7 @@ import {
 } from '../src/types.js'
 
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -176,20 +178,18 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
+
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -318,7 +318,8 @@ export default {
   title: 'fixed column',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' }
+    config: { control: 'object' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -330,10 +331,18 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-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"
     />
@@ -346,46 +355,60 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       mode="GRID"
       .config=${config}
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="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>
-        </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>
+          </div>
 
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
     </ox-grist>`
 

package/stories/grid-setting.stories.ts

@@ -1,11 +1,17 @@
+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'
 import '../src/record-view/record-creator.js'
-import '@operato/popup/ox-popup-list.js'
-import '@material/web/icon/icon.js'
+import '../src/personalizer/ox-grist-personalizer.js'
+import '../src/personalizer/ox-grist-filter-personalizer.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -15,9 +21,10 @@ import {
   GristClassifier,
   GristEventHandlerSet,
   GristRecord,
+  PersonalGristPreference,
   ValidationCallback
 } from '../src/types.js'
-import { DataGrist } from '../src/index.js'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -176,20 +183,17 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -341,7 +345,10 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] },
+    withoutSearch: { control: 'boolean' },
+    debug: { control: 'boolean' }
   }
 }
 
@@ -353,13 +360,42 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  mode: string
+  mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  fetchHandler: object
+  withoutSearch: boolean
+  fetchHandler: FetchHandler
+  theme: 'light' | 'dark'
+  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, fetchHandler }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  withoutSearch = false,
+  debug = false,
+  fetchHandler,
+  theme = 'light'
+}: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-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"
     />
@@ -372,65 +408,86 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
-      ${CommonGristStyles.cssText}
-      ${CommonHeaderStyles.cssText}
+      ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText}
+    </style>
+
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
     </style>
 
     <ox-grist
-      .config=${config}
       .mode=${mode}
+      .config=${config}
       .fetchHandler=${fetchHandler}
+      .personalConfigProvider=${{
+        async load() {
+          await sleep(1000)
+          return personalConfig
+        },
+        async save(preference: PersonalGristPreference) {
+          await sleep(1000)
+          personalConfig = {
+            ...personalConfig,
+            ...preference
+          }
+          console.log('saving preference', personalConfig)
+          return preference
+        },
+        async reset() {
+          personalConfig = {}
+          await sleep(1000)
+        }
+      }}
       ?url-params-sensitive=${urlParamsSensitive}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
-          <ox-filters-form autofocus></ox-filters-form>
-        </div>
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form autofocus ?without-search=${withoutSearch}>
+            <ox-grist-filter-personalizer slot="setting"></ox-grist-filter-personalizer>
+          </ox-filters-form>
 
-        <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>
-        </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>
+          </div>
 
-        <div id="modes">
-          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-        </div>
+          <div id="modes">
+            <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
 
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
 
-      <md-icon
-        title="personal setting"
-        slot="setting"
-        @click=${(e: MouseEvent) => {
-          const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist
-          alert('setting clicked. will fetch again.')
-          grist?.fetch()
-        }}
-        >tune</md-icon
-      >
+      <ox-grist-personalizer slot="setting" ?debug=${debug}></ox-grist-personalizer>
     </ox-grist>`
 
 export const Regular = Template.bind({})

package/stories/grist-modes.stories.ts

@@ -6,6 +6,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -17,6 +18,7 @@ import {
   GristRecord,
   ValidationCallback
 } from '../src/types.js'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -175,20 +177,17 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -340,7 +339,8 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -352,13 +352,27 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  mode: string
+  mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  fetchHandler: object
+  theme: 'light' | 'dark'
+  fetchHandler: FetchHandler
 }
 
-const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  fetchHandler,
+  theme = 'light'
+}: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-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"
     />
@@ -371,15 +385,29 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       .mode=${mode}
@@ -387,37 +415,37 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ?url-params-sensitive=${urlParamsSensitive}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="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>
-        </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>
+          </div>
 
-        <div id="modes">
-          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-        </div>
+          <div id="modes">
+            <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
 
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
     </ox-grist>`