@things-factory/meta-ui 5.0.0-zeta.1

package/client/mixin/meta-util-mixin.js

@@ -0,0 +1,577 @@
+import { i18next } from '@operato/i18n'
+import { navigate, CustomAlert } from '@things-factory/shell'
+import { getCodeByName } from '@things-factory/code-base'
+import { openPopup } from '@things-factory/layout-base'
+import isEqual from 'lodash-es/isEqual'
+
+
+/**
+ * 유틸리티 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const MetaUtilMixin = (baseElement) => class extends baseElement {
+
+    static get properties() {
+        return {
+            /* 메뉴 메타 정보  */
+            menuInfo: Object,            // 메뉴 기본 정보
+            gridConfig: Object,          // 그리드 구성 정보
+            gridColumnConfig: Array,     // 그리드 컬럼 정보 
+            formColumnConfig: Array,     // form 컬럼 정보 
+            buttonConfig: Array,         // 버튼 구성 정보
+            searchConfig: Array,         // 서치폼 구성 정보 
+            gqlInfo: String,             // GraphQL 정보 
+            gqlFetchField: String,       // GraphQL 조회 필드 
+            searchFormElement: String,   // 화면에서 사용 되는 서치폼 (grist, filter, not)
+
+            /* 화면 구성  */
+            gristConfigSet: Object,       // 메타정보에서 변환된 그리드 구성 정보
+            formConfigSet: Array,         // 메타정보에서 변환된 폼 구성 정보 
+            use_button_export: Boolean,   // 내보내기 버튼 사용 여부 
+            use_button_import: Boolean,   // 가져오기 버튼 사용 여부
+            use_button_add: Boolean,      // 추가 버튼 사용 여부 
+            grid_mobile_mode: String,     // 모바일 기기에서 그리드 뷰 
+            grid_desk_mode: String,       // 데스크탑에서 그리드 뷰
+            grid_view_options: Array,     // 그리드 뷰 옵션 
+            grid_mode: String,            // 현재 그리드 뷰 모드 
+            infinity_page: true,          // 페이지 사용시 false
+
+            /* 속성 ? */
+            is_detail: {                  // 페이지내 컴포넌트 여부 
+                type: Boolean,
+                converter(value) {
+                    let retVal = Boolean(value);
+                    return retVal;
+                }
+            },
+            is_popup: {                   // 팝업 여부 
+                type: Boolean,
+                converter(value) {
+                    let retVal = Boolean(value);
+                    return retVal;
+                }
+            },
+
+            parent_id: String,            // 상세 폼뷰 상위 데이터 ID 
+
+        }
+    }
+
+    /**
+     * 페이지내 컴포넌트 이거나 팝업으로 오픈된 경우 
+     */
+    get isElement() {
+        return (this.isDetail === true || this.isPopup === true);
+    }
+
+    /**
+     * isDetail 여부 리턴 (페이지내 포함된 하나의 컴포넌트)
+     */
+    get isDetail() {
+        return this.isEmpty(this.is_detail) ? false : this.is_detail;
+    }
+
+    /**
+     * Popup 오픈 여부 리턴 
+     */
+    get isPopup() {
+        return this.isEmpty(this.is_popup) ? false : this.is_popup;
+    }
+
+    /**
+     * 페이지 여부 리턴 
+     */
+    get isPage() {
+        return (this.isDetail === false && this.isPopup === false);
+    }
+
+
+    /**
+     * Document 내의 attribute 변화를 감지 및 로깅 (개발용)
+     **************************************
+     * @param {String} name 
+     * @param {*} oldVal 
+     * @param {*} newVal 
+     */
+    attributeChangedCallback(name, oldVal, newVal) {
+        console.log(this.tagName, 'attribute change: ', name, oldVal, newVal);
+        super.attributeChangedCallback(name, oldVal, newVal);
+
+        if (name === 'context-path' && this.active === true && this.isNotEmpty(this.contextPath)) {
+            // 페이지 링크 URL 을 서치폼에 셋팅한다. 
+            const urlParams = new URLSearchParams(window.location.search);
+
+            if (this.isNotEmpty(urlParams)) {
+                urlParams.forEach((value, key) => {
+                    this.setSearchFormEditorValue(key, value);
+                })
+                this.grist.fetch();
+            }
+        }
+    }
+
+
+    /**
+     * 서치폼 ( grist or filter or undefined) 을 찾아 에디터에 값을 셋팅 
+     ***************************************************** 
+     * @param {String} name 
+     * @param {Object} value 
+     */
+    setSearchFormEditorValue(name, value) {
+        let filterForm = this.filterForm;
+
+        if (this.isNotEmpty(filterForm)) {
+            let filterEditor = filterForm.renderRoot?.querySelector(`[name='${name}']`);
+
+            if (this.isNotEmpty(filterEditor)) {
+                filterEditor.value = value;
+            }
+        }
+    }
+
+    /**
+     * 메시지 코드 변환 
+     * @param {String} code 
+     * @returns 
+     */
+    convertMsgCode(code) {
+        return i18next.t(code);
+    }
+
+
+    /**
+     * logic 에 포함된 element 정보를 이용해 팝업을 연다 
+    ************************************************* 
+    * @description 
+    * @param {String} title 팝업 이름 
+    * @param {Object} logic { "module": '', "location": '', "tagname": '', size : '', popup_field: '', parent_field: ''}
+    * @param {Object} paramData 
+    */
+    async openDynamicPopup(title, logic, paramData) {
+
+        // import 
+        await this.dynamicImport(logic.module, logic.location);
+
+        let parentValue = undefined;
+
+        if (this.isNotEmpty(logic.parent_field)) {
+            parentValue = paramData[logic.parent_field];
+        }
+
+        // element 생성 
+        let htmlText = `<${logic.tagname} route_name='${logic.menu}' parent_id='${parentValue}' is_popup=true></${logic.tagname}>`;
+        let htmlElemnts = this.htmlToElement(htmlText);
+
+        // 파라미터 설정 
+        if (this.isNotEmpty(logic.popup_field)) {
+            htmlElemnts[logic.popup_field] = paramData;
+        }
+
+        // 팝업 오픈 
+        let popup = openPopup(htmlElemnts, {
+            backdrop: true,
+            size: logic.size,
+            title: title
+        })
+        popup.onclosed = async (e) => {
+            // 팝업이 닫히면 조회 
+            await this.fetch();
+        }
+    }
+
+
+
+
+    /**
+     * js 다이다믹 임포트 
+     * module 이 미리 지정 되어 있어야 한다.
+     **************************************
+     * @param {String} module 
+     * @param {String} url 
+     */
+    async dynamicImport(module, url) {
+        // 페이지 import 요청 이벤트 전파
+        document.dispatchEvent(new CustomEvent('dynamic-page-import-request', {
+            detail: {
+                module: module,
+                url: url
+            }
+        }))
+    }
+
+    /**
+     * 페이지를 이동 한다 .
+     **************************************
+     * @param {String} url 
+     * @param {Object} params undefined or Object
+     */
+    pageNavite(url, params) {
+        if (params) {
+            let paramStr = '';
+
+            Object.keys(params).forEach(x => {
+                paramStr += `${x}=${params[x]}&`
+            })
+
+            navigate(`${url}?${paramStr}`)
+        } else {
+            navigate(url);
+        }
+    }
+
+    /**
+     * 공통 코드를 조회해 서치폼, 그리드에서 표현 가능한 데이터로 변환 한다. 
+     ************************************************************ 
+     * @param {String} name 
+     * @returns 
+     */
+    async getCommonCodesByName(name) {
+        let codes = await getCodeByName(name);
+        let options = [
+            { value: '', display: '' }
+        ]
+
+        codes.forEach(x => {
+            options.push({
+                value: x.name,
+                display: x.description
+            })
+        })
+
+        return options;
+    }
+
+
+    /**
+     * 시나리오를 호출해 코드 정보를 가져온다. 
+     ****************************************  
+     * @description 시나리오에서는 name, description 필드를 리턴해 줘야 한다. 
+     * @param {String} name 
+     * @param {Array} args 
+     */
+    async getCodeByScenario(name, args) {
+        let codes = await this.gqlCallScenario(name, args);
+        let options = [
+            { value: '', display: '' }
+        ]
+
+        codes.forEach(x => {
+            options.push({
+                value: x.name,
+                display: x.description
+            })
+        })
+
+        return options;
+    }
+
+    /**
+     * dataObject 에서 key 값을 찾아 isTransMsg 옵션을 적용해 retObjct 에 반영 한다. *
+     * *********************************************************************
+     * @param {Object} retObj 
+     * @param {Object} dataObj 
+     * @param {String} key 
+     * @param {Boolean} isTransMsg 
+     * @returns 
+     */
+    setParams(retObj, dataObj, key, isTransMsg) {
+        let value = this.getParams(dataObj, key);
+
+        if (this.isNotEmpty(value)) {
+            retObj[key] = isTransMsg === true ? this.convertMsgCode(value) : value;
+        }
+        return retObj;
+    }
+
+    /**
+     * data 에서 key(Array) 를 찾아 리턴 
+     ************************************ 
+     * @param {Object} data 
+     * @param {...String} keys 
+     * @returns 
+     */
+    getParams(data, ...keys) {
+        // keys 파라미터가 없으면 return 
+        if (arguments.length <= 1) {
+            return undefined;
+        }
+
+        let key = keys[0];
+        // data 에 key 가 없으면 return 
+        if (this.isEmpty(data[key])) {
+            return undefined;
+        }
+
+        let paramData = data[key];
+
+        if (keys.length > 1) {
+            // 현재 이후에 키가 더 있으면 재귀 호출 
+            return this.getParams(paramData, ...keys.slice(1));
+        } else {
+            return paramData;
+        }
+    }
+
+    /**
+     * 버튼관 연결될 핸들러를 리턴 한다. 
+     ***********************
+     * @description 없으면 message 처리 .
+     * @param {String} type
+     * @param {String} action
+     * @param {Object} logic
+     */
+    getButtonActionHandler(type, action, logic) {
+        if (type == 'basic') {
+            if (this[action]) {
+                return this[action].bind(this);
+            }
+        } else {
+            return () => this.customButtonHandler(logic);
+        }
+
+        // TODO 메시지 코드 처리 
+        return () => {
+            this.showCustomAlert('label.info', '버튼과 연결된 함수가 없습니다.')
+        }
+    }
+
+
+    /**
+     * 토스트 메시지 
+     * @param {String} textCode 
+     */
+    showToast(textCode) {
+        let message = this.convertMsgCode(textCode);
+        document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
+    }
+
+
+    /**
+     * alert 박스 보기 
+     **************************************
+     * @param {String} titleCode 
+     * @param {String} textCode 
+     * @param {String} type 
+     * @param {String} confirmButtonCode 
+     * @param {String} cancelButtonCode 
+     * @returns {Object}
+     */
+    async showCustomAlert(titleCode, textCode, type, confirmButtonCode, cancelButtonCode) {
+
+        // alert 정보 생성 
+        let alertObj = {
+            title: this.convertMsgCode(titleCode),
+            text: this.convertMsgCode(textCode)
+        };
+
+        if (this.isNotEmpty(type)) {
+            alertObj['type'] = type;
+        }
+
+        if (this.isNotEmpty(confirmButtonCode)) {
+            alertObj['confirmButton'] = { text: this.convertMsgCode(confirmButtonCode) };
+        }
+
+        if (this.isNotEmpty(cancelButtonCode)) {
+            alertObj['cancelButton'] = { text: this.convertMsgCode(cancelButtonCode) };
+        }
+
+        return await CustomAlert(alertObj);
+    }
+
+    /**
+     * object, string, number, array 빈 값 여부 검사
+     **************************************
+     * @param {Object} param 
+     * @returns {Boolean}
+     */
+    isEmpty(param) {
+        if (param === undefined) {
+            return true;
+        } else if (param === null) {
+            return true;
+        } else if (typeof param === 'boolean') {
+            return false;
+        } else if (typeof param === 'string' || typeof param === 'number') {
+            if (param == '') return true;
+        } else if (Array.isArray(param)) {
+            if (param.length == 0) return true;
+        } else if (typeof param === 'object') {
+            if (Object.keys(param).length == 0) return true;
+        }
+        return false;
+    }
+
+    /**
+     * object, string, number, array 빈 값 isNot 여부 검사
+     **************************************
+     * @param {Object} param 
+     * @returns {Boolean}
+     */
+    isNotEmpty(param) {
+        if (param === undefined) {
+            return false;
+        } else if (param === null) {
+            return false;
+        } else if (typeof param === 'boolean') {
+            return true;
+        } else if (typeof param === 'string' || typeof param === 'number') {
+            if (param != '') return true;
+        } else if (Array.isArray(param)) {
+            if (param.length > 0) return true;
+        } else if (typeof param === 'object') {
+            if (Object.keys(param).length > 0) return true;
+        }
+
+        return false;
+    }
+
+
+    /**
+     * HTML 문자열을 elements 로 반환 
+     **************************************
+     * @param {String} htmlString 
+     * @returns {HTMLElement}
+     */
+    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;
+    }
+
+    /**
+     * 두 객체가 동일한지 비교 
+     * @param {*} data1 
+     * @param {*} data2 
+     * @returns 
+     */
+    isEquals(data1, data2) {
+        return isEqual(data1, data2);
+    }
+
+
+    /**
+     * config, data 의 key 값을 비교 해 결과를 리턴한다.
+     * 값에 * 는 체크 하지 않는다.
+     **************************************** 
+     * @param {Object} config 
+     * @param {Object} data 
+     * @param {String Array} keys 
+     * @returns 
+     */
+    compareObjectValues(config, data, keys) {
+        let isEquals = true;
+
+        keys.forEach(key => {
+            let compareValue = config[key];
+
+            if (compareValue === '*') {
+                return;
+            }
+
+            let recordValue = data[key] || '';
+
+            if (this.isEmpty(compareValue)) {
+                if (this.isNotEmpty(recordValue)) {
+                    isEquals = false;
+                }
+            } else {
+                if (compareValue != recordValue) {
+                    isEquals = false;
+                }
+            }
+        })
+
+        return isEquals;
+    }
+
+
+    /**
+     * 메뉴 메타 정보에서 페이지 Context 정보 추출 
+     *************************** 
+     * @description 메뉴 타이틀, 도움말, import, export, 각종 버튼들 포함 
+     * @returns {Object}
+     */
+    getContextObject() {
+
+        // 리턴 오브젝트 
+        let retContext = { actions: [] };
+        // 기본 타이틀 및 도움말 설정 
+        retContext = this.setParams(retContext, this.menuInfo, 'title', true);
+        retContext = this.setParams(retContext, this.menuInfo, 'help');
+
+        // 버튼 정보 추출 
+        let buttons = this.getContextButtons();
+
+        // 버튼 context 오브젝트에 포함 
+        retContext.actions.push(...buttons);
+
+        // 내보내기 버튼 
+        if (this.use_button_export) {
+            retContext.exportable = {
+                name: retContext.title,
+                data: this._exportableData.bind(this)
+            }
+        }
+
+        // 임포트 버튼 
+        if (this.use_button_import) {
+            retContext.importable = {
+                handler: this._importableData.bind(this)
+            }
+        }
+
+        return retContext;
+    }
+
+
+
+    /**
+     * 화면에 구성된 콤포넌트에 따라 조회를 호출 한다.
+     */
+    async fetch() {
+        if (this.isNotEmpty(this.grist)) {
+            this.grist.fetch();
+        } else if (this.isNotEmpty(this.filterForm)) {
+            await this.fetchHandler();
+        } else {
+            await this.fetchHandler();
+        }
+    }
+
+
+    /**********************************
+    * LifeCycle
+    ***********************************/
+
+    async connectedCallback() {
+        if (super.connectedCallback) {
+            await super.connectedCallback();
+        }
+    }
+
+    async firstUpdated() {
+        if (super.firstUpdated) {
+            await super.firstUpdated();
+        }
+    }
+
+    async pageInitialized() {
+        if (super.pageInitialized) {
+            await super.pageInitialized();
+        }
+    }
+
+    async disconnectedCallback() {
+        if (super.disconnectedCallback) {
+            await super.disconnectedCallback();
+        }
+    }
+}