@operato/app 1.4.23 → 1.4.25

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.4.23",
+  "version": "1.4.25",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -18,6 +18,7 @@
     "./property-editor/ox-property-editor-resource-object.js": "./dist/src/property-editor/ox-property-editor-resource-object.js",
     "./grist-editor.js": "./dist/src/grist-editor/index.js",
     "./grist-editor/ox-grist-editor-resource-id.js": "./dist/src/grist-editor/ox-grist-editor-resource-id.js",
+    "./grist-editor/ox-grist-renderer-resource-code.js": "./dist/src/grist-editor/ox-grist-renderer-resource-code.js",
     "./grist-editor/ox-grist-renderer-resource-id.js": "./dist/src/grist-editor/ox-grist-renderer-resource-id.js",
     "./grist-editor/ox-grist-renderer-resource-object.js": "./dist/src/grist-editor/ox-grist-renderer-resource-object.js",
     "./grist-editor/ox-grist-renderer-crontab.js": "./dist/src/grist-editor/ox-grist-renderer-crontab.js",
@@ -64,6 +65,9 @@
       "grist-editor/ox-grist-editor-resource-id.js": [
         "dist/src/grist-editor/ox-grist-editor-resource-id.d.ts"
       ],
+      "grist-editor/ox-grist-renderer-resource-code.js": [
+        "dist/src/grist-editor/ox-grist-renderer-resource-code.d.ts"
+      ],
       "grist-editor/ox-grist-renderer-resource-id.js": [
         "dist/src/grist-editor/ox-grist-renderer-resource-id.d.ts"
       ],
@@ -121,15 +125,15 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.4.23",
-    "@operato/data-grist": "^1.4.23",
-    "@operato/font": "^1.4.23",
+    "@operato/attachment": "^1.4.24",
+    "@operato/data-grist": "^1.4.24",
+    "@operato/font": "^1.4.24",
     "@operato/form": "^1.4.23",
     "@operato/graphql": "^1.4.20",
     "@operato/i18n": "^1.4.5",
     "@operato/input": "^1.4.23",
     "@operato/layout": "^1.4.23",
-    "@operato/property-editor": "^1.4.23",
+    "@operato/property-editor": "^1.4.24",
     "@operato/shell": "^1.4.23",
     "@operato/styles": "^1.4.11",
     "@operato/utils": "^1.4.23",
@@ -174,5 +178,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f490c222495c17c7e60103ed225a81ca3bbaf02b"
+  "gitHead": "743929ab3c4459266bc8cb5ec6ab3402daeac10c"
 }

package/src/grist-editor/index.ts

@@ -6,15 +6,17 @@ import { OxGristEditorResourceId } from './ox-grist-editor-resource-id.js'
 import { OxGristEditorResourceObject } from './ox-grist-editor-resource-object.js'
 import { OxGristRendererCrontab } from './ox-grist-renderer-crontab'
 import { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js'
+import { OxGristRendererResourceCode } from './ox-grist-renderer-resource-code.js'
 import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js'
 
 /* register grist renderer/editor for id */
 registerEditor('resource-id', OxGristEditorResourceId)
-registerEditor('resource-object', OxGristEditorResourceObject)
 registerEditor('resource-code', OxGristEditorResourceCode)
+registerEditor('resource-object', OxGristEditorResourceObject)
 registerEditor('json', OxGristEditorJson)
 
 registerRenderer('resource-id', OxGristRendererResourceId)
+registerRenderer('resource-code', OxGristRendererResourceId)
 registerRenderer('resource-object', OxGristRendererResourceObject)
 registerRenderer('parameters', OxGristRendererJson5)
 registerRenderer('value-map', OxGristRendererJson5)

package/src/grist-editor/ox-grist-editor-resource-code.ts

@@ -1,10 +1,7 @@
 import '@material/mwc-icon'
-
 import { OxGristEditor, RecordConfig } from '@operato/data-grist'
-import { client, gqlContext } from '@operato/graphql'
 
 import { customElement } from 'lit/decorators.js'
-import gql from 'graphql-tag'
 import { html } from 'lit'
 
 type CommonCodeDetail = {
@@ -13,61 +10,17 @@ type CommonCodeDetail = {
   rank: number
 }
 
-type CommonCode = {
-  name: string
-  description: string
-  details: CommonCodeDetail[]
-}
-
-const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
-{
-  commonCode(name: "${codeName}") {
-    details {
-      name
-      description
-      rank
-    }
-  }
-}
-`
-
 @customElement('ox-grist-editor-resource-code')
 export class OxGristEditorResourceCode extends OxGristEditor {
-  async firstUpdated() {
-    super.firstUpdated()
-
-    var { codeName, codes } = this.column.record || {}
-
-    if (!codes && codeName) {
-      /* codeName으로 fetch 해와서, this.column.record.codes에 보관한다. */
-      var response = await client.query({
-        query: FETCH_COMMON_CODE_GQL(codeName),
-        context: gqlContext()
-      })
-
-      var commonCode = response && response.data && response.data.commonCode
-
-      if (commonCode) {
-        this.column.record.codes = [{ name: '', description: '' }].concat(
-          commonCode.details.sort(function (a: CommonCodeDetail, b: CommonCodeDetail) {
-            return a.rank - b.rank
-          })
-        )
-
-        this.requestUpdate()
-      }
-    }
-  }
-
   get editorTemplate() {
-    var { codes } = this.column.record || {}
+    var { codes, selectDispOpt = 'code-name' } = this.column.record || {}
 
     return html`
       <select>
-        ${(codes || ['']).map(
-          (code: CommonCode) => html`
+        ${(codes || []).map(
+          (code: CommonCodeDetail) => html`
             <option ?selected=${code.name == this.value} value=${code.name}>
-              ${code.name}${code.description ? ` - ${code.description}` : ''}
+            ${code.name == '' ? '' : selectDispOpt.replace('name',code.description).replace('code',code.name)}
             </option>
           `
         )}

package/src/grist-editor/ox-grist-renderer-resource-code.ts

@@ -0,0 +1,100 @@
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { client, gqlContext } from '@operato/graphql'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristRenderer } from '@operato/data-grist'
+import { detectOverflow } from '@operato/utils'
+
+type CommonCodeDetail = {
+  name: string
+  description: string
+  rank: number
+}
+
+const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
+{
+  commonCode(name: "${codeName}") {
+    details {
+      name
+      description
+      rank
+    }
+  }
+}
+`
+
+function onmouseover(e: Event) {
+  const element = e.target as HTMLSpanElement
+  if (detectOverflow(element)) {
+    element.setAttribute('data-tooltip', element.textContent!)
+  }
+}
+
+function onmouseout(e: Event) {
+  const element = e.target as HTMLSpanElement
+  element.removeAttribute('data-tooltip')
+}
+
+
+@customElement('ox-grist-renderer-resource-code')
+export class OxGristRendererResourceCode extends OxGristRenderer {
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+
+      width: 100%;
+    }
+
+    span {
+      text-overflow: ellipsis;
+      display: block;
+      overflow: hidden;
+    }
+  `
+
+  async connectedCallback(){
+    var { codeName, codes } = this.column.record || {}
+
+    if (!codes && codeName) {
+      /* codeName으로 fetch 해와서, this.column.record.codes에 보관한다. */
+      let response = await client.query({
+        query: FETCH_COMMON_CODE_GQL(codeName),
+        context: gqlContext()
+      })
+
+      var commonCode = response && response.data && response.data.commonCode
+
+      this.column.record.codes = [{ name: '', description: '' }].concat(
+        commonCode.details.sort(function (a: CommonCodeDetail, b: CommonCodeDetail) {
+          return a.rank - b.rank
+        })
+      )
+    }
+
+    super.connectedCallback();
+  }
+  
+  get rendererTemplate() {
+    if(!this.value) {
+      return html``
+    }
+
+    var { codes, renderDispOpt = 'name' } = this.column.record || {}
+
+    if(codes){
+      for(let idx = 0; idx < codes.length ; idx++){
+        let code = codes[idx];
+    
+        if(code.name == this.value){
+          return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${code.name == '' ? '' : renderDispOpt.replace('name',code.description).replace('code',code.name)}</span> `
+        }
+      }
+    }
+
+
+
+    return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${this.value}</span> `
+  }
+}