@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.0

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

@@ -61,6 +61,10 @@ export class DataGridBody extends LitElement {
     TooltipStyles,
     dataGridBodyStyle,
     css`
+      :host {
+        font-variation-settings: 'FILL' 1;
+      }
+
       [select-block] {
         position: absolute;
         left: var(--select-box-left);
@@ -91,7 +95,7 @@ export class DataGridBody extends LitElement {
       }
 
       ox-grid-accum-field[fixed] {
-        background-color: var(--grid-accum-record-background-color, #ccc);
+        background-color: var(--md-sys-color-inverse-primary);
       }
     `
   ]
@@ -348,13 +352,14 @@ export class DataGridBody extends LitElement {
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 
-    this.addEventListener('wheel', this._onWheelEvent.bind(this))
+    requestAnimationFrame(() => {
+      const primaryColor = getComputedStyle(this).getPropertyValue('--md-sys-color-primary')
 
-    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')
-    this.style.setProperty(
-      '--focused-background-image',
-      `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>")`
-    )
+      this.style.setProperty(
+        '--focused-background-image',
+        `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' fill-opacity='0.2' x='0' y='0' width='100%' height='100%'/></svg>")`
+      )
+    })
 
     this.addEventListener('show-record-view', (e: Event) =>
       this.popupRecordView((e as CustomEvent).detail as { row: number; record: GristRecord })
@@ -380,26 +385,6 @@ export class DataGridBody extends LitElement {
     ) as DataGridField
   }
 
-  _onWheelEvent(e: WheelEvent) {
-    if (this.scrollHeight <= this.clientHeight) {
-      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
-      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)
-
-      var maxScrollLeft = this.scrollWidth - this.clientWidth
-
-      var atStart = this.scrollLeft === 0
-      var atEnd = this.scrollLeft === maxScrollLeft
-
-      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는
-      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용
-      if ((atStart && delta > 0) || (atEnd && delta < 0)) {
-        return true
-      }
-
-      e.preventDefault()
-    }
-  }
-
   startEditTarget(row: number, column: number, valueWith: string | null = null) {
     var { editable } = this.columns.filter(column => !column.hidden)[column].record
     if (typeof editable === 'function') {
@@ -637,7 +622,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
@@ -709,7 +694,9 @@ export class DataGridBody extends LitElement {
           )
         }
       }
-    } catch (e) {}
+    } catch (e) {
+      console.log('e : ', e)
+    }
   }
 
   setSelectBlock(start?: DataGridField, end?: DataGridField) {

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

@@ -30,12 +30,15 @@ export class DataGridField extends LitElement {
         border-bottom: var(--grid-record-border-bottom);
 
         font-size: var(--grid-record-wide-fontsize);
-        min-height: 19px;
+        min-height: 30px;
+        box-sizing: border-box;
       }
+
       :host([gutter]) {
         padding: var(--grid-gutter-padding);
         text-align: center;
       }
+
       :host([gutter]) * {
         cursor: default;
       }
@@ -89,7 +92,7 @@ export class DataGridField extends LitElement {
   @property({ type: Object }) value = {}
   @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 +158,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

@@ -14,7 +14,7 @@ export class DataGridFooter extends LitElement {
       :host {
         display: flex;
         flex-direction: row;
-        gap: 4px;
+        gap: var(--spacing-small);
         overflow: hidden;
 
         padding: var(--grid-footer-padding);
@@ -39,12 +39,14 @@ export class DataGridFooter extends LitElement {
       md-icon {
         font-size: 1.5em;
         vertical-align: middle;
+
+        font-variation-settings: 'FILL' 1;
       }
 
       .limit {
         display: flex;
         flex-direction: row;
-        gap: 6px;
+        gap: var(--spacing-small);
         align-items: center;
       }
 

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

@@ -28,6 +28,8 @@ export class DataGridHeader extends LitElement {
 
         border-top: var(--grid-header-top-border);
         overflow: hidden;
+
+        font-variation-settings: 'FILL' 1;
       }
 
       div[column] {
@@ -35,7 +37,7 @@ export class DataGridHeader extends LitElement {
 
         white-space: nowrap;
         overflow: hidden;
-        background-color: var(--grist-background-color);
+        background-color: var(--grid-header-background-color);
         border-bottom: var(--grid-header-bottom-border);
         padding: var(--grid-header-padding);
 
@@ -45,7 +47,7 @@ export class DataGridHeader extends LitElement {
       }
 
       div[gutter] {
-        padding: var(--padding-default) 0 var(--padding-narrow) 0;
+        padding: var(--spacing-small) 0;
         text-align: center;
       }
 
@@ -111,8 +113,8 @@ export class DataGridHeader extends LitElement {
       }
 
       [filter] input[type='checkbox'] {
-        margin-left: 10px;
-        margin-bottom: 5px;
+        margin-left: var(--spacing-medium);
+        margin-bottom: var(--spacing-small);
       }
 
       [fixed] {
@@ -350,7 +352,7 @@ export class DataGridHeader extends LitElement {
     var { renderer } = column.header || {}
     var title = renderer.call(this, column)
 
-    return html` ${title} `
+    return html`${column?.record?.mandatory ? '*' : ''} ${title} `
   }
 
   _renderSortHeader(column: ColumnConfig) {
@@ -358,7 +360,7 @@ export class DataGridHeader extends LitElement {
 
     var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)
     if (!sorter) {
-      return html``
+      return html`<md-icon style="opacity: 0.2;">unfold_more</md-icon>`
     }
 
     if (sorters.length > 1) {

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

@@ -5,6 +5,7 @@ import './data-grid-footer'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -19,6 +20,7 @@ import { DataGridHeader } from './data-grid-header'
 @customElement('ox-grid')
 export class DataGrid extends DataManipulator {
   static styles = [
+    MDTypeScaleStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -33,6 +35,16 @@ export class DataGrid extends DataManipulator {
       ox-grid-body {
         flex: 1;
         position: relative;
+
+        font-variation-settings: 'FILL' 1;
+      }
+
+      ox-grid-header {
+        font-variation-settings: 'FILL' 1;
+      }
+
+      ox-grid-footer {
+        font-variation-settings: 'FILL' 1;
       }
 
       ox-empty-note {
@@ -232,6 +244,7 @@ export class DataGrid extends DataManipulator {
       </div>
 
       <ox-grid-header
+        class="md-typescale-label-medium-prominent"
         .columns=${columns}
         .sorters=${this.sorters}
         .filters=${this.filters}
@@ -247,6 +260,7 @@ export class DataGrid extends DataManipulator {
       </ox-grid-header>
 
       <ox-grid-body
+        class="md-typescale-body-medium"
         .config=${this.config}
         .columns=${columns}
         .data=${data}
@@ -255,7 +269,15 @@ export class DataGrid extends DataManipulator {
       >
         ${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``}
+      ${paginatable
+        ? html`
+            <ox-grid-footer
+              class="md-typescale-body-medium"
+              .data=${data}
+              .pagination=${this.pagination}
+            ></ox-grid-footer>
+          `
+        : html``}
     `
   }
 

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/src/data-grist.ts

@@ -10,6 +10,7 @@ import isEqual from 'lodash-es/isEqual'
 import Headroom from '@operato/headroom'
 import { pulltorefresh } from '@operato/pull-to-refresh'
 import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'
+import { PagePreferenceProvider } from '@operato/p13n'
 import { SnapshotTaker, TimeCapsule } from '@operato/utils'
 
 import { buildConfig } from './configure/config-builder'
@@ -29,6 +30,7 @@ import {
   GristRecord,
   GristSelectFunction,
   PaginationConfig,
+  PersonalGristPreference,
   SortersConfig
 } from './types'
 import { convertListParamToSearchString, convertSearchStringToListParam } from './utils'
@@ -170,8 +172,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: PagePreferenceProvider = {
+    load: () => {
+      return {}
+    },
+    save: (preference: any) => preference,
+    reset: () => {}
+  }
+
+  @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
@@ -188,6 +203,9 @@ export class DataGrist extends LitElement implements DataConsumer {
   private originMarginTop?: string
   private lastLocation: { origin?: string; pathname?: string; search?: string } = {}
 
+  /* 그리드가 준비되기 전에 fetch 요청이 있었음을 나타내는 플래그임 */
+  private pendingFetch?: boolean
+
   private popstateEventHandler: EventListener = ((e: Event) => {
     const { origin, pathname, search } = window.location
     if (
@@ -300,9 +318,61 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  private setConfig() {
+  public applyUpdatedConfiguration() {
+    if (!this.personalConfig || !this.config) {
+      return
+    }
+
+    const config = { ...this.config }
+    const columns: Partial<ColumnConfig>[] = config.columns
+
+    const { columns: personalColumns, sorters, pagination, mode } = 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)
+    }
+
+    if (pagination) {
+      config.pagination = pagination
+    }
+
+    if (sorters) {
+      config.sorters = sorters
+    }
+
+    if (mode) {
+      this.mode = mode
+    }
+
     this._config = buildConfig({
-      ...this.config
+      ...config
     })
 
     this.dispatchEvent(
@@ -348,7 +418,8 @@ export class DataGrist extends LitElement implements DataConsumer {
       this.dataProvider.limit = limit || pages[0] || ZERO_PAGES[0]
     }
 
-    if (!this.urlParamsSensitive && !this.explicitFetch) {
+    if (this.pendingFetch || (!this.urlParamsSensitive && !this.explicitFetch)) {
+      this.pendingFetch = false
       this.fetch()
     }
   }
@@ -490,9 +561,10 @@ export class DataGrist extends LitElement implements DataConsumer {
    * @param {boolean} reset - If true, the method resets the scroll position to the top.
    */
   async fetch(reset = true) {
-    if (!this.compiledConfig) {
+    if (this.compiledConfig === ZERO_CONFIG) {
       /* avoid to be here */
       console.warn('grist is not configured yet.')
+      this.pendingFetch = true
       return
     }
 
@@ -518,6 +590,8 @@ export class DataGrist extends LitElement implements DataConsumer {
           sortings: this.sorters || this.compiledConfig?.sorters,
           filters: this.filters
         })
+
+        this.pagination && (this.pagination!.limit = limit)
       }
     }
   }
@@ -533,8 +607,10 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('config')) {
-      this.setConfig()
+    if (changes.has('personalConfigProvider')) {
+      this.personalConfig = await this.personalConfigProvider.load()
+    } else if (changes.has('config') || changes.has('personalConfig')) {
+      this.applyUpdatedConfiguration()
     }
 
     if (changes.has('fetchHandler')) {
@@ -1093,4 +1169,8 @@ export class DataGrist extends LitElement implements DataConsumer {
       })
     )
   }
+
+  getCurrentLimit() {
+    return this.dataProvider?.limit || ZERO_PAGINATION.limit
+  }
 }

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

@@ -17,20 +17,20 @@ export class DataListField extends LitElement {
         position: relative;
 
         white-space: normal;
-        padding: 1px 7px 1px 0;
+        padding: var(--spacing-tiny) var(--spacing-small);
 
         font: inherit;
       }
 
       :host > * {
         flex: 1;
-        margin: 0;
+        margin: var(--spacing-none);
         text-align: left;
       }
 
       :host > *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
 
       :host([thumbnail]) {
@@ -43,8 +43,8 @@ export class DataListField extends LitElement {
         object-fit: contain;
         width: 100%;
         height: 100%;
-        padding: 0;
-        margin: 0;
+        padding: var(--spacing-none)
+        margin: var(--spacing-none)
       }
 
       label {

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

@@ -23,7 +23,7 @@ export class DataListGutter extends LitElement {
         text-overflow: ellipsis;
         color: var(--grid-record-color);
 
-        padding-right: 10px;
+        padding-right: var(--spacing-medium);
       }
 
       :host-context(.expand)::after {
@@ -38,12 +38,12 @@ export class DataListGutter extends LitElement {
 
       * {
         flex: 1;
-        margin: 0;
+        margin: var(--spacing-none);
       }
 
       *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
     `
   ]

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

@@ -17,7 +17,7 @@ export class DataList extends DataManipulator {
       }
 
       ox-record-partial:nth-child(even) {
-        background-color: var(--theme-white-color);
+        background-color: var(--grid-record-odd-background-color);
       }
 
       [selected-row] {
@@ -25,15 +25,15 @@ export class DataList extends DataManipulator {
       }
 
       #upward {
-        --md-icon-size: 26px;
+        --md-icon-size: var(--icon-size-large);
         position: absolute;
         top: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
         background-color: rgba(255, 255, 255, 0.7);
-        border-radius: 20px;
+        border-radius: var(--md-sys-shape-corner-large);
         color: var(--data-list-fab-color);
         box-shadow: var(--data-list-fab-shadow);
-        padding: 7px;
+        padding: var(--spacing-small);
       }
 
       slot {

package/src/data-list/record-partial.ts

@@ -39,29 +39,29 @@ export class RecordPartial extends LitElement {
         border-bottom: var(--data-list-item-border-bottom);
         position: relative;
         min-height: 42px;
-        padding-left: 7px;
+        padding-left: var(--spacing-medium);
       }
 
       :host([dirty])::before {
         content: '';
         position: absolute;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
 
-        width: 0px;
-        height: 0px;
+        width: var(--spacing-none);
+        height: var(--spacing-none);
         border-top: var(--grid-record-dirty-border-top);
         border-right: var(--grid-record-dirty-border-left);
       }
 
       :host [dirty] {
         position: absolute;
-        margin: 0;
+        margin: var(--spacing-none);
         height: 20px;
         font: var(--grid-record-dirty-icon-font);
         text-indent: 1px;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
         color: var(--grid-record-dirty-color);
       }
 
@@ -72,7 +72,7 @@ export class RecordPartial extends LitElement {
       }
 
       div[tail] {
-        margin: 0;
+        margin: var(--spacing-none);
         width: 100px;
         aspect-ratio: 1 / 1;
 
@@ -87,7 +87,6 @@ export class RecordPartial extends LitElement {
       }
 
       ox-list-field {
-        padding-top: 3px;
         font: var(--data-list-item-etc-font);
         color: var(--data-list-item-etc-color);
       }

package/src/data-manipulator.ts

@@ -22,7 +22,7 @@ export class DataManipulator extends LitElement {
   constructor() {
     super()
 
-    this.addEventListener('select-record-change', e => {
+    this.addEventListener('select-record-change', async e => {
       var {
         records: selectedRecords,
         added = [],
@@ -41,7 +41,7 @@ export class DataManipulator extends LitElement {
     })
 
     /* field change processing */
-    this.addEventListener('field-change', e => {
+    this.addEventListener('field-change', async e => {
       var { after, before, column, record, row } = (e as CustomEvent).detail as {
         after: any
         before: any
@@ -50,7 +50,7 @@ export class DataManipulator extends LitElement {
         row: number
       }
 
-      this.onFieldChange({ after, before, column, record, row })
+      await this.onFieldChange({ after, before, column, record, row })
     })
 
     /* record reset processing */
@@ -76,7 +76,7 @@ export class DataManipulator extends LitElement {
     this.addEventListener('add-child-node', (e: Event) => this.addChildNode((e as CustomEvent).detail as GristRecord))
   }
 
-  onFieldChange({
+  async onFieldChange({
     after,
     before,
     column,
@@ -96,7 +96,7 @@ export class DataManipulator extends LitElement {
 
     var validation = column.validation
     if (validation && typeof validation == 'function') {
-      if (!validation.call(this, after, before, record, column)) {
+      if (!(await validation.call(this, after, before, record, column))) {
         return
       }
     }

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

@@ -25,7 +25,8 @@ export class DataReportField extends LitElement {
         font-size: var(--report-record-wide-fontsize);
         text-overflow: ellipsis;
 
-        min-height: 19px;
+        min-height: 30px;
+        box-sizing: border-box;
       }
 
       :host([gutter]) * {

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

@@ -73,7 +73,7 @@ class DataReportHeader extends LitElement {
 
   private throttledNotifier?: (idx: number, width: number) => void
 
-  _onWheelEvent(e: WheelEvent) {
+  onWheelEvent(e: WheelEvent) {
     if (this.scrollWidth > this.clientWidth) {
       var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
       this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)
@@ -94,7 +94,7 @@ class DataReportHeader extends LitElement {
   }
 
   firstUpdated() {
-    this.addEventListener('wheel', this._onWheelEvent.bind(this))
+    this.addEventListener('wheel', this.onWheelEvent.bind(this))
   }
 
   async updated(changed: PropertyValues<this>) {