@things-factory/meta-ui 8.0.6 → 9.0.0-beta.12

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

@@ -1,96 +0,0 @@
-import { html } from 'lit'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { openPopup } from '@operato/layout'
-import { TermsUtil } from '../../../utils/terms-util';
-
-import '../../popup/code-input-editor-popup'
-
-export class GristEditorCodeInput extends OxGristEditor {
-  static get properties() {
-    return {
-      value: Object,
-      column: Object,
-      record: Object,
-      rowIndex: Number,
-      field: Object,
-      popup: Object
-    }
-  }
-  
-  get editorTemplate() {
-    let text = undefined;
-
-    if(this.value){
-      if(typeof this.value === 'object'){
-        text = JSON.stringify(this.value, 0, 2);
-      } else {
-        text = this.value;
-      }
-
-      text = text.length > 20 ? `${text.substring(0,20)}...` : 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.openEditor()
-  }
-  
-  _onkeydown(e) {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.openEditor()
-    }
-  }
-  
-  openEditor() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    const confirmCallback = (chageValue) => {
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: chageValue
-              ? (typeof this.value === 'object' ? JSON.parse(chageValue) : chageValue)
-              : null,
-            record: this.record,
-            column: this.column,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var template = html`
-        <code-input-editor-popup
-          .value=${this.value}
-          .confirmCallback=${confirmCallback.bind(this)}
-        ></code-input-editor-popup>
-      `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: TermsUtil.tTitle('code-editor')
-    })
-  }    
-}
-  
-customElements.define('grist-editor-code-input', GristEditorCodeInput)

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

@@ -1,157 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,20 +0,0 @@
-/**
- * 그리드 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

@@ -1,28 +0,0 @@
-/**
- * 그리드 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

@@ -1,25 +0,0 @@
-/**
- * 그리드 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

@@ -1,111 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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)