@operato/data-grist 2.0.0-alpha.9 → 2.0.0-alpha.92

package/stories/grid-setting.stories.ts

@@ -0,0 +1,441 @@
+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 { html, TemplateResult } from 'lit'
+
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
+import {
+  ColumnConfig,
+  FetchHandler,
+  GristClassifier,
+  GristEventHandlerSet,
+  GristRecord,
+  ValidationCallback
+} from '../src/types.js'
+import { DataGrist } from '../src/index.js'
+
+const fetchHandler: FetchHandler = async ({ 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) => {
+        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}`,
+          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
+          active: Math.round(Math.random() * 2) % 2 ? true : false,
+          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
+          company:
+            idx % 2
+              ? {
+                  id: '2',
+                  name: 'HatioLAB',
+                  description: `경기도 성남시-${start + idx + 1}`
+                }
+              : {
+                  id: '3',
+                  name: 'HatioSEA',
+                  description: `말레이시아 세티아알람-${start + idx + 1}`
+                },
+          thumbnail:
+            idx % 4 === 0
+              ? '' /* no source */
+              : idx % 4 === 1
+                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
+                : idx % 4 === 2
+                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
+          role: ['admin', 'worker', 'tester'][idx % 3],
+          color: idx % 2 ? `#87f018` : `#180f87`,
+          rate: Math.round(Math.random() * 100),
+          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
+          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
+          homepage:
+            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+          json5: {
+            abc: 'abc',
+            value: 123
+          },
+          createdAt: Date.now(),
+          updatedAt: Date.now()
+        }
+      })
+  }
+}
+
+const config = {
+  list: {
+    thumbnail: 'thumbnail',
+    fields: ['name', 'description'],
+    details: ['role', 'email']
+  },
+  columns: [
+    {
+      type: 'gutter',
+      gutterName: 'dirty'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'sequence'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'row-selector',
+      multiple: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'edit',
+      title: 'edit',
+      handlers: {
+        click: function () {
+          console.log('clicked')
+        }
+      }
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'add',
+      title: 'add',
+      handlers: {
+        click: 'record-copy'
+      }
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'arrow_downward',
+      title: 'download',
+      handlers: {
+        click: 'move-down'
+      }
+    },
+    {
+      type: 'string',
+      name: 'id',
+      hidden: true
+    },
+    {
+      type: 'link',
+      name: 'name',
+      label: true,
+      fixed: true,
+      header: 'name',
+      record: {
+        editable: true,
+        options: {
+          // href: 'http://hatiolab.com',
+          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {
+            return record['homepage']
+          },
+          target: '_blank'
+        }
+      },
+      filter: 'search',
+      sortable: true,
+      width: 120
+    },
+    {
+      type: 'string',
+      name: 'description',
+      header: 'description',
+      filter: 'search',
+      record: {
+        editable: true,
+        align: 'left'
+      },
+      width: 200,
+      handlers: {
+        click: (columns, data, column, record, rowIndex, target) => {
+          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)
+        }
+      } as GristEventHandlerSet
+    },
+    {
+      type: 'email',
+      name: 'email',
+      label: true,
+      header: 'email',
+      record: {
+        editable: true
+      },
+      filter: 'search',
+      sortable: true,
+      width: 130,
+      validation: function (after, before, record, column) {
+        if (after.indexOf('@') == -1) {
+          document.dispatchEvent(
+            new CustomEvent('notify', {
+              detail: {
+                type: 'error',
+                message: `invalid value - ${after}`
+              }
+            })
+          )
+          return false
+        }
+        return true
+      } as ValidationCallback
+    },
+    {
+      type: 'boolean',
+      name: 'active',
+      header: 'active',
+      record: {
+        editable: true
+      },
+      filter: true,
+      handlers: {
+        dblclick: () => {
+          const grist = document.querySelector('ox-grist') as any
+          console.log(grist!.dirtyRecords)
+        }
+      },
+      sortable: true,
+      width: 60
+    },
+    {
+      type: 'select',
+      name: 'role',
+      label: true,
+      header: 'role',
+      record: {
+        options: ['', 'admin', 'worker', 'tester'],
+        editable: true
+      },
+      filter: true,
+      sortable: true,
+      width: 120
+    },
+    {
+      type: 'color',
+      name: 'color',
+      header: 'color',
+      record: {
+        editable: true
+      },
+      sortable: true,
+      width: 50
+    },
+    {
+      type: 'float',
+      name: 'rate',
+      header: 'rate',
+      record: {
+        align: 'right',
+        editable: true,
+        defaultValue: 10000.1
+      },
+      filter: {
+        operator: 'between',
+        value: [1, 100]
+      },
+      sortable: true,
+      width: 50
+    },
+    {
+      type: 'json5',
+      name: 'json5',
+      header: 'JSON5',
+      width: 200
+    },
+    {
+      type: 'image',
+      name: 'thumbnail',
+      header: 'thumbnail',
+      record: {
+        editable: true
+      },
+      width: 120
+    },
+    {
+      type: 'datetime',
+      name: 'updatedAt',
+      header: 'updated at',
+      record: {
+        editable: true,
+        defaultValue: {
+          name: 'now'
+        }
+      },
+      filter: {
+        operator: 'between',
+        type: 'datetime',
+        value: [
+          {
+            name: 'today',
+            params: {
+              type: 'datetime'
+            }
+          },
+          {
+            name: 'now',
+            params: {
+              type: 'datetime',
+              relativeDays: 1
+            }
+          }
+        ]
+      },
+      sortable: true,
+      width: 180
+    },
+    {
+      type: 'datetime',
+      name: 'createdAt',
+      header: 'created at',
+      record: {
+        editable: false
+      },
+      sortable: true,
+      width: 180
+    }
+  ],
+  rows: {
+    selectable: {
+      multiple: true
+    },
+    handlers: {
+      focus: 'select-row-toggle'
+    },
+    classifier: function (record, rowIndex) {
+      const rate = record['rate']
+      const emphasized =
+        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
+      return {
+        emphasized
+      }
+    } as GristClassifier
+  },
+  sorters: [
+    {
+      name: 'name',
+      desc: true
+    },
+    {
+      name: 'email'
+    }
+  ],
+  pagination: {
+    pages: [20, 30, 50, 100, 200]
+  }
+}
+
+export default {
+  title: 'grid setting',
+  component: 'ox-grist',
+  argTypes: {
+    config: { control: 'object' },
+    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
+    urlParamsSensitive: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  config: object
+  mode: string
+  urlParamsSensitive: boolean
+  fetchHandler: object
+}
+
+const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = 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"
+    />
+    <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=${config}
+      .mode=${mode}
+      .fetchHandler=${fetchHandler}
+      ?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 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>
+
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
+      </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>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  config,
+  fetchHandler,
+  mode: 'GRID'
+}