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

package/client/component/grist/editor/grist-editor-meta-code-selector.js

@@ -0,0 +1,157 @@
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/meta-object-selector-popup'
+
+export class GristEditorMetaCodeSelector extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = '';
+
+    if(!this.column.record || !this.column.record.options){
+      text = '';
+    } else if (!this.column.record.options.dispField){
+      text = this.value;
+    } else {
+      let codes = this.column.record.options.codes || [];
+
+      if(this.value && this.value.length > 0){
+        let codeDisp = codes.filter(x=> x.value === this.value);
+    
+        if(codeDisp && codeDisp.length > 0){
+          text = codeDisp[0].display;
+        } else {
+          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.openSelector()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+  
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    var {
+      selectorName = TermsUtil.tTitle('select_item')
+    } = this.column.record.options || {}
+
+    const confirmCallback = (selected) => {
+      let codeField = this.column.record.options.codeField;
+      let dispField = this.column.record.options.dispField;
+      let fieldMap = this.column.record.options.fieldMap || {};
+
+      if(!this.column.record.options.codes) {
+        this.column.record.options.codes = [];
+      }
+
+      if(selected){
+        let checkCodeList = this.column.record.options.codes.filter(x=> x.value == selected[codeField]);
+        if(!checkCodeList || checkCodeList.length == 0){
+          let disp = selected[codeField];
+
+          if(dispField){
+            let fields = dispField.split(",");
+            disp = selected[fields[0]];
+        
+            if(fields.length > 1){
+              disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+            }
+          }
+
+          this.column.record.options.codes.push({
+            value: selected[codeField],
+            display: disp
+          })
+        }
+      }
+
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? selected[codeField]
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+
+
+      Object.keys(fieldMap).forEach(key =>{
+        this.dispatchEvent(
+          new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              before: this.record[fieldMap[key]],
+              after: selected
+                ? selected[key]
+                : null,
+              record: this.record,
+              column: {name: fieldMap[key]},
+              row: this.row
+            }
+          })
+        )
+      })
+    }
+
+    var template = html`
+        <meta-object-selector-popup
+          .value=${this.value}
+          .options=${this.column.record.options}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></meta-object-selector-popup>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tMenu(selectorName)
+    })
+  }    
+}
+  
+customElements.define('grist-editor-meta-code-selector', GristEditorMetaCodeSelector)

package/client/component/grist/editor/grist-editor-meta-object-selector.js

@@ -0,0 +1,122 @@
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/meta-object-selector-popup'
+
+export class GristEditorMetaObjectSelector extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = '';
+
+    if(this.value && this.column.record.options){
+
+      let fields = this.column.record.options.nameField.split(",");
+      text = this.value[fields[0]];
+  
+      if(fields.length > 1){
+        text+= `(${fields.splice(1).map(field => { return this.value[field]}).join(",")})` 
+      }
+    } 
+  
+    return html`
+      ${!this.value
+        ? html`<span tabindex="0">${text}</span>`
+        : html` <span tabindex="0" style="flex:1">${text}</span> `}
+    `
+  }
+  
+  async firstUpdated() {
+    super.firstUpdated()
+  }
+
+  _onclick(e) {
+    e.stopPropagation()
+    this.openSelector()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+  
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    var {
+      selectorName = TermsUtil.tTitle('select_item')
+    } = this.column.record.options || {}
+
+    const confirmCallback = (selected) => {
+      let fieldMap = this.column.record.options.fieldMap || {};
+      
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? selected
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+
+      Object.keys(fieldMap).forEach(key =>{
+        this.dispatchEvent(
+          new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              before: this.record[fieldMap[key]],
+              after: selected
+                ? selected[key]
+                : null,
+              record: this.record,
+              column: {name: fieldMap[key]},
+              row: this.row
+            }
+          })
+        )
+      })
+    }
+
+    var template = html`
+        <meta-object-selector-popup
+          .value=${this.value}
+          .options=${this.column.record.options}
+          .record=${this.record}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></meta-object-selector-popup>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tMenu(selectorName)
+    })
+  }    
+}
+  
+customElements.define('grist-editor-meta-object-selector', GristEditorMetaObjectSelector)

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

@@ -0,0 +1,20 @@
+/**
+ * 그리드 Resource-column 타입 셀렉터
+ * @auth yang
+ */
+import { html } from 'lit'
+
+export const GristRendererCodeInput = (value, column, record, rowIndex, field) => {
+  let text = ''
+
+  if (value) {
+    if (typeof value === 'object') {
+      text = JSON.stringify(value, 0, 2)
+    } else {
+      text = value
+    }
+    text = text.length > 20 ? `${text.substring(0, 20)}...` : text
+  }
+
+  return html`<span style="flex:1" data-reactive-tooltip>${text}</span>`
+}

package/client/component/grist/renderer/grist-renderer-meta-code-selector.js

@@ -0,0 +1,28 @@
+/**
+ * 그리드 Resource-column 타입 셀렉터
+ * @auth yang
+ */
+import { html } from 'lit'
+
+export const GristRendererMetaCodeSelector = (value, column, record, rowIndex, field) => {
+  let text = ''
+
+  if (!column.record || !column.record.options) {
+    text = ''
+  } else if (!column.record.options.dispField) {
+    text = value
+  } else {
+    if (!column.record.options.codes) column.record.options.codes = []
+
+    if (value && value.length > 0) {
+      let codeDisp = column.record.options.codes.filter(x => x.value === value)
+
+      if (codeDisp && codeDisp.length > 0) {
+        text = codeDisp[0].display
+      } else {
+        text = value
+      }
+    }
+  }
+  return html`<span data-reactive-tooltip>${text}</span>`
+}

package/client/component/grist/renderer/grist-renderer-meta-object-selector.js

@@ -0,0 +1,25 @@
+/**
+ * 그리드 Resource-column 타입 셀렉터
+ * @auth yang
+ */
+import { html } from 'lit'
+
+export const GristRendererMetaObjectSelector = (value, column, record, rowIndex, field) => {
+  let text = ''
+
+  if (value && column.record.options?.nameField) {
+    let fields = column.record.options.nameField.split(',')
+    text = value[fields[0]]
+
+    if (fields.length > 1) {
+      text += `(${fields
+        .splice(1)
+        .map(field => {
+          return value[field]
+        })
+        .join(',')})`
+    }
+  }
+
+  return html`<span data-reactive-tooltip>${text}</span>`
+}

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

@@ -0,0 +1,111 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement } from 'lit'
+import { CommonHeaderStyles } from '@operato/styles'
+import { TermsUtil } from '../../utils/terms-util'
+import { MetaApi } from '../../utils/meta-api'
+import '@operato/input/ox-input-code.js'
+import { closePopup } from '@operato/popup'
+
+/**
+ * 코드 편집기 팝업
+ */
+export class CodeInputEditorPopup extends LitElement {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-code {
+        margin: 10px;
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  async connectedCallback() {
+    if (typeof this.value === 'object') {
+      this.codeVlaue = JSON.stringify(this.value, 0, 2)
+    } else {
+      this.codeVlaue = this.value
+    }
+
+    await super.connectedCallback()
+  }
+
+  async firstUpdated() {
+    await super.firstUpdated()
+  }
+
+  render() {
+    return html`
+      <ox-input-code mode="javascript" value=${this.codeVlaue}></ox-input-code>
+
+      <div class="footer">
+        <button @click=${this.clickEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
+        <button @click=${this.clickConfirm.bind(this)} done>
+          <md-icon>done</md-icon>${TermsUtil.tButton('confirm')}
+        </button>
+      </div>
+    `
+  }
+
+  get codeEditor() {
+    return this.shadowRoot.querySelector('ox-input-code')
+  }
+
+  /**
+   * @description 비우기
+   ***************************
+   * @returns
+   */
+  async clickEmpty(e) {
+    this.confirmCallback && this.confirmCallback(null)
+    closePopup(this)
+  }
+  /**
+   * @description 취소
+   ***************************
+   * @returns
+   */
+  async clickCancel(e) {
+    closePopup(this)
+  }
+  /**
+   * @description 확인
+   ***************************
+   * @returns
+   */
+  async clickConfirm(e) {
+    if (this.codeVlaue === this.codeEditor.value) {
+      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'))
+      return
+    }
+    this.changedValue(this.codeEditor.value)
+  }
+
+  /**
+   * @description 확정
+   ***************************
+   * @param {*} record
+   */
+  async changedValue(value) {
+    this.confirmCallback && this.confirmCallback(value)
+    closePopup(this)
+  }
+}
+
+customElements.define('code-input-editor-popup', CodeInputEditorPopup)

package/client/component/popup/file-upload-popup.js

@@ -0,0 +1,129 @@
+import '@material/web/icon/icon.js'
+
+import { client, gqlContext } from '@things-factory/shell'
+import { css, html, LitElement } from 'lit'
+import { SingleColumnFormStyles } from '@things-factory/form-ui'
+import { CommonHeaderStyles } from '@operato/styles'
+import gql from 'graphql-tag'
+import { TermsUtil } from '../../utils/terms-util'
+import { ServiceUtil } from '../../utils/service-util'
+import { MetaApi } from '../../utils/meta-api'
+
+class FileUploadPopup extends LitElement {
+  static get styles() {
+    return [
+      CommonHeaderStyles,
+      SingleColumnFormStyles,
+      css`
+        :host {
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--md-sys-color-background);
+        }
+
+        .input-container {
+          display: flex;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      templateTypes: Array
+    }
+  }
+
+  async connectedCallback() {
+    super.connectedCallback()
+    this.templateTypes = await ServiceUtil.codeItems('TEMPLATE_TYPES')
+  }
+
+  render() {
+    return html`
+      <div>
+        <form id="input-form" class="single-column-form">
+          <fieldset>
+            <legend>${TermsUtil.tLabel('file_upload')}</legend>
+            <label>${TermsUtil.tLabel('file_upload')}</label>
+            <file-uploader custom-input id="uploadTemplate" name="attachments"></file-uploader>
+
+            <label>${TermsUtil.tLabel('category')}</label>
+            <select name="category" required>
+              <option value="">${TermsUtil.tText('please_select_upload_category')}</option>
+              ${(this.templateTypes || []).map(templateType => {
+                const { name, description } = templateType
+                return html` <option value="${name}">${name} ${description ? ` (${description})` : ''}</option> `
+              })}
+            </select>
+
+            <label>${TermsUtil.tLabel('description')}</label>
+            <input name="description" />
+          </fieldset>
+        </form>
+      </div>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this._createAttachment} done>
+          <md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}
+        </button>
+      </div>
+    `
+  }
+
+  get _template() {
+    return this.renderRoot.querySelector('#uploadTemplate')
+  }
+
+  async _createAttachment() {
+    try {
+      const attachment = this._getAttachmentInfo()
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($attachment: NewAttachment!) {
+            createAttachment(attachment: $attachment) {
+              id
+              name
+              path
+            }
+          }
+        `,
+        variables: {
+          attachment
+        },
+        context: {
+          ...gqlContext(),
+          hasUpload: true
+        }
+      })
+
+      if (!response.errors) {
+        history.back()
+        this.dispatchEvent(new CustomEvent('template-uploaded', { bubbles: true, composed: true, cancelable: true }))
+      }
+    } catch (e) {
+      MetaApi.showAlertPopup('label.error', e.message, 'error', 'confirm')
+    }
+  }
+
+  _getAttachmentInfo() {
+    if (this.renderRoot.querySelector('form').checkValidity()) {
+      return {
+        file: this._template.files[0],
+        category: this._getInputByName('category').value,
+        description: this._getInputByName('description').value
+      }
+    } else {
+      throw new Error(TermsUtil.tText('text.attachment_info_not_valid'))
+    }
+  }
+
+  _getInputByName(name) {
+    return this.renderRoot.querySelector(`select[name=${name}], input[name=${name}]`)
+  }
+}
+
+window.customElements.define('file-upload-popup', FileUploadPopup)