@operato/data-grist 2.0.0-alpha.142 → 2.0.0-alpha.145

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

@@ -615,7 +615,7 @@ export class DataGridBody extends LitElement {
           const cells = record.querySelectorAll('td')
           cells.forEach((item, columnIndex) => {
             const targetColumn = columns[column + columnIndex]
-            var value = item.textContent as any
+            var value = item.textContent?.trim() as any
             let type = targetColumn.type || item.getAttribute('type') || 'string'
             type = type.includes('object') ? 'object' : type // 오브젝트 타입 예외처리
             let { editable } = targetColumn.record
@@ -687,7 +687,9 @@ export class DataGridBody extends LitElement {
           )
         }
       }
-    } catch (e) {}
+    } catch (e) {
+      console.log('e : ', e)
+    }
   }
 
   setSelectBlock(start?: DataGridField, end?: DataGridField) {

package/src/data-grid/event-handlers/data-grid-body-click-handler.ts

@@ -10,6 +10,10 @@ import { DataGridField } from '../data-grid-field'
 export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
   e.stopPropagation()
 
+  if ((e as MouseEvent).detail === 2) {
+    return;
+  }
+
   if (this.editTarget) {
     /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
     return

package/stories/click-event.stories.ts

@@ -0,0 +1,269 @@
+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 {
+  FetchHandler,
+  FetchOption,
+  GristEventHandler,
+} from '../src/types.js'
+
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
+const fetchHandler: FetchHandler = async ({ page, limit }: FetchOption) => {
+  var total = 25
+  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}`,
+          accval: Math.random(),
+          accval2: Math.round(Math.random() * 15),
+          createdAt: Date.now(),
+          updatedAt: Date.now()
+        }
+      })
+  }
+}
+
+const config = {
+  columns: [
+    {
+      type: 'gutter',
+      gutterName: 'dirty'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'sequence'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'row-selector',
+      multiple: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'add',
+      title: 'add',
+      handlers: {
+        click: ((columns, data, column, record, rowIndex, target, e) => console.log('column - clicked')) as GristEventHandler,
+        dblclick: ((columns, data, column, record, rowIndex, target, e) => console.log('column - dblclicked')) as GristEventHandler,
+        contextmenu: ((columns, data, column, record, rowIndex, target, e) => console.log('column - contextmenued')) as GristEventHandler,
+        focus: ((columns, data, column, record, rowIndex, target, e) => console.log('column - focused')) as GristEventHandler,
+      }
+    },
+    {
+      type: 'string',
+      name: 'id',
+      hidden: true
+    },
+    {
+      type: 'string',
+      name: 'name',
+      label: true,
+      header: 'name',
+      record: {
+        editable: true
+      },
+      filter: 'search',
+      sortable: true,
+      width: 120,
+      fixed: true
+    },
+    {
+      type: 'string',
+      name: 'description',
+      header: {
+        renderer: () => 'description',
+        style: 'text-transform: none;'
+      },
+      filter: 'search',
+      record: {
+        editable: true,
+        align: 'left'
+      },
+      width: 200
+    },
+    {
+      type: 'number',
+      name: 'accval',
+      label: true,
+      header: 'accval',
+      record: {
+        editable: true,
+        align: 'right',
+        defaultValue: 100,
+        format: '+$#,##0.00'
+      },
+      accumulator: 'avg',
+      sortable: true,
+      width: 130
+    },
+    {
+      type: 'number',
+      name: 'accval2',
+      label: true,
+      header: 'accval2',
+      record: {
+        editable: true,
+        align: 'right',
+        renderer: (value: any, column: any, record: any) => {
+          return value && Intl.NumberFormat('en-US').format(value)
+        }
+      },
+      accumulator: {
+        type: 'sum',
+        tag: true
+      },
+      sortable: true,
+      width: 130
+    },
+    {
+      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: false
+    },
+    handlers: {
+      click: ((columns, data, column, record, rowIndex, target, e) => console.log('row - clicked')) as GristEventHandler,
+      dblclick: ((columns, data, column, record, rowIndex, target, e) => console.log('row - dblclicked')) as GristEventHandler,
+      contextmenu: ((columns, data, column, record, rowIndex, target, e) => console.log('row - contextmenued')) as GristEventHandler,
+      focus: ((columns, data, column, record, rowIndex, target, e) => console.log('row - focused')) as GristEventHandler,
+  },
+    accumulator: true
+  },
+  sorters: [
+    {
+      name: 'name',
+      desc: true
+    }
+  ],
+  pagination: {
+    pages: [20, 30, 50, 100, 200]
+  }
+}
+
+export default {
+  title: 'click events in ox-grist',
+  component: 'ox-grist',
+  argTypes: {
+    config: { control: 'object' },
+    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
+    urlParamsSensitive: { control: 'boolean' },
+    withoutSearch: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  config: object
+  mode: 'GRID'|'LIST'|'CARD'
+  urlParamsSensitive: boolean
+  withoutSearch: boolean
+  fetchHandler: FetchHandler
+}
+
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  withoutSearch = 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>
+
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
+    <ox-grist
+      mode=${mode}
+      .config=${config}
+      .fetchHandler=${fetchHandler}
+      ?url-params-sensitive=${urlParamsSensitive}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form ?without-search=${withoutSearch} autofocus></ox-filters-form>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
+      </div>
+    </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  config,
+  fetchHandler,
+  mode: 'GRID'
+}