@operato/data-grist 2.0.0-alpha.87 → 2.0.0-alpha.89

package/stories/grid-setting.stories.ts

@@ -0,0 +1,553 @@
+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 {
+  ColumnConfig,
+  FetchHandler,
+  GristClassifier,
+  GristEventHandlerSet,
+  GristRecord,
+  ValidationCallback
+} from '../src/types.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>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
+    <style>
+      ox-grist {
+        width: 100%;
+        height: 600px;
+      }
+
+      [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);
+
+        --md-icon-size: 24px;
+      }
+      #sorters md-icon,
+      #modes md-icon {
+        --md-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;
+      }
+
+      #modes > * {
+        padding: var(--padding-narrow);
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
+
+      #modes > md-icon[active] {
+        border-radius: 9px;
+        background-color: rgba(var(--primary-color-rgb), 0.05);
+        opacity: 1;
+        color: var(--secondary-text-color);
+        cursor: default;
+      }
+
+      #modes > md-icon:hover {
+        opacity: 1;
+        color: var(--secondary-text-color);
+      }
+
+      #add {
+        text-align: right;
+      }
+
+      #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        background-color: var(--primary-color);
+        border: 0;
+        border-radius: 50%;
+        padding: 5px;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+      }
+
+      #add button:hover {
+        background-color: var(--focus-background-color);
+        box-shadow: var(--box-shadow);
+      }
+
+      #add button md-icon {
+        font-size: 1.5em;
+        color: var(--theme-white-color);
+      }
+
+      #filters {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #filters * {
+        margin-right: var(--margin-default);
+      }
+
+      [slot='setting'] {
+        --md-icon-size: 18px;
+      }
+
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+
+        #modes {
+          display: none;
+        }
+      }
+    </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 slot="setting" @click=${(e: MouseEvent) => alert('setting clicked')}>tune</md-icon>
+    </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  config,
+  fetchHandler,
+  mode: 'GRID'
+}