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

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

@@ -0,0 +1,478 @@
+import '@material/mwc-icon'
+
+import { CommonGristStyles } from '@operato/styles'
+import { css, html } from 'lit'
+import { isMobileDevice } from '@operato/utils'
+
+import { RenderSearchMixin } from "./render-search-mixin";
+import { remove } from 'lodash';
+
+/**
+ * 메타 정보를 이용해 그리드를 렌더함. 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const RenderGristMixin = (baseElement) => class extends RenderSearchMixin(baseElement) {
+
+    /**
+     * 그리스트 스타일 
+     * @returns {Array}
+     */
+    static gristStyles() {
+        return [
+            CommonGristStyles,
+            css`
+            :host {  
+                --grid-record-emphasized-background-color: red;
+                --grid-record-emphasized-color: yellow;
+            }
+        `
+        ]
+    }
+
+    /************************************************************************************************************************
+     * 그리드 render 
+     *************************************************************************************************************************/
+
+
+    /**
+     * 그리드 렌더링   
+     * @returns {HTML}
+     */
+    getGristHtml() {
+        // explicit-fetch
+
+        return html`
+                <ox-grist id="ox-grist" .config=${this.gristConfigSet} .mode=${this.grid_mode} auto-fetch
+                    .fetchHandler=${this.fetchHandler.bind(this)}>
+                    ${this.getGridDetailHtml()}
+                </ox-grist>
+               `
+    }
+
+    /**
+     * 그리드 상세 내용 html 생성
+     * @returns {HTML}
+     */
+     getGridDetailHtml() {
+        return html `
+            <div slot="headroom">
+              <div id="filters"><ox-filters-form></ox-filters-form></div>
+              <div id="sorters">
+                <mwc-icon @click=${e=> {
+                  const target = e.currentTarget
+                  this.renderRoot.querySelector('#sorter-control').open({
+                    right: 0,
+                    top: target.offsetTop + target.offsetHeight
+                  })
+                }}
+                >sort</mwc-icon>
+                <ox-popup id="sorter-control">
+                  <ox-sorters-control> </ox-sorters-control>
+                </ox-popup>
+              </div>
+              ${this.getGridViewOption()}
+              <ox-record-creator id="add" ?hidden="${!this.use_button_add}" .callback=${this.recordCreationCallback.bind(this)}> <button><mwc-icon>add</mwc-icon></button></ox-record-creator>
+            </div>
+            ` ;
+    }
+
+    /**
+     * 그리드 보기 옵션 버튼을 그린다.
+     */
+    getGridViewOption() {
+        if (this.isEmpty(this.grid_view_options) || this.grid_view_options.length == 1) {
+            return html``;
+        }
+
+        return html`
+            <div id="modes">
+                ${this.grid_view_options.includes('GRID') 
+                    ? html`<mwc-icon @click="${() => (this.grid_mode = 'GRID')}" ?active="${this.grid_mode == 'GRID'}">grid_on</mwc-icon>` 
+                    : ``}
+                ${this.grid_view_options.includes('LIST') 
+                    ? html`<mwc-icon @click="${() => (this.grid_mode = 'LIST')}" ?active="${this.grid_mode == 'LIST'}">format_list_bulleted</mwc-icon>` 
+                    : ``}
+                ${this.grid_view_options.includes('CARD') 
+                    ? html`<mwc-icon @click="${() => (this.grid_mode = 'CARD')}" ?active="${this.grid_mode == 'CARD'}">apps</mwc-icon>` 
+                    : ``}
+            </div>
+        `
+    }
+
+
+    /************************************************************************************************************************
+     * 그리드 config 
+     *************************************************************************************************************************/
+
+    /**
+     * 메뉴 메타 정보를 기반으로 그리드 설정 셋을 생성 한다. 
+     ************************************************ 
+     * @returns {Object} 그리드 설정 셋 
+     */
+    async getGristConfigSet() {
+        // 그리드 구성시 내보내기 옵션 포함 여부, 추가 버튼 사용 여부 판단.
+        if(this.isEmpty(this.use_button_export)){
+            this.use_button_export = this.isNotEmpty(this.buttonConfig.filter( x=> x.name === 'export'));
+        }
+        if(this.isEmpty(this.use_button_add)){
+            this.use_button_add = this.isNotEmpty(this.buttonConfig.filter( x=> x.name === 'add'));
+        }
+
+
+
+        // 1. 그리드 옵션 
+        let gridOption = this.getGridOptionSet();
+
+        // 2. 그리드 리스트 설정 
+        let gridList = this.getGridListSet();
+
+        // 3. 그리드 row 설정 
+        let gridRow = this.getGridRowSet();
+
+        // 4. 그리드 버튼 설정 
+        let gridButton = this.getGridButtonSet();
+
+        // 5. 그리드 컬럼 설정 
+        let gridColumn = await this.getGridColumnSet();
+
+        // 6. default 그리드 gutter 
+        let defGutter = [
+            { type: 'gutter', gutterName: 'dirty' },
+            { type: 'gutter', gutterName: 'sequence' }
+        ]
+
+        // 7. filter-form 에 검색 조건 필드 정의 
+        gridColumn = this.setGridColumnSearchOption(gridColumn);
+
+        // 그리드 로우 체크 박스 
+        if (gridOption.use_row_checker) {
+            defGutter.push({ type: 'gutter', gutterName: 'row-selector', multiple: gridRow.selectable.multiple })
+        }
+
+
+        // 최종 그리드 컨픽 
+        let gridConfigSet = {
+            list: gridList,
+            pagination: gridOption.pages,
+            sorters: gridOption.sorters,
+            rows: gridRow,
+            columns: [
+                ...defGutter,
+                ...gridButton,
+                ...gridColumn
+            ]
+
+        };
+        return gridConfigSet;
+    }
+
+
+    /**
+     * 메타 데이터의 서치 설정 정보를 그리드 컬럼 설정에 반영 
+     ********************************************** 
+     * @param {Array} columns 그리드 컬럼 설정 
+     */
+    setGridColumnSearchOption(columns) {
+
+        // 서치 설정 Loop 
+        this.searchConfig.forEach(x => {
+            if (typeof x === 'string') {
+                columns.filter(col => col.name == x).map(col => {
+                    col.filter = 'search';
+                    return col;
+                })
+            } else if (typeof x === 'object') {
+                columns.filter(col => col.name == x.name).map(col => {
+                    col.filter = x;
+                    return col;
+                })
+            }
+        })
+
+        return columns;
+    }
+
+
+    /**
+     * 메타 데이터에서 그리드 렌더링 config 을 생성 
+     *********************************************** 
+     * @returns {Array} 
+     */
+    async getGridColumnSet() {
+        // 메타에 그리드 컬럼 정보가 없으면 
+        if (this.isEmpty(this.gridColumnConfig)) {
+            return [];
+        }
+
+        let columns = [];
+        for (let idx = 0; idx < this.gridColumnConfig.length; idx++) {
+            var {
+                type = "string",
+                name = undefined,
+                header = undefined,
+                hidden = false,
+                editable = true,
+                mandatory = false,
+                sortable = false,
+                align = "left",
+                width = 0,
+                exportable = false,
+                select_opt = undefined,
+                object_opt = undefined
+            } = this.gridColumnConfig[idx];
+
+            // 컬럼 config 으로 변경 및 문자열 처리 
+            let column = {
+                type: type,
+                name: name,
+                header: this.isEmpty(header) ? this.convertMsgCode(`field.${name}`) : this.convertMsgCode(header),
+                hidden: hidden,
+                sortable: sortable,
+                width: width,
+                record: { editable: editable, mandatory: mandatory, align: align }
+            };
+
+            // 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)
+                    }
+                }
+            }
+
+            // 내보내기 버튼 사용 , 컬럼 내보내기 옵션 
+            if (this.use_button_export === true && exportable === true) {
+                let imexKey = column.name;
+                column.imex = { header: column.header, key: imexKey, width: column.width / 6, type: column.type }
+            }
+
+
+            // object-option
+            if(type === 'object' && this.isNotEmpty(object_opt)){
+                column.record.options = object_opt;
+            }
+
+            columns.push(column);
+        }
+        return columns;
+    }
+
+    /**
+     * 메타 설정에서 그리드 버튼 옵션을 추출 한다. 
+     * @returns {Array}
+     */
+    getGridButtonSet() {
+        // 메타에 그리드 버튼 정보가 없으면 
+        if (this.isEmpty(this.gridConfig.button)) {
+            return [];
+        }
+
+        let buttons = [];
+        this.gridConfig.button.forEach(x => {
+            // 기본 그리드 버튼 
+            let button = {
+                type: 'gutter',
+                gutterName: 'button',
+            };
+
+            if(this.isNotEmpty(x.icon)){
+                // 아이콘이 Array 타입
+                if(Array.isArray(x.icon)){
+                    // 지정 된 조건에 따라 아이콘을 바꾼다.
+                    button.icon = (record) => {
+
+                        if(this.isEmpty(record)){
+                            return;
+                        }
+                        
+                        // 지정된 조건 Loop
+                        for(let idx = 0; idx < x.icon.length; idx++){
+                            let logic = x.icon[idx];
+                            let useIcon = this.compareObjectValues(logic, record, Object.keys(logic).filter(key => key != 'icon'));
+                            if(useIcon === true){
+                                return logic.icon;
+                            }
+                        }
+                    }
+                } else {
+                    button.icon = x.icon;
+                }
+            }
+
+            // 이름이 지정되어 있으면 변환
+            if (this.isNotEmpty(x.name)) {
+                // TODO Tooltip 
+                button = this.setParams(button, x, 'name', true);
+            }
+
+            // type 이 basic 이면 ( 그리스트 기본 제공 기능 및 추가 기능 )
+            if (x.type === 'basic') {
+                button.handlers = {
+                    click: this.getParams(x, "logic")
+                }
+            } else {
+                // type == custom 
+                button.handlers = {
+                    click: (_columns, _data, _column, record, _rowIndex) => {
+                        if (record.id) this.gristButtonHandler(x, record);
+                    }
+                };
+            }
+
+            buttons.push(button);
+        })
+
+        return buttons;
+    }
+
+    /**
+     * 메타 설정에서 그리드 Row 옵션 을 추출 한다. 
+     * @returns {Object}
+     */
+    getGridRowSet() {
+        // 기본 옵션
+        // 메타와 상관 없이 그리드 로우 멀티 셀렉트는 false , click 이벤트는 없다. 
+        var { multiple_select = false,
+            click = undefined } = this.isEmpty(this.gridConfig.row) ? {} : this.gridConfig.row;
+
+        let retObject = {
+            selectable: { multiple: multiple_select },
+            appendable: this.use_button_add
+        }
+
+        if (this.isNotEmpty(click)) {
+            retObject.handlers = {};
+            retObject.handlers.click = click;
+        }
+
+        return retObject
+    }
+
+    /**
+     * 메타 설정에서 그리드 옵션 을 추출 한다. 
+     * @returns {Object}
+     */
+    getGridOptionSet() {
+        // 기본 option 
+        // mobile, desk , view_mode 설정
+        // row_checker 기본은 사용 안함 ( 그리드 앞 체크 박스 )
+        // 기본 소터 조건 없음
+        // pagination 은 기본 20, 50, 100, 500 
+        var { mobile_mode = "LIST",
+            desk_mode = "GRID",
+            view_mode = [],
+            use_row_checker = true,
+            sorters = [],
+            pages = [20, 50, 100, 500] } = this.isEmpty(this.gridConfig.option) ? {} : this.gridConfig.option;
+
+
+        // 페이지 설정 변환 
+        if (pages === 'unlimited') {
+            this.infinity_page = true;
+            
+            pages = { infinite: true };
+        } else {
+            this.infinity_page = false;
+            
+            pages.sort(function (a, b) {
+                return a - b;
+            });
+            pages = { pages: pages };
+        }
+
+        // 모바일 데스크 뷰 모드 
+        if (this.isNotEmpty(view_mode)) {
+            if (view_mode.length == 1) {
+                desk_mode = view_mode[0];
+                mobile_mode = view_mode[0];
+            } else if (view_mode.length >= 2) {
+                if (view_mode.includes(mobile_mode) == false) {
+                    mobile_mode = view_mode[1];
+                }
+
+                if (view_mode.includes(desk_mode) == false) {
+                    desk_mode = view_mode[0];
+                }
+            }
+        }
+
+        this.grid_mobile_mode = mobile_mode;
+        this.grid_desk_mode = desk_mode;
+        this.grid_view_options = view_mode;
+
+        this.grid_mode = isMobileDevice() ? this.grid_mobile_mode : this.grid_desk_mode;
+
+        return {
+            use_row_checker: use_row_checker,
+            sorters: sorters,
+            pages: pages
+        }
+    }
+
+    /**
+     * 메타 설정에서 그리드 리스트 설정을 추출 한다. 
+     * @returns {Object}
+     */
+    getGridListSet() {
+        let gridList = {
+            fields: [this.getParams(this.menuInfo, "name"), this.getParams(this.menuInfo, "desc")]
+        };
+
+        // 기본 리스트 설정 과 메타에서 가져온 설정 merge 
+        if (this.gridConfig.list) {
+            Object.assign(gridList, this.gridConfig.list);
+        }
+
+        return gridList;
+    }
+
+    /**********************************
+    * Etc
+    ***********************************/
+
+    get grist() {
+        return this.renderRoot.querySelector('ox-grist')
+    }
+
+    /**
+     * 그리드에서 신규/ 변경 된 레코드를 가져온다 
+     * @returns 
+     */
+    getPatches() {
+        let patches = this.grist.exportPatchList({ flagName: 'cuFlag' })
+        if (patches && patches.length) {
+            return patches;
+        }
+        return undefined;
+    }
+
+    /**********************************
+    * 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/render-search-mixin.js

@@ -0,0 +1,37 @@
+import { RenderButtonMixin } from "./render-button-mixin";
+
+/**
+ * 메타 서비스를 이용 서치폼 렌더링 
+ * 사용하는 서치폼에 따라 옵션 처리 
+ ******************************************************
+ * @param {Object} baseElement 
+ * @returns 
+ */
+export const RenderSearchMixin = (baseElement) => class extends RenderButtonMixin(baseElement) {
+
+    get filterForm() {
+        return this.shadowRoot?.querySelector('ox-filters-form');
+    }
+
+    /**********************************
+    * 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/pages/basic-form-element.js

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { RenderBasicFormMixin } from './../mixin/render-basic-form-mixin'
+
+export class BasicFormElement extends RenderBasicFormMixin(localize(i18next)(LitElement)) {
+}
+
+customElements.define('basic-form-element', BasicFormElement)

package/client/pages/basic-grist-element.js

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+
+import { RenderBasicGristMixin } from './../mixin/render-basic-grist-mixin.js'
+
+
+export class BasicGristElement extends RenderBasicGristMixin(localize(i18next)(LitElement)) {
+}
+
+customElements.define('basic-grist-element', BasicGristElement)

package/client/pages/basic-grist-page.js

@@ -0,0 +1,12 @@
+import { html } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@things-factory/shell'
+
+import { RenderBasicGristMixin } from './../mixin/render-basic-grist-mixin.js'
+
+
+export class BasicGristPage extends RenderBasicGristMixin(localize(i18next)(PageView)) {
+}
+
+customElements.define('basic-grist-page', BasicGristPage)

package/client/pages/main.js

@@ -0,0 +1,27 @@
+import { html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+import { store, PageView } from '@things-factory/shell'
+
+import logo from '../../assets/images/hatiolab-logo.png'
+
+class MetaUiMain extends connect(store)(PageView) {
+  static get properties() {
+    return {
+      metaUi: String
+    }
+  }
+  render() {
+    return html`
+      <section>
+        <h2>MetaUi</h2>
+        <img src=${logo}>
+      </section>
+    `
+  }
+
+  stateChanged(state) {
+    this.metaUi = state.metaUi.state_main
+  }
+}
+
+window.customElements.define('meta-ui-main', MetaUiMain)

package/client/reducers/main.js

@@ -0,0 +1,17 @@
+import { UPDATE_META_UI } from '../actions/main'
+
+const INITIAL_STATE = {
+  metaUi: 'ABC'
+}
+
+const metaUi = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case UPDATE_META_UI:
+      return { ...state }
+
+    default:
+      return state
+  }
+}
+
+export default metaUi

package/client/route.js

@@ -0,0 +1,7 @@
+export default function route(page) {
+  switch (page) {
+    case 'meta-ui-main':
+      import('./pages/main')
+      return page
+  }
+}

package/dist-server/controllers/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist-server/controllers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../server/controllers/index.ts"],"names":[],"mappings":""}

package/dist-server/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./migrations"), exports);
+__exportStar(require("./middlewares"), exports);
+require("./routes");
+//# sourceMappingURL=index.js.map

package/dist-server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../server/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,gDAA6B;AAE7B,oBAAiB"}

package/dist-server/middlewares/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initMiddlewares = void 0;
+function initMiddlewares(app) {
+    /* can add middlewares into app */
+}
+exports.initMiddlewares = initMiddlewares;
+//# sourceMappingURL=index.js.map

package/dist-server/middlewares/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../server/middlewares/index.ts"],"names":[],"mappings":";;;AAAA,SAAgB,eAAe,CAAC,GAAG;IACjC,kCAAkC;AACpC,CAAC;AAFD,0CAEC"}

package/dist-server/migrations/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrations = void 0;
+const glob = require('glob');
+const path = require('path');
+exports.migrations = [];
+glob.sync(path.resolve(__dirname, '.', '**', '*.js')).forEach(function (file) {
+    if (file.indexOf('index.js') !== -1)
+        return;
+    exports.migrations = exports.migrations.concat(Object.values(require(path.resolve(file))) || []);
+});
+//# sourceMappingURL=index.js.map

package/dist-server/migrations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../server/migrations/index.ts"],"names":[],"mappings":";;;AAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;AAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;AAEjB,QAAA,UAAU,GAAG,EAAE,CAAA;AAE1B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAS,IAAI;IACzE,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAAE,OAAM;IAC3C,kBAAU,GAAG,kBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;AAClF,CAAC,CAAC,CAAA"}