@operato/data-grist 1.7.3 → 1.8.0

package/src/data-grid/data-grid-header.ts

@@ -1,7 +1,7 @@
 import '@operato/popup/ox-popup.js'
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import throttle from 'lodash-es/throttle'
 
@@ -32,7 +32,7 @@ export class DataGridHeader extends LitElement {
 
         white-space: nowrap;
         overflow: hidden;
-        background-color: var(--grid-header-background-color);
+        background-color: var(--grist-background-color);
         border-top: var(--grid-header-top-border);
         border-bottom: var(--grid-header-bottom-border);
         padding: var(--grid-header-padding);
@@ -115,6 +115,12 @@ export class DataGridHeader extends LitElement {
         margin-bottom: 5px;
       }
 
+      [fixed] {
+        position: sticky;
+        background-color: #fff;
+        z-index: 1;
+      }
+
       @media print {
         :host {
           grid-template-columns: var(--grid-template-print-columns);
@@ -125,10 +131,8 @@ export class DataGridHeader extends LitElement {
 
   @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS
   @property({ type: Object }) data: GristData = ZERO_DATA
-
   @property({ type: Array }) sorters: SortersConfig = []
   @property({ type: Array }) filters: FilterValue[] = []
-
   @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false
 
   private _lastAccVal?: number
@@ -179,7 +183,7 @@ export class DataGridHeader extends LitElement {
       ${columns.map((column, idx) =>
         !column.hidden
           ? html`
-              <div ?gutter=${column.type == 'gutter'} column>
+              <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>
                 <span
                   for-title
                   style="text-align:${column.record.align || 'left'};${column.header?.style || ''}"
@@ -224,6 +228,15 @@ export class DataGridHeader extends LitElement {
     `
   }
 
+  updated(changes: PropertyValues) {
+    if (changes.has('columns')) {
+      const fixeds = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
+      fixeds.forEach((header: HTMLElement) => {
+        header.style.left = header.offsetLeft + 'px'
+      })
+    }
+  }
+
   _renderHeader(column: ColumnConfig) {
     var { renderer } = column.header || {}
     var title = renderer.call(this, column)

package/src/data-grid/data-grid.ts

@@ -58,7 +58,7 @@ export class DataGrid extends DataManipulator {
   @query('ox-grid-header', true) header!: DataGridHeader
   @query('ox-grid-footer', true) footer!: LitElement
 
-  private _widths?: string
+  private widths: string[] = []
 
   firstUpdated() {
     /* header and body scroll synchronization */
@@ -194,7 +194,7 @@ export class DataGrid extends DataManipulator {
     /*
      * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.
      */
-    this._widths = columns
+    const widths = columns
       .filter(column => !column.hidden)
       .map(column => {
         switch (typeof column.width) {
@@ -211,8 +211,8 @@ export class DataGrid extends DataManipulator {
       .concat(['auto'])
       .join(' ')
 
-    this.style.setProperty('--grid-template-columns', this._widths)
-    this.style.setProperty('--grid-template-print-columns', this._widths.replace(/px/gi, 'fr'))
+    this.style.setProperty('--grid-template-columns', widths)
+    this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))
   }
 
   render() {
@@ -235,7 +235,7 @@ export class DataGrid extends DataManipulator {
         }}
       ></ox-grid-header>
 
-      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}>
+      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused!}>
         ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       </ox-grid-body>
       ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}

package/src/types.ts

@@ -125,6 +125,7 @@ export type ColumnConfig = {
   type: string
   name: string
   gutterName?: string
+  fixed?: boolean
   header: HeaderConfig
   record: RecordConfig
   handlers: GristEventHandlerSet

package/stories/fixed-column.stories.ts

@@ -0,0 +1,476 @@
+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'
+      }
+    },
+    {
+      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,
+        defaultValue: 10000.1
+      },
+      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,
+        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: 'fixed column',
+  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
+}

package/themes/grist-theme.css

@@ -1,8 +1,8 @@
 body {
   --grid-container-border-color: 1px solid rgba(0, 0, 0, 0.09);
   --grid-container-border-width: 1px 0;
-  --grid-wrap-container-border:0px solid transparent;
-  --grid-wrap-container-border-width:0;
+  --grid-wrap-container-border: 0px solid transparent;
+  --grid-wrap-container-border-width: 0;
 
   --grist-background-color: var(--main-section-background-color);
   --grist-title-margin: 0 0 0 10px;
@@ -38,10 +38,10 @@ body {
   --grid-header-filter-title-font: normal 12px var(--theme-font);
   --grid-header-filter-title-icon-color: var(--primary-color);
 
-  --grid-gutter-padding:var(--padding-default) 0;
+  --grid-gutter-padding: var(--padding-default) 0;
 
   --grid-record-background-color: var(--theme-white-color);
-  --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);
+  --grid-record-odd-background-color: #f9f7f5;
   --grid-record-padding: 0 0 0 var(--padding-default);
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);