@things-factory/meta-ui 7.0.1-alpha.8 → 7.0.1-alpha.80

package/client/bootstrap.ts

@@ -1,15 +1,10 @@
+import '@material/web/icon/icon.js'
+import './load-components'
+
 import { html } from 'lit-html'
 
-import { auth } from '@things-factory/auth-base/dist-client/auth.js'
-import { ADD_MORENDA } from '@things-factory/more-base'
 import { navigate, store } from '@operato/shell'
-
-import { updateMenuTemplate } from './actions/main'
-import metaUI from './reducers/main'
-import { TermsUtil } from './utils/terms-util'
-import { GristDefaultValue } from './utils/grist-default-value'
-import { MENUS } from './dynamic-menus'
-
+import { i18next } from '@operato/i18n'
 import {
   registerEditor as gristColumnRegisterEditor,
   registerRenderer as gristColumnRegisterRenderer,
@@ -17,6 +12,13 @@ import {
 } from '@operato/data-grist'
 import { registerFilterRenderer as formRegisterFilterRenderer } from '@operato/form'
 
+import { auth } from '@things-factory/auth-base/dist-client'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
+
+import { updateMenuTemplate } from '@things-factory/lite-menu/dist-client'
+import { GristDefaultValue } from './utils/grist-default-value'
+import { getDynamicMenus } from './dynamic-menus'
+
 /** GRIST Renderer Compoment  */
 import { GristRendererMetaCodeSelector } from './component/grist/renderer/grist-renderer-meta-code-selector'
 import { GristRendererMetaObjectSelector } from './component/grist/renderer/grist-renderer-meta-object-selector'
@@ -35,13 +37,11 @@ import { FilterGristMetaObjectSelect } from './component/filter/filter-grist-met
 import { FilterFormMetaCodeSelect } from './component/filter/filter-form-meta-code-select'
 import { FilterFormMetaObjectSelect } from './component/filter/filter-form-meta-object-select'
 
-import './pages/personalize/personal-column-selector'
 import './pages/history/history-copy-list-popup'
 import './pages/history/history-json-list-popup'
 
 import './pages/activity/meta-activity-writer-element'
 import './pages/activity/meta-activity-viewer-element'
-import { i18next } from '@operato/i18n'
 
 export default async function bootstrap(module) {
   // GRIST Renderer
@@ -65,30 +65,20 @@ export default async function bootstrap(module) {
   // Grist Default Registry
   GristDefaultValue.registry()
 
-  store.addReducers({
-    metaUI
-  })
-
-  // 1. 용어 다운로드
-  i18next.on('initialized', function downloadTerminologies() {
-    var locale = i18next.language
-    if (locale == 'ko') {
-      locale = 'ko-KR'
-    }
-    TermsUtil.downloadTerminologies(locale)
-    i18next.off('initialized', downloadTerminologies)
-  })
-
   auth.on('profile', async ({ credential, domains, domain }) => {
     // 2. 메뉴 정보를 서버로 부터 받아서 적용
-    const menuRoutes = await MENUS
+    const menuRoutes = await getDynamicMenus()
     updateMenuTemplate(menuRoutes.menus)
 
+    i18next.on('languageChanged', async () => {
+      updateMenuTemplate((await getDynamicMenus(true)).menus)
+    })
+
     // 3. 동적 메뉴 관리 화면 추가
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>auto_fix_high</mwc-icon>`,
+        icon: html`<md-icon>auto_fix_high</md-icon>`,
         name: html`<ox-i18n msgid="title.dynamic_menu"></ox-i18n>`,
         action: () => {
           navigate('dynamic-menu')
@@ -100,7 +90,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>filter_tilt_shift</mwc-icon>`,
+        icon: html`<md-icon>filter_tilt_shift</md-icon>`,
         name: html`<ox-i18n msgid="title.entity"></ox-i18n>`,
         action: () => {
           navigate('config-entity')
@@ -112,7 +102,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>speaker_notes</mwc-icon>`,
+        icon: html`<md-icon>speaker_notes</md-icon>`,
         name: html`<ox-i18n msgid="title.terminology"></ox-i18n>`,
         action: () => {
           navigate('config-terminology')
@@ -124,7 +114,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>code</mwc-icon>`,
+        icon: html`<md-icon>code</md-icon>`,
         name: html`<ox-i18n msgid="title.code_management"></ox-i18n>`,
         action: () => {
           navigate('codes')
@@ -136,7 +126,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>business_center</mwc-icon>`,
+        icon: html`<md-icon>business_center</md-icon>`,
         name: html`<ox-i18n msgid="title.meta_activity_list"></ox-i18n>`,
         action: () => {
           navigate('meta-activity-list')
@@ -147,7 +137,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>margin</mwc-icon>`,
+        icon: html`<md-icon>margin</md-icon>`,
         name: html`<ox-i18n msgid="title.meta_activity_define"></ox-i18n>`,
         action: () => {
           navigate('meta-activity-define')
@@ -158,7 +148,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>work</mwc-icon>`,
+        icon: html`<md-icon>work</md-icon>`,
         name: html`<ox-i18n msgid="title.activity_list"></ox-i18n>`,
         action: () => {
           navigate('activity-list')
@@ -169,7 +159,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>dataset</mwc-icon> `,
+        icon: html` <md-icon>dataset</md-icon> `,
         name: html` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
         action: () => {
           navigate('attributes')

package/client/component/filter/filter-form-meta-code-select.ts

@@ -0,0 +1,99 @@
+import '@material/web/icon/icon.js'
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterSelectRenderer } from '@operato/form'
+import { TermsUtil } from './../../utils/terms-util'
+
+function openMetaCodeSelector(filter, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${filter.options} .confirmCallback=${confirmCallback}> </meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? TermsUtil.tMenu(filter.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterFormMetaCodeSelect: FilterSelectRenderer = (filter, value, owner) => {
+  const options = filter.options || {}
+  const codes = options.codes && options.codes.length > 0 ? options.codes : undefined
+  const { operator = 'eq' } = filter
+  const hiddenText = value ? value : ''
+
+  var text = value ? value : ''
+
+  if (options.dispField && value && codes) {
+    let dispCode = codes.filter(x => x.value == value)
+
+    if (dispCode && dispCode.length > 0) {
+      text = dispCode[0].display
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${filter.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${filter.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected[options.codeField] : ''
+              let disp = code
+
+              if (selected && options.dispField) {
+                let fields = options.dispField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: filter.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaCodeSelector(filter, value, confirmCallback)
+          }}
+        />
+        <md-icon style="--md-icon-size: 18px;margin-left: -24px;">manage_search</md-icon>
+      `
+    : html``
+}

package/client/component/filter/filter-form-meta-object-select.ts

@@ -0,0 +1,107 @@
+import '@material/web/icon/icon.js'
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterSelectRenderer } from '@operato/form'
+import { TermsUtil } from '../../utils/terms-util'
+import { SelectOption, SelectOptionObject } from '@operato/data-grist'
+
+function openMetaObjectSelector(filter, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${filter.options} .confirmCallback=${confirmCallback}></meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? TermsUtil.tMenu(filter.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterFormMetaObjectSelect: FilterSelectRenderer = (filter, value, owner) => {
+  const options = filter.options as {
+    [key: string]: any
+  }
+  const { operator = 'eq' } = filter
+  const hiddenText = value ? value.id : ''
+
+  var text = ''
+
+  if (value) {
+    let fields = options!.nameField.split(',')
+    text = value[fields[0]]
+
+    if (fields.length > 1) {
+      text += `(${fields
+        .splice(1)
+        .map(field => {
+          return value[field]
+        })
+        .join(',')})`
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${filter.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${filter.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected.id : ''
+              let disp = ''
+
+              if (selected) {
+                let fields = options!.nameField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: filter.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(filter, value, confirmCallback)
+          }}
+        />
+        <md-icon style="--md-icon-size: 18px;margin-left: -24px;">manage_search</md-icon>
+      `
+    : html``
+}

package/client/component/filter/filter-grist-meta-code-select.ts

@@ -0,0 +1,97 @@
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'
+import { TermsUtil } from '../../utils/terms-util'
+
+function openMetaCodeSelector(column, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${column.record.options} .confirmCallback=${confirmCallback}></meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? TermsUtil.tMenu(column.record.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterGristMetaCodeSelect: FilterSelectRenderer = (column, value, owner) => {
+  const filter = column.filter
+  const options = column.record.options
+  const codes = options.codes && options.codes.length > 0 ? options.codes : undefined
+  const { operator = 'eq' } = filter as FilterConfigObject
+  const hiddenText = value ? value : ''
+
+  var text = value ? value : ''
+
+  if (options.dispField && value && codes) {
+    let dispCode = codes.filter(x => x.value == value)
+
+    if (dispCode && dispCode.length > 0) {
+      text = dispCode[0].display
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected[options.codeField] : ''
+              let disp = code
+
+              if (selected && options.dispField) {
+                let fields = options.dispField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaCodeSelector(column, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

package/client/component/filter/filter-grist-meta-object-select.ts

@@ -0,0 +1,102 @@
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'
+import { TermsUtil } from '../../utils/terms-util'
+
+function openMetaObjectSelector(column, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${column.record.options} .confirmCallback=${confirmCallback}></meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? TermsUtil.tMenu(column.record.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterGristMetaObjectSelect: FilterSelectRenderer = (column, value, owner) => {
+  const filter = column.filter
+  const { operator = 'eq' } = filter as FilterConfigObject
+  const options = column.record.options
+  const hiddenText = value ? value.id : ''
+
+  var text = ''
+
+  if (value) {
+    let fields = options.nameField.split(',')
+    text = value[fields[0]]
+
+    if (fields.length > 1) {
+      text += `(${fields
+        .splice(1)
+        .map(field => {
+          return value[field]
+        })
+        .join(',')})`
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected.id : ''
+              let disp = ''
+
+              if (selected) {
+                let fields = options.nameField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(column, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}