@things-factory/meta-ui 8.0.0 → 9.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/meta-ui",
-  "version": "8.0.0",
+  "version": "9.0.0-beta.3",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -27,29 +27,29 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/barcode": "^8.0.0",
-    "@operato/data-grist": "^8.0.0",
-    "@operato/form": "^8.0.0",
-    "@operato/i18n": "^8.0.0",
-    "@operato/input": "^8.0.0",
-    "@operato/layout": "^8.0.0",
-    "@operato/menu": "^8.0.0",
-    "@operato/moment-timezone-es": "^8.0.0",
-    "@operato/p13n": "^8.0.0",
-    "@operato/popup": "^8.0.0",
-    "@operato/shell": "^8.0.0",
-    "@operato/styles": "^8.0.0",
-    "@operato/time-calculator": "^8.0.0",
-    "@operato/utils": "^8.0.0",
-    "@things-factory/auth-base": "^8.0.0",
-    "@things-factory/env": "^8.0.0",
-    "@things-factory/id-rule-base": "^8.0.0",
-    "@things-factory/menu-base": "^8.0.0",
-    "@things-factory/personalization": "^8.0.0",
-    "@things-factory/resource-base": "^8.0.0",
-    "@things-factory/shell": "^8.0.0",
-    "@things-factory/worklist": "^8.0.0",
+    "@operato/barcode": "^9.0.0-beta",
+    "@operato/data-grist": "^9.0.0-beta",
+    "@operato/form": "^9.0.0-beta",
+    "@operato/i18n": "^9.0.0-beta",
+    "@operato/input": "^9.0.0-beta",
+    "@operato/layout": "^9.0.0-beta",
+    "@operato/menu": "^9.0.0-beta",
+    "@operato/moment-timezone-es": "^9.0.0-beta",
+    "@operato/p13n": "^9.0.0-beta",
+    "@operato/popup": "^9.0.0-beta",
+    "@operato/shell": "^9.0.0-beta",
+    "@operato/styles": "^9.0.0-beta",
+    "@operato/time-calculator": "^9.0.0-beta",
+    "@operato/utils": "^9.0.0-beta",
+    "@things-factory/auth-base": "^9.0.0-beta.3",
+    "@things-factory/env": "^8.0.0-beta.4",
+    "@things-factory/id-rule-base": "^9.0.0-beta.3",
+    "@things-factory/menu-base": "^9.0.0-beta.3",
+    "@things-factory/personalization": "^9.0.0-beta.3",
+    "@things-factory/resource-base": "^9.0.0-beta.3",
+    "@things-factory/shell": "^9.0.0-beta.0",
+    "@things-factory/worklist": "^9.0.0-beta.3",
     "moment-timezone": "^0.5.45"
   },
-  "gitHead": "07ef27d272dd9a067a9648ac7013748510556a18"
+  "gitHead": "1d7e0dd4c88f3c3f3bd311c00e4b1d1542d53634"
 }

package/client/bootstrap.ts

@@ -1,170 +0,0 @@
-import '@material/web/icon/icon.js'
-import './load-components'
-
-import { html } from 'lit-html'
-
-import { navigate, store } from '@operato/shell'
-import { i18next } from '@operato/i18n'
-import {
-  registerEditor as gristColumnRegisterEditor,
-  registerRenderer as gristColumnRegisterRenderer,
-  registerFilterRenderer as gristRegisterFilterRenderer
-} 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'
-import { GristRendererCodeInput } from './component/grist/renderer/grist-renderer-code-input'
-
-/** GRIST Editor Component */
-import { GristEditorMetaCodeSelector } from './component/grist/editor/grist-editor-meta-code-selector'
-import { GristEditorMetaObjectSelector } from './component/grist/editor/grist-editor-meta-object-selector'
-import { GristEditorCodeInput } from './component/grist/editor/grist-editor-code-input'
-
-/** Grist Filter Compoment  */
-import { FilterGristMetaCodeSelect } from './component/filter/filter-grist-meta-code-select'
-import { FilterGristMetaObjectSelect } from './component/filter/filter-grist-meta-object-select'
-
-/** Filter Form Component  */
-import { FilterFormMetaCodeSelect } from './component/filter/filter-form-meta-code-select'
-import { FilterFormMetaObjectSelect } from './component/filter/filter-form-meta-object-select'
-
-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'
-
-export default async function bootstrap(module) {
-  // GRIST Renderer
-  gristColumnRegisterRenderer('meta-code-selector', GristRendererMetaCodeSelector)
-  gristColumnRegisterRenderer('meta-object-selector', GristRendererMetaObjectSelector)
-  gristColumnRegisterRenderer('code-input', GristRendererCodeInput)
-
-  // GRIST Editor
-  gristColumnRegisterEditor('meta-code-selector', GristEditorMetaCodeSelector)
-  gristColumnRegisterEditor('meta-object-selector', GristEditorMetaObjectSelector)
-  gristColumnRegisterEditor('code-input', GristEditorCodeInput)
-
-  // Grist Filter Renderer
-  gristRegisterFilterRenderer('meta-code-selector', [FilterGristMetaCodeSelect])
-  gristRegisterFilterRenderer('meta-object-selector', [FilterGristMetaObjectSelect])
-
-  // Filter Form Renderer
-  formRegisterFilterRenderer('meta-code-selector', [FilterFormMetaCodeSelect])
-  formRegisterFilterRenderer('meta-object-selector', [FilterFormMetaObjectSelect])
-
-  // Grist Default Registry
-  GristDefaultValue.registry()
-
-  auth.on('profile', async ({ credential, domains, domain }) => {
-    // 2. 메뉴 정보를 서버로 부터 받아서 적용
-    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`<md-icon>auto_fix_high</md-icon>`,
-        name: html`<ox-i18n msgid="title.dynamic_menu"></ox-i18n>`,
-        action: () => {
-          navigate('dynamic-menu')
-        }
-      }
-    })
-
-    // 4. 엔티티 관리 화면 추가
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html`<md-icon>filter_tilt_shift</md-icon>`,
-        name: html`<ox-i18n msgid="title.entity"></ox-i18n>`,
-        action: () => {
-          navigate('config-entity')
-        }
-      }
-    })
-
-    // 5. 용어 관리 화면 추가
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html`<md-icon>speaker_notes</md-icon>`,
-        name: html`<ox-i18n msgid="title.terminology"></ox-i18n>`,
-        action: () => {
-          navigate('config-terminology')
-        }
-      }
-    })
-
-    // 6. 공통 코드 화면 추가
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html`<md-icon>code</md-icon>`,
-        name: html`<ox-i18n msgid="title.code-management"></ox-i18n>`,
-        action: () => {
-          navigate('codes')
-        }
-      }
-    })
-
-    // 7. 업무정의 리스트 추가
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html`<md-icon>business_center</md-icon>`,
-        name: html`<ox-i18n msgid="title.meta_activity_list"></ox-i18n>`,
-        action: () => {
-          navigate('meta-activity-list')
-        }
-      }
-    })
-
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html`<md-icon>margin</md-icon>`,
-        name: html`<ox-i18n msgid="title.meta_activity_define"></ox-i18n>`,
-        action: () => {
-          navigate('meta-activity-define')
-        }
-      }
-    })
-
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html`<md-icon>work</md-icon>`,
-        name: html`<ox-i18n msgid="title.activity_list"></ox-i18n>`,
-        action: () => {
-          navigate('activity-list')
-        }
-      }
-    })
-
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        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

@@ -1,102 +0,0 @@
-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: any = 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

@@ -1,107 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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``
-}