@operato/data-grist 2.0.0-alpha.13 → 2.0.0-alpha.131

package/stories/creatable-only-column.stories.ts

@@ -0,0 +1,231 @@
+import '../src/index.js'
+import '../src/filters/filters-form.js'
+import '../src/sorters/sorters-control.js'
+import '@operato/popup/ox-popup-list.js'
+import '@material/web/icon/icon.js'
+
+import { html, TemplateResult } from 'lit'
+
+import { FetchHandler } from '../src/types.js'
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
+const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {
+  var total = 5
+  var start = (page! - 1) * limit!
+
+  await new Promise(resolve => setTimeout(resolve, 500))
+
+  return {
+    total,
+    records: Array(limit! * page! > total ? total % limit! : limit)
+      .fill('')
+      .map((item, idx) => {
+        return {
+          id: String(idx),
+          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+          number: idx,
+          float: 1.3,
+          date: '2023-09-20',
+          updatedAt: Date.now()
+        }
+      })
+  }
+}
+
+function buildConfig({ headerFilter }: { headerFilter: boolean }) {
+  return {
+    list: {
+      fields: ['name', 'description'],
+      details: ['updatedAt', 'createdAt']
+    },
+    columns: [
+      {
+        type: 'gutter',
+        gutterName: 'sequence'
+      },
+      {
+        type: 'string',
+        name: 'id',
+        hidden: true
+      },
+      {
+        type: 'gutter',
+        gutterName: 'button',
+        icon: 'add',
+        title: 'add',
+        handlers: {
+          click: 'record-copy'
+        }
+      },
+      {
+        type: 'string',
+        name: 'name',
+        label: true,
+        header: 'name',
+        filter: 'search',
+        record: {
+          editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
+            return !record.id
+          }
+        },
+        sortable: true,
+        width: 120
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: 'description',
+        filter: 'search',
+        record: {
+          align: 'left',
+          editable: true
+        },
+        width: 200
+      },
+      {
+        type: 'checkbox',
+        name: 'chk',
+        header: 'chk',
+        record: {
+          editable: true
+        },
+        width: 40
+      },
+      {
+        type: 'number',
+        name: 'number',
+        header: 'number',
+        record: {
+          editable: true
+        },
+        width: 80
+      },
+      {
+        type: 'float',
+        name: 'float',
+        header: 'float',
+        record: {
+          editable: true
+        },
+        width: 80
+      },
+      {
+        type: 'date',
+        name: 'date',
+        header: 'date',
+        width: 120
+      },
+      {
+        type: 'datetime',
+        name: 'updatedAt',
+        header: 'updated at',
+        width: 180
+      }
+    ],
+    rows: {
+      selectable: {
+        multiple: false
+      },
+      handlers: {
+        click: 'select-row'
+      },
+      appendable: true
+    },
+    sorters: [
+      {
+        name: 'name',
+        desc: true
+      }
+    ],
+    filters: {
+      header: headerFilter
+    },
+    pagination: {
+      pages: [30, 50, 100, 200]
+    }
+  }
+}
+
+/* Make the 'name' column editable only at the time of creation. */
+export default {
+  title: 'creatable only column for ox-grist',
+  component: 'ox-grist',
+  argTypes: {
+    headerFilter: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  headerFilter: boolean
+}
+
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
+  html` <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"
+    />
+
+    <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>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+      @field-change=${(e: any) => {
+        const { name, number, chk } = e.detail.record
+        console.log(name, number, chk)
+      }}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></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>
+
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/stories/default-filters.stories.ts

@@ -2,12 +2,14 @@ import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {
   var total = 120993
   var start = (page! - 1) * limit!
@@ -23,6 +25,7 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           id: String(idx),
           name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
           description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+          due: idx % 2 ? '2024-01-01' : '2024-02-01',
           createdAt: Date.now(),
           updatedAt: Date.now()
         }
@@ -71,10 +74,52 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         },
         width: 200
       },
+      {
+        type: 'date',
+        name: 'due',
+        header: 'due',
+        filter: {
+          operator: 'between',
+          value: [
+            {
+              name: 'today',
+              params: {
+                relativeDays: -2,
+                timeZone: 'Asia/Seoul',
+                format: 'YYYY-MM-DD'
+              }
+            },
+            {
+              name: 'today',
+              params: {
+                relativeDays: 1,
+                timeZone: 'Asia/Seoul',
+                locale: 'en-CA' /* 'YYYY-MM-DD' format */,
+                format: {
+                  year: 'numeric',
+                  month: '2-digit',
+                  day: '2-digit'
+                }
+              }
+            }
+          ]
+        },
+        record: {
+          align: 'left'
+        },
+        width: 120
+      },
       {
         type: 'datetime',
         name: 'updatedAt',
         header: 'updated at',
+        filter: {
+          operator: 'between',
+          value: [
+            { name: 'week', params: { relativeWeeks: -1 } },
+            { name: 'today', params: { relativeDays: +1 } }
+          ]
+        },
         width: 180
       },
       {
@@ -118,95 +163,57 @@ interface ArgTypes {
   headerFilter: boolean
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
-    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>
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
-
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--margin-default);
-      padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
-      position: relative;
-      color: var(--secondary-color);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
-
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    #filters * {
-      margin-right: var(--margin-default);
-    }
-
-    @media only screen and (max-width: 460px) {
-      #filters {
-        flex-direction: column;
-      }
-
-      #modes {
-        display: none;
-      }
-    }
-  </style>
-
-  <ox-grist
-    .config=${buildConfig({ headerFilter })}
-    mode="GRID"
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form></ox-filters-form>
-      </div>
-
-      <div id="sorters">
-        Sort
-        <mwc-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</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
+  html` <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"
+    />
+    <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>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></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>
-    </div>
-  </ox-grist>`
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {

package/stories/dynamic-editable.stories.ts

@@ -2,11 +2,12 @@ import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
 const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {
   var total = 5
@@ -102,7 +103,8 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
           editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
             return record?.name !== 'heartyoh-3'
           }
-        }
+        },
+        width: 40
       },
       {
         type: 'number',
@@ -192,102 +194,66 @@ interface ArgTypes {
   headerFilter: boolean
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
-    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" />
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
+  html` <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>
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--margin-default);
-      padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
-      position: relative;
-      color: var(--secondary-color);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
+    <style>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+      @field-change=${(e: any) => {
+        const { name, number, chk } = e.detail.record
+        console.log(name, number, chk)
+      }}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+        <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>
 
-    @media only screen and (max-width: 460px) {
-      #filters {
-        flex-direction: column;
-      }
-
-      #modes {
-        display: none;
-      }
-    }
-  </style>
-
-  <ox-grist
-    .config=${buildConfig({ headerFilter })}
-    mode="GRID"
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-    @field-change="${(e: any) => {
-      console.log(e.detail.record.name, e.detail.record.number)
-    }}"
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form></ox-filters-form>
-      </div>
-
-      <div id="sorters">
-        Sort
-        <mwc-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</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
       </div>
-
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {}