@operato/data-grist 1.0.0-beta.9 → 1.0.6

package/stories/explicit-fetch.stories.ts

@@ -0,0 +1,205 @@
+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 { html, TemplateResult } from 'lit'
+
+import { FetchHandler } 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}`,
+          createdAt: Date.now(),
+          updatedAt: Date.now()
+        }
+      })
+  }
+}
+
+const config = {
+  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: 'search',
+      sortable: true,
+      width: 120
+    },
+    {
+      type: 'string',
+      name: 'description',
+      header: 'description',
+      filter: 'search',
+      record: {
+        align: 'left'
+      },
+      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
+    }
+  ],
+  pagination: {
+    pages: [30, 50, 100, 200]
+  }
+}
+
+export default {
+  title: 'explicit-fetch attribute for ox-grist',
+  component: 'ox-grist',
+  argTypes: {
+    explicitFetch: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  explicitFetch: boolean
+}
+
+const Template: Story<ArgTypes> = ({ explicitFetch = false }: 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);
+      border-top: 2px solid rgba(0, 0, 0, 0.2);
+      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=${config}
+    mode="GRID"
+    ?explicit-fetch=${explicitFetch}
+    .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>
+      </div>
+    </div>
+  </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  explicitFetch: true
+}

package/stories/grist-modes.stories.ts

@@ -0,0 +1,488 @@
+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'
+    },
+    {
+      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,
+      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
+      },
+      filter: 'between',
+      sortable: true,
+      width: 50
+    },
+    {
+      type: 'json5',
+      name: 'json5',
+      header: 'JSON5',
+      width: 200
+    },
+    {
+      type: 'image',
+      name: 'thumbnail',
+      header: 'thumbnail',
+      record: {
+        editable: true
+      }
+    },
+    {
+      type: 'datetime',
+      name: 'updatedAt',
+      header: 'updated at',
+      record: {
+        editable: true
+      },
+      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: {
+      click: '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: '3 modes in ox-grist',
+  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/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);
+      border-top: 2px solid rgba(0, 0, 0, 0.2);
+      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(--status-success-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
+    .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
+        <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>
+
+      <div id="modes">
+        <mwc-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+        <mwc-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+        <mwc-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+      </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,
+  fetchHandler,
+  mode: 'GRID'
+}

package/themes/grist-theme.css

@@ -38,7 +38,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);
-  --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --grid-record-padding: var(--padding-default);
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);

package/dist/src/filters/filter-input copy.d.ts

@@ -1,2 +0,0 @@
-import { FilterSelectRenderer } from '../types';
-export declare const FilterInput: FilterSelectRenderer;

package/dist/src/filters/filter-input copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"filter-input copy.js","sourceRoot":"","sources":["../../../src/filters/filter-input copy.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,OAAO,IAAI,CAAA;;aAEA,IAAI;aACJ,MAAM,CAAC,IAAI;eACT,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBAC/B,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\n\nexport const FilterInput: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <input\n      type=${type}\n      name=${column.name}\n      .value=${value === undefined ? '' : value}\n      @change=${(e: CustomEvent) => {\n        const input = e.target as HTMLInputElement\n        input.dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: input.value\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-mwc-checkbox.d.ts

@@ -1,4 +0,0 @@
-import '@material/mwc-checkbox';
-import '@material/mwc-formfield';
-import { FilterSelectRenderer } from '../types';
-export declare const FilterMwcCheckbox: FilterSelectRenderer;