@operato/app 1.4.24 → 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.24",
+  "version": "1.4.25",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -178,5 +178,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "544e0036454d0bb2117ef0bfa727a4dfbc82900c"
+  "gitHead": "743929ab3c4459266bc8cb5ec6ab3402daeac10c"
 }

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 = {
@@ -16,14 +13,14 @@ type CommonCodeDetail = {
 @customElement('ox-grist-editor-resource-code')
 export class OxGristEditorResourceCode extends OxGristEditor {
   get editorTemplate() {
-    var { codes } = this.column.record || {}
+    var { codes, selectDispOpt = 'code-name' } = this.column.record || {}
 
     return html`
       <select>
-        ${(codes || ['']).map(
+        ${(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

@@ -1,9 +1,10 @@
 import gql from 'graphql-tag'
-import { html } from 'lit'
+import { css, html } from 'lit'
 import { client, gqlContext } from '@operato/graphql'
 import { customElement } from 'lit/decorators.js'
 
-import { FieldRenderer, OxGristRenderer } from '@operato/data-grist'
+import { OxGristRenderer } from '@operato/data-grist'
+import { detectOverflow } from '@operato/utils'
 
 type CommonCodeDetail = {
   name: string
@@ -23,8 +24,36 @@ const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
 }
 `
 
+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 || {}
 
@@ -42,103 +71,30 @@ export class OxGristRendererResourceCode extends OxGristRenderer {
           return a.rank - b.rank
         })
       )
-
-      console.log(this.column.record.codes)
     }
 
     super.connectedCallback();
   }
-
+  
   get rendererTemplate() {
     if(!this.value) {
       return html``
     }
 
-    var { codes } = this.column.record || {}
+    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>${code.description}</span> `
+          return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${code.name == '' ? '' : renderDispOpt.replace('name',code.description).replace('code',code.name)}</span> `
         }
       }
     }
 
-    return html`<span>${this.value}</span> `
-  }
-}
 
 
-// type CommonCodeDetail = {
-//   name: string
-//   description: string
-//   rank: number
-// }
-
-// const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
-// {
-//   commonCode(name: "${codeName}") {
-//     details {
-//       name
-//       description
-//       rank
-//     }
-//   }
-// }
-// `
-
-// const codeGetterPromise = (codeName:string) => new Promise((resolve, reject) => {
-//   /* codeName으로 fetch 해와서, this.column.record.codes에 보관한다. */
-//   client.query({
-//     query: FETCH_COMMON_CODE_GQL(codeName),
-//     context: gqlContext()
-//   }).then(({ loading, error, data }) => {
-//     var commonCode = data && data.commonCode
-
-//     let codes:any[] = []
-  
-//     if (commonCode) {
-//       codes = [{ name: '', description: '' }].concat(
-//         commonCode.details.sort(function (a: CommonCodeDetail, b: CommonCodeDetail) {
-//           return a.rank - b.rank
-//         })
-//       )
-//       resolve(codes)
-//     }
-//   });
-// });
-
-// export const OxGristRendererResourceCode: FieldRenderer = (value, column, record, rowIndex, field) => {
-//   if (!value) return html``
-
-//   var { codeName, codes } = column.record || {}
-//   if(codes){
-//     return getRenderHtml(value, codes);
-//   }
-
-//   if (!codes && codeName) {
-//     codeGetterPromise(codeName).then(codeList=> {
-//       console.log('getCodes')
-//       column.record.codes = codeList
-//       codes = codeList
-//     })
-//   } 
-
-//   return getRenderHtml(value, codes);
-// }
-
-// function getRenderHtml(value:string, codes:any[]){
-//   if(codes){
-//     for(let idx = 0; idx < codes.length ; idx++){
-//       let code = codes[idx];
-  
-//       if(code.name == value){
-//         return html`<span>${code.description}</span> `
-//       }
-//     }
-//   }
-
-//   return html`<span>${value}</span> `
-// }
+    return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${this.value}</span> `
+  }
+}