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

package/client/mixin/render-basic-form-mixin.js

@@ -0,0 +1,264 @@
+import { css, html } from 'lit'
+import { RenderButtonMixin } from "./render-button-mixin";
+import { ScrollbarStyles } from '@operato/styles'
+import { getEditor, getRenderer } from '@operato/data-grist'
+
+/**
+ * 메타 서비스를 이용하는 페이지 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const RenderBasicFormMixin = (baseElement) => class extends RenderButtonMixin(baseElement) {
+    static get styles() {
+        let styles = [];
+
+        let topStyles = [
+            ScrollbarStyles,
+            css`
+            :host {
+                display: flex;
+                flex-direction: column;
+                overflow-x: overlay;
+                background-color: var(--main-section-background-color);
+              }
+
+              ox-record-view-body {
+                flex: 1;
+                overflow-y: auto;
+              }        
+            `
+        ];
+
+        styles.push(...topStyles);
+        styles.push(...this.getButtonContainerStyle());
+
+        return styles;
+    }
+
+
+    /**
+     * 데이터 조회 
+     */
+    async fetchHandler() {
+        let data = await this.gqlFindOne(this.parent_id);
+        data['__seq__'] = 1;
+        let orgData = {};
+
+        Object.assign(orgData, data);
+        data['__origin__'] = orgData;
+        this.viewBody.record = { ...data };
+    }
+
+    /**
+     * 메뉴 메타 정보를 기반으로 form 설정 셋을 생성 한다. 
+     ************************************************ 
+     * @returns {Array} Form 설정 셋 
+     */
+    async getFormConfigSet() {
+        // 폼에 사용할 수 있는 설정 정보가 없으면 
+        if (this.isEmpty(this.formColumnConfig) && this.isEmpty(this.gridColumnConfig)) {
+            return [];
+        }
+
+        // 메타에 폼 컬럼 정보가 없으면 
+        if (this.isEmpty(this.formColumnConfig)) {
+            // 그리드 설정을 사용한다.
+            this.formColumnConfig = this.gridColumnConfig;
+        }
+
+        let columns = [];
+        for (let idx = 0; idx < this.formColumnConfig.length; idx++) {
+            var {
+                type = "string",
+                name = undefined,
+                header = undefined,
+                hidden = false,
+                editable = true,
+                mandatory = false,
+                align = "left",
+                select_opt = undefined,
+                object_opt = undefined
+            } = this.formColumnConfig[idx];
+
+            // 컬럼 config 으로 변경 및 문자열 처리 
+            let column = {
+                type: type,
+                name: name,
+                header_txt: this.isEmpty(header) ? this.convertMsgCode(`field.${name}`) : this.convertMsgCode(header),
+                header: {
+                    renderer: function (column) {
+                        return column.header_txt;
+                    }
+                },
+                hidden: hidden,
+                record: {
+                    editable: editable,
+                    mandatory: mandatory,
+                    align: align,
+                    classifier: function () { },
+                    renderer: getRenderer(type)
+                }
+            };
+
+            if (editable) {
+                column.record.editor = getEditor(type);
+            }
+
+            // select-option
+            if (type === 'select' && this.isNotEmpty(select_opt)) {
+                if (Array.isArray(select_opt)) {
+                    column.record.options = select_opt;
+                } else {
+                    if (select_opt.type === 'code') { // 공통 코드 
+                        column.record.options = await this.getCommonCodesByName(select_opt.name);
+                    } else if (select_opt.type === 'scenario') { // 시나리오
+                        column.record.options = await this.getCodeByScenario(select_opt.name, select_opt.args)
+                    }
+                }
+            }
+
+            // object-option
+            if (type === 'object' && this.isNotEmpty(object_opt)) {
+                column.record.options = object_opt;
+            }
+
+            columns.push(column);
+        }
+        return columns;
+    }
+
+
+    /**
+     * 폼뷰 저장 버튼 override
+     */
+    async save() {
+        let recordData = this.viewBody.record;
+
+        // 변경 여부 메시지 처리 
+        if (this.isEmpty(recordData.__dirty__)) {
+            this.showCustomAlert('title.info', 'text.NOTHING_CHANGED');
+            return;
+        }
+
+        let data = recordData.__dirtyfields__;
+        let dirtyData = {};
+
+        if (this.isNotEmpty(recordData.id)) {
+            dirtyData.id = recordData.id;
+        }
+
+        Object.keys(data).forEach(key => {
+            dirtyData[key] = data[key].after;
+        })
+
+        let patches = [{ ...dirtyData, cuFlag: recordData.__dirty__ }]
+        await this.requestCUMultiple(patches);
+        return true;
+    }
+
+    /**********************************
+     * LifeCycle
+     ***********************************/
+
+    async connectedCallback() {
+        this.getMetaInfo('master', 'operation-master');
+        // 버튼 설정에서 아래 항목 제외 
+        this.buttonConfig = this.buttonConfig.filter(x => x.name != 'export' && x.name != 'import' && x.name != 'add' && x.name != 'delete');
+
+        if (this.isElement) {
+            // form 구성 설정 셋 
+            this.formConfigSet = await this.getFormConfigSet();
+        }
+
+        // 폼뷰의 인풋에서 발생되는 변경 이벤트 처리 
+        this.addEventListener('field-change', e => {
+            var { after, before, column, record, row } = e.detail;
+
+            /* compare changes */
+            if (this.isEquals(after, before)) {
+                return
+            }
+
+            var validation = column.validation
+            if (validation && typeof validation == 'function') {
+                if (!validation.call(this, after, before, record, column)) {
+                    return
+                }
+            }
+
+            let colName = column.name;
+
+            // 변경 값 셋팅 
+            record[colName] = after;
+
+            // 변경 필드 정보 
+            record.__dirtyfields__ = record.__dirtyfields__ || {};
+            record.__dirtyfields__[colName] = {
+                before: record.__origin__[colName],
+                after: record[colName]
+            }
+
+            // 같은 값으로 변경 되었다면
+            if (this.isEquals(record.__dirtyfields__[colName].before, record.__dirtyfields__[colName].after)) {
+                delete record.__dirtyfields__[colName];
+            }
+
+            if (this.isNotEmpty(record.__dirtyfields__)) {
+                // flag 
+                record.__dirty__ = 'M';
+            } else {
+                // flag 
+                record.__dirty__ = '';
+            }
+
+            this.viewBody.record = { ...record };
+        })
+
+        if (super.connectedCallback) {
+            await super.connectedCallback();
+        }
+    }
+
+    /**
+     * 화면이 element 인 경우 
+     */
+    async firstUpdated() {
+        if (super.firstUpdated) {
+            await super.firstUpdated();
+        }
+
+        await this.fetch();
+    }
+
+    /**
+     * 화면이 페이지인 경우 
+     */
+    async pageInitialized() {
+        if (this.isPage) {
+            // form 구성 설정 셋 
+            this.formConfigSet = await this.getFormConfigSet();
+        }
+
+        if (super.pageInitialized) {
+            await super.pageInitialized();
+        }
+    }
+
+    get viewBody() {
+        return this.renderRoot.querySelector('ox-record-view-body');
+    }
+
+    render() {
+        return html`
+            <ox-record-view-body .columns=${this.formConfigSet} .record=${{}} .rowIndex=${1}>
+            </ox-record-view-body>
+            
+            ${this.getButtonContainer()}
+        `;
+    }
+
+    get context() {
+        return this.getContextObject();
+    }
+}

package/client/mixin/render-basic-grist-mixin.js

@@ -0,0 +1,85 @@
+import { RenderGristMixin } from "./render-grist-mixin";
+
+import { css, html } from 'lit'
+import { i18next } from "@operato/i18n";
+
+/**
+ * 메타 서비스를 이용하는 페이지 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const RenderBasicGristMixin = (baseElement) => class extends RenderGristMixin(baseElement) {
+    static get styles() {
+        let styles = [];
+
+
+        let topStyles = [
+            css`
+            :host {
+                display: flex;
+                flex-direction: column;
+                overflow-x: overlay;
+                background-color: var(--main-section-background-color);
+              }
+            `
+        ];
+
+        styles.push(...topStyles);
+        styles.push(...this.gristStyles())
+        styles.push(...this.getButtonContainerStyle());
+
+        return styles;
+    }
+
+    /**********************************
+     * LifeCycle
+     ***********************************/
+
+    async connectedCallback() {
+        this.getMetaInfo('master', 'operation-master');
+
+        if (this.isElement) {
+            // 그리스트 구성 설정 셋 
+            this.gristConfigSet = await this.getGristConfigSet();
+        }
+
+        if (super.connectedCallback) {
+            await super.connectedCallback();
+        }
+    }
+
+    /**
+     * 화면이 element 인 경우 
+     */
+    async firstUpdated() {
+        if (super.firstUpdated) {
+            await super.firstUpdated();
+        }
+    }
+
+    /**
+     * 화면이 페이지인 경우 
+     */
+    async pageInitialized() {
+        if (this.isPage) {
+            // 그리스트 구성 설정 셋 
+            this.gristConfigSet = await this.getGristConfigSet();
+        }
+
+        if (super.pageInitialized) {
+            await super.pageInitialized();
+        }
+    }
+
+    render() {
+        return html`
+        ${this.getGristHtml()}
+        ${this.getButtonContainer()}
+        `;
+    }
+
+    get context() {
+        return this.getContextObject();
+    }
+}

package/client/mixin/render-button-mixin.js

@@ -0,0 +1,163 @@
+import { CommonButtonStyles } from '@operato/styles'
+import { HandlerGristButtonMixin } from "./handler-grist-button-mixin";
+import { css, html } from 'lit'
+
+/**
+ * 메타 서비스를 이용해 버튼 렌더링 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const RenderButtonMixin = (baseElement) => class extends HandlerGristButtonMixin(baseElement) {
+
+    /** 
+     * 버튼 컨테이너 스타일 
+     */
+    static getButtonContainerStyle() {
+        return [css`
+                .button-container {
+                    padding: var(--button-container-padding);
+                    margin: var(--button-container-margin);
+                    text-align: var(--button-container-align);
+                    background-color: var(--button-container-background);
+                    height: var(--button-container-height);
+                    text-align: right;
+                    padding-right: 12px;
+                }
+            `]
+    }
+
+    /**
+     * 메뉴 컨텍스트에서 사용할 버튼 정보 추출 
+     * @returns {Array}
+     */
+    getContextButtons() {
+        var { use_import = false, use_export = false, use_add = false } = {};
+
+        let retObj = [];
+
+        this.buttonConfig.forEach(x => {
+            if (x.name == 'export') use_export = true;
+            else if (x.name == 'import') use_import = true;
+            else if (x.name == 'add') use_add = true;
+            else {
+                let btn = this.getContextButtonSet(x);
+                if (this.isNotEmpty(btn)) {
+                    retObj.push(btn);
+                }
+            }
+        });
+
+        this.use_button_export = use_export;
+        this.use_button_import = use_import;
+        this.use_button_add = use_add;
+
+        return retObj;
+    }
+
+    /**
+     * 버튼 설정에서 페이지 context 에서 리턴될 버튼 오브젝트 생성 
+     * @param {Object} btnObj 
+     * @returns 
+     */
+    getContextButtonSet(btnObj) {
+        var {
+            name = undefined,
+            label = undefined,
+            style = undefined,
+            type = 'basic',
+            action = undefined,
+            logic = undefined
+        } = btnObj;
+
+        if (this.isEmpty(name)) {
+            return undefined;
+        }
+
+        if (this.isEmpty(label)) label = `button.${name}`;
+        if (this.isEmpty(style)) style = name;
+        if (this.isEmpty(action)) action = name;
+
+        return {
+            title: this.convertMsgCode(label),
+            action: this.getButtonActionHandler(type, action, logic),
+            ...(this.isNotEmpty(style) ? CommonButtonStyles[style] : [])
+        }
+    }
+
+
+    /**
+     * element 로 로드시 버튼을 포함한 container div 를 리턴한다.
+     * @returns {HTML}
+     */
+    getButtonContainer() {
+        if (this.isPage) return html``;
+
+        return html`<div id="button-container" class="button-container">${this.getContainerButtons()}</div>`;
+    }
+
+    /**
+     * element 로 로드시 버튼 element 를 container 에 직접 그려야함.
+     */
+    getContainerButtons() {
+        let retObj = [];
+
+        this.buttonConfig.forEach(x => {
+            var {
+                name = undefined,
+                label = undefined,
+                style = undefined,
+                type = 'basic',
+                action = undefined,
+                logic = undefined
+            } = x;
+
+            if (this.isEmpty(label)) label = `button.${name}`;
+            if (this.isEmpty(style)) style = name;
+            if (this.isEmpty(action)) action = name;
+
+            let btn = this.createButtonElement(this.convertMsgCode(label));
+            btn.onclick = this.getButtonActionHandler(type, action, logic);
+            retObj.push(btn);
+        });
+
+        return retObj;
+    }
+
+    /**
+     * 버튼 엘리먼트를 생성해 리턴한다. 
+     * ************************************** 
+     * @param {String} buttonName 
+     * @returns 
+     */
+    createButtonElement(buttonName) {
+        let btnHtml = `<mwc-button raised label="${buttonName}" style="margin-left:7px;margin-top:7px;"></mwc-button>`
+        let btnEle = this.htmlToElement(btnHtml);
+
+        return btnEle;
+    }
+
+
+    /**********************************
+    * 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();
+        }
+    }
+
+}