@things-factory/resource-ui 5.0.0-alpha.2 → 5.0.0-alpha.20

package/client/bootstrap.js

@@ -1,17 +1,26 @@
-import { store } from '@things-factory/shell'
-import { addRoutingType } from '@things-factory/menu-base'
-
-import { registerEditor, registerRenderer, TextRenderer } from '@things-factory/grist-ui'
+/* should use @things-factory/grist-ui to register both grist (things-factory grist and operato grist) */
+import {
+  registerEditor as registerGristEditor,
+  registerRenderer as registerGristRenderer
+} from '@things-factory/grist-ui'
 
-import { ObjectRenderer } from './data-grist/renderers/object-renderer'
-import { ObjectEditor } from './data-grist/editors/object-editor'
-import { CodeEditor } from './data-grist/editors/code-editor'
+import { OxGristEditorResourceCode } from '@operato/app/grist-editor/ox-grist-editor-resource-code.js'
+import { OxGristEditorResourceObject } from '@operato/app/grist-editor/ox-grist-editor-resource-object.js'
+import { OxGristRendererResourceObject } from '@operato/app/grist-editor/ox-grist-renderer-resource-object.js'
+import { OxGristRendererText } from '@operato/data-grist'
+import { addRoutingType } from '@things-factory/menu-base'
+import { store } from '@things-factory/shell'
 
 export default function bootstrap() {
-  registerRenderer('object', ObjectRenderer)
-  registerEditor('object', ObjectEditor)
-  registerRenderer('code', TextRenderer)
-  registerEditor('code', CodeEditor)
+  registerGristRenderer('object', OxGristRendererResourceObject)
+  registerGristEditor('object', OxGristEditorResourceObject)
+  registerGristRenderer('resource-object', OxGristRendererResourceObject)
+  registerGristEditor('resource-object', OxGristEditorResourceObject)
+
+  registerGristRenderer('code', OxGristRendererText)
+  registerGristEditor('code', OxGristEditorResourceCode)
+  registerGristRenderer('resource-code', OxGristRendererText)
+  registerGristEditor('resource-code', OxGristEditorResourceCode)
 
   store.dispatch(addRoutingType('RESOURCE', 'resource'))
 }

package/client/data-grist/wrapper/data-list-wrapper.js

@@ -1,7 +1,7 @@
-import { LitElement, html, css } from 'lit'
-
 import '@things-factory/grist-ui'
 
+import { LitElement, css, html } from 'lit'
+
 const GUTTERS = [
   {
     type: 'gutter',
@@ -117,7 +117,7 @@ export class DataListWrapper extends LitElement {
       .map(column => {
         return {
           name: column.name,
-          descending: !!column.reverseSort
+          desc: !!column.reverseSort
         }
       })
 

package/client/index.js

@@ -1,3 +1 @@
-export * from './elements/code-select'
-export * from './elements/object-input'
 export * from './elements/object-selector'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/resource-ui",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.20",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,15 +24,16 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@things-factory/auth-ui": "^5.0.0-alpha.2",
-    "@things-factory/context-ui": "^5.0.0-alpha.2",
-    "@things-factory/form-ui": "^5.0.0-alpha.2",
-    "@things-factory/grist-ui": "^5.0.0-alpha.2",
-    "@things-factory/i18n-base": "^5.0.0-alpha.2",
-    "@things-factory/import-ui-csv": "^5.0.0-alpha.2",
-    "@things-factory/layout-base": "^5.0.0-alpha.2",
-    "@things-factory/menu-base": "^5.0.0-alpha.2",
-    "@things-factory/resource-base": "^5.0.0-alpha.2"
+    "@operato/app": "^1.0.0-alpha.41",
+    "@things-factory/auth-ui": "^5.0.0-alpha.20",
+    "@things-factory/context-ui": "^5.0.0-alpha.20",
+    "@things-factory/form-ui": "^5.0.0-alpha.20",
+    "@things-factory/grist-ui": "^5.0.0-alpha.20",
+    "@things-factory/i18n-base": "^5.0.0-alpha.20",
+    "@things-factory/import-ui-csv": "^5.0.0-alpha.20",
+    "@things-factory/layout-base": "^5.0.0-alpha.20",
+    "@things-factory/menu-base": "^5.0.0-alpha.20",
+    "@things-factory/resource-base": "^5.0.0-alpha.20"
   },
-  "gitHead": "055536f981d229d51ae63f46585036b35fa86602"
+  "gitHead": "47487b293458170f7eeb97612dfa8bbb750f092f"
 }

package/client/data-grist/editors/code-editor.js

@@ -1,65 +0,0 @@
-import { html } from 'lit'
-import gql from 'graphql-tag'
-import '@material/mwc-icon'
-
-import { client } from '@things-factory/shell'
-import { InputEditor } from '@things-factory/grist-ui'
-import { gqlContext } from '@things-factory/shell'
-
-const FETCH_COMMON_CODE_GQL = codeName => gql`
-{
-  commonCode(name: "${codeName}") {
-    details {
-      name
-      description
-      rank
-    }
-  }
-}
-`
-
-export class CodeEditor extends InputEditor {
-  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, b) {
-            return a.rank - b.rank
-          })
-        )
-
-        this.requestUpdate()
-      }
-    }
-  }
-
-  get editorTemplate() {
-    var { codes } = this.column.record || {}
-
-    return html`
-      <select>
-        ${(codes || ['']).map(
-          code => html`
-            <option ?selected=${code.name == this.value} value=${code.name}>
-              ${code.name}${code.description ? ` - ${code.description}` : ''}
-            </option>
-          `
-        )}
-      </select>
-    `
-  }
-}
-
-customElements.define('code-editor', CodeEditor)

package/client/data-grist/editors/object-editor.js

@@ -1,156 +0,0 @@
-import '@material/mwc-icon'
-import { i18next } from '@things-factory/i18n-base'
-import { openPopup } from '@things-factory/layout-base'
-import { css, html, LitElement } from 'lit'
-import '../../elements/object-selector'
-
-export class ObjectEditor extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      column: Object,
-      record: Object,
-      row: Number
-    }
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-flow: row nowrap;
-
-        padding: 7px 0px;
-        box-sizing: border-box;
-
-        width: 100%;
-        height: 100%;
-
-        border: 0;
-        background-color: transparent;
-
-        font: var(--grist-object-editor-font);
-        color: var(--grist-object-editor-color);
-        justify-content: inherit;
-      }
-
-      span {
-        display: flex;
-        flex: auto;
-
-        justify-content: inherit;
-      }
-
-      mwc-icon {
-        width: 20px;
-        font-size: 1.5em;
-        margin-left: auto;
-      }
-    `
-  }
-
-  render() {
-    var value = this.value || {}
-
-    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-    var name, description
-    if (typeof nameField === 'function') {
-      name = nameField(value)
-    } else {
-      name = value[nameField]
-    }
-
-    if (typeof descriptionField === 'function') {
-      description = descriptionField(value)
-    } else {
-      description = value[descriptionField] && `(${value[descriptionField]})`
-    }
-
-    return html`
-      ${!value ? html`` : html` <span>${name || ''}${description || ''}</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
-    `
-  }
-
-  async firstUpdated() {
-    this.value = this.record[this.column.name]
-    this.template = ((this.column.record || {}).options || {}).template
-
-    await this.updateComplete
-
-    this.shadowRoot.addEventListener('click', e => {
-      e.stopPropagation()
-
-      this.openSelector()
-    })
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    const confirmCallback = selected => {
-      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: {
-              ...(this.column.record.options.select || [])
-                .map(field => field.name)
-                .reduce((obj, fieldName) => {
-                  return (obj = {
-                    ...obj,
-                    [fieldName]: selected[fieldName]
-                  })
-                }, {}),
-              [idField]: selected[idField],
-              [nameField]: selected[nameField],
-              [descriptionField]: selected[descriptionField]
-            },
-            record: this.record,
-            column: this.column,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var value = this.value || {}
-    var valueField = this.column.record.options.valueField
-    var actualValue
-    if (typeof valueField === 'function') {
-      actualValue = valueField(value)
-    } else if (valueField) {
-      actualValue = value[valueField]
-    } else {
-      actualValue = value.id
-    }
-
-    var template =
-      this.template ||
-      html`
-        <object-selector
-          .value=${actualValue}
-          .confirmCallback=${confirmCallback.bind(this)}
-          .queryName=${this.column.record.options.queryName}
-          .select=${this.column.record.options.select}
-          .list=${this.column.record.options.list}
-          .basicArgs=${this.column.record.options.basicArgs}
-          .valueField=${this.column.record.options.valueField}
-        ></object-selector>
-      `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select_item')
-    })
-  }
-}
-
-customElements.define('object-editor', ObjectEditor)

package/client/data-grist/renderers/object-renderer.js

@@ -1,26 +0,0 @@
-import { html } from 'lit-html'
-
-export const ObjectRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) {
-    return ''
-  }
-
-  var { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
-  var name, description
-
-  if (typeof nameField === 'function') {
-    name = nameField(value)
-  } else {
-    name = value[nameField]
-  }
-
-  if (typeof descriptionField === 'function') {
-    description = descriptionField(value)
-  } else {
-    description = value[descriptionField] && `(${value[descriptionField]})`
-  }
-
-  return html`
-    ${name || ''}${description || ''}
-  `
-}

package/client/elements/code-select.js

@@ -1,61 +0,0 @@
-import gql from 'graphql-tag'
-import { client } from '@things-factory/shell'
-
-const FETCH_COMMON_CODE_GQL = codeName => gql`
-{
-  commonCode(name: "${codeName}") {
-    details {
-      name
-      description
-      rank
-    }
-  }
-}
-`
-
-/*
- * USAGE
- *
- * <select codename="USER_TYPES" is="code-select"></select>
- *
- */
-export class CodeSelect extends HTMLSelectElement {
-  static get observedAttributes() {
-    return ['codename']
-  }
-
-  connectedCallback() {}
-
-  async attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      this._fecthCodes(newValue)
-    }
-  }
-
-  async _fecthCodes(codeName) {
-    this.innerHTML = ''
-
-    var response = await client.query({
-      query: FETCH_COMMON_CODE_GQL(codeName)
-    })
-
-    var commonCode = response && response.data && response.data.commonCode
-
-    if (commonCode) {
-      var codes = [{ name: '', description: '' }]
-        .concat(
-          commonCode.details.sort(function(a, b) {
-            return a.rank - b.rank
-          })
-        )
-        .forEach(code => {
-          let option = document.createElement('option')
-          option.value = code.name
-          option.text = `${code.name}${code.description ? ` - ${code.description}` : ''}`
-          this.add(option, null)
-        })
-    }
-  }
-}
-
-customElements.define('code-select', CodeSelect, { extends: 'select' })

package/client/elements/object-input.js

@@ -1,159 +0,0 @@
-import { LitElement, html, css, customElement } from 'lit'
-import gql from 'graphql-tag'
-import { client } from '@things-factory/shell'
-import { gqlBuilder } from '@things-factory/utils'
-import { openPopup } from '@things-factory/layout-base'
-import { i18next } from '@things-factory/i18n-base'
-
-import './object-selector'
-
-/*
- * USAGE
- *
- * <input type="text" query-name="boards" value="9432279e-28ea-4c60-bb92-6211439ec390" is="object-input" />
- *
- */
-class ObjectInputContainer extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: inline;
-        position: relative;
-      }
-
-      div {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
-      }
-
-      ::slotted(input) {
-        opacity: 0;
-      }
-    `
-  }
-
-  static get properties() {
-    return {
-      queryName: String,
-      value: String,
-      _object: Object
-    }
-  }
-
-  render() {
-    var object = this._object || {}
-    return html`
-      <slot> </slot>
-      <div>${object.name}</div>
-    `
-  }
-
-  get input() {
-    return this.querySelector('input')
-  }
-
-  async firstUpdated() {
-    await this.updateComplete
-
-    this.shadowRoot.addEventListener('click', () => {
-      this.queryName && this.openSelector(this.queryName)
-    })
-  }
-
-  async updated(changes) {
-    if (changes.has('queryName') || changes.has('value')) {
-      if (this.queryName && this.value) {
-        this._object = await this._fetchObject(this.queryName, this.value)
-      } else {
-        this._object = {}
-      }
-    }
-  }
-
-  async _fetchObject(queryName, id) {
-    const response = await client.query({
-      query: gql`
-        query {
-          ${queryName} (${gqlBuilder.buildArgs({
-        filters: [
-          {
-            name: 'id',
-            operator: 'eq',
-            value: id
-          }
-        ]
-      })}) {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-        }
-      `
-    })
-
-    return response.data[queryName].items[0]
-  }
-
-  openSelector(queryName) {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    const confirmCallback = selected => {
-      this._object = selected
-
-      this.input.setAttribute('value', this._object.id)
-    }
-
-    var value = this._object || {}
-    var basicArgs = {}
-
-    var template =
-      this.template ||
-      html`
-        <object-selector
-          .value=${value.id}
-          .confirmCallback=${confirmCallback.bind(this)}
-          .queryName=${queryName}
-          .basicArgs=${basicArgs}
-        ></object-selector>
-      `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select_item')
-    })
-  }
-}
-
-customElements.define('object-input-container', ObjectInputContainer)
-
-export class ObjectInput extends HTMLInputElement {
-  static get observedAttributes() {
-    return ['query-name', 'value']
-  }
-
-  connectedCallback() {
-    if (this.__container) {
-      this.__container.value = this.value
-      this.__container.queryName = this.getAttribute('query-name')
-
-      return
-    }
-
-    this.__container = document.createElement('object-input-container')
-    this.parentNode.insertBefore(this.__container, this)
-    this.__container.appendChild(this)
-  }
-
-  async attributeChangedCallback(name, oldValue, newValue) {}
-}
-
-customElements.define('object-input', ObjectInput, { extends: 'input' })