@operato/data-grist 1.11.5 → 1.11.7

package/stories/group-header.stories.ts

@@ -0,0 +1,505 @@
+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/mwc-icon'
+
+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',
+      fixed: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'sequence',
+      fixed: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'row-selector',
+      multiple: true,
+      fixed: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'edit',
+      title: 'edit',
+      handlers: {
+        click: function () {
+          console.log('clicked')
+        }
+      },
+      fixed: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'add',
+      title: 'add',
+      handlers: {
+        click: 'record-copy'
+      },
+      fixed: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'arrow_downward',
+      title: 'download',
+      handlers: {
+        click: 'move-down'
+      },
+      fixed: true
+    },
+    {
+      type: 'string',
+      name: 'id',
+      hidden: true
+    },
+    {
+      type: 'link',
+      name: 'name',
+      label: 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,
+      fixed: true
+    },
+    {
+      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: {
+        renderer: 'email',
+        group: 'information',
+        groupStyle: 'background-color: red;color: white',
+        style: 'background-color: red;color: white;'
+      },
+      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: {
+        renderer: 'active',
+        group: 'information'
+      },
+      record: {
+        editable: true
+      },
+      filter: true,
+      handlers: {
+        dblclick: () => {
+          const grist = document.querySelector('ox-grist') as any
+          console.log(grist!.dirtyRecords)
+        }
+      },
+      sortable: true,
+      width: 60
+    },
+    {
+      type: 'string[]',
+      name: 'role',
+      label: true,
+      header: {
+        renderer: 'role',
+        group: 'information'
+      },
+      record: {
+        options: ['', 'admin', 'worker', 'tester'],
+        editable: true
+      },
+      filter: true,
+      sortable: true,
+      width: 120
+    },
+    {
+      type: 'color',
+      name: 'color',
+      header: {
+        renderer: 'color',
+        group: 'information'
+      },
+      record: {
+        editable: true
+      },
+      sortable: true,
+      width: 50
+    },
+    {
+      type: 'float',
+      name: 'rate',
+      header: {
+        renderer: 'rate',
+        group: '2023',
+        groupStyle: 'background-color: blue;color: white;',
+        style: 'background-color: blue;color: white;'
+      },
+      record: {
+        align: 'right',
+        editable: true,
+        defaultValue: 10000.1
+      },
+      filter: 'between',
+      sortable: true,
+      width: 50
+    },
+    {
+      type: 'json5',
+      name: 'json5',
+      header: {
+        renderer: 'JSON5',
+        group: '2023'
+      },
+      width: 200
+    },
+    {
+      type: 'image',
+      name: 'thumbnail',
+      header: {
+        renderer: 'thumbnail',
+        group: '2023'
+      },
+      record: {
+        editable: true
+      },
+      width: 120
+    },
+    {
+      type: 'datetime',
+      name: 'updatedAt',
+      header: 'updated at',
+      record: {
+        editable: true,
+        defaultValue: {
+          name: 'now'
+        }
+      },
+      filter: 'between',
+      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: 'group header',
+  component: 'ox-grist',
+  argTypes: {
+    config: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  config: object
+}
+
+const Template: Story<ArgTypes> = ({ config }: 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;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #add button {
+      background-color: var(--primary-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #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
+    mode="GRID"
+    .config=${config}
+    .fetchHandler=${fetchHandler}
+    @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
+        <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>
+      </div>
+
+      <ox-record-creator id="add" light-popup>
+        <button><mwc-icon>add</mwc-icon></button>
+      </ox-record-creator>
+    </div>
+  </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  config
+}