@operato/data-grist 7.1.26 → 7.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "7.1.26",
+  "version": "7.1.28",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
-    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js",
+    "./ox-record-creator.js": "./dist/src/record-view/ox-record-creator.js",
     "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js"
   },
   "typesVersions": {
@@ -41,7 +41,7 @@
         "dist/src/sorters/sorters-control.d.ts"
       ],
       "ox-record-creator.js": [
-        "dist/src/record-view/record-creator.d.ts"
+        "dist/src/record-view/ox-record-creator.d.ts"
       ],
       "ox-grist-personalizer.js": [
         "dist/src/personalizer/ox-grist-personalizer.d.ts"
@@ -63,11 +63,11 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^7.1.1",
-    "@operato/input": "^7.1.26",
-    "@operato/p13n": "^7.1.26",
-    "@operato/popup": "^7.1.26",
+    "@operato/input": "^7.1.27",
+    "@operato/p13n": "^7.1.27",
+    "@operato/popup": "^7.1.27",
     "@operato/pull-to-refresh": "^7.1.1",
-    "@operato/styles": "^7.1.25",
+    "@operato/styles": "^7.1.27",
     "@operato/time-calculator": "^7.1.1",
     "@operato/utils": "^7.1.1",
     "i18next": "^23.11.5",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5490ff22eff31a7e2006d4da0af115f980d5945c"
+  "gitHead": "948ee8dd56704f8aed966d7b85b8025999b94e7f"
 }

package/src/data-grist.ts

@@ -31,7 +31,8 @@ import {
   GristSelectFunction,
   PaginationConfig,
   PersonalGristPreference,
-  SortersConfig
+  SortersConfig,
+  ValidationReason
 } from './types'
 import { convertListParamToSearchString, convertSearchStringToListParam } from './utils'
 
@@ -478,28 +479,28 @@ export class DataGrist extends LitElement implements DataConsumer {
               </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>
@@ -1190,8 +1191,43 @@ export class DataGrist extends LitElement implements DataConsumer {
       })
     )
   }
-
+  /**
+   * Returns the current pagination limit.
+   * @returns {number} The current pagination limit value
+   */
   getCurrentLimit() {
     return this.dataProvider?.limit || ZERO_PAGINATION.limit
   }
+
+  /**
+   * Checks the validity of dirty records.
+   * @returns {Array<{record: GristRecord, invalidFields: Array<{field: string, reason: ValidationReason}>}>} List of invalid records and their corresponding invalid fields
+   */
+  checkDirtyRecordsValidity(): { record: GristRecord; invalidFields: { field: string; reason: ValidationReason }[] }[] {
+    const records = this.dirtyRecords
+    const validationResults = []
+
+    for (const record of records) {
+      const invalidFields = []
+
+      for (const column of this.compiledConfig.columns) {
+        if (column.record?.mandatory && (record[column.name] === undefined || record[column.name] === null)) {
+          invalidFields.push({
+            field: column.name,
+            reason: ValidationReason.MANDATORY
+          })
+        }
+        // Additional validation rules can be implemented here.
+      }
+
+      if (invalidFields.length > 0) {
+        validationResults.push({
+          record,
+          invalidFields
+        })
+      }
+    }
+
+    return validationResults
+  }
 }

package/src/record-view/index.ts

@@ -1,2 +1,2 @@
 export * from './record-view'
-export * from './record-creator'
+export * from './ox-record-creator'

package/src/record-view/{record-creator.ts → ox-record-creator.ts}

@@ -1,20 +1,29 @@
 import '@material/web/icon/icon.js'
 import './record-view'
 
-import { html, LitElement } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxPopup } from '@operato/popup'
 
 import { DataGrist } from '../data-grist'
-import { ColumnConfig, GristRecord } from '../types'
+import { ColumnConfig, GristRecord, ValidationReason } from '../types'
 import { RecordView } from './record-view'
 
 @customElement('ox-record-creator')
-export class RecordCreator extends LitElement {
+export class OxRecordCreator extends LitElement {
+  static styles = [
+    css`
+      ::slotted([slot='popup']) {
+        display: none;
+      }
+    `
+  ]
+
   @state() grist?: DataGrist
 
-  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean
+  @property({ type: Object }) callback?: (record: GristRecord) => boolean
+  @property({ type: Object }) customPopupCallback?: (popup: any) => boolean
   @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
   @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false
 
@@ -26,9 +35,9 @@ export class RecordCreator extends LitElement {
       e.stopPropagation()
 
       if (this.lightPopup) {
-        this.lightPopupRecordView()
+        this.openLightPopup()
       } else {
-        this.popupRecordView()
+        this.openPopup()
       }
     })
   }
@@ -40,7 +49,55 @@ export class RecordCreator extends LitElement {
   }
 
   render() {
-    return html`<slot></slot>`
+    return html`
+      <slot></slot>
+      <slot name="popup"></slot>
+    `
+  }
+
+  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {
+    const columns = this.grist!.compiledConfig.columns
+    const invalidFields: { field: string; reason: ValidationReason }[] = []
+
+    columns
+      .filter(column => !column.hidden)
+      .forEach(column => {
+        if (
+          column.record?.mandatory &&
+          (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')
+        ) {
+          invalidFields.push({
+            field: column.name,
+            reason: ValidationReason.MANDATORY
+          })
+        }
+      })
+
+    return invalidFields
+  }
+
+  openLightPopup() {
+    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
+    const slottedElements = slot?.assignedElements({ flatten: true })
+    const originalContent = slottedElements?.[0] as HTMLElement
+
+    if (originalContent) {
+      this.lightPopupCustomCreator(originalContent)
+    } else {
+      this.lightPopupRecordView()
+    }
+  }
+
+  openPopup() {
+    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
+    const slottedElements = slot?.assignedElements({ flatten: true })
+    const originalContent = slottedElements?.[0] as HTMLElement
+
+    if (originalContent) {
+      this.popupCustomCreator(originalContent)
+    } else {
+      this.popupRecordView()
+    }
   }
 
   lightPopupRecordView() {
@@ -87,11 +144,17 @@ export class RecordCreator extends LitElement {
           @cancel=${(e: Event) => {
             popup.close()
           }}
-          @ok=${(e: Event) => {
-            popup.close()
-
+          @ok=${async (e: Event) => {
             const view = e.currentTarget as RecordView
 
+            const invalidFields = await this.validateRecord(view.record)
+            if (invalidFields.length > 0) {
+              view.setFocusOnInvalid(invalidFields)
+              return false
+            }
+
+            popup.close()
+
             this.dispatchEvent(
               new CustomEvent('ok', {
                 bubbles: true,
@@ -142,8 +205,17 @@ export class RecordCreator extends LitElement {
 
             recordView.addEventListener('ok', async (e: Event) => {
               const view = e.currentTarget as RecordView
+
+              const invalidFields = await this.validateRecord(view.record)
+              if (invalidFields.length > 0) {
+                view.setFocusOnInvalid(invalidFields)
+                return false
+              }
+
               if (await this.callback?.(view.record)) {
                 popup.close()
+              } else {
+                console.error('validation failed')
               }
             })
 
@@ -177,4 +249,41 @@ export class RecordCreator extends LitElement {
       })
     )
   }
+
+  lightPopupCustomCreator(originalContent: HTMLElement) {
+    const title = 'create'
+    const popupContent = originalContent.cloneNode(true) as HTMLElement
+    popupContent.removeAttribute('slot')
+
+    OxPopup.open({
+      template: html`
+        <div title>${title}</div>
+        ${popupContent}
+      `,
+      parent: document.body,
+      preventCloseOnBlur: this.preventCloseOnBlur
+    })
+
+    this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행
+  }
+
+  popupCustomCreator(originalContent: HTMLElement) {
+    const title = 'create'
+    const popupContent = originalContent.cloneNode(true) as HTMLElement
+    popupContent.removeAttribute('slot')
+
+    document.dispatchEvent(
+      new CustomEvent('open-popup', {
+        detail: {
+          template: popupContent,
+          options: {
+            backdrop: true,
+            size: 'large',
+            title
+          },
+          callback: this.customPopupCallback
+        }
+      })
+    )
+  }
 }

package/src/record-view/record-view-body.ts

@@ -5,8 +5,9 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord } from '../types'
+import { ColumnConfig, GristRecord, ValidationReason } from '../types'
 import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'
+import i18next from 'i18next'
 
 @customElement('ox-record-view-body')
 export class RecordViewBody extends LitElement {
@@ -86,7 +87,21 @@ export class RecordViewBody extends LitElement {
         color: var(--record-view-focus-color);
         font-weight: bold;
       }
-
+      
+      .highlight-invalid {
+        position: relative;
+        padding: var(--spacing-tiny) var(--spacing-small);
+      }
+      
+      .highlight-invalid::after {
+        content: attr(data-reason); /* 콘텐츠를 동적으로 변경하기 위해 data-reason 속성을 사용 */
+        color: red;
+        font-size: 12px;
+        position: absolute;
+        left: 0;
+        bottom: -8px; /* 라벨 아래쪽에 메시지를 표시 */
+      }
+      
       @media only screen and (max-width: 1000px) {
         div[content] {
           grid-template-columns: 2fr 3fr;
@@ -142,6 +157,36 @@ export class RecordViewBody extends LitElement {
     super.disconnectedCallback()
     this.removeEventListener('keydown', this._onKeyDown)
   }
+  
+  setFocus(fieldElement: HTMLElement) {
+    fieldElement?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))
+  }
+
+  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {
+    const allLabels = this.renderRoot.querySelectorAll('label')
+    allLabels.forEach((label: HTMLLabelElement) => {
+      label.classList.remove('highlight-invalid')
+      label.removeAttribute('data-reason')
+    });
+  
+    // 유효성 검사를 통과하지 못한 필드에 대해 처리
+    invalidFields.forEach(({ field, reason }, index) => {
+      const labelElement = this.renderRoot.querySelector(`[data-name="${field}"]`) as HTMLLabelElement
+      const fieldElement = this.renderRoot.querySelector(`[data-name="${field}"] + ox-grid-field`) as HTMLInputElement
+      
+      // 동적으로 data-reason 속성을 설정하여 메시지를 변경
+      if (labelElement) {
+        labelElement.classList.add('highlight-invalid');
+        labelElement.setAttribute('data-reason', '(' + i18next.t(`text.validation-reason.${reason}`) + ')')
+      }
+  
+      // 첫 번째 필드에 포커스 설정
+      if (index === 0 && fieldElement) {
+        this.setFocus(fieldElement)
+      }
+    });
+  }
+  
 
   _onKeyDown(event: KeyboardEvent) {
     if (event.key === 'Tab') {
@@ -156,7 +201,8 @@ export class RecordViewBody extends LitElement {
       }
 
       event.preventDefault()
-      fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))
+      const nextField = fields[nextIndex] as HTMLInputElement
+      nextField && this.setFocus(nextField)
     }
   }
 
@@ -176,7 +222,7 @@ export class RecordViewBody extends LitElement {
           let dirtyFields = record['__dirtyfields__'] || {}
 
           return html`
-            <label ?editable=${editable} ?wide=${wide}>
+            <label ?editable=${editable} ?wide=${wide} data-name=${column.name}>
               <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>
               <md-icon>edit</md-icon>
             </label>

package/src/record-view/record-view.ts

@@ -4,12 +4,14 @@ import '@operato/input/ox-input-file.js'
 import '../data-grid/data-grid-field'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
 
 import { ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord } from '../types'
+import { ColumnConfig, GristRecord, ValidationReason } from '../types'
+
+import { RecordViewBody } from './record-view-body'
 
 @customElement('ox-record-view')
 export class RecordView extends LitElement {
@@ -66,6 +68,8 @@ export class RecordView extends LitElement {
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
 
+  @query('ox-record-view-body') body!: RecordViewBody
+
   render() {
     return html`
       <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
@@ -82,6 +86,10 @@ export class RecordView extends LitElement {
     this.setAttribute('tabindex', '0')
   }
 
+  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {
+    this.body.setFocusOnInvalid(invalidFields)
+  }
+
   onReset() {
     this.focus()
 

package/src/types.ts

@@ -803,3 +803,11 @@ export type FilterPreference = {
   hidden?: boolean
   value?: any
 }
+
+export enum ValidationReason {
+  MANDATORY = 'MANDATORY',
+  FORMAT = 'FORMAT',
+  RANGE = 'RANGE',
+  UNIQUE = 'UNIQUE'
+}
+

package/stories/accumulator-format.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'