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

package/stories/{accumulator.stories.ts → accumulator-format.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,
@@ -106,7 +107,8 @@ const config = {
       record: {
         editable: true,
         align: 'right',
-        defaultValue: 100
+        defaultValue: 100,
+        format: '+$#,##0.00'
       },
       accumulator: 'avg',
       // accumulator: {
@@ -164,9 +166,6 @@ const config = {
     selectable: {
       multiple: false
     },
-    handlers: {
-      focus: 'select-row'
-    },
     accumulator: true
   },
   sorters: [
@@ -181,12 +180,14 @@ const config = {
 }
 
 export default {
-  title: 'accumulator in ox-grist',
+  title: 'accumulator format in ox-grist',
   component: 'ox-grist',
   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' }
   }
 }
 
@@ -200,11 +201,27 @@ interface ArgTypes {
   config: object
   mode: string
   urlParamsSensitive: boolean
+  withoutSearch: boolean
   fetchHandler: object
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  withoutSearch = 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"
     />
@@ -217,15 +234,19 @@ 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;
@@ -245,7 +266,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/barcode-input-filter.stories.ts

@@ -5,6 +5,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 { FetchHandler } from '../src/types.js'
 
@@ -121,7 +122,8 @@ export default {
   argTypes: {
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -135,10 +137,18 @@ interface ArgTypes {
   englishOnly: boolean
   selectAfterChange: boolean
   headerFilter: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter, 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"
     />
@@ -150,15 +160,30 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
       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>
+      ${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=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}
       mode="GRID"

package/stories/bounded-select-filters.stories.ts

@@ -0,0 +1,339 @@
+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 { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+import { sleep } from '@operato/utils'
+
+import { ColumnConfig, FetchHandler, GristRecord, SelectOption } from '../src/types.js'
+
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+import { DataGridField } from '../src/data-grid/data-grid-field.js'
+
+const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {
+  var total = 120993
+  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) => {
+        const warehouse = idx % 2 ? '01' : '02'
+        const zone = idx % 2 ? 'Z001' : 'Z002'
+
+        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}`,
+          warehouse,
+          zone,
+          location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,
+          createdAt: Date.now(),
+          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: 'string',
+        name: 'name',
+        label: true,
+        header: 'name',
+        filter: {
+          operator: 'eq',
+          value: 'shnam'
+        },
+        sortable: true,
+        width: 120
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: 'description',
+        record: {
+          align: 'left'
+        },
+        width: 200
+      },
+      {
+        type: 'select',
+        name: 'warehouse',
+        header: 'warehouse',
+        filter: {
+          operator: 'eq'
+        },
+        record: {
+          align: 'left',
+          options: async (
+            value: any,
+            column: ColumnConfig,
+            record: GristRecord,
+            rowIndex: number,
+            field: DataGridField
+          ): Promise<SelectOption[]> => {
+            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+            return [
+              {
+                display: '',
+                value: ''
+              }
+            ].concat(
+              WAREHOUSE.map(w => {
+                return {
+                  display: w.name,
+                  value: w.id
+                }
+              })
+            )
+          }
+        },
+        width: 200
+      },
+      {
+        type: 'select',
+        name: 'zone',
+        header: 'zone',
+        filter: {
+          operator: 'eq',
+          boundTo: ['warehouse'],
+          onchange: () => {
+            console.log('warehousde filter value changed.')
+          }
+        },
+        record: {
+          align: 'left',
+          options: async (
+            value: any,
+            column: ColumnConfig,
+            record: GristRecord,
+            rowIndex: number,
+            field: DataGridField
+          ): Promise<SelectOption[]> => {
+            console.log('arguments', arguments)
+            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+            const warehouse = record.warehouse
+            console.log('warehouse', warehouse)
+
+            const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)
+            const zones = targetWH
+              ? targetWH.zones
+              : WAREHOUSE.reduce((sum, warehouse) => {
+                  sum = sum.concat(warehouse.zones)
+                  return sum
+                }, [] as any[])
+
+            return [
+              {
+                display: '',
+                value: ''
+              }
+            ].concat(
+              zones.map((z: any) => {
+                return {
+                  display: z.name,
+                  value: z.id
+                }
+              })
+            )
+          }
+        },
+        width: 200
+      },
+      {
+        type: 'select',
+        name: 'location',
+        header: 'location',
+        filter: {
+          operator: 'eq',
+          boundTo: ['warehouse', 'zone']
+        },
+        record: {
+          align: 'left',
+          options: async (
+            value: any,
+            column: ColumnConfig,
+            record: GristRecord,
+            rowIndex: number,
+            field: DataGridField
+          ): Promise<SelectOption[]> => {
+            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+            const warehouse = record.warehouse
+            const zone = record.zone
+            console.log('warehouse, zone', warehouse, zone)
+
+            const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null
+            const targetZone = zone && targetWH?.zones.find((z: any) => z.id == zone)
+            return targetZone ? ['', ...targetZone.locations] : []
+          }
+        },
+        width: 200
+      },
+      {
+        type: 'datetime',
+        name: 'updatedAt',
+        header: 'updated at',
+        width: 180
+      },
+      {
+        type: 'datetime',
+        name: 'createdAt',
+        header: 'created at',
+        width: 180
+      }
+    ],
+    rows: {},
+    sorters: [
+      {
+        name: 'name',
+        desc: true
+      }
+    ],
+    filters: {
+      header: headerFilter
+    },
+    pagination: {
+      pages: [30, 50, 100, 200]
+    }
+  }
+}
+
+const WAREHOUSE = [
+  {
+    id: '01',
+    name: '제 1 창고',
+    zones: [
+      {
+        id: 'Z001',
+        name: 'Zone 01-001',
+        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
+      },
+      {
+        id: 'Z002',
+        name: 'Zone 01-002',
+        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']
+      }
+    ]
+  },
+  {
+    id: '02',
+    name: '제 2 창고',
+    zones: [
+      {
+        id: 'Z001',
+        name: 'Zone 02-001',
+        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
+      },
+      {
+        id: 'Z002',
+        name: 'Zone 02-002',
+        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
+      }
+    ]
+  }
+]
+
+export default {
+  title: 'bounded select filters for ox-grist',
+  component: 'ox-grist',
+  argTypes: {
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  headerFilter: boolean
+  theme: 'light' | 'dark'
+}
+
+const Template: Story<ArgTypes> = ({ headerFilter, 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"
+    />
+    <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>
+      ${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=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+      </div>
+    </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  headerFilter: true
+}