@operato/data-grist 2.0.0-alpha.12 → 2.0.0-alpha.120

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

@@ -47,6 +47,10 @@ export class DataGridAccumField extends LitElement {
         flex: none;
         margin: 0 auto;
       }
+
+      md-icon {
+        font-size: 1.5em;
+      }
     `
   ]
 
@@ -58,11 +62,11 @@ export class DataGridAccumField extends LitElement {
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
   @property({ attribute: false }) emphasized: any = false
-  @property({ type: String }) fixed?: string
+  @property({ type: String, attribute: true }) fixed?: string
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
-      return this.columnIndex == 0 ? html`<mwc-icon>functions</mwc-icon>` : html`${nothing}`
+      return this.columnIndex == 0 ? html`<md-icon>functions</md-icon>` : html`${nothing}`
     }
 
     var { value, column, record, rowIndex } = this
@@ -70,11 +74,12 @@ export class DataGridAccumField extends LitElement {
 
     // tag가 true이면 value 앞에 (sum) 같은 태그 생성
     var { accumulator } = column
+    let tag = ''
     if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {
-      value = `(${i18next.t(`label.accumulator_${accumulator.type}`)}) ${value}`
+      tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`
     }
 
-    return html`${renderer?.call(this, value, column, record, rowIndex, this)}`
+    return html`${tag}&nbsp;${renderer?.call(this, value, column, record, rowIndex, this)}`
   }
 
   updated(changes: PropertyValues<this>) {
@@ -95,6 +100,8 @@ export class DataGridAccumField extends LitElement {
     if (changes.has('fixed')) {
       if (this.fixed) {
         this.style.left = this.fixed + 'px'
+      } else {
+        this.style.left = 'unset'
       }
     }
   }

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

@@ -10,6 +10,7 @@ export const dataGridBodyStyle = css`
     outline: none;
     color: var(--grid-record-color);
     position: relative;
+    border-bottom: var(--grid-body-bottom-border);
   }
 
   ox-grid-field[odd] {

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

@@ -100,7 +100,7 @@ export class DataGridBody extends LitElement {
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Object }) focused: { row: number; column: number } = ZERO_FOCUS
-  @property({ type: Object }) editTarget: { row: number; column: number; valueWithEdit: string | null } | null = null
+  @property({ type: Object }) editTarget: { row: number; column: number; valueWith: string | null } | null = null
   @property({ type: Number }) from = -1
   @property({ type: Number }) to = -1
   @property({ type: Array }) fixedLefts: number[] = []
@@ -135,7 +135,7 @@ export class DataGridBody extends LitElement {
   render() {
     // block이 선택되어 있으면, focused row/column은 표현하지 않는다.
     var { row: focusedRow, column: focusedColumn } = (!this._selectBlock && this.focused) || {}
-    var { row: editingRow, column: editingColumn, valueWithEdit = null } = this.editTarget || {}
+    var { row: editingRow, column: editingColumn, valueWith = null } = this.editTarget || {}
 
     var columns = this.columns.filter(column => !column.hidden)
     var data = this.data
@@ -182,7 +182,7 @@ export class DataGridBody extends LitElement {
                 ?selected-row=${attrSelected}
                 ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}
                 ?editing=${idxRow === editingRow && idxColumn === editingColumn}
-                .valueWithEdit=${valueWithEdit}
+                .valueWith=${valueWith}
                 .value=${record[column.name]}
                 ?dirty=${!!dirtyFields[column.name]}
                 fixed=${ifDefined(this.fixedLefts[idxColumn])}
@@ -400,7 +400,7 @@ export class DataGridBody extends LitElement {
     }
   }
 
-  startEditTarget(row: number, column: number, valueWithEdit: string | null = null) {
+  startEditTarget(row: number, column: number, valueWith: string | null = null) {
     var { editable } = this.columns.filter(column => !column.hidden)[column].record
     if (typeof editable === 'function') {
       const curRow = this.data.records[row] || {}
@@ -419,7 +419,7 @@ export class DataGridBody extends LitElement {
     this.editTarget = {
       row,
       column,
-      valueWithEdit
+      valueWith
     }
   }
 
@@ -647,14 +647,19 @@ export class DataGridBody extends LitElement {
 
             switch (type) {
               case 'object':
+              case 'parameters':
                 try {
                   value = JSON.parse(value || 'null')
                 } catch (err) {}
                 break
               case 'boolean':
+              case 'checkbox':
                 value = !!value && !!String(value).match(/true/i)
                 break
               case 'number':
+              case 'float':
+              case 'integer':
+              case 'progress':
                 value = parseToNumberOrNull(value)
                 break
               default:

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

@@ -87,9 +87,9 @@ export class DataGridField extends LitElement {
   @property({ type: Number }) columnIndex = 0
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
-  @property({ type: String }) valueWithEdit: string | null = null
+  @property({ type: String }) valueWith: string | null = null
   @property({ attribute: false }) emphasized: any = false
-  @property({ type: String }) fixed?: string
+  @property({ type: String, attribute: true }) fixed?: string
   @property({ type: String }) type?: string
   @property({ type: Boolean }) isWorking: boolean = false
 
@@ -155,6 +155,8 @@ export class DataGridField extends LitElement {
     if (changes.has('fixed')) {
       if (this.fixed) {
         this.style.left = this.fixed + 'px'
+      } else {
+        this.style.left = 'unset'
       }
     }
 

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -14,17 +14,18 @@ export class DataGridFooter extends LitElement {
       :host {
         display: flex;
         flex-direction: row;
+        gap: 4px;
         overflow: hidden;
 
         padding: var(--grid-footer-padding);
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
+        align-items: center;
       }
 
       :host * {
         white-space: nowrap;
         overflow: hidden;
-        padding: 0 2px;
 
         text-overflow: ellipsis;
         text-align: center;
@@ -35,11 +36,18 @@ export class DataGridFooter extends LitElement {
         flex: 1;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 1.5em;
         vertical-align: middle;
       }
 
+      .limit {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+        align-items: center;
+      }
+
       .limit a {
         color: var(--grid-footer-limit-color);
       }
@@ -82,20 +90,19 @@ export class DataGridFooter extends LitElement {
     var totalPage = Math.max(1, Math.ceil(total / limit))
 
     return html`
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><mwc-icon>skip_previous</mwc-icon></a>
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><mwc-icon>navigate_before</mwc-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><md-icon>skip_previous</md-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><md-icon>navigate_before</md-icon></a>
       <span>page <strong>${page}</strong>&nbsp;/&nbsp;${totalPage}</span>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><mwc-icon>navigate_next</mwc-icon></a>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><mwc-icon>skip_next</mwc-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><md-icon>navigate_next</md-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><md-icon>skip_next</md-icon></a>
 
       <span class="filler"></span>
 
       <span class="limit">
         ${pages.map(
-          size =>
-            html`
-              <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
-            `
+          size => html`
+            <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
+          `
         )}
         records
       </span>

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

@@ -1,5 +1,5 @@
 import '@operato/popup/ox-popup.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, PropertyValues, nothing, TemplateResult } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -22,6 +22,7 @@ export class DataGridHeader extends LitElement {
     TooltipStyles,
     css`
       :host {
+        position: relative;
         display: grid;
         grid-template-columns: var(--grid-template-columns);
 
@@ -62,7 +63,7 @@ export class DataGridHeader extends LitElement {
         align-self: center;
       }
 
-      span[for-title] mwc-icon {
+      span[for-title] md-icon {
         font-size: var(--grid-record-fontsize);
       }
 
@@ -75,11 +76,11 @@ export class DataGridHeader extends LitElement {
         border: 0;
       }
 
-      span[sorter] mwc-icon {
+      span[sorter] md-icon {
         font-size: var(--grid-header-sorter-size);
       }
 
-      span[filter] > mwc-icon {
+      span[filter] > md-icon {
         font-size: var(--fontsize-default);
         line-height: 20px;
       }
@@ -104,7 +105,7 @@ export class DataGridHeader extends LitElement {
         vertical-align: middle;
       }
 
-      [filter-title] mwc-icon {
+      [filter-title] md-icon {
         opacity: 0.7;
         color: var(--grid-header-filter-title-icon-color);
       }
@@ -363,12 +364,10 @@ export class DataGridHeader extends LitElement {
     if (sorters.length > 1) {
       var rank = sorters.indexOf(sorter) + 1
       return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
-        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `
+        ? html` <md-icon>keyboard_arrow_down</md-icon><sub>${rank}</sub> `
+        : html` <md-icon>keyboard_arrow_up</md-icon><sub>${rank}</sub> `
     } else {
-      return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `
-        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `
+      return sorter.desc ? html` <md-icon>keyboard_arrow_down</md-icon> ` : html` <md-icon>keyboard_arrow_up</md-icon> `
     }
   }
 
@@ -381,7 +380,7 @@ export class DataGridHeader extends LitElement {
     const renderer = getFilterRenderer(type)[idx]
 
     return html`
-      <mwc-icon
+      <md-icon
         @click=${(e: Event) => {
           const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement
           const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null
@@ -398,63 +397,63 @@ export class DataGridHeader extends LitElement {
             top
           })
         }}
-        >filter_alt</mwc-icon
+        >filter_alt</md-icon
       >
 
       ${!renderer
         ? html``
         : type !== 'select'
-        ? html` <ox-popup
-            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
-            ${renderer(column, value, this)}</ox-popup
-          >`
-        : filter!.operator === 'in'
-        ? html`<ox-popup-list
-            multiple
-            attr-selected="checked"
-            .value=${value}
-            with-search
-            @select=${(e: CustomEvent) =>
-              e.target?.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    name,
-                    operator: filter!.operator,
-                    value: !e.detail
-                      ? undefined
-                      : e.detail instanceof Array && e.detail.length === 0
-                      ? undefined
-                      : e.detail
-                  }
-                })
-              )}
-            ><div filter-title slot="header">
-              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
-            </div>
-            ${renderer(column, value, this)}</ox-popup-list
-          >`
-        : html`<ox-popup-list
-            .value=${value}
-            with-search
-            @select=${(e: CustomEvent) =>
-              e.target?.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    name,
-                    operator: filter!.operator,
-                    value: e.detail ? e.detail : undefined
-                  }
-                })
-              )}
-            ><div filter-title slot="header">
-              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
-            </div>
-            ${renderer(column, value, this)}</ox-popup-list
-          >`}
+          ? html` <ox-popup
+              ><div filter-title><md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong></div>
+              ${renderer(column, value, this)}</ox-popup
+            >`
+          : filter!.operator === 'in'
+            ? html`<ox-popup-list
+                multiple
+                attr-selected="checked"
+                .value=${value}
+                with-search
+                @select=${(e: CustomEvent) =>
+                  e.target?.dispatchEvent(
+                    new CustomEvent('filter-change', {
+                      bubbles: true,
+                      composed: true,
+                      detail: {
+                        name,
+                        operator: filter!.operator,
+                        value: !e.detail
+                          ? undefined
+                          : e.detail instanceof Array && e.detail.length === 0
+                            ? undefined
+                            : e.detail
+                      }
+                    })
+                  )}
+                ><div filter-title slot="header">
+                  <md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong>
+                </div>
+                ${renderer(column, value, this)}</ox-popup-list
+              >`
+            : html`<ox-popup-list
+                .value=${value}
+                with-search
+                @select=${(e: CustomEvent) =>
+                  e.target?.dispatchEvent(
+                    new CustomEvent('filter-change', {
+                      bubbles: true,
+                      composed: true,
+                      detail: {
+                        name,
+                        operator: filter!.operator,
+                        value: e.detail ? e.detail : undefined
+                      }
+                    })
+                  )}
+                ><div filter-title slot="header">
+                  <md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong>
+                </div>
+                ${renderer(column, value, this)}</ox-popup-list
+              >`}
     `
   }
 
@@ -471,11 +470,15 @@ export class DataGridHeader extends LitElement {
       if (sorter.desc) {
         sorters.splice(idx, 1)
       } else {
-        sorter.desc = true
+        sorters.splice(idx, 1, {
+          ...sorter,
+          desc: true
+        })
       }
     } else {
       var sorter = {
-        name: column.name
+        name: column.name,
+        desc: false
       }
 
       sorters.push(sorter)

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

@@ -43,6 +43,11 @@ export class DataGrid extends DataManipulator {
         transform: translate(-50%, -50%);
       }
 
+      div[setting] {
+        position: relative;
+        z-index: 1;
+      }
+
       @media print {
         :host {
           zoom: 80%;
@@ -159,7 +164,7 @@ export class DataGrid extends DataManipulator {
 
       if (this.focused && 'row' in this.focused) {
         var { row = 0, column = 0 } = this.focused
-        var { records: oldrecords = [] } = changes.get('data')
+        var { records: oldrecords = [] } = changes.get('data') || {}
         var { records: newrecords } = this.data
 
         var oldrecord = oldrecords[row]
@@ -172,8 +177,8 @@ export class DataGrid extends DataManipulator {
               ('id' in oldrecord
                 ? record.id == oldrecord.id
                 : 'name' in oldrecord
-                ? record.name == oldrecord.name
-                : false)
+                  ? record.name == oldrecord.name
+                  : false)
           )
 
           this.focused = {
@@ -222,6 +227,10 @@ export class DataGrid extends DataManipulator {
     var data = this.data
 
     return html`
+      <div setting>
+        <slot name="setting"></slot>
+      </div>
+
       <ox-grid-header
         .columns=${columns}
         .sorters=${this.sorters}
@@ -234,7 +243,8 @@ export class DataGrid extends DataManipulator {
           this.calculateWidths(columns)
         }}
         @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}
-      ></ox-grid-header>
+      >
+      </ox-grid-header>
 
       <ox-grid-body
         .config=${this.config}

package/src/data-grist.ts

@@ -29,6 +29,7 @@ import {
   GristRecord,
   GristSelectFunction,
   PaginationConfig,
+  PersonalGristPreference,
   SortersConfig
 } from './types'
 import { convertListParamToSearchString, convertSearchStringToListParam } from './utils'
@@ -59,7 +60,7 @@ export class DataGrist extends LitElement implements DataConsumer {
 
         padding: var(--ox-grist-padding);
 
-        --mdc-icon-size: var(--grid-record-wide-fontsize);
+        --md-icon-size: var(--grid-record-wide-fontsize);
       }
 
       #wrap {
@@ -85,7 +86,7 @@ export class DataGrist extends LitElement implements DataConsumer {
         box-sizing: border-box;
         background-color: var(--grist-background-color);
 
-        z-index: 1;
+        z-index: 2;
       }
     `
   ]
@@ -170,8 +171,21 @@ export class DataGrist extends LitElement implements DataConsumer {
    */
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
-  @state() _data: GristData = ZERO_DATA
-  @state() _config: GristConfig = ZERO_CONFIG
+  @property({ type: Object }) personalConfigProvider?: {
+    load(): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
+    save(
+      preference?: PersonalGristPreference
+    ): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
+    reset(): void | Promise<void>
+  }
+
+  @state() personalConfig?: {
+    columns?: Partial<ColumnConfig>[]
+    [key: string]: any
+  }
+
+  @state() _data: GristData = ZERO_DATA // copy data, dirty data
+  @state() _config: GristConfig = ZERO_CONFIG // compiled configuration
   @state() private _showSpinner: boolean = false
 
   @query('slot[name=headroom]') head!: HTMLElement
@@ -300,9 +314,47 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  private setConfig() {
+  public applyUpdatedConfiguration() {
+    const config = { ...this.config }
+    const columns: Partial<ColumnConfig>[] = config.columns
+
+    if (this.personalConfig) {
+      const { columns: personalColumns } = this.personalConfig
+
+      if (personalColumns) {
+        const xcolumns = columns.map((column: Partial<ColumnConfig>) => {
+          const personalColumn = personalColumns.find(pcolumn => pcolumn.name == column.name)
+          return personalColumn ? { ...column, ...personalColumn } : column
+        })
+
+        function reorderList(a: { name: string }[], b: { name: string }[]): { name: string }[] {
+          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
+          const result = new Array(a.length)
+
+          // b 배열에 없는 아이템은 원래 위치로 채움
+          a.forEach((item, index) => {
+            if (!item.name || !b.find(bi => bi.name == item.name)) {
+              result[index] = item
+            }
+          })
+
+          b.forEach(item => {
+            const ai = a.find(ai => ai.name == item.name)
+            if (ai) {
+              result[result.findIndex(slot => slot === undefined)] = ai
+            }
+          })
+
+          return result
+        }
+
+        // 배열 재정렬 실행
+        config.columns = reorderList(xcolumns as any, personalColumns as any)
+      }
+    }
+
     this._config = buildConfig({
-      ...this.config
+      ...config
     })
 
     this.dispatchEvent(
@@ -401,31 +453,32 @@ export class DataGrist extends LitElement implements DataConsumer {
                 .pagination=${this.pagination || {}}
                 ?empty=${empty}
               >
+                <slot name="setting" slot="setting"> </slot>
               </ox-grid>
             `
           : this.mode == 'CARD'
-          ? html`
-              <ox-card
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                ?empty=${empty}
-              >
-              </ox-card>
-            `
-          : html`
-              <ox-list
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                ?empty=${empty}
-              >
-              </ox-list>
-            `}
+            ? html`
+                <ox-card
+                  id="grist"
+                  .config=${this.compiledConfig}
+                  .data=${this._data}
+                  .sorters=${this.sorters || []}
+                  .filters=${this.filters || []}
+                  ?empty=${empty}
+                >
+                </ox-card>
+              `
+            : html`
+                <ox-list
+                  id="grist"
+                  .config=${this.compiledConfig}
+                  .data=${this._data}
+                  .sorters=${this.sorters || []}
+                  .filters=${this.filters || []}
+                  ?empty=${empty}
+                >
+                </ox-list>
+              `}
       </div>
 
       <div id="spinner" ?show=${this._showSpinner}></div>
@@ -532,8 +585,10 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('config')) {
-      this.setConfig()
+    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+      this.personalConfig = await this.personalConfigProvider.load()
+    } else if (changes.has('config') || changes.has('personalConfig')) {
+      this.applyUpdatedConfiguration()
     }
 
     if (changes.has('fetchHandler')) {

package/src/data-list/data-list-gutter.ts

@@ -22,6 +22,18 @@ export class DataListGutter extends LitElement {
         font-size: var(--grid-record-wide-fontsize);
         text-overflow: ellipsis;
         color: var(--grid-record-color);
+
+        padding-right: 10px;
+      }
+
+      :host-context(.expand)::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 150%;
+        height: 220%;
       }
 
       * {