@things-factory/meta-ui 7.0.1-alpha.62 → 7.0.1-alpha.64

package/client/pages/activity/meta-activity-define-page.js

@@ -14,6 +14,8 @@ import { PageView } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { adjustFilters, isMobileDevice } from '@operato/utils'
 
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
+
 import { MetaApi } from './../../utils/meta-api'
 
 class MetaActivityDefinePage extends localize(i18next)(PageView) {
@@ -96,7 +98,12 @@ class MetaActivityDefinePage extends localize(i18next)(PageView) {
     const mode = this.mode
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.personalConfigProvider}
+      >
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-input-select-buttons
@@ -129,11 +136,15 @@ class MetaActivityDefinePage extends localize(i18next)(PageView) {
             <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }
 
   async pageInitialized(lifecycle) {
+    this.personalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'ox-grist')
+
     this.gristConfig = {
       pagination: MetaApi.getGristPagination100Config(),
       list: {
@@ -152,12 +163,15 @@ class MetaActivityDefinePage extends localize(i18next)(PageView) {
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               if (!record.id) return
-              const popup = openPopup(html` <activity-model-item-list .activity=${record}></activity-model-item-list> `, {
-                backdrop: true,
-                help: 'worklist/activity/activity-model-item-list',
-                size: 'large',
-                title: i18next.t('title.activity model item list')
-              })
+              const popup = openPopup(
+                html` <activity-model-item-list .activity=${record}></activity-model-item-list> `,
+                {
+                  backdrop: true,
+                  help: 'worklist/activity/activity-model-item-list',
+                  size: 'large',
+                  title: i18next.t('title.activity model item list')
+                }
+              )
               popup.onclosed = () => {
                 this.grist?.fetch()
               }

package/client/pages/activity/meta-activity-list-page.js

@@ -1,11 +1,14 @@
 import gql from 'graphql-tag'
 
 import { html } from 'lit'
-import { CommonButtonStyles } from '@operato/styles'
+
 import { client } from '@operato/graphql'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { PageView } from '@things-factory/shell'
+import { i18next, localize } from '@operat/i18n'
+import { PageView } from '@operato/shell'
+import { CommonButtonStyles } from '@operato/styles'
+
 import { ActivityStatus } from '@things-factory/worklist/dist-client/types/types.js'
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
 
 import { MetaApi } from './../../utils/meta-api'
 import { MetaUiUtil } from './../../utils/meta-ui-util'
@@ -115,7 +118,15 @@ class MetaActivityListPage extends localize(i18next)(PageView) {
                     }
                   }
                 },
-                await MetaApi.getGristCodeSelectorColumnConfig('menuType', 'menu_type', 'left', false, 110, false, 'MENU_PAGE_TYPE'),
+                await MetaApi.getGristCodeSelectorColumnConfig(
+                  'menuType',
+                  'menu_type',
+                  'left',
+                  false,
+                  110,
+                  false,
+                  'MENU_PAGE_TYPE'
+                ),
                 MetaUiUtil.getGristColumnConfig2('string', 'routing', 'routing', 'left', false, false, 250)
               ],
               list: { fields: ['name', 'routing'] },
@@ -224,16 +235,26 @@ class MetaActivityListPage extends localize(i18next)(PageView) {
     await MetaApi.deleteListByGristSelected(this.grist, 'deleteMetaActivities')
   }
 
-  async pageInitialized() {}
+  async pageInitialized(lifecycle) {
+    this.personalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'ox-grist')
+  }
 
   render() {
     return html`
-      <ox-grist auto-fetch id="ox-grist" .config=${this.gridConfig} .mode=${this.gridMode} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        auto-fetch
+        id="ox-grist"
+        .config=${this.gridConfig}
+        .mode=${this.gridMode}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-filters-form></ox-filters-form>
           </div>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }

package/client/pages/entity/config-entity.js

@@ -3,16 +3,18 @@ import '@material/web/icon/icon.js'
 import { html } from 'lit'
 import gql from 'graphql-tag'
 
+import { PageView, store } from '@operato/shell'
 import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { PageView } from '@things-factory/shell'
-import { store } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+
 import { EXPORT } from '@things-factory/export-base'
 import { IMPORT } from '@things-factory/import-base'
 
 import '@things-factory/form-ui'
 import '@things-factory/import-ui'
 
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
+
 import { TermsUtil } from './../../utils/terms-util'
 import { ValueUtil } from '../../utils/value-util'
 import { MetaApi } from '../../utils/meta-api'
@@ -254,7 +256,13 @@ class ConfigEntity extends localize(i18next)(PageView) {
    ************************************
    */
   async createService() {
-    const answer = await MetaApi.showAlertPopup('button.create-service', 'text.are_you_sure', 'question', 'confirm', 'cancel')
+    const answer = await MetaApi.showAlertPopup(
+      'button.create-service',
+      'text.are_you_sure',
+      'question',
+      'confirm',
+      'cancel'
+    )
     if (answer.value) {
       let ids = MetaApi.getSelectedIdList(this.masterGrist, true)
       if (ids) {
@@ -283,7 +291,13 @@ class ConfigEntity extends localize(i18next)(PageView) {
   async createMenu() {
     if (this.entityId) {
       // 메인 메뉴를 선택하는 팝업을 실행하여 어떤 메뉴 하위에 엔티티 메뉴를 생성할 지 결정
-      const answer = await MetaApi.showAlertPopup('button.create-menu', 'text.are_you_sure', 'question', 'confirm', 'cancel')
+      const answer = await MetaApi.showAlertPopup(
+        'button.create-menu',
+        'text.are_you_sure',
+        'question',
+        'confirm',
+        'cancel'
+      )
       if (answer.value) {
         if (MetaApi.getSelectedIdList(this.masterGrist, true)) {
           await this.openMainMenuSelectorPopup()
@@ -325,7 +339,9 @@ class ConfigEntity extends localize(i18next)(PageView) {
   async createUnregisteredTerms() {
     try {
       if (this.entityId) {
-        const terms = this.detailGrist.data.records.filter(record => TermsUtil.tLabel(record.term) === record.term).map(r => `label.${r.term}`)
+        const terms = this.detailGrist.data.records
+          .filter(record => TermsUtil.tLabel(record.term) === record.term)
+          .map(r => `label.${r.term}`)
         const bundle = this.selectedEntity.bundle
 
         if (terms.length) {
@@ -366,7 +382,9 @@ class ConfigEntity extends localize(i18next)(PageView) {
         ...this.detailGrist._config.columns
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
-            record[column.imex.key] = column.imex.key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[column.imex.key] = column.imex.key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }
@@ -467,7 +485,11 @@ class ConfigEntity extends localize(i18next)(PageView) {
       let idx = 0
       patches.forEach(patch => {
         idx += 10
-        patch.colSize = ValueUtil.isNotEmpty(patch.colSize) ? ValueUtil.toInteger(patch.colSize) : patch.colType == 'string' ? 50 : 0
+        patch.colSize = ValueUtil.isNotEmpty(patch.colSize)
+          ? ValueUtil.toInteger(patch.colSize)
+          : patch.colType == 'string'
+            ? 50
+            : 0
         patch.rank = ValueUtil.toInteger(patch.rank, 0)
         patch.uniqRank = ValueUtil.toInteger(patch.uniqRank, 0)
         patch.searchRank = ValueUtil.toInteger(patch.searchRank, 0)
@@ -533,12 +555,30 @@ class ConfigEntity extends localize(i18next)(PageView) {
       let defaultList = []
       if (!idExist) {
         lastIdx += 10
-        defaultList.push({ entity: { id: this.entityId }, name: 'id', colType: 'string', colSize: 0, nullable: false, term: 'id', rank: lastIdx, cuFlag: '+' })
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'id',
+          colType: 'string',
+          colSize: 0,
+          nullable: false,
+          term: 'id',
+          rank: lastIdx,
+          cuFlag: '+'
+        })
       }
 
       if (!domainIdExist) {
         lastIdx += 10
-        defaultList.push({ entity: { id: this.entityId }, name: 'domain_id', colType: 'string', colSize: 0, nullable: false, term: 'domain', rank: lastIdx, cuFlag: '+' })
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'domain_id',
+          colType: 'string',
+          colSize: 0,
+          nullable: false,
+          term: 'domain',
+          rank: lastIdx,
+          cuFlag: '+'
+        })
       }
 
       if (!createdAtExist) {
@@ -620,7 +660,10 @@ class ConfigEntity extends localize(i18next)(PageView) {
    * @description 라이프 사이클 - 페이지 초기화
    ***************************************
    */
-  async pageInitialized() {
+  async pageInitialized(lifecycle) {
+    this.masterPersonalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'meta::master::ox-grist')
+    this.detailPersonalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'meta::detail::ox-grist')
+
     // 조회 필드
     this.searchFields = [
       // name, type, label, operator, optionValues
@@ -655,8 +698,24 @@ class ConfigEntity extends localize(i18next)(PageView) {
         // name, displayName, align, sortable, width, mandatory, codeName
         await MetaApi.getGristCodeSelectorColumnConfig('bundle', 'bundle', 'left', false, 100, true, 'BUNDLE'),
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('dataProp', 'entity_manage_hist', 'left', false, 90, true, 'ENTITY_HIST_TYPE'),
-        await MetaApi.getGristCodeSelectorColumnConfig('delStrategy', 'entity_del_strategy', 'left', false, 90, true, 'ENTITY_DEL_STRATEGY'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'dataProp',
+          'entity_manage_hist',
+          'left',
+          false,
+          90,
+          true,
+          'ENTITY_HIST_TYPE'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'delStrategy',
+          'entity_del_strategy',
+          'left',
+          false,
+          90,
+          true,
+          'ENTITY_DEL_STRATEGY'
+        ),
         // type, name, align, editable, sortable, width
         MetaApi.getGristColumnConfig('string', 'description', 'left', true, false, 250)
       ]
@@ -686,7 +745,15 @@ class ConfigEntity extends localize(i18next)(PageView) {
           }
         },
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('colType', 'col_type', 'left', false, 75, true, 'ENTITY_COLUMN_TYPES'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'colType',
+          'col_type',
+          'left',
+          false,
+          75,
+          true,
+          'ENTITY_COLUMN_TYPES'
+        ),
         // type, name, displayName, align, editable, sortable, width
         MetaApi.getGristColumnConfig2('integer', 'colSize', 'size', 'right', true, false, 60),
         MetaApi.getGristColumnConfig2('boolean', 'nullable', 'nullable', 'center', true, false, 70),
@@ -694,12 +761,36 @@ class ConfigEntity extends localize(i18next)(PageView) {
         MetaApi.getGristColumnConfig2('string', 'description', 'description', 'left', true, false, 135),
         MetaApi.getGristColumnConfig2('integer', 'searchRank', 'search_rank', 'right', true, false, 70),
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('searchOper', 'search_oper', 'left', false, 85, true, 'FILTER_OPERATORS'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'searchOper',
+          'search_oper',
+          'left',
+          false,
+          85,
+          true,
+          'FILTER_OPERATORS'
+        ),
         MetaApi.getGristColumnConfig2('integer', 'gridRank', 'grid_rank', 'right', true, false, 80),
         MetaApi.getGristColumnConfig2('integer', 'gridWidth', 'grid_width', 'right', true, false, 75),
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('gridEditor', 'grid_editor', 'left', false, 90, true, 'ENTITY_GRIST_COLUMN_TYPES'),
-        await MetaApi.getGristCodeSelectorColumnConfig('refType', 'ref_type', 'left', false, 85, true, 'COLUMN_REF_TYPE'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'gridEditor',
+          'grid_editor',
+          'left',
+          false,
+          90,
+          true,
+          'ENTITY_GRIST_COLUMN_TYPES'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'refType',
+          'ref_type',
+          'left',
+          false,
+          85,
+          true,
+          'COLUMN_REF_TYPE'
+        ),
         // type, name, displayName, align, editable, sortable, width
         MetaApi.getGristColumnConfig2('string', 'refName', 'ref_name', 'left', true, false, 100),
         MetaApi.getGristColumnConfig2('string', 'defVal', 'id_rule', 'left', true, false, 100)
@@ -729,7 +820,15 @@ class ConfigEntity extends localize(i18next)(PageView) {
           }
         },
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('colType', 'col_type', 'left', false, 75, true, 'ENTITY_COLUMN_TYPES'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'colType',
+          'col_type',
+          'left',
+          false,
+          75,
+          true,
+          'ENTITY_COLUMN_TYPES'
+        ),
         // type, name, displayName, align, editable, sortable, width
         MetaApi.getGristColumnConfig2('integer', 'colSize', 'size', 'right', true, false, 60),
         MetaApi.getGristColumnConfig2('boolean', 'nullable', 'nullable', 'center', true, false, 70),
@@ -737,12 +836,36 @@ class ConfigEntity extends localize(i18next)(PageView) {
         MetaApi.getGristColumnConfig2('string', 'description', 'description', 'left', true, false, 135),
         MetaApi.getGristColumnConfig2('integer', 'searchRank', 'search_rank', 'right', true, false, 70),
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('string', 'search_oper', 'left', false, 85, true, 'FILTER_OPERATORS'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'string',
+          'search_oper',
+          'left',
+          false,
+          85,
+          true,
+          'FILTER_OPERATORS'
+        ),
         MetaApi.getGristColumnConfig2('integer', 'gridRank', 'grid_rank', 'right', true, false, 80),
         MetaApi.getGristColumnConfig2('integer', 'gridWidth', 'grid_width', 'right', true, false, 75),
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('gridEditor', 'grid_editor', 'left', false, 90, true, 'GRIST_COLUMN_TYPES'),
-        await MetaApi.getGristCodeSelectorColumnConfig('refType', 'ref_type', 'left', false, 85, true, 'COLUMN_REF_TYPE'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'gridEditor',
+          'grid_editor',
+          'left',
+          false,
+          90,
+          true,
+          'GRIST_COLUMN_TYPES'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'refType',
+          'ref_type',
+          'left',
+          false,
+          85,
+          true,
+          'COLUMN_REF_TYPE'
+        ),
         // type, name, displayName, align, editable, sortable, width
         MetaApi.getGristColumnConfig2('string', 'refName', 'ref_name', 'left', true, false, 100)
       ]
@@ -774,35 +897,58 @@ class ConfigEntity extends localize(i18next)(PageView) {
             id="master-grist"
             .config=${this.masterConfig}
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
-            auto-fetch
+            .personalConfigProvider=${this.masterPersonalConfigProvider}
             .fetchHandler=${this.fetchEntities.bind(this)}
+            auto-fetch
           >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
           </ox-grist>
+
           <div class="button-container">
-            <button @click=${e => this.createService()}><md-icon>add_box</md-icon>${TermsUtil.tButton('create-service')}</button>
-            <button @click=${e => this.createMenu()}><md-icon>menu_open</md-icon>${TermsUtil.tButton('create-menu')}</button>
+            <button @click=${e => this.createService()}>
+              <md-icon>add_box</md-icon>${TermsUtil.tButton('create-service')}
+            </button>
+            <button @click=${e => this.createMenu()}>
+              <md-icon>menu_open</md-icon>${TermsUtil.tButton('create-menu')}
+            </button>
             <button @click=${e => this.saveMasters()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
-            <button danger @click=${e => this.deleteMasters()}><md-icon>delete</md-icon>${TermsUtil.tButton('delete')}</button>
+            <button danger @click=${e => this.deleteMasters()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
           </div>
         </div>
 
         <div class="container_detail">
           <h2><md-icon>list_alt</md-icon>${TermsUtil.tTitle('entity-column')}</h2>
+
           <ox-grist
             id="detail-grist"
             .config=${this.detailConfig}
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
             explcit-fetch
             .fetchHandler=${this.fetchEntityColumns.bind(this)}
+            .personalConfigProvider=${this.detailPersonalConfigProvider}
           >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
           </ox-grist>
+
           <div class="button-container">
-            <button @click=${e => this.exportEntityColumns()}><md-icon>cloud_download</md-icon>${TermsUtil.tButton('export')}</button>
-            <button @click=${e => this.importXlsxFile()}><md-icon>cloud_upload</md-icon>${TermsUtil.tButton('import')}</button>
-            <button @click=${e => this.checkEntityColumns()}><md-icon>fact_check</md-icon>${TermsUtil.tButton('check-columns')}</button>
-            <button @click=${e => this.createUnregisteredTerms()}><md-icon>abc</md-icon>${TermsUtil.tButton('register-terms')}</button>
+            <button @click=${e => this.exportEntityColumns()}>
+              <md-icon>cloud_download</md-icon>${TermsUtil.tButton('export')}
+            </button>
+            <button @click=${e => this.importXlsxFile()}>
+              <md-icon>cloud_upload</md-icon>${TermsUtil.tButton('import')}
+            </button>
+            <button @click=${e => this.checkEntityColumns()}>
+              <md-icon>fact_check</md-icon>${TermsUtil.tButton('check-columns')}
+            </button>
+            <button @click=${e => this.createUnregisteredTerms()}>
+              <md-icon>abc</md-icon>${TermsUtil.tButton('register-terms')}
+            </button>
             <button @click=${e => this.saveEntityColumns()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
-            <button danger @click=${e => this.deleteEntityColumns()}><md-icon>delete</md-icon>${TermsUtil.tButton('delete')}</button>
+            <button danger @click=${e => this.deleteEntityColumns()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
           </div>
         </div>
       </div>

package/client/pages/menu/dynamic-menu.js

@@ -1,11 +1,12 @@
 import '@material/web/icon/icon.js'
+import '@things-factory/form-ui'
 
 import { html } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { PageView } from '@things-factory/shell'
+import { PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
 
-import '@things-factory/form-ui'
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
 
 import { TermsUtil } from './../../utils/terms-util'
 import { MetaApi } from '../../utils/meta-api'
@@ -53,13 +54,17 @@ class DynamicMenu extends localize(i18next)(PageView) {
             id="master-grist"
             .config=${this.groupConfig}
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
-            auto-fetch
+            .personalConfigProvider=${this.masterPersonalConfigProvider}
             .fetchHandler=${this.fetchGroupHandler.bind(this)}
+            auto-fetch
           >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
           </ox-grist>
           <div class="button-container">
             <button @click=${e => this.saveGroup()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
-            <button danger @click=${e => this.deleteGroup()}><md-icon>delete</md-icon>${TermsUtil.tButton('delete')}</button>
+            <button danger @click=${e => this.deleteGroup()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
           </div>
         </div>
 
@@ -68,14 +73,18 @@ class DynamicMenu extends localize(i18next)(PageView) {
             id="detail-grist"
             .config=${this.detailConfig}
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
-            explcit-fetch
             .fetchHandler=${this.fetchDetailHandler.bind(this)}
+            .personalConfigProvider=${this.detailPersonalConfigProvider}
+            explcit-fetch
           >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
           </ox-grist>
           <div class="button-container">
             <button @click=${e => this.copyMenu()}><md-icon>content_copy</md-icon>${TermsUtil.tButton('copy')}</button>
             <button @click=${e => this.saveMenu()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
-            <button danger @click=${e => this.deleteMenu()}><md-icon>delete</md-icon>${TermsUtil.tButton('delete')}</button>
+            <button danger @click=${e => this.deleteMenu()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
           </div>
         </div>
       </div>
@@ -336,7 +345,10 @@ class DynamicMenu extends localize(i18next)(PageView) {
   /**
    * LifeCycle - 화면 레더링 설정
    */
-  async pageInitialized() {
+  async pageInitialized(lifecycle) {
+    this.masterPersonalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'meta::master::ox-grist')
+    this.detailPersonalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'meta::detail::ox-grist')
+
     // 조회 필드
     this.searchFields = [
       // name, type, label, operator, optionValues
@@ -345,7 +357,13 @@ class DynamicMenu extends localize(i18next)(PageView) {
       await MetaApi.getGristSearchCodeColumnConfig('menuType', 'select', 'menu_type', 'eq', 'MENU_TYPE'),
       // name, type, label, operator
       MetaApi.getGristSearchColumnConfig('hiddenFlag', 'checkbox', 'hidden', 'eq'),
-      await MetaApi.getGristSearchCodeColumnConfig('templateCode', 'select', 'menu_template_search_code', 'eq', 'MENU_TEXT_SEARCH_TYPE'),
+      await MetaApi.getGristSearchCodeColumnConfig(
+        'templateCode',
+        'select',
+        'menu_template_search_code',
+        'eq',
+        'MENU_TEXT_SEARCH_TYPE'
+      ),
       MetaApi.getGristSearchColumnConfig('templateText', 'string', 'menu_template_search_text', 'i_like')
     ]
 
@@ -480,8 +498,24 @@ class DynamicMenu extends localize(i18next)(PageView) {
           width: 175
         },
         // name, displayName, align, sortable, width, mandatory, codeName
-        await MetaApi.getGristCodeSelectorColumnConfig('menuType', 'page_type', 'left', false, 90, true, 'MENU_PAGE_TYPE'),
-        await MetaApi.getGristCodeSelectorColumnConfig('routingType', 'routing_type', 'left', false, 0, false, 'MENU_PAGE_ROUTING_TYPE'),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'menuType',
+          'page_type',
+          'left',
+          false,
+          90,
+          true,
+          'MENU_PAGE_TYPE'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'routingType',
+          'routing_type',
+          'left',
+          false,
+          0,
+          false,
+          'MENU_PAGE_ROUTING_TYPE'
+        ),
         // type, name, displayName, align, editable, sortable, width
         MetaApi.getGristColumnConfig2('string', 'routing', 'routing', 'left', true, false, 175),
         MetaApi.getGristColumnConfig2('string', 'category', 'tag', 'left', true, false, 175),

package/client/pages/terms/config-terminology.js

@@ -2,9 +2,11 @@ import '@material/web/icon/icon.js'
 
 import { html } from 'lit'
 
+import { PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles } from '@operato/styles'
-import { PageView } from '@things-factory/shell'
-import { i18next, localize } from '@things-factory/i18n-base'
+
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
 
 import { TermsUtil } from './../../utils/terms-util'
 import { MetaApi } from '../../utils/meta-api'
@@ -35,12 +37,21 @@ class ConfigTerminology extends localize(i18next)(PageView) {
 
   render() {
     return html`
-      <ox-grist auto-fetch id="ox-grist" .config=${this.gridConfig} .mode=${this.gridMode} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        auto-fetch
+        id="ox-grist"
+        .config=${this.gridConfig}
+        .mode=${this.gridMode}
+        .personalConfigProvider=${this.personalConfigProvider}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-filters-form></ox-filters-form>
           </div>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }
@@ -99,7 +110,9 @@ class ConfigTerminology extends localize(i18next)(PageView) {
     await MetaApi.deleteListByGristSelected(this.grist, 'deleteTerminologies')
   }
 
-  async pageInitialized() {
+  async pageInitialized(lifecycle) {
+    this.personalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'ox-grist')
+
     let locales = await MetaApi.getCodeSelectorData('LOCALE')
     let termsCategories = await MetaApi.getCodeSelectorData('TERMS_CATEGORY')