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

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+<!-- ## [Unreleased] -->

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Hatiolab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/client/actions/main.js

@@ -0,0 +1 @@
+export const UPDATE_META_UI = 'UPDATE_META_UI'

package/client/bootstrap.js

@@ -0,0 +1,8 @@
+import { store } from '@things-factory/shell'
+import metaUi from './reducers/main'
+
+export default function bootstrap() {
+  store.addReducers({
+    metaUi
+  })
+}

package/client/index.js

@@ -0,0 +1,23 @@
+export * from './actions/main'
+
+
+/**  Mix In  **/
+export * from './mixin/handler-basic-button-mixin'
+export * from './mixin/handler-common-button-mixin'
+export * from './mixin/handler-custom-button-mixin'
+export * from './mixin/handler-graphql-mixin'
+export * from './mixin/handler-grist-button-mixin'
+
+export * from './mixin/meta-set-mixin'
+export * from './mixin/meta-util-mixin'
+export * from './mixin/render-basic-form-mixin'
+export * from './mixin/render-basic-grist-mixin'
+export * from './mixin/render-button-mixin'
+export * from './mixin/render-grist-mixin'
+export * from './mixin/render-search-mixin'
+
+/**  Page  **/
+export * from './pages/basic-grist-page'
+
+export * from './pages/basic-grist-element'
+export * from './pages/basic-form-element'

package/client/mixin/handler-basic-button-mixin.js

@@ -0,0 +1,202 @@
+import { HandlerCommonButtonMixin } from "./handler-common-button-mixin";
+import { EXPORT } from '@things-factory/export-base'
+import { store } from '@operato/shell'
+
+/**
+ * 기본 Button 에 대한 이벤트 처리 ( import, export, save, delete, add ) 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const HandlerBasicButtonMixin = (baseElement) => class extends HandlerCommonButtonMixin(baseElement) {
+
+
+
+    /****************************************
+     * 조회 
+     *****************************************/
+
+    /**
+     * 리스트 조회
+     *******************************
+    * @param {Object} fetchParam 
+    * @returns {Object} 
+    */
+    async fetchHandler({ page = 0, limit = 0, sorters = [], sortings = [], filters = [] }) {
+        let formFilters = await this.filterForm?.getQueryFilters() || [];
+        return await this.gqlQuery(page, limit, sorters, sortings, formFilters);
+    }
+
+
+
+
+    /****************************************
+    * CUD
+    *****************************************/
+
+    /**
+     * 저장 버튼 처리 
+     */
+    async save() {
+        const patches = this.getPatches();
+
+        // 변경된 내용이 없음 
+        if (!patches || patches.length == 0) {
+            this.showCustomAlert('title.info', 'text.NOTHING_CHANGED');
+            return;
+        }
+
+        await this.requestCUMultiple(patches);
+    }
+
+    /**
+     * 저장 버튼, 생성  GraphQL Request
+     *****************************  
+     * @param {Array} patches 
+     */
+    async requestCUMultiple(patches) {
+        // CuMultiple 요청 
+        let response = await this.gqlCuMultiple(patches);
+        if (!response.errors) {
+            this.showToast('text.Success to Process');
+
+            await this.fetch();
+        }
+    }
+
+
+    /**
+     * 엘리먼트 로드시 엑셀 import 
+     */
+    async import() {
+        //TODO
+    }
+
+    /**
+     * 엘리먼트 로드시 엑셀 export 
+     */
+    async export() {
+        await this._exportableData(this.grist);
+    }
+
+
+    /**
+     * 삭제 버튼 처리 
+     */
+    async delete() {
+        const records = this.grist.selected;
+
+        // 삭제할 대상이 없어요.
+        if (!records || records.length == 0) {
+            this.showCustomAlert('title.info', 'text.there_is_nothing_to_delete');
+            return;
+        }
+
+        // 삭제 하시겠어요
+        const answer = await this.showCustomAlert('text.confirm', 'are_you_sure', 'warning', 'button.delete', 'button.cancel');
+        if (!answer.value) return
+
+        let ids = this.grist.selected.map(x => x.id);
+
+        // 삭제 요청 
+        let response = await this.gqlDeletes(ids);
+
+        if (!response.errors) {
+            this.showToast('text.data_deleted_successfully');
+            this.grist.fetch();
+        }
+    }
+
+
+    /**
+     * 팝업으로 한건 생성
+     ***********************************************
+     * @param {Object} patches 
+     * @returns {Boolean}
+     */
+    async recordCreationCallback(patches) {
+        patches = [{ ...patches, cuFlag: '+' }]
+        await this.requestCUMultiple(patches);
+        return true;
+    }
+
+
+
+
+    /**************************
+     * 기타 
+     **************************/
+
+    /**
+     * 내보내기 
+     **************************************
+     @ @param {Grist} 
+     * @returns {Object} { header: headerSetting, data: data } or Not
+     */
+    async _exportableData(grist) {
+        if (this.isEmpty(grist)) {
+            grist = this.grist;
+        }
+
+        var headerSetting = grist._config.columns
+            .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined && column.hidden !== true)
+            .map(column => {
+                return column.imex
+            })
+
+        let records = grist.data.records;
+
+        var data = records.map(item => {
+            return {
+                // id: item.id,
+                ...grist._config.columns
+                    .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined && column.hidden !== true)
+                    .reduce((record, column) => {
+                        record[column.imex.key] = column.imex.key
+                            .split('.')
+                            .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+                        return record
+                    }, {})
+            }
+        })
+
+        // element 로 호출된 경우 리턴 없이 바로 xlsx 내보내기 
+        if (this.isElement) {
+            let extension = 'xlsx';
+
+            store.dispatch({
+                type: EXPORT,
+                exportable: {
+                    extension,
+                    name: this.convertMsgCode(this.getParams(this.menuInfo, 'title')),
+                    data: { header: headerSetting, data: data }
+                }
+            })
+        } else {
+            return { header: headerSetting, data: data }
+        }
+    }
+
+
+    /**********************************
+    * 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();
+        }
+    }
+}

package/client/mixin/handler-common-button-mixin.js

@@ -0,0 +1,90 @@
+import { MetaSetMixin } from "./meta-set-mixin";
+
+/**
+ * 기본 Button 에 대한 이벤트 처리 ( import, export, save, delete, add ) 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const HandlerCommonButtonMixin = (baseElement) => class extends MetaSetMixin(baseElement) {
+
+
+    /**
+     * 패이지 이동 버튼 처리 
+     ***************************************  
+     * @param {Object} action 
+     * @param {Object} record 
+     */
+    commonButtonPageNavigate(action, record) {
+        this.pageNavite(action.url, record);
+    }
+
+    /**
+     * 팝업 오픈 버튼 처리 
+     *********************************************  
+     * @param {Object} action 
+     * @param {Object} record
+     */
+    async commonButtonOpenPopup(action, record) {
+        // 타이틀 변환 
+        let title = this.convertMsgCode(action.title);
+
+        // 타이틀 상세 필드 정의 확인 
+        if (this.isNotEmpty(action.title_detail)) {
+            title = `${title}(${record[action.title_detail]})`
+        }
+        // 팝업 오픈 
+        this.openDynamicPopup(title, action, record)
+    }
+
+    /**
+     * 시나리오 호출 버튼 처리 
+     ****************************************** 
+     * @param {Object} action 
+     * @param {Object or Array} params 
+     */
+    async commonButtonCallScenario(action, params) {
+
+        // 시나리오 호출 
+        let response = await this.gqlCallScenario(action.name, params);
+
+        // 처리중 에러가 발생했으면 
+        if (response.errors) {
+            return;
+        }
+
+        // 시나리오 호출 후처리가 없으면 return
+        if (this.isEmpty(action.after)) {
+            return;
+        }
+
+        // 후처리가 fetch 이면 그리스트 조회 
+        if (action === 'fetch') {
+            this.grist.fetch();
+        }
+    }
+
+
+
+    /**********************************
+    * 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();
+        }
+    }
+}

package/client/mixin/handler-custom-button-mixin.js

@@ -0,0 +1,127 @@
+import { HandlerBasicButtonMixin, HandlerBasicEventMixin } from "./handler-basic-button-mixin";
+
+/**
+ * Custom Button 에 대한 이벤트 처리 ( import, export, save, delete, add ) 제외 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const HandlerCustomButtonMixin = (baseElement) => class extends HandlerBasicButtonMixin(baseElement) {
+    /**
+     * 커스텀 버튼에 대한 액션 분기 
+     ******************************************* 
+    * @param {Object} logic 
+    */
+    async customButtonHandler(logic) {
+        // logic 이 설정되지 않았으면 return 
+        if (this.isEmpty(logic)) {
+            return;
+        }
+
+        let eventType = this.getParams(logic, 'type');
+        let paramInfo = this.getParams(logic, 'param');
+
+        let includeGristParams = paramInfo.filter(x => x.startsWith('grist'));
+
+        // 오류 메시지 처리
+        if (this.isNotEmpty(includeGristParams)) {
+            // 그리스트 존재 여부 
+            if (!this.grist) {
+                // TODO
+                this.showCustomAlert('title.info', '그리드가 없습니다.')
+                return;
+            }
+
+            // 그리스트 데이터 존재 여부 
+            if (((this.grist && this.grist.data) ? this.grist.data.records : []).length == 0) {
+                // 비어있는 그리드 입니다. 
+                this.showCustomAlert('title.info', 'text.emptyGridMessage')
+                return;
+            }
+
+            if (paramInfo.includes('grist_one') || paramInfo.includes('grist_selected')) {
+                // 선택된 행이 있는지 확인 
+                let selectedRows = this.grist ? this.grist.selected : [];
+
+                if (this.isEmpty(selectedRows)) {
+                    // 선택된 항목이 없습니다. 
+                    this.showCustomAlert('title.info', 'text.there_is_no_selected_items')
+                    return;
+                }
+
+                if (paramInfo.includes('grist_one')) {
+                    // 하나의 행만 선택 되었는지 확인
+                    if (selectedRows.length > 1) {
+                        // TODO 하나의 항목만 선택해주세요.
+                        this.showCustomAlert('title.info', '하나의 항목만 선택해주세요.')
+                        return;
+                    }
+                }
+            }
+        }
+
+        let params = {};
+
+        if (paramInfo.includes("filter")) {
+            if (!this.filterForm) {
+                // TODO
+                this.showCustomAlert('title.info', '서치폼이 없습니다.')
+                return;
+            }
+            let filterValues = this.filterForm ? await this.filterForm.getQueryFilters() : [];
+            params['filter'] = filterValues;
+        }
+
+        if (paramInfo.includes('grist_all')) {
+            params['grist'] = this.grist.data.records;
+        } else if (paramInfo.includes('grist_one')) {
+            params['grist'] = this.grist.selected[0];
+        } else if (paramInfo.includes('grist_selected')) {
+            params['grist'] = this.grist.selected;
+        }
+
+        if (eventType === 'page') {
+            let convParam = {
+                ...(params['grist'] ? params['grist'] : {}),
+                ...(params['filter'] ? params['filter'] : {})
+            };
+
+            // page 이동 
+            this.commonButtonPageNavigate(logic, convParam);
+        } else if (eventType === 'popup') {
+            let convParam = {
+                ...(params['grist'] ? params['grist'] : {}),
+                ...(params['filter'] ? params['filter'] : {})
+            };
+
+            // popup 오픈 
+            await this.commonButtonOpenPopup(logic, convParam);
+        } else if (eventType === 'scenario') {
+            // scenario 호출 
+            await this.commonButtonCallScenario(logic, params);
+        }
+    }
+
+    /**********************************
+    * 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();
+        }
+    }
+
+}