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

package/client/mixin/handler-graphql-mixin.js

@@ -0,0 +1,297 @@
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
+import { adjustFilters } from '@operato/utils'
+
+import { MetaUtilMixin } from './meta-util-mixin'
+
+
+/**
+ * GraphQL 호출 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const HandlerGraphqlMixin = (baseElement) => class extends MetaUtilMixin(baseElement) {
+
+    /**
+     * GraphQL Query 호출 
+     **************************************** 
+     * @returns {object} 
+     */
+    async gqlQuery(page, limit, sorters, sortings, filters) {
+        // 조회 함수 
+        let gqlQueryFunc = this.getParams(this.gqlInfo, 'query', 'list_func');
+
+        // element 의 경우 상위 데이터 parent_id 가 있다. 
+        if (this.isElement) {
+            let gqlParentId = this.getParams(this.gqlInfo, 'query', 'parent_id');
+
+            if (this.isNotEmpty(gqlParentId)) {
+                if (this.isEmpty(this.parent_id)) {
+                    // 상위 객체 아이디가 지정되지 않았으면 return
+                    return;
+                }
+
+                filters = adjustFilters(filters, [
+                    {
+                        name: gqlParentId,
+                        operator: "eq",
+                        value: this.parent_id
+                    }
+                ]);
+            }
+        }
+
+        // GraphQL 쿼리 
+        let gqlQuery = `
+            query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+                ${gqlQueryFunc}(filters: $filters, pagination: $pagination, sortings: $sortings) {
+                    items {
+                        ${this.getViewElementColsToGql()}
+                    }
+                    total
+                }
+            }
+        `
+
+
+        // 페이지 처리 
+        if (this.infinity_page === true) {
+            page = 0;
+            limit = 0;
+        }
+
+
+        // 요청 Object 
+        let reqObject = {
+            query: gql`${gqlQuery}`,
+            variables: {
+                filters,
+                pagination: { page, limit },
+                sortings
+            }
+        }
+
+
+        // 요청 
+        let response = await client.query(reqObject);
+
+        // 결과 
+        return {
+            total: response.data[gqlQueryFunc].total || 0,
+            records: response.data[gqlQueryFunc].items || []
+        }
+    }
+
+    /**
+     * 레코드의 ID 를 이용해 데이터를 호출 한다. 
+     * @param {String} id 
+     */
+    async gqlFindOne(id) {
+        let gqlFindOneFunc = this.getParams(this.gqlInfo, 'query', 'find_one_func')
+
+        let gqlQuery = `
+            query ($id: String!) {
+                ${gqlFindOneFunc}(id: $id) {
+                    ${this.getViewElementColsToGql()}
+                }
+            }`;
+
+        // 요청 Object 
+        let reqObject = {
+            query: gql`${gqlQuery}`,
+            variables: { id: id }
+        }
+
+        // 요청 
+        let response = await client.query(reqObject);
+
+        if (!response.errors) {
+            return response.data[gqlFindOneFunc] || [];
+        }
+    }
+
+
+    /**
+     * 화면에 그리스트 또는 폼 에서 GraphQl 조회 대상 컬럼을 추출한다. 
+     * @returns {String}
+     */
+    getViewElementColsToGql() {
+        if (this.isNotEmpty(this.gqlFetchField)) {
+            return this.gqlFetchField;
+        }
+
+        // 그리스트가 있으면 그리드 설정셋에서 추출 
+        if (this.grist) {
+            return this.getConfigsetToGql(this.gristConfigSet);
+        } else {
+            // 없으면 폼뷰 설정셋에서 추출 
+            return this.getConfigsetToGql({ columns: this.formConfigSet });
+        }
+    }
+
+    /**
+     * Grist 또는 Form 설정 셋 에서 컬럼을 추출 한다. 
+     * @param {Array} configSet 
+     * @returns 
+     */
+    getConfigsetToGql(configSet) {
+        let gqlString = '';
+
+        configSet.columns.filter(x => x.type != 'gutter').forEach(x => {
+            gqlString += "\n"
+            gqlString += (x.type === 'object') == false ? x.name : `${x.name}\n{${this.getObjctColumnToGql(x)}}`;
+        })
+
+        this.gqlFetchField = gqlString;
+        return gqlString;
+    }
+
+    /**
+     * Object 타입의 컬럼은 별도의 컬럼 처리가 필요함. 
+     **************************************** 
+     * @param {Object} column 
+     * @param {String} gqlString 
+     * @returns 
+     */
+    getObjctColumnToGql(column, gqlString) {
+        if (this.isEmpty(gqlString)) {
+            gqlString = '';
+        }
+
+        // 설정에 정의가 되어 있지 않으면 기본 id, name, description 필드 
+        if (this.isEmpty(column.record.options) || this.isEmpty(column.record.options.select)) {
+            gqlString += "\nid\nname\ndescription";
+        } else {
+            // 설정에 정의가 되어 있으면 
+            column.record.options.select.forEach(x => {
+                if (x.type !== 'object') {
+                    gqlString += `\n${x.name}`;
+                }
+            })
+        }
+
+        return gqlString;
+    }
+
+
+    /**
+     * List 데이터 CU 호출 
+     ******************************************** 
+     * @param {Array} patches 
+     * @returns 
+     */
+    async gqlCuMultiple(patches) {
+        let gqlMultipleFunc = this.getParams(this.gqlInfo, 'mutation', 'multiple', 'func')
+        let gqlMultipleType = this.getParams(this.gqlInfo, 'mutation', 'multiple', 'type')
+
+        // element 의 경우 상위 데이터 parent_id 가 있다. 
+        if (this.isElement) {
+            let gqlParentId = this.getParams(this.gqlInfo, 'mutation', 'multiple', 'parent_id');
+            if (this.isNotEmpty(gqlParentId)) {
+                if (this.isEmpty(this.parent_id)) {
+                    // 상위 객체 아이디가 지정되지 않았으면 return
+                    return;
+                }
+
+                patches.forEach(x => {
+                    patches.gqlParentId = this.parent_id;
+                })
+            }
+        }
+
+        const response = await client.query({
+            query: gql`
+                    mutation ($patches: [${gqlMultipleType}!]!) {
+                        ${gqlMultipleFunc}(patches: $patches) {
+                            id
+                        }
+                    }
+                    `,
+            variables: {
+                patches
+            },
+            context: {
+                hasUpload: true
+            }
+        });
+
+        return response;
+    }
+
+    /**
+     * String List ids 에 대하여 삭제 요청 
+     *********************************************  
+     * @param {Array} ids 
+     */
+    async gqlDeletes(ids) {
+        let gqlDeleteFunc = this.getParams(this.gqlInfo, 'mutation', 'delete', 'func')
+
+        // delete 요청 
+        const response = await client.query({
+            query: gql`
+              mutation ($ids: [String!]!) {
+                ${gqlDeleteFunc}(ids: $ids)
+              }
+            `,
+            variables: {
+                ids
+            }
+        })
+
+        return response;
+    }
+
+    /**
+     * 시나리오를 호출 한다.
+     ************************************************* 
+     * @param {String} scenarioName 
+     * @param {Object} variables 
+     */
+    async gqlCallScenario(scenarioName, variables) {
+
+        // scenario 호출 
+        const response = await client.query({
+            query: gql`
+                mutation ($scenarioName: String!, $variables: Object) {
+                    runScenario(scenarioName: $scenarioName, variables: $variables){
+                        state
+                        message
+                        data
+                        __typename
+                    }
+                }
+            `,
+            variables: {
+                scenarioName: scenarioName,
+                variables: variables
+            }
+        })
+
+        return response;
+    }
+
+
+    /**********************************
+    * 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-grist-button-mixin.js

@@ -0,0 +1,119 @@
+import { HandlerCustomButtonMixin } from "./handler-custom-button-mixin";
+
+/**
+ * 그리드의 버튼을 핸들링 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const HandlerGristButtonMixin = (baseElement) => class extends HandlerCustomButtonMixin(baseElement) {
+
+
+    /**
+     * 그리스트 버튼에 대한 커스텀 액션 분기 
+     ******************************************* 
+     * @param {Object} actionInfo 
+     * @param {Object} record 
+     */
+    async gristButtonHandler(actionInfo, record) {
+        let action = this.getParams(actionInfo, "logic");
+        let eventType = this.getParams(action, "type");
+
+        if (eventType === 'form') {
+            // 상세 폼뷰는 기본 정의된 로직으로 셋팅 
+            action.tagname = "operation-master-form-view";
+            action.module = "chef";
+            action.location = "pages/master/operation/operation-master-form-view.js";
+            action.parent_field = "id";
+
+            await this.commonButtonOpenPopup(action, record);
+        } else if (eventType === 'pass_param') {
+            // 다른 객체로 파라미터 전달 
+            this.gristButtonPassParam(action, record);
+        } else if (eventType === 'page') {
+            // page 이동 
+            this.commonButtonPageNavigate(action, record);
+        } else if (eventType === 'popup') {
+            // popup 오픈 
+            await this.commonButtonOpenPopup(action, record);
+        } else if (eventType === 'scenario') {
+            // scenario 호출 
+            await this.commonButtonCallScenario(action, record);
+        } else if (eventType === 'value_reference') {
+            // 설정된 조건에 따라 커스텀 로직 처리 
+            await this.gristButtonValueReference(action, record);
+        }
+    }
+
+    /**
+     * 설정된 조건과 record 의 값을 비교. 로직 처리 
+     ************************************************ 
+     * @param {Object} config 
+     * @param {Object} record 
+     * @param {Object} params 
+     */
+    async gristButtonValueReference(config, record) {
+        // 지정된 조건 Loop
+        for (let idx = 0; idx < config.relation.length; idx++) {
+            let relation = config.relation[idx];
+            let useRelation = this.compareObjectValues(relation, record, Object.keys(relation).filter(key => key != 'logic'));
+            if (useRelation === true) {
+                // 조건 체크 후 버튼 핸들러 호출 
+                await this.gristButtonHandler(relation, record);
+                return;
+            }
+        }
+    }
+
+    /**
+     * 파라미터 전달 버튼 처리 
+     ************************************************  
+     * @param {Object} action 
+     * @param {Object} record 
+     */
+    gristButtonPassParam(action, record) {
+        // 파라미터 전달 정보 
+        let passInfo = action.pass_field;
+
+        // Object Key 로 Element 를 검색.
+        Object.keys(passInfo).forEach(elementId => {
+            let tElement = this.shadowRoot.querySelector(`#${elementId}`);
+
+            // 대상 엘리먼트에 매치할 필드 정보 
+            let matchInfo = passInfo[elementId];
+
+            // 필드 정보 Loop tField : target , sField : source 
+            Object.keys(matchInfo).forEach(tField => {
+                let sField = matchInfo[tField];
+                // param 값이 * 이면 record 전체 
+                let param = sField === "*" ? record : record[sField];
+
+                // tElement.tField 에 파라미터 set 
+                tElement[tField] = param;
+            })
+        })
+    }
+
+    /**********************************
+    * 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/meta-set-mixin.js

@@ -0,0 +1,69 @@
+import { store } from '@operato/shell'
+
+import { HandlerGraphqlMixin } from './handler-graphql-mixin';
+
+/**
+ * 메타 정보를 로드..
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const MetaSetMixin = (baseElement) => class extends HandlerGraphqlMixin(baseElement) {
+
+    /**
+     * 메뉴 메타 정보 가져오기 
+     ************************************ 
+     * @description /meta/{domain} 의 디렉토리 먼저 검색 
+     * @description /meta/default 도메인별 메타에 없으면 기본 설정 불러오기 
+     * @param {String} subMenu 
+     * @param {String} menu 
+     */
+    getMetaInfo(subMenu, menu) {
+        console.log(store.getState())
+
+        let domainPath = store.getState().app.contextPath.replace("/domain/", "");
+        let menuMeta = {};
+
+        try {
+            // menuMeta = require(`./../meta/${domainPath}/${subMenu}/${menu}.json`); // 도메인내 우선 검색 
+            menuMeta = require(`@operato/chef/client/meta/${domainPath}/${subMenu}/${menu}.json`); // 도메인내 우선 검색 
+        } catch {
+            // menuMeta = require(`./../meta/default/${subMenu}/${menu}.json`); // 없으면 공통 
+            menuMeta = require(`@operato/chef/client/meta/default/${subMenu}/${menu}.json`); // 없으면 공통 
+        }
+
+        this.menuInfo = menuMeta.menu;
+        this.gridColumnConfig = menuMeta.grid_column;
+        this.gridConfig = menuMeta.grid;
+        this.buttonConfig = menuMeta.button;
+        this.searchConfig = menuMeta.search;
+        this.formColumnConfig = menuMeta.form_column;
+
+        this.gqlInfo = this.getParams(this.menuInfo, "gql");
+    }
+
+
+
+    /**********************************
+    * 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();
+        }
+    }
+
+}