@operato/data-grist 1.11.6 → 1.11.8

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

@@ -1,8 +1,9 @@
 import '@operato/popup/ox-popup.js'
 import '@material/mwc-icon'
 
-import { css, html, LitElement, PropertyValues, nothing } from 'lit'
+import { css, html, LitElement, PropertyValues, nothing, TemplateResult } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
@@ -24,6 +25,7 @@ export class DataGridHeader extends LitElement {
         display: grid;
         grid-template-columns: var(--grid-template-columns);
 
+        border-top: var(--grid-header-top-border);
         overflow: hidden;
       }
 
@@ -33,7 +35,6 @@ export class DataGridHeader extends LitElement {
         white-space: nowrap;
         overflow: hidden;
         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);
 
@@ -58,6 +59,7 @@ export class DataGridHeader extends LitElement {
         text-overflow: ellipsis;
         line-height: 1.6;
         text-transform: capitalize;
+        align-self: center;
       }
 
       span[for-title] mwc-icon {
@@ -66,6 +68,9 @@ export class DataGridHeader extends LitElement {
 
       span[sorter],
       span[filter] {
+        display: flex;
+        align-self: center;
+
         padding: 0;
         border: 0;
       }
@@ -120,6 +125,15 @@ export class DataGridHeader extends LitElement {
         z-index: 1;
       }
 
+      .span-both {
+        grid-row: 1 / span 2; /* 1단과 2단에 걸쳐 표시 */
+      }
+
+      .group-header {
+        grid-row: 1; /* 1행에 배치 */
+        grid-column: var(--group-start) / span var(--group-size); /* 2열부터 시작하여 2열에 걸쳐 표시 */
+      }
+
       @media print {
         :host {
           grid-template-columns: var(--grid-template-print-columns);
@@ -134,6 +148,21 @@ export class DataGridHeader extends LitElement {
   @property({ type: Array }) filters: FilterValue[] = []
   @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false
 
+  @state() private row1: {
+    index: number
+    column: ColumnConfig
+    clazz?: string
+    start?: number
+    size?: number
+    align?: string
+    group?: string
+  }[] = []
+
+  @state() private row2: {
+    index: number
+    column: ColumnConfig
+  }[] = []
+
   private _lastAccVal?: number
   private _throttledNotifier?: any
 
@@ -176,54 +205,71 @@ export class DataGridHeader extends LitElement {
   }
 
   render() {
-    var columns = this.columns || []
+    const clazz = this.row2.length > 0 ? 'span-both' : undefined
 
     return html`
-      ${columns.map((column, idx) =>
-        !column.hidden
-          ? html`
-              <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>
-                <span
-                  for-title
-                  style="text-align:${column.record.align || 'left'};${column.header?.style || ''}"
-                  @click=${(e: MouseEvent) => this._changeSort(column)}
-                  @mouseover=${(e: MouseEvent) => {
-                    const element = e.target as HTMLSpanElement
-
-                    if (detectOverflow(element)) {
-                      element.setAttribute('data-tooltip', element.textContent!.trim())
-                    }
-                  }}
-                  @mouseout=${(e: MouseEvent) => {
-                    const element = e.target as HTMLSpanElement
-                    element.removeAttribute('data-tooltip')
-                  }}
-                  >${this._renderHeader(column)}
-                </span>
-
-                ${column.sortable
-                  ? html`
-                      <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>
-                        ${this._renderSortHeader(column)}
-                      </span>
-                    `
-                  : nothing}
-                ${this.filteringFeature && column.filter && (column.filter as FilterConfigObject).operator !== 'search'
-                  ? html` <span filter> ${this._renderFilterHeader(column)} </span> `
-                  : nothing}
-                ${column.resizable !== false
-                  ? html`
-                      <span splitter draggable="false" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}
-                        >&nbsp;</span
-                      >
-                    `
-                  : nothing}
-              </div>
-            `
-          : nothing
+      ${this.row1.map(({ column, clazz, start, size, align, index, group }) =>
+        this.renderHeaderColumn({ column, clazz, start, size, align, index, group })
       )}
 
-      <div column></div>
+      <div column class=${ifDefined(clazz)}></div>
+
+      ${this.row2.map(({ column, index }) => this.renderHeaderColumn({ column, index }))}
+    `
+  }
+
+  renderHeaderColumn({ column, clazz, start, size, align, index, group }: any): TemplateResult {
+    if (column.hidden) {
+      return html`${nothing}`
+    }
+
+    return html`
+      <div
+        ?gutter=${column.type == 'gutter'}
+        ?fixed=${column.fixed}
+        column
+        class=${ifDefined(clazz)}
+        style=${group
+          ? `--group-start:${start};--group-size:${size};${column.header?.style || ''}`
+          : `${column.header?.style || ''}`}
+      >
+        <span
+          for-title
+          style="text-align:${align || column.record.align || 'left'};"
+          @click=${(e: MouseEvent) => this._changeSort(column)}
+          @mouseover=${(e: MouseEvent) => {
+            const element = e.target as HTMLSpanElement
+
+            if (detectOverflow(element)) {
+              element.setAttribute('data-tooltip', element.textContent!.trim())
+            }
+          }}
+          @mouseout=${(e: MouseEvent) => {
+            const element = e.target as HTMLSpanElement
+            element.removeAttribute('data-tooltip')
+          }}
+          >${this._renderHeader(column)}
+        </span>
+
+        ${!group && column.sortable
+          ? html`
+              <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>
+                ${this._renderSortHeader(column)}
+              </span>
+            `
+          : nothing}
+        ${!group &&
+        this.filteringFeature &&
+        column.filter &&
+        (column.filter as FilterConfigObject).operator !== 'search'
+          ? html` <span filter> ${this._renderFilterHeader(column)} </span> `
+          : nothing}
+        ${column.resizable !== false
+          ? html`
+              <span splitter draggable="false" @mousedown=${(e: MouseEvent) => this._mousedown(e, index)}>&nbsp;</span>
+            `
+          : nothing}
+      </div>
     `
   }
 
@@ -246,6 +292,61 @@ export class DataGridHeader extends LitElement {
         })
       )
     }
+
+    if (changes.has('columns')) {
+      this.row2 = this.columns.reduce((row2, column, index) => {
+        if (column.hidden || !column.header?.group) {
+          return row2
+        }
+        return row2.concat({
+          index,
+          column
+        } as any)
+      }, [] as any[])
+
+      const clazz = this.row2.length > 0 ? 'span-both' : undefined
+
+      var columnNo = 0
+
+      this.row1 = this.columns.reduce((row1, column, index) => {
+        if (column.hidden) {
+          return row1
+        }
+
+        columnNo++
+        if (!column.header?.group) {
+          return row1.concat({
+            index,
+            column,
+            clazz
+          } as any)
+        }
+        const { group, groupStyle } = column.header
+        const last = row1[row1.length - 1] as any
+
+        if (!last || group !== last.group) {
+          return row1.concat({
+            index,
+            column: {
+              ...column,
+              header: {
+                renderer: () => group,
+                style: groupStyle
+              }
+            },
+            group,
+            align: 'center',
+            clazz: 'group-header',
+            start: columnNo,
+            size: 1
+          } as any)
+        }
+
+        last.size++
+
+        return row1
+      }, [] as any[])
+    }
   }
 
   _renderHeader(column: ColumnConfig) {
@@ -433,7 +534,7 @@ export class DataGridHeader extends LitElement {
       e.preventDefault()
       let column = this.columns[idx]
 
-      let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))
+      let width = Math.max(0, Number(column.width || 100) + this._accumalate(e.movementX))
       if (width == 0) {
         /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */
         return

package/src/editors/ox-grist-editor.ts

@@ -123,7 +123,7 @@ export class OxGristEditor extends LitElement {
 
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
     const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    this.value = this._dirtyValue = editorValue
+    this.value = this._dirtyValue = isFinite(editorValue) ? Number(editorValue) : editorValue
 
     requestAnimationFrame(() => {
       this.focus()

package/src/types.ts

@@ -159,6 +159,8 @@ export type ColumnWidthCallback = (column: ColumnConfig) => string
 export type HeaderConfig = {
   renderer: HeaderRenderer
   style?: string
+  group?: string
+  groupStyle?: string
 }
 export type HeaderRenderer = (column: ColumnConfig) => any
 

package/stories/dynamic-editable.stories.ts

@@ -24,7 +24,10 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
           description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
           date: '2023-09-20',
-          createdAt: Date.now(),
+          routing: {
+            id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
+            name: '조림>세척'
+          },
           updatedAt: Date.now()
         }
       })
@@ -104,19 +107,31 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         width: 120
       },
       {
-        type: 'datetime',
-        name: 'updatedAt',
-        header: 'updated at',
+        type: 'object',
+        name: 'routing',
+        header: 'routing',
+        record: { editable: true, options: { queryName: 'routings' }, mandatory: true },
         width: 180
       },
       {
         type: 'datetime',
-        name: 'createdAt',
-        header: 'created at',
+        name: 'updatedAt',
+        header: 'updated at',
         width: 180
       }
     ],
-    rows: {},
+    rows: {
+      selectable: {
+        multiple: false
+      },
+      handlers: {
+        click: 'select-row',
+        dblclick: () => {
+          console.log('dblclick333')
+        }
+      },
+      appendable: false
+    },
     sorters: [
       {
         name: 'name',

package/stories/fixed-column.stories.ts

@@ -259,7 +259,8 @@ const config = {
       header: 'thumbnail',
       record: {
         editable: true
-      }
+      },
+      width: 120
     },
     {
       type: 'datetime',

package/stories/grist-modes.stories.ts

@@ -252,7 +252,8 @@ const config = {
       header: 'thumbnail',
       record: {
         editable: true
-      }
+      },
+      width: 120
     },
     {
       type: 'datetime',