@things-factory/meta-ui 8.0.0 → 9.0.0-beta.3

package/client/utils/terms-util.ts

@@ -1,119 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop <shortstop@hatiolab.com>
- * @description 용어 처리 유틸리티
- */
-export class TermsUtil {
-  /**
-   * @description 라벨 (필드) labelName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} labelName
-   * @param {Object} params
-   * @returns 번역된 라벨 (필드) 명
-   */
-  static tLabel(labelName: string, params?: any) {
-    let labelValue = TermsUtil.translate('label', labelName, params)
-    return labelValue ? labelValue : TermsUtil.translate('field', labelName, params, labelName)
-  }
-
-  /**
-   * @description 필드 fieldName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} fieldName
-   * @param {Object} params
-   * @returns 번역된 필드 명
-   */
-  static tField(fieldName: string, params?: any) {
-    let fieldValue = TermsUtil.translate('field', fieldName, params)
-    return fieldValue ? fieldValue : TermsUtil.translate('field', fieldName, params, fieldName)
-  }
-
-  /**
-   * @description 버튼 buttonName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} buttonName
-   * @returns 번역된 버튼 명
-   */
-  static tButton(buttonName: string) {
-    return TermsUtil.translate('button', buttonName, null, buttonName)
-  }
-
-  /**
-   * @description 타이틀 titleName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} titleName
-   * @param {Object} params
-   * @returns 번역된 타이틀 명
-   */
-  static tTitle(titleName: string, params?: any) {
-    let titleValue = TermsUtil.translate('title', titleName, params)
-    return titleValue ? titleValue : TermsUtil.translate('menu', titleName, params, titleName)
-  }
-
-  /**
-   * @description 메뉴 menuName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} menuName
-   * @returns 번역된 메뉴 명
-   */
-  static tMenu(menuName: string) {
-    let menuValue = TermsUtil.translate('menu', menuName, null)
-    return menuValue ? menuValue : TermsUtil.translate('title', menuName, null, menuName)
-  }
-
-  /**
-   * @description 텍스트 textName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} textName
-   * @param {Object} params
-   * @returns 번역된 텍스트 값
-   */
-  static tText(textName: string, params?: any) {
-    return TermsUtil.translate('text', textName, params, textName)
-  }
-
-  /**
-   * @description 에러 errorName을 다국어 변환하여 리턴
-   ***********************************************
-   * @param {String} errorName
-   * @param {Object} params
-   * @returns 번역된 에러 메시지
-   */
-  static tError(errorName: string, params?: any) {
-    return TermsUtil.translate('error', errorName, params, errorName)
-  }
-
-  /**
-   * @description termKey로 다국어 변환하여 parameters로 파라미터 처리하여 리턴, 변환값이 없다면 defaultValue 리턴, defaultValue가 없다면 null 리턴
-   ***********************************************
-   * @param {String} termCategory 용어 카테고리 (label, field, title, menu, button, text, error, ...)
-   * @param {String} termName 용어 이름
-   * @param {Object} parameters 용어 이름에 파라미터가 있는 경우 파라미터 치환 처리할 오브젝트 데이터 {key1 : value1, key2 : value2} 형식 ...
-   * @param {String} defaultValue
-   * @returns termKey 다국어 변환 값
-   */
-  static translate(termCategory: string, termName: string, parameters?: any, defaultValue?: string): string {
-    return i18next.t(`${termCategory}.${termName}`, {
-      ...parameters,
-      defaultValue: defaultValue || termName
-    }) as string
-  }
-
-  /**
-   * @description termKey로 다국어 변환하여 parameters로 파라미터 처리하여 리턴, 변환값이 없다면 defaultValue 리턴, defaultValue가 없다면 null 리턴
-   ***********************************************
-   * @param {String} termKey 용어 키 : {용어 카테고리}'.'{용어 이름}
-   * @param {Object} parameters 용어 이름에 파라미터가 있는 경우 파라미터 치환 처리할 오브젝트 데이터 {key1 : value1, key2 : value2} 형식 ...
-   * @param {String} defaultValue
-   * @returns termKey 다국어 변환 값
-   */
-  static t(termKey: string, parameters: any, defaultValue: string): string {
-    return i18next.t(termKey, {
-      ...parameters,
-      defaultValue: defaultValue || termKey
-    }) as string
-  }
-}

package/client/utils/ui-util.js

@@ -1,338 +0,0 @@
-import { store, CustomAlert, navigate } from '@things-factory/shell'
-
-import { openPopup } from '@operato/layout'
-import { closePopup } from '@operato/popup'
-import { isMobileDevice } from '@operato/utils'
-import { getEditor } from '@operato/data-grist'
-
-import { TermsUtil } from './terms-util'
-import { ValueUtil } from './value-util'
-
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop <shortstop@hatiolab.com>
- * @description UI 관련 유틸리티 함수 정의
- */
-export class UiUtil {
-  /**
-   * @description 현재 디바이스가 모바일 장비인지 체크
-   **************************************
-   * @returns {Boolean} 모바일 장비 여부
-   */
-  static isMobileEnv() {
-    return isMobileDevice()
-  }
-
-  /**
-   * @description 현재 로케일 정보 리턴
-   **************************************
-   * @returns {String} 현재 브라우저의 로케일 정보
-   */
-  static currentLocale() {
-    let cookie = document.cookie
-    cookie = cookie.substring(cookie.indexOf('i18next'))
-    if (cookie.indexOf(';') > -1) {
-      cookie = cookie.substring(0, cookie.indexOf(';'))
-    }
-    cookie = cookie.replace('i18next=', '')
-    if (cookie == 'ko') return 'ko-KR'
-    else return cookie
-  }
-
-  /**
-   * @description 최종 애플리케이션 모듈 정보 리턴
-   *****************************************
-   * @returns {Object} 최종 애플리케이션 모듈
-   */
-  static getApplicationModuleInfo() {
-    let modules = store.getState().app.modules
-    return modules[modules.length - 1]
-  }
-
-  /**
-   * @description 현재 액티브 된 화면의 라우팅 정보
-   **************************************
-   * @returns {String} 현재 액티브 된 화면의 라우팅 정보
-   */
-  static currentRouting() {
-    return store.getState().route.page
-  }
-
-  /**
-   * @description popup 닫기
-   ************************
-   * @param {HTML} popup
-   */
-  static closePopupBy(popup) {
-    closePopup(popup)
-  }
-
-  /**
-   * @description 오픈하고자 하는 엘리먼트를 받아 팝업 오픈
-   *************************************************
-   * @param {String} popupTitle 팝업 타이틀
-   * @param {String} popupSize 팝업 사이즈 ex) 'large', 'medium', 'small'
-   * @param {HTMLElement} element 팝업에 표시할 엘리먼트
-   * @param {Boolean} backdrop 백드롭 여부
-   * @param {String} help help 파일 경로
-   * @returns {Object} popup
-   */
-  static openPopupByElement(popupTitle, popupSize, element, backdrop, help = '') {
-    if (popupSize === 'full') {
-      element.style.height = '95dvh'
-    }
-
-    return openPopup(element, {
-      backdrop: true,
-      hovering: popupSize === 'full' ? 'edge' : 'center',
-      size: popupSize === 'full' ? 'large' : popupSize,
-      title: popupTitle,
-      backdrop: backdrop,
-      help: help
-    })
-  }
-
-  /**
-   * @description popupConfig에 포함된 element 정보를 이용해 팝업을 연다
-   **************************************************************
-   * @param {String} title 팝업 타이틀
-   * @param {Object} popupConfig 팝업 구성을 위한 설정 정보 ex) { module: '', location: '', tagname: '', size : '', popup_field: '', parent_field: ''}
-   * @param {Object} paramData 팝업에 넘겨 줄 파라미터
-   * @param {Function} popupCloseCallback 팝업 닫을 때 실행되기 위한 콜백 함수
-   */
-  static async openDynamicPopup(title, popupConfig, paramData, popupCloseCallback) {
-    // 부모 필드
-    let parentValue = ValueUtil.isNotEmpty(popupConfig.parent_field)
-      ? ValueUtil.getParams(paramData, ...popupConfig.parent_field.split('.'))
-      : undefined
-
-    // 팝업 엘리먼트 생성
-    let htmlText = `<${popupConfig.tagname} route_name='${popupConfig.menu}' parent_id='${parentValue}' is_popup=true></${popupConfig.tagname}>`
-    let htmlElements = UiUtil.htmlToElement(htmlText)
-    htmlElements.config = popupConfig
-
-    // 파라미터 설정
-    if (ValueUtil.isNotEmpty(popupConfig.popup_field)) {
-      htmlElements[popupConfig.popup_field] = paramData
-    }
-
-    // 팝업 오픈
-    let popup = UiUtil.openPopupByElement(title, popupConfig.size, htmlElements, true, popupConfig.help)
-
-    // 팝업 클로즈 핸들러
-    if (popupCloseCallback) {
-      popup.onclosed = popupCloseCallback
-    }
-  }
-
-  /**
-   * @description tagname, routing으로 커스텀 엘리먼트 생성
-   ****************************************************
-   * @param {String} tagname 팝업에 포함할 태그 명
-   * @param {String} routing 라우팅
-   * @returns {HTMLElement} 커스텀 엘리먼트
-   */
-  static createCustomElement(tagname, routing) {
-    let htmlStr = `<${tagname} route_name='${routing}'></${tagname}>`
-    return UiUtil.htmlToElement(htmlStr)
-  }
-
-  /**
-   * @description HTML 문자열을 elements로 변환
-   **************************************
-   * @param {String} htmlString html 문자열
-   * @returns {HTMLElement} 커스텀 엘리먼트
-   */
-  static htmlToElement(htmlString) {
-    var template = document.createElement('template')
-    template.innerHTML = htmlString
-    var elements = template.content.childNodes
-    var element = elements[0]
-    template.content.removeChild(element)
-    return element
-  }
-
-  /**
-   * @description 페이지 이동
-   **************************************
-   * @param {String} url 페이지 URL (route 값)
-   * @param {Object} params 페이지 파라미터, null 가능
-   */
-  static pageNavigate(url, params) {
-    let paramStr = params ? '?' : ''
-
-    if (params) {
-      paramStr += 'pass=' + JSON.stringify(params)
-    }
-
-    navigate(`${url}${paramStr}`)
-  }
-
-  /**
-   * @description store의 정보 추출
-   ****************************************************
-   * @param {String} accessor1 스토어 액세서 1, 빈 값 가능
-   * @param {String} accessor2 스토어 액세서 2, 빈 값 가능
-   * @param {String} accessor3 스토어 액세서 3, 빈 값 가능
-   * @returns {Object} store 정보
-   */
-  static getStore(accessor1, accessor2, accessor3) {
-    let store = store.getState()
-
-    if (accessor1 && accessor2 && accessor3) {
-      return store[accessor1][accessor2][accessor3]
-    } else if (accessor1 && accessor2) {
-      return store[accessor1][accessor2]
-    } else if (accessor1) {
-      return store[accessor1]
-    } else {
-      return store
-    }
-  }
-
-  /**
-   * @description 커스텀 이벤트 전파
-   *************************************
-   * @param {String} eventName 이벤트 이름
-   * @param {Object} eventDetail 이벤트 상세 정보
-   */
-  static fireCustomEvent(eventName, eventDetail) {
-    document.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail: eventDetail
-      })
-    )
-  }
-
-  /**
-   * @description 토스트 메시지 표시
-   *************************************
-   * @param {String} type 토스트 타입
-   * @param {String} message 메시지
-   */
-  static showToast(type, message) {
-    document.dispatchEvent(
-      new CustomEvent('notify', {
-        detail: { type, message }
-      })
-    )
-  }
-
-  /**
-   * @description Alert 메시지 창 표시
-   *************************************
-   * @param {String} titleCode Alert 제목 표시를 위한 용어 이름, 예) title.confirm
-   * @param {String} textCode Alert 텍스트 표시를 위한 용어 이름 예) text.are_you_sure
-   * @param {String} type Alert 창 유형 - info, error, warning ...
-   * @param {String} confirmButtonCode 확인 버튼 표시를 위한 용어 이름 예) confirm
-   * @param {String} [cancelButtonCode] 취소 버튼 표시를 위한 용어 이름 예) cancel
-   * @returns {Object} Alert 팝업
-   */
-  static async showAlertPopup(titleCode, textCode, type, confirmButtonCode, cancelButtonCode) {
-    let popupTitle = TermsUtil.t(titleCode) || titleCode
-    let popupText = TermsUtil.t(textCode) || textCode
-    let alert = { title: popupTitle, text: popupText }
-
-    if (type) {
-      alert['type'] = type
-    }
-
-    if (confirmButtonCode) {
-      alert['confirmButton'] = TermsUtil.tButton(confirmButtonCode)
-    }
-
-    if (cancelButtonCode) {
-      alert['cancelButton'] = TermsUtil.tButton(cancelButtonCode)
-    }
-
-    return await CustomAlert(alert)
-  }
-
-  /**
-   * @description 필터 폼 내의 에디터들이 가지고 있는 값을 키-값 형태로 추출
-   *******************************************************
-   * @param {Object} filterForm 그리드 필터 폼
-   * @returns {Object} 필터 폼 내의 에디터들이 가지고 있는 값을 키-값 형태로 추출
-   */
-  static getFilterFormData(filterForm) {
-    let formValues = {}
-
-    if (ValueUtil.isNotEmpty(filterForm)) {
-      let filters = filterForm.filters()
-
-      if (ValueUtil.isNotEmpty(filters)) {
-        filters.forEach(f => {
-          if (ValueUtil.isNotEmpty(f.value)) {
-            item[f.name] = f.value ? f.value : null
-          }
-        })
-      }
-    }
-
-    return formValues
-  }
-
-  /**
-   * @description name으로 필터 폼 내 에디터를 찾아 값을 셋팅
-   *****************************************************
-   * @param {Object} filterForm 그리스트 필터 폼
-   * @param {String} name 그리스트 필터 폼 내 에디터의 이름
-   * @param {Object} value 설정할 값
-   */
-  static setSearchFormEditorValue(filterForm, name, value) {
-    if (ValueUtil.isNotEmpty(filterForm)) {
-      let editor = filterForm.renderRoot?.querySelector(`[name='${name}']`)
-
-      if (ValueUtil.isNotEmpty(editor)) {
-        editor.value = value
-      }
-    }
-  }
-
-  /**
-   * @description 파라미터를 기준으로 유형에 맞는 에디터를 생성한다.
-   ******************************************************
-   * @param {String} editorType 에디터 유형
-   * @param {Object} column 컬럼 Object
-   * @param {Object} record 레코드 Object
-   * @param {Number} rowIndex 추가할 열 Index
-   * @returns {HTMLElement} HTML 에디터
-   */
-  static createEditorHtml(editorType, column, record, rowIndex) {
-    return getEditor(editorType)('', column, record, rowIndex, {})
-  }
-
-  /**
-   * @description 에디터에 값을 설정한다.
-   *********************************
-   * @param {Object} editor 에디터
-   * @param {String} newValue 설정할 값
-   */
-  static setValueToEditor(editor, newValue) {
-    let input = UiUtil.getLeafInput(editor)
-    input.value = newValue
-  }
-
-  /**
-   * @description 엘리먼트 내 최 하단 Input Element를 추출
-   ************************************************
-   * @param {Object} editor 에디터
-   * @returns {HTMLElement} 엘리먼트 내 최 하단 Input Element
-   */
-  static getLeafInput(editor) {
-    let editorType = editor.getType()
-
-    if (editorType == 'code-editor') {
-      return editor.renderRoot.querySelector('ox-input-code')
-    } else if (editorType == 'textarea') {
-      return editor.renderRoot.querySelector('textarea')
-    } else if (editorType == 'select-combo') {
-      return editor.renderRoot.querySelector('ox-select').firstElementChild
-    } else if (editorType == 'barcode') {
-      return editor.renderRoot.querySelector('ox-input-barcode').renderRoot.querySelector('input')
-    } else {
-      return editor.renderRoot.firstElementChild.editor
-    }
-  }
-}

package/client/utils/value-util.js

@@ -1,234 +0,0 @@
-import isEqual from 'lodash-es/isEqual'
-
-import { TermsUtil } from './terms-util'
-
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop <shortstop@hatiolab.com>
- * @description 데이터 핸들링 관련 유틸리티 함수 정의
- */
-export class ValueUtil {
-  /**
-   * @description object, string, number, array 빈 값 여부 검사
-   **********************************************************
-   * @param {Object} value
-   * @returns {Boolean}
-   */
-  static isEmpty(value) {
-    if (value === undefined) {
-      return true
-    } else if (value === null) {
-      return true
-    } else if (typeof value === 'boolean') {
-      return false
-    } else if (typeof value === 'string' || typeof value === 'number') {
-      if (value == '') return true
-    } else if (Array.isArray(value)) {
-      if (value.length == 0) return true
-    } else if (typeof value === 'object') {
-      if (Object.keys(value).length == 0) return true
-    }
-
-    return false
-  }
-
-  /**
-   * @description object, string, number, array 빈 값이 아닌지 여부 검사
-   *****************************************************************
-   * @param {Object} value
-   * @returns {Boolean}
-   */
-  static isNotEmpty(value) {
-    return !ValueUtil.isEmpty(value)
-  }
-
-  /**
-   * @description 두 객체가 동일한지 비교
-   **********************************
-   * @param {*} data1
-   * @param {*} data2
-   * @returns
-   */
-  static isEquals(data1, data2) {
-    return isEqual(data1, data2)
-  }
-
-  /**
-   * @description 값을 정수로 변환
-   **********************************
-   * @param {*} value
-   * @param {*} defaultValue
-   * @returns
-   */
-  static toInteger(value, defaultValue) {
-    return ValueUtil.isEmpty(value) ? (defaultValue ? defaultValue : 0) : parseInt(value)
-  }
-
-  /**
-   * @description 값을 Boolean으로 변환
-   **********************************
-   * @param {String} value
-   * @returns
-   */
-  static toBoolean(value) {
-    return ValueUtil.isEmpty(value) ? false : value == 'true' || value == 't' || value == 'TRUE' || value == 'T' || value == 'on' || value == 'ON'
-  }
-
-  /**
-   * @description config, data의 key 값을 비교해 결과를 리턴한다.
-   * 값에 * 는 체크하지 않는다.
-   ****************************************
-   * @param {Object} config
-   * @param {Object} data
-   * @param {String || Array} keys
-   * @returns
-   */
-  static compareObjectValues(config, data, keys) {
-    let isEquals = true
-
-    keys.forEach(key => {
-      let compareValue = config[key]
-
-      if (compareValue === '*') {
-        return
-      }
-
-      let recordValue = data[key] || ''
-
-      if (ValueUtil.isEmpty(compareValue)) {
-        if (ValueUtil.isNotEmpty(recordValue)) {
-          isEquals = false
-        }
-      } else {
-        if (compareValue != recordValue) {
-          isEquals = false
-        }
-      }
-
-      if (!isEquals) {
-        return
-      }
-    })
-
-    return isEquals
-  }
-
-  /**
-   * @description dataObject 에서 key 값을 찾아 isTransMsg 옵션을 적용해 retObjct에 반영한다.
-   **********************************************************************************
-   * @param {Object} retObj
-   * @param {Object} dataObj
-   * @param {String} key
-   * @param {Boolean} isTransMsg
-   * @returns
-   */
-  static setParams(retObj, dataObj, key, isTransMsg) {
-    let value = ValueUtil.getParams(dataObj, key)
-
-    if (ValueUtil.isNotEmpty(value)) {
-      retObj[key] = isTransMsg === true ? TermsUtil.t(value) : value
-    }
-
-    return retObj
-  }
-
-  /**
-   * @description data에서 key(Array)를 찾아 리턴
-   ********************************************
-   * @param {Object} data
-   * @param {...String} keys
-   * @returns
-   */
-  static getParams(data, ...keys) {
-    // probably same as followings
-    // return lodash.get(data, keys.join('.'))
-
-    // keys 파라미터가 없으면 return
-    if (arguments.length <= 1) {
-      return undefined
-    }
-
-    let key = keys[0]
-    // data 에 key가 없으면 return
-    if (ValueUtil.isEmpty(data[key])) {
-      return undefined
-    }
-
-    let paramData = data[key]
-    if (keys.length > 1) {
-      // 현재 이후에 키가 더 있으면 재귀 호출
-      return ValueUtil.getParams(paramData, ...keys.slice(1))
-    } else {
-      return paramData
-    }
-  }
-
-  /**
-   * @description sourceList에 존재하는 오브젝트의 keys 필드들을 targetList로 복사
-   ***********************************************************************
-   * @param {Array} sourceList
-   * @param {Array} targetList
-   * @param {...String} keys
-   * @returns {Array} 복사한 객체 리스트
-   */
-  static populateArray(sourceList, targetList, ...keys) {
-    targetList = targetList || []
-    keys = keys || Object.keys(sourceList)
-
-    if (ValueUtil.isNotEmpty(keys)) {
-      targetList = sourceList.map((source, index) => {
-        let target = targetList.length > index ? targetList[index] : {}
-        return ValueUtil.populateObject(source, target, keys)
-      })
-    }
-
-    return targetList
-  }
-
-  /**
-   * @description source에 존재하는 keys 필드들을 target으로 복사
-   ********************************************************
-   * @param {Object} source
-   * @param {Object} target
-   * @param {...String} keys
-   * @returns {Object} 복사한 객체
-   */
-  static populateObject(source, target, ...keys) {
-    target = target || {}
-    keys = keys || Object.keys(source)
-
-    if (ValueUtil.isNotEmpty(keys)) {
-      keys.forEach(key => {
-        target[key] = source[key]
-      })
-    }
-
-    return target
-  }
-
-  /**
-   * @description source에 존재하는 keys 필드들을 target으로 복사
-   ********************************************************
-   * @param {Object} sourceObj
-   * @param {Object} targetObj
-   * @returns {Object} 복사한 객체
-   */
-  static replaceVariableObject(sourceObj, targetObj) {
-    let objKeys = Object.keys(sourceObj)
-    let targetKeys = Object.keys(targetObj)
-
-    objKeys.forEach(key => {
-      let value = sourceObj[key]
-
-      if (typeof value == 'string' && value.startsWith('$')) {
-        let valueFieldName = value.replace('$', '')
-        if (targetKeys.includes(valueFieldName)) {
-          sourceObj[key] = targetObj[valueFieldName]
-        }
-      }
-    })
-
-    return sourceObj
-  }
-}