@things-factory/operato-tools 7.0.1-alpha.3 → 7.0.1-alpha.4

package/client/pages/generator/grid-config-tab-mixin.js

@@ -1,144 +1,136 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
 
 import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
 import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
 
-
-export const GridConfigTabMixin = (baseElement) => class extends baseElement {
-
-  setGridConfigTabValues(data) {
-    // 1. 기존 데이터가 있으면 기존 데이터 사용
-    if (data) {
-      let {
-        mobile_mode = '',
-        desk_mode = '',
-        pages = [],
-        use_row_checker = true,
-        view_mode = []
-      } = data.option || {};
-
-      let multiple_select = (data.row || { multiple_select : false }).multiple_select;
-      let pageCode = (function() {
-        if(pages == 'unlimited') {
-          return 'grid_term_unlimited';
-        } else if(pages.length == 0) {
-          return '';
-        } else if (pages[0] == 20) {
-          return 'grid_term_default'
-        } else {
-          return `grid_term_${pages[0]}`
+export const GridConfigTabMixin = baseElement =>
+  class extends baseElement {
+    setGridConfigTabValues(data) {
+      // 1. 기존 데이터가 있으면 기존 데이터 사용
+      if (data) {
+        let { mobile_mode = '', desk_mode = '', pages = [], use_row_checker = true, view_mode = [] } = data.option || {}
+
+        let multiple_select = (data.row || { multiple_select: false }).multiple_select
+        let pageCode = (function () {
+          if (pages == 'unlimited') {
+            return 'grid_term_unlimited'
+          } else if (pages.length == 0) {
+            return ''
+          } else if (pages[0] == 20) {
+            return 'grid_term_default'
+          } else {
+            return `grid_term_${pages[0]}`
+          }
+        })()
+
+        this.viewGridData = {
+          mobile_mode: mobile_mode,
+          desk_mode: desk_mode,
+          use_row_checker: use_row_checker,
+          pages: pageCode,
+          view_mode: view_mode,
+          multiple_select: multiple_select,
+          use_filter_form: data.use_filter_form,
+          grid_refresh_when_page_activated: data.grid_refresh_when_page_activated
         }
-      }())
-
-      this.viewGridData = {
-        mobile_mode: mobile_mode,
-        desk_mode: desk_mode,
-        use_row_checker: use_row_checker,
-        pages: pageCode,
-        view_mode: view_mode,
-        multiple_select: multiple_select,
-        use_filter_form: data.use_filter_form,
-        grid_refresh_when_page_activated: data.grid_refresh_when_page_activated
+      } else {
+        // 3. 기존 데이터가 없으면 기본값 설정
+        this.setGridConfigTabDetaultValues()
       }
-    } else {
-      // 3. 기존 데이터가 없으면 기본값 설정
-      this.setGridConfigTabDetaultValues();
     }
-  }
 
-  getGridConfigTabValues() {
-    // 그리드 기본 옵션 
-    let retObject = {
-      grid: {
-        option: {},
-        row: {
-          click: 'select-row-toggle'
+    getGridConfigTabValues() {
+      // 그리드 기본 옵션
+      let retObject = {
+        grid: {
+          option: {},
+          row: {
+            click: 'select-row-toggle'
+          }
         }
       }
-    };
 
-    // input 객체에서 값 가져오기 
-    let grid_row_check_use = this.getElementValueById('grid_row_check_use');
-    let grid_multi_select = this.getElementValueById('grid_multi_select');
-    let grid_desk_view = this.getElementValueById('grid_desk_view');
-    let grid_mobile_view = this.getElementValueById('grid_mobile_view');
-
-    let grid_use_filter = this.getElementValueById('grid_use_filter');
-    let grid_refresh_when_page_activated = this.getElementValueById('grid_refresh_when_page_activated');
-
-    let grid_pagination = this.getElementValueById('grid_pagination');
-
-    let grid_view_use = this.getElementValueById('grid_view_use');
-    let list_view_use = this.getElementValueById('list_view_use');
-    let card_view_use = this.getElementValueById('card_view_use');
+      // input 객체에서 값 가져오기
+      let grid_row_check_use = this.getElementValueById('grid_row_check_use')
+      let grid_multi_select = this.getElementValueById('grid_multi_select')
+      let grid_desk_view = this.getElementValueById('grid_desk_view')
+      let grid_mobile_view = this.getElementValueById('grid_mobile_view')
+
+      let grid_use_filter = this.getElementValueById('grid_use_filter')
+      let grid_refresh_when_page_activated = this.getElementValueById('grid_refresh_when_page_activated')
+
+      let grid_pagination = this.getElementValueById('grid_pagination')
+
+      let grid_view_use = this.getElementValueById('grid_view_use')
+      let list_view_use = this.getElementValueById('list_view_use')
+      let card_view_use = this.getElementValueById('card_view_use')
+
+      // 옵션 설정
+      retObject.grid.use_filter_form = grid_use_filter == 'true' ? true : false
+      retObject.grid.grid_refresh_when_page_activated = grid_refresh_when_page_activated == 'true' ? true : false
+      retObject.grid.row.multiple_select = grid_multi_select == 'true' ? true : false
+
+      retObject.grid.option.use_row_checker = grid_row_check_use == 'true' ? true : false
+      retObject.grid.option.mobile_mode = grid_mobile_view
+      retObject.grid.option.desk_mode = grid_desk_view
+
+      // 페이지 네이션 설정 변환
+      if (grid_pagination == 'grid_term_default') {
+        retObject.grid.option.pages = [20, 30, 50, 100]
+      } else if (grid_pagination == 'grid_term_50') {
+        retObject.grid.option.pages = [50, 100, 500, 1000]
+      } else if (grid_pagination == 'grid_term_100') {
+        retObject.grid.option.pages = [100, 500, 1000, 5000]
+      } else if (grid_pagination == 'grid_term_1000') {
+        retObject.grid.option.pages = [1000, 5000, 10000, 50000, 100000]
+      } else if (grid_pagination == 'grid_term_unlimited') {
+        retObject.grid.option.pages = 'unlimited'
+      }
 
-    // 옵션 설정 
-    retObject.grid.use_filter_form = grid_use_filter == 'true' ? true : false;
-    retObject.grid.grid_refresh_when_page_activated = grid_refresh_when_page_activated == 'true' ? true : false;
-    retObject.grid.row.multiple_select = grid_multi_select == 'true' ? true : false;
+      // 그리드 지원 뷰 옵션 설정
+      retObject.grid.option.view_mode = []
+      if (grid_view_use == 'true') retObject.grid.option.view_mode.push('GRID')
+      if (list_view_use == 'true') retObject.grid.option.view_mode.push('LIST')
+      if (card_view_use == 'true') retObject.grid.option.view_mode.push('CARD')
 
-    retObject.grid.option.use_row_checker = grid_row_check_use == 'true' ? true : false;
-    retObject.grid.option.mobile_mode = grid_mobile_view;
-    retObject.grid.option.desk_mode = grid_desk_view;
-    
-    // 페이지 네이션 설정 변환 
-    if(grid_pagination == 'grid_term_default') {
-      retObject.grid.option.pages = [20, 30, 50, 100];
-    } else if (grid_pagination == 'grid_term_50') {
-      retObject.grid.option.pages = [50, 100, 500, 1000];
-    } else if (grid_pagination == 'grid_term_100') {
-      retObject.grid.option.pages = [100, 500, 1000, 5000];
-    } else if (grid_pagination == 'grid_term_1000') {
-      retObject.grid.option.pages = [1000, 5000, 10000, 50000, 100000];
-    } else if (grid_pagination == 'grid_term_unlimited') {
-      retObject.grid.option.pages = 'unlimited';
+      return retObject
     }
 
-    // 그리드 지원 뷰 옵션 설정 
-    retObject.grid.option.view_mode = [];
-    if(grid_view_use == 'true') retObject.grid.option.view_mode.push('GRID');
-    if(list_view_use == 'true') retObject.grid.option.view_mode.push('LIST');
-    if(card_view_use == 'true') retObject.grid.option.view_mode.push('CARD');
+    /**
+     * lifecycle
+     */
+    async setGridConfigTabConfig() {
+      // 1. 코드 조회
+      let gridPageOptions = await MetaApi.codeItems('GRID_PAGE_OPTIONS')
+      let gridViewModes = await MetaApi.codeItems('GRID_VIEW_MODE')
 
-    return retObject;
-  }
-
-  /**
-   * lifecycle
-   */
-  async setGridConfigTabConfig() {
-    // 1. 코드 조회 
-    let gridPageOptions = await MetaApi.codeItems('GRID_PAGE_OPTIONS');
-    let gridViewModes = await MetaApi.codeItems('GRID_VIEW_MODE');
-
-    this.gridViewModes = gridViewModes;
-    this.gridPageOptions = gridPageOptions;
-  }
+      this.gridViewModes = gridViewModes
+      this.gridPageOptions = gridPageOptions
+    }
 
-  /**
-   * 기본 값 설정 
-   */
-  setGridConfigTabDetaultValues() {
-    if (!this.viewGridData) {
-      this.viewGridData = {
-        mobile_mode: this.gridViewModes ? this.gridViewModes[1] : 'LIST',
-        desk_mode: this.gridViewModes ? this.gridViewModes[0] : 'GRID',
-        use_row_checker: true,
-        pages: 'grid_term_default',
-        view_mode: [...(this.gridViewModes ? this.gridViewModes : ['GRID', 'LIST', 'CARD'])],
-        multiple_select: true,
-        use_filter_form: true,
-        grid_refresh_when_page_activated: false
+    /**
+     * 기본 값 설정
+     */
+    setGridConfigTabDetaultValues() {
+      if (!this.viewGridData) {
+        this.viewGridData = {
+          mobile_mode: this.gridViewModes ? this.gridViewModes[1] : 'LIST',
+          desk_mode: this.gridViewModes ? this.gridViewModes[0] : 'GRID',
+          use_row_checker: true,
+          pages: 'grid_term_default',
+          view_mode: [...(this.gridViewModes ? this.gridViewModes : ['GRID', 'LIST', 'CARD'])],
+          multiple_select: true,
+          use_filter_form: true,
+          grid_refresh_when_page_activated: false
+        }
       }
     }
-  }
-
 
-  // 화면 
-  renderGridConfigTab() {
-    this.setGridConfigTabDetaultValues();
+    // 화면
+    renderGridConfigTab() {
+      this.setGridConfigTabDetaultValues()
 
-    let renderHtml = html`
+      let renderHtml = html`
       <div field-2column>
         <div field>
           <h2>
@@ -198,11 +190,9 @@ export const GridConfigTabMixin = (baseElement) => class extends baseElement {
           </h2>
           <label>
             <select id="grid_desk_view" name="grid_desk_view">
-              ${
-                this.gridViewModes?.map(x => {
-                  return html`<option value=${x.name} ?selected=${this.viewGridData.desk_mode == x.name}>${x.description}</option>`
-                })
-              }
+              ${this.gridViewModes?.map(x => {
+                return html`<option value=${x.name} ?selected=${this.viewGridData.desk_mode == x.name}>${x.description}</option>`
+              })}
             </select>
           </label>
         </div>
@@ -212,11 +202,9 @@ export const GridConfigTabMixin = (baseElement) => class extends baseElement {
           </h2>
           <label>
           <select id="grid_mobile_view" name="grid_mobile_view">
-            ${
-                this.gridViewModes?.map(x => {
-                  return html`<option value=${x.name} ?selected=${this.viewGridData.mobile_mode == x.name}>${x.description}</option>`
-                })
-              }
+            ${this.gridViewModes?.map(x => {
+              return html`<option value=${x.name} ?selected=${this.viewGridData.mobile_mode == x.name}>${x.description}</option>`
+            })}
             </select>
           </label>
         </div>
@@ -225,16 +213,18 @@ export const GridConfigTabMixin = (baseElement) => class extends baseElement {
             <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_support_view')}
           </h2>
           <label>
-            ${
-              this.gridViewModes?.map(x => {
-                return html`
+            ${this.gridViewModes?.map(x => {
+              return html`
                   <span>${x.name}
-                    <input type="radio" name=${x.name.toLowerCase() + "_view_use"} id=${x.name.toLowerCase() + "_view_use"} ?checked=${this.viewGridData.view_mode.includes(x.name)} value="true">${TermsUtil.tLabel('use')}</input>
-                    <input type="radio" name=${x.name.toLowerCase() + "_view_use"} id=${x.name.toLowerCase() + "_view_use"} ?checked=${!this.viewGridData.view_mode.includes(x.name)} value="false">${TermsUtil.tLabel('unuse')}</input>
+                    <input type="radio" name=${x.name.toLowerCase() + '_view_use'} id=${
+                x.name.toLowerCase() + '_view_use'
+              } ?checked=${this.viewGridData.view_mode.includes(x.name)} value="true">${TermsUtil.tLabel('use')}</input>
+                    <input type="radio" name=${x.name.toLowerCase() + '_view_use'} id=${
+                x.name.toLowerCase() + '_view_use'
+              } ?checked=${!this.viewGridData.view_mode.includes(x.name)} value="false">${TermsUtil.tLabel('unuse')}</input>
                   </span>
                 `
-              })
-            }
+            })}
           </label>
         </div>
         <div field>
@@ -242,23 +232,21 @@ export const GridConfigTabMixin = (baseElement) => class extends baseElement {
             <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_pagination')}
           </h2>
           <label>
-            ${
-              this.gridPageOptions?.map(x => {
-                return html`
+            ${this.gridPageOptions?.map(x => {
+              return html`
                   <span>
-                    <input type="radio" name="grid_pagination" id="grid_pagination" value=${x.name} ?checked=${this.viewGridData.pages==x.name
-                      }>${TermsUtil.tLabel(x.name)}</input>
+                    <input type="radio" name="grid_pagination" id="grid_pagination" value=${x.name} ?checked=${this.viewGridData.pages == x.name}>${TermsUtil.tLabel(
+                x.name
+              )}</input>
                   </span>
                 `
-              })
-            }
+            })}
           </label>
         </div>
       </div>
       </div>
     `
 
-    return renderHtml;
+      return renderHtml
+    }
   }
-}
-