@things-factory/meta-ui 8.0.0-beta.9 → 8.0.0

package/client/bootstrap.ts

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

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

@@ -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``
+}

package/client/component/grist/editor/grist-editor-code-input.js

@@ -0,0 +1,96 @@
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/code-input-editor-popup'
+
+export class GristEditorCodeInput extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = undefined;
+
+    if(this.value){
+      if(typeof this.value === 'object'){
+        text = JSON.stringify(this.value, 0, 2);
+      } else {
+        text = this.value;
+      }
+
+      text = text.length > 20 ? `${text.substring(0,20)}...` : text;
+    }
+      
+    return html`
+      ${!text
+        ? html`<span tabindex="0" ></span>`
+        : html` <span tabindex="0" style="flex:1;">${text}</span> `}
+    `
+  }
+  
+  async firstUpdated() {
+    super.firstUpdated()
+  }
+
+  _onclick(e) {
+    e.stopPropagation()
+    this.openEditor()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openEditor()
+    }
+  }
+  
+  openEditor() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (chageValue) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: chageValue
+              ? (typeof this.value === 'object' ? JSON.parse(chageValue) : chageValue)
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var template = html`
+        <code-input-editor-popup
+          .value=${this.value}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></code-input-editor-popup>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tTitle('code-editor')
+    })
+  }    
+}
+  
+customElements.define('grist-editor-code-input', GristEditorCodeInput)