@things-factory/meta-ui 7.0.0-y.0 → 7.0.1-alpha.0

package/client/actions/main.js

@@ -1,7 +1,88 @@
-import"../viewparts/dynamic-menu-part";import"@material/mwc-icon";import gql from"graphql-tag";import{html}from"lit";import{client}from"@operato/graphql";import{appendViewpart,toggleOverlay,TOOL_POSITION,VIEWPART_POSITION}from"@operato/layout";import{store}from"@operato/shell";import{isMobileDevice}from"@operato/utils";import{APPEND_APP_TOOL,REMOVE_APP_TOOL}from"@things-factory/apptool-base";import{clientSettingStore}from"@things-factory/shell";export const UPDATE_META_UI="UPDATE_META_UI";export const UPDATE_META_MENU_TEMPLATE="UPDATE_META_MENU_TEMPLATE";var HAMBURGER;export async function setupMenuPart(e){var{hovering:t=!!isMobileDevice(),slotTemplate:a,portraitSlotTemplate:i,landscapeSlotTemplate:o,position:r=VIEWPART_POSITION.NAVBAR}=e||{};const{hovering:n}=(await clientSettingStore.get("dynamic-menu"))?.value||{};void 0!==n&&(t=n);const p=r==VIEWPART_POSITION.HEADERBAR?"landscape":"portrait",l=("landscape"==p?o:i)||a||html``;appendViewpart({name:"dynamic-menu-part",viewpart:{show:!t,resizable:!0,hovering:!!isMobileDevice()||t,template:html`<dynamic-menu-part .orientation=${p}>${l}</dynamic-menu-part>`},position:r}),(t||isMobileDevice())&&"portrait"==p?HAMBURGER||(HAMBURGER={name:"hamburger",template:html`
-        <mwc-icon @click=${e=>toggleOverlay("dynamic-menu-part",{backdrop:!0})}
+import '../viewparts/dynamic-menu-part'
+import '@material/mwc-icon'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+
+import { client } from '@operato/graphql'
+import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
+import { store } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
+import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base'
+import { clientSettingStore } from '@things-factory/shell'
+
+export const UPDATE_META_UI = 'UPDATE_META_UI'
+export const UPDATE_META_MENU_TEMPLATE = 'UPDATE_META_MENU_TEMPLATE'
+
+var HAMBURGER
+
+export async function setupMenuPart(options) {
+  var {
+    hovering = isMobileDevice() ? true : false,
+    slotTemplate,
+    portraitSlotTemplate,
+    landscapeSlotTemplate,
+    position = VIEWPART_POSITION.NAVBAR
+  } = options || {}
+
+  const { hovering: hoveringSetting } = (await clientSettingStore.get('dynamic-menu'))?.value || {}
+  if (hoveringSetting !== undefined) {
+    hovering = hoveringSetting
+  }
+
+  const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait'
+  const orientatedSlotTemplate =
+    (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html``
+
+  appendViewpart({
+    name: 'dynamic-menu-part',
+    viewpart: {
+      show: !hovering,
+      resizable: true,
+      hovering: isMobileDevice() ? true : hovering,
+      template: html`<dynamic-menu-part .orientation=${orientation}>${orientatedSlotTemplate}</dynamic-menu-part>`
+    },
+    position
+  })
+
+  if ((hovering || isMobileDevice()) && orientation == 'portrait') {
+    if (!HAMBURGER) {
+      HAMBURGER = {
+        name: 'hamburger',
+        template: html`
+        <mwc-icon @click=${e=>
+          toggleOverlay('dynamic-menu-part', {
+            backdrop: true
+          })}
         >view_headline</mwc-icon>
-        `,position:TOOL_POSITION.FRONT_END},store.dispatch({type:APPEND_APP_TOOL,tool:HAMBURGER})):HAMBURGER&&(store.dispatch({type:REMOVE_APP_TOOL,name:"hamburger"}),HAMBURGER=null)}export async function updateMenuTemplate(e){var t=document.querySelector('meta[name="application-name"]')?.content,a=(await client.query({query:gql`
+        `,
+        position: TOOL_POSITION.FRONT_END
+      }
+
+      store.dispatch({
+        /* incase of mobile : add hamburger tool */
+        type: APPEND_APP_TOOL,
+        tool: HAMBURGER
+      })
+    }
+  } else {
+    if (HAMBURGER) {
+      store.dispatch({
+        type: REMOVE_APP_TOOL,
+        name: 'hamburger'
+      })
+
+      HAMBURGER = null
+    }
+  }
+}
+
+export async function updateMenuTemplate(template) {
+  var applicationName = document.querySelector('meta[name="application-name"]')?.content
+
+  var liteMenus = (
+    await client.query({
+      query: gql`
         query ($filters: [Filter!], $sortings: [Sorting!]) {
           liteMenus: liteMenus(filters: $filters
               sortings: $sortings) {
@@ -20,4 +101,33 @@ import"../viewparts/dynamic-menu-part";import"@material/mwc-icon";import gql fro
             total
           }
         }
-      `,variables:{filters:[{name:"active",operator:"eq",value:!0},{name:"appName",operator:"in",value:["",t]}],sortings:[{name:"rank",desc:!1}]}})).data.liteMenus.items;store.dispatch({type:UPDATE_META_MENU_TEMPLATE,addon:a.filter((e=>!e.appName||e.appName===t)),template:e})}
+      `,
+      variables: {
+        filters: [
+          {
+            name: 'active',
+            operator: 'eq',
+            value: true
+          },
+          {
+            name: 'appName',
+            operator: 'in',
+            value: ['', applicationName]
+          }
+        ],
+        sortings:[
+          {
+              name: 'rank',
+              desc: false
+          }
+        ]
+      }
+    })
+  ).data.liteMenus.items
+
+  store.dispatch({
+    type: UPDATE_META_MENU_TEMPLATE,
+    addon: liteMenus.filter(menu => !menu.appName || menu.appName === applicationName),
+    template
+  })
+}

package/client/{bootstrap.js → bootstrap.ts}

@@ -1,28 +1,22 @@
 import { html } from 'lit-html'
 
-import { auth } from '@things-factory/auth-base'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
 import { ADD_MORENDA } from '@things-factory/more-base'
-import { navigate, store } from '@things-factory/shell'
-import { navigateWithSilence, UPDATE_MODULES } from '@operato/shell'
+import { navigate, store } from '@operato/shell'
 
 import { updateMenuTemplate } from './actions/main'
 import metaUI from './reducers/main'
 import { TermsUtil } from './utils/terms-util'
 import { MetaApi } from './utils/meta-api'
 import { GristDefaultValue } from './utils/grist-default-value'
+import { MENUS } from './dynamic-menus'
 
 import {
   registerEditor as gristColumnRegisterEditor,
   registerRenderer as gristColumnRegisterRenderer,
-  registerFilterRenderer as gristRegisterFilterRenderer,
-  getRenderer as gristGetRenderer,
-  getEditor as gristGetEditor,
-  getFilterRenderers as gristGetFilterRenderers
+  registerFilterRenderer as gristRegisterFilterRenderer
 } from '@operato/data-grist'
-import {
-  registerFilterRenderer as formRegisterFilterRenderer,
-  getFilterRenderers as formGetFilterRenderers
-} from '@operato/form'
+import { registerFilterRenderer as formRegisterFilterRenderer } from '@operato/form'
 
 /** GRIST Renderer Compoment  */
 import { GristRendererMetaCodeSelector } from './component/grist/renderer/grist-renderer-meta-code-selector'
@@ -42,10 +36,10 @@ 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'
 
-export default function bootstrap() {
-  import(`./pages/activity/meta-activity-writer-element`)
-  import(`./pages/activity/meta-activity-viewer-element`)
+import './pages/activity/meta-activity-writer-element'
+import './pages/activity/meta-activity-viewer-element'
 
+export default function bootstrap(module) {
   // GRIST Renderer
   gristColumnRegisterRenderer('meta-code-selector', GristRendererMetaCodeSelector)
   gristColumnRegisterRenderer('meta-object-selector', GristRendererMetaObjectSelector)
@@ -71,31 +65,17 @@ export default function bootstrap() {
     metaUI
   })
 
-  // var titleMeta = document.querySelector('meta[name="application-name"]');
-  // console.log(titleMeta ? titleMeta.content : 'Things Factory')
-  // console.log(ENV['APP-VERSION'])
-
-  // var iconLink = document.querySelector('link[rel="application-icon"]')
-  // var titleMeta = document.querySelector('meta[name="application-name"]')
-  // var descriptionMeta = document.querySelector('meta[name="application-description"]')
-
-  // this._applicationMeta = {
-  //   icon: iconLink ? iconLink.href : logo,
-  //   title: titleMeta ? titleMeta.content : 'Things Factory',
-  //   description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-  // }
-
   auth.on('profile', async ({ credential, domains, domain }) => {
     // 1. 용어 다운로드
-    let locale = MetaApi.currentLocale()
-    if (locale == 'ko') locale = 'ko-KR'
+    var locale = MetaApi.currentLocale()
+    if (locale == 'ko') {
+      locale = 'ko-KR'
+    }
     await TermsUtil.downloadTerminologies(locale)
 
     // 2. 메뉴 정보를 서버로 부터 받아서 적용
-    let menuRoutes = await MetaApi.myDynamicMenus()
-
-    let realMenus = menuRoutes.menus
-    await updateMenuTemplate(realMenus)
+    const menuRoutes = await MENUS
+    updateMenuTemplate(menuRoutes.menus)
 
     // 3. 동적 메뉴 관리 화면 추가
     store.dispatch({
@@ -189,103 +169,5 @@ export default function bootstrap() {
         }
       }
     })
-
-    // 8. 모든 routes 정보 추출
-    let allRoutes = menuRoutes.routes
-
-    // 9. store의 모듈 정보 조회 & 마지막 application 모듈 정보를 추출
-    let modules = store.getState().app.modules
-    let allModules = Object.assign([], modules)
-    let appModule = allModules[allModules.length - 1]
-
-    // 10. 최종 애플리케이션 모듈의 routes 정보 교체
-    appModule.routes = allRoutes.filter(r => {
-      return r.template && !r.template.startsWith('@things-factory')
-    })
-
-    // 11. meta-ui 모듈 추출
-    let metaUiModule = allModules.find(m => {
-      return m.name == '@things-factory/meta-ui'
-    })
-
-    // 12. meta-ui의 routes 정보 교체
-    let metaUiRoutes = allRoutes.filter(r => {
-      let isMetaUiRoute = r.template && r.template.startsWith('@things-factory/meta-ui')
-      if (isMetaUiRoute) {
-        r.template = r.template.replace('@things-factory/meta-ui/client', '.')
-      }
-
-      return isMetaUiRoute
-    })
-
-    this.routes.forEach(r => {
-      metaUiRoutes.push({ page: r.page, tagname: r.tagname })
-    })
-    metaUiModule.routes = metaUiRoutes
-    metaUiModule.route = metaUiRoute
-
-    // 13. store에 모듈 업데이트
-    store.dispatch({
-      type: UPDATE_MODULES,
-      modules: allModules
-    })
-
-    // 14. 첫 페이지를 리로딩 처리 (shell/app.js에서 리로딩 처리시에는 라우팅 정보가 없어서 처리를 못하므로 여기서 다시 한번 해줌...)
-    store.dispatch(navigateWithSilence(location))
   })
 }
-
-/**
- * @description MetaUI 라우팅 처리 로직
- ***********************************
- * @param {*} page
- * @returns
- */
-function metaUiRoute(page) {
-  if (page == 'dynamic-menu') {
-    import('./pages/menu/dynamic-menu')
-    return page
-  } else if (page == 'config-terminology') {
-    import('./pages/terms/config-terminology')
-    return page
-  } else if (page == 'meta-activity-list') {
-    import('./pages/activity/meta-activity-list-page')
-    return page
-  } else if (page == 'meta-activity-define') {
-    import('./pages/activity/meta-activity-define-page')
-    return page
-  } else if (page == 'config-entity') {
-    import('./pages/entity/config-entity')
-    return page
-  } else if (page == 'work-code-page') {
-    import('./pages/work-code/work-code-page')
-    return page
-  } else if (page == 'button-role-page') {
-    import('./pages/button-role/button-role-page')
-    return page
-  } else if (page == 'loading-page') {
-    import('./pages/loading-page')
-    return page
-  } else {
-    let storage = store.getState()
-
-    if (storage && storage.app && storage.app.modules) {
-      let modules = storage.app.modules
-      let metaUiMod = modules.find(m => {
-        return m.name == '@things-factory/meta-ui'
-      })
-
-      if (metaUiMod && metaUiMod.routes) {
-        let metaUiRoutes = metaUiMod.routes
-        let metaRoute = metaUiRoutes.find(mapping => mapping.page == page)
-
-        if (metaRoute) {
-          import(`${metaRoute.template}`)
-          return page
-        }
-      }
-    }
-
-    return ''
-  }
-}

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

@@ -1,16 +1,94 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaCodeSelector(e,t,o){var l=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+function openMetaCodeSelector(filter, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${filter.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(l,{backdrop:!0,size:"large",title:e.options.selectorName?TermsUtil.tMenu(e.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterFormMetaCodeSelect=(e,t,o)=>{const l=e.options,p=l.codes&&l.codes.length>0?l.codes:void 0,{operator:a="eq"}=e;let i=t||"",r=t||"";if(l.dispField&&t&&p){let e=p.filter((e=>e.value==t));e&&e.length>0&&(r=e[0].display)}return"eq"===a?html`
-        <input name='${e.name}' .value=${i} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? TermsUtil.tMenu(filter.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+
+export const FilterFormMetaCodeSelect = (filter, value, owner) =>{
+  const options = filter.options;
+  const codes = (options.codes && options.codes.length > 0) ? options.codes : undefined;
+  const { operator = 'eq' } = filter;
+  let hideText = value? value : '';
+  let 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=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${r}
-          @click=${p=>{p.stopPropagation();const i=p.target;openMetaCodeSelector(e,t,(t=>{let p=t?t[l.codeField]:"",r=p;if(t&&l.dispField){let e=l.dispField.split(",");r=t[e[0]],e.length>1&&(r+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}i.value=r,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${e.name}"]`):o.renderRoot.querySelector(`form [name="${e.name}"]`)).value=p,i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:a,value:p}}))}))}}
+          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' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : 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)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

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

@@ -1,16 +1,94 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaObjectSelector(e,t,o){var l=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+function openMetaObjectSelector(filter, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${filter.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(l,{backdrop:!0,size:"large",title:e.options.selectorName?TermsUtil.tMenu(e.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterFormMetaObjectSelect=(e,t,o)=>{const l=e.options,{operator:p="eq"}=e;let a=t?t.id:"",n="";if(t){let e=l.nameField.split(",");n=t[e[0]],e.length>1&&(n+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}return"eq"===p?html`
-        <input name='${e.name}' .value=${a} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? TermsUtil.tMenu(filter.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+
+export const FilterFormMetaObjectSelect = (filter, value, owner) =>{
+  const options = filter.options;
+  const { operator = 'eq' } = filter;
+  let hideText = value ? value.id : '';
+  let 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=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${n}
-          @click=${a=>{a.stopPropagation();const n=a.target;openMetaObjectSelector(e,t,(t=>{let a=t?t.id:"",r="";if(t){let e=l.nameField.split(",");r=t[e[0]],e.length>1&&(r+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}n.value=r,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${e.name}"]`):o.renderRoot.querySelector(`form [name="${e.name}"]`)).value=a,n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:p,value:a}}))}))}}
+          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' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : 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)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

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

@@ -1,16 +1,95 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaCodeSelector(e,t,o){var l=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+
+function openMetaCodeSelector(column, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.record.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${column.record.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(l,{backdrop:!0,size:"large",title:e.record.options.selectorName?TermsUtil.tMenu(e.record.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterGristMetaCodeSelect=(e,t,o)=>{const l=e.filter,r=e.record.options,p=r.codes&&r.codes.length>0?r.codes:void 0,{operator:i="eq"}=l;let a=t||"",n=t||"";if(r.dispField&&t&&p){let e=p.filter((e=>e.value==t));e&&e.length>0&&(n=e[0].display)}return"eq"===i?html`
-        <input name='${e.name}' .value=${a} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? TermsUtil.tMenu(column.record.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterGristMetaCodeSelect = (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;
+  let hideText = value? value : '';
+  let 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=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${n}
-          @click=${p=>{p.stopPropagation();const a=p.target;openMetaCodeSelector(e,t,(t=>{let p=t?t[r.codeField]:"",n=p;if(t&&r.dispField){let e=r.dispField.split(",");n=t[e[0]],e.length>1&&(n+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}a.value=n,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${l.name}"]`):o.renderRoot.querySelector(`form [name="${l.name}"]`)).value=p,a.dispatchEvent(new Event("change",{bubbles:!0})),a.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:i,value:p}}))}))}}
+          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' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : 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``};
+      `
+    : html``
+}