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

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

@@ -1,307 +1,307 @@
-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 GridEmphasizedConfigTabMixin = baseElement =>
+  class extends baseElement {
+    setGridEmphasizedConfigTabValues(data) {
+      // 1. 조회 데이터 설정
+      if (data) {
+        this.viewEmphasizedData = {
+          rowEmphasizedData: [],
+          columnEmphasizedData: []
+        }
 
-export const GridEmphasizedConfigTabMixin = (baseElement) => class extends baseElement {
-
-  setGridEmphasizedConfigTabValues(data) {
-    // 1. 조회 데이터 설정 
-    if (data) {
-      this.viewEmphasizedData = {
-        rowEmphasizedData: [],
-        columnEmphasizedData: [],
-      }
-
-      let idx = 1;
-      this.viewEmphasizedData.rowEmphasizedData
-        = (data.row || []).map(x => {
+        let idx = 1
+        this.viewEmphasizedData.rowEmphasizedData = (data.row || []).map(x => {
           return {
             id: idx,
             rank: idx++,
             backgroundColor: x.backgroundColor || '',
             fontColor: x.fontColor || '',
-            logic: x.logic || '',
-          };
+            logic: x.logic || ''
+          }
         })
 
-      idx = 1;
-      let columnData = data.column || [];
-      Object.keys(columnData).forEach(key => {
-
-        let columnList = columnData[key] || [];
-        let columnIdx = 1;
+        idx = 1
+        let columnData = data.column || []
+        Object.keys(columnData).forEach(key => {
+          let columnList = columnData[key] || []
+          let columnIdx = 1
 
-        columnList.forEach(x=>{
-          this.viewEmphasizedData.columnEmphasizedData.push({
-            id: idx++,
-            rank: columnIdx++,
-            column: key,
-            backgroundColor: x.backgroundColor || '',
-            fontColor: x.fontColor || '',
-            logic: x.logic || '',
+          columnList.forEach(x => {
+            this.viewEmphasizedData.columnEmphasizedData.push({
+              id: idx++,
+              rank: columnIdx++,
+              column: key,
+              backgroundColor: x.backgroundColor || '',
+              fontColor: x.fontColor || '',
+              logic: x.logic || ''
+            })
           })
         })
-      })
-
 
-      this.emphasizedConfigTabColumnEmphasizedGrist?.fetch();
-      this.emphasizedConfigTabRowEmphasizedGrist?.fetch();
-    } else {
-      this.setGridEmphasizedConfigTabDefaultValues();
+        this.emphasizedConfigTabColumnEmphasizedGrist?.fetch()
+        this.emphasizedConfigTabRowEmphasizedGrist?.fetch()
+      } else {
+        this.setGridEmphasizedConfigTabDefaultValues()
+      }
     }
 
-  }
-
-  getGridEmphasizedConfigTabValues() {
-    // 설정 데이터 
-    let rowGristData = this.getElementValueById('row-emphasized-grist');
-    let columnGristData = this.getElementValueById('column-emphasized-grist');
+    getGridEmphasizedConfigTabValues() {
+      // 설정 데이터
+      let rowGristData = this.getElementValueById('row-emphasized-grist')
+      let columnGristData = this.getElementValueById('column-emphasized-grist')
 
-    let rowEmphasized = [];
-    this.sortRecordByRank(rowGristData)?.forEach(x=>{
-      rowEmphasized.push({
-        backgroundColor: x.backgroundColor,
-        fontColor: x.fontColor,
-        logic: x.logic
+      let rowEmphasized = []
+      this.sortRecordByRank(rowGristData)?.forEach(x => {
+        rowEmphasized.push({
+          backgroundColor: x.backgroundColor,
+          fontColor: x.fontColor,
+          logic: x.logic
+        })
       })
-    })
 
-    let columnEmphasized = {};
-    this.sortRecordByRank(columnGristData)?.forEach(x=>{
-      if(!columnEmphasized[x.column]){
-        columnEmphasized[x.column] = [];
-      }
+      let columnEmphasized = {}
+      this.sortRecordByRank(columnGristData)?.forEach(x => {
+        if (!columnEmphasized[x.column]) {
+          columnEmphasized[x.column] = []
+        }
 
-      columnEmphasized[x.column].push({
-        backgroundColor: x.backgroundColor,
-        fontColor: x.fontColor,
-        logic: x.logic
+        columnEmphasized[x.column].push({
+          backgroundColor: x.backgroundColor,
+          fontColor: x.fontColor,
+          logic: x.logic
+        })
       })
-    })
-    
-    // 리턴 오브젝트로 가공 
-    let retObject = {
-      gridEmphasized: {
-        row: rowEmphasized || [],
-        column: columnEmphasized || {}
-      }
-    };
-
-    return retObject;
-  }
 
-  get emphasizedConfigTabRowEmphasizedGrist() {
-    return this.shadowRoot.querySelector('#row-emphasized-grist')
-  }
-  get emphasizedConfigTabColumnEmphasizedGrist() {
-    return this.shadowRoot.querySelector('#column-emphasized-grist')
-  }
+      // 리턴 오브젝트로 가공
+      let retObject = {
+        gridEmphasized: {
+          row: rowEmphasized || [],
+          column: columnEmphasized || {}
+        }
+      }
 
+      return retObject
+    }
 
-  setGridEmphasizedConfigTabConfig() {
+    get emphasizedConfigTabRowEmphasizedGrist() {
+      return this.shadowRoot.querySelector('#row-emphasized-grist')
+    }
+    get emphasizedConfigTabColumnEmphasizedGrist() {
+      return this.shadowRoot.querySelector('#column-emphasized-grist')
+    }
 
-    // 1. 행 강조 그리드 설정 
-    this.rowEmphasizedConfig = {
-      rows: MetaApi.getGristSelectableConfig(false),
-      pagination: { infinite: true },
-      appendable: true,
-      columns: [
-        ...MetaApi.getGristGuttersConfig(false, false),
-        {
-          type: 'gutter', gutterName: 'button', icon: 'delete',
-          handlers: {
-            click: (_columns, _data, _column, record, _rowIndex) => {
-              if (record.id) {
-                this.deleteRow(this.emphasizedConfigTabRowEmphasizedGrist, record);
+    setGridEmphasizedConfigTabConfig() {
+      // 1. 행 강조 그리드 설정
+      this.rowEmphasizedConfig = {
+        rows: MetaApi.getGristSelectableConfig(false),
+        pagination: { infinite: true },
+        appendable: true,
+        columns: [
+          ...MetaApi.getGristGuttersConfig(false, false),
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'delete',
+            handlers: {
+              click: (_columns, _data, _column, record, _rowIndex) => {
+                if (record.id) {
+                  this.deleteRow(this.emphasizedConfigTabRowEmphasizedGrist, record)
+                }
               }
             }
           },
-        },
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'integer',
-          name: 'rank',
-          header: TermsUtil.tLabel('rank'),
-          sortable: false,
-          width: 55,
-          record: {
-            align: 'right',
-            editable: true,
-            mandatory: true
-          }
-        },
-        {
-          type: 'string',
-          name: 'backgroundColor',
-          header: TermsUtil.tLabel('background-color'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
           },
-          width: 130
-        },
-        {
-          type: 'string',
-          name: 'fontColor',
-          header: TermsUtil.tLabel('font-color'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'integer',
+            name: 'rank',
+            header: TermsUtil.tLabel('rank'),
+            sortable: false,
+            width: 55,
+            record: {
+              align: 'right',
+              editable: true,
+              mandatory: true
+            }
           },
-          width: 130
-        },
-        {
-          type: 'code-input',
-          name: 'logic',
-          header: TermsUtil.tLabel('logic'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'string',
+            name: 'backgroundColor',
+            header: TermsUtil.tLabel('background-color'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 130
           },
-          width: 850
-        }
-      ]
-    };
+          {
+            type: 'string',
+            name: 'fontColor',
+            header: TermsUtil.tLabel('font-color'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 130
+          },
+          {
+            type: 'code-input',
+            name: 'logic',
+            header: TermsUtil.tLabel('logic'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 850
+          }
+        ]
+      }
 
-    // 2. 컬럼 강조 그리드 설정
-    this.columnEmphasizedConfig = {
-      rows: MetaApi.getGristSelectableConfig(false),
-      pagination: { infinite: true },
-      appendable: true,
-      columns: [
-        ...MetaApi.getGristGuttersConfig(false, false),
-        {
-          type: 'gutter', gutterName: 'button', icon: 'delete',
-          handlers: {
-            click: (_columns, _data, _column, record, _rowIndex) => {
-              if (record.id) {
-                this.deleteRow(this.emphasizedConfigTabColumnEmphasizedGrist, record);
+      // 2. 컬럼 강조 그리드 설정
+      this.columnEmphasizedConfig = {
+        rows: MetaApi.getGristSelectableConfig(false),
+        pagination: { infinite: true },
+        appendable: true,
+        columns: [
+          ...MetaApi.getGristGuttersConfig(false, false),
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'delete',
+            handlers: {
+              click: (_columns, _data, _column, record, _rowIndex) => {
+                if (record.id) {
+                  this.deleteRow(this.emphasizedConfigTabColumnEmphasizedGrist, record)
+                }
               }
             }
           },
-        },
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'integer',
-          name: 'rank',
-          header: TermsUtil.tLabel('rank'),
-          sortable: false,
-          width: 55,
-          record: {
-            align: 'right',
-            editable: true,
-            mandatory: true
-          }
-        },
-        {
-          type: 'string',
-          name: 'column',
-          header: TermsUtil.tLabel('column'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
           },
-          width: 130
-        },
-        {
-          type: 'string',
-          name: 'backgroundColor',
-          header: TermsUtil.tLabel('background-color'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'integer',
+            name: 'rank',
+            header: TermsUtil.tLabel('rank'),
+            sortable: false,
+            width: 55,
+            record: {
+              align: 'right',
+              editable: true,
+              mandatory: true
+            }
           },
-          width: 130
-        },
-        {
-          type: 'string',
-          name: 'fontColor',
-          header: TermsUtil.tLabel('font-color'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'string',
+            name: 'column',
+            header: TermsUtil.tLabel('column'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 130
           },
-          width: 130
-        },
-        {
-          type: 'code-input',
-          name: 'logic',
-          header: TermsUtil.tLabel('logic'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'string',
+            name: 'backgroundColor',
+            header: TermsUtil.tLabel('background-color'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 130
           },
-          width: 725
-        }
-      ]
-    };
-  }
-
-
-  setGridEmphasizedConfigTabDefaultValues() {
-    if (!this.viewEmphasizedData) {
-      this.viewEmphasizedData = {
-        rowEmphasizedData: [],
-        columnEmphasizedData: []
+          {
+            type: 'string',
+            name: 'fontColor',
+            header: TermsUtil.tLabel('font-color'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 130
+          },
+          {
+            type: 'code-input',
+            name: 'logic',
+            header: TermsUtil.tLabel('logic'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 725
+          }
+        ]
       }
     }
-  }
 
+    setGridEmphasizedConfigTabDefaultValues() {
+      if (!this.viewEmphasizedData) {
+        this.viewEmphasizedData = {
+          rowEmphasizedData: [],
+          columnEmphasizedData: []
+        }
+      }
+    }
 
-  // 화면 
-  renderGridEmphasizedConfigTab() {
-    this.setGridEmphasizedConfigTabDefaultValues();
-
-    let renderHtml = html`
-    <div style='grid-template-rows: 50% 50%;display:grid;flex:1;'>
-      <div field >
-        <h2>
-          <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_row_emphasized_config')}
-        </h2>
-        <ox-grist id="row-emphasized-grist" .config=${this.rowEmphasizedConfig} .mode=${'GRID'} auto-fetch
-        .fetchHandler=${this.fetchRowEmphasized.bind(this)}></ox-grist>
-      </div>
-      <div field >
-        <h2>
-          <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_column_emphasized_config')}
-        </h2>
-        <ox-grist id="column-emphasized-grist" .config=${this.columnEmphasizedConfig} .mode=${'GRID'} auto-fetch
-        .fetchHandler=${this.fetchColumnEmphasized.bind(this)}></ox-grist>
-      </div>      
-    </div>
-    `
-    return renderHtml;
-  }
+    // 화면
+    renderGridEmphasizedConfigTab() {
+      this.setGridEmphasizedConfigTabDefaultValues()
 
+      let renderHtml = html`
+        <div style="grid-template-rows: 50% 50%;display:grid;flex:1;">
+          <div field>
+            <h2><mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_row_emphasized_config')}</h2>
+            <ox-grist
+              id="row-emphasized-grist"
+              .config=${this.rowEmphasizedConfig}
+              .mode=${'GRID'}
+              auto-fetch
+              .fetchHandler=${this.fetchRowEmphasized.bind(this)}
+            ></ox-grist>
+          </div>
+          <div field>
+            <h2><mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_column_emphasized_config')}</h2>
+            <ox-grist
+              id="column-emphasized-grist"
+              .config=${this.columnEmphasizedConfig}
+              .mode=${'GRID'}
+              auto-fetch
+              .fetchHandler=${this.fetchColumnEmphasized.bind(this)}
+            ></ox-grist>
+          </div>
+        </div>
+      `
+      return renderHtml
+    }
 
-  async fetchRowEmphasized() {
-    return {
-      records: this.viewEmphasizedData.rowEmphasizedData,
-      total: 0
+    async fetchRowEmphasized() {
+      return {
+        records: this.viewEmphasizedData.rowEmphasizedData,
+        total: 0
+      }
     }
-  }
 
-  async fetchColumnEmphasized() {
-    return {
-      records: this.viewEmphasizedData.columnEmphasizedData,
-      total: 0
+    async fetchColumnEmphasized() {
+      return {
+        records: this.viewEmphasizedData.columnEmphasizedData,
+        total: 0
+      }
     }
   }
-}