@things-factory/id-rule-base 8.0.0-beta.9 → 8.0.0

package/client/bootstrap.ts

@@ -0,0 +1,8 @@
+import { registerEditor } from '@operato/data-grist'
+
+import { GristCodeInput } from './editors/grist-code-input'
+
+export default function bootstrap() {
+  /* id-rule 의 GristRenderer는 텍스트와 같으므로, 별도로 정의하지 않음. */
+  registerEditor('id-rule', GristCodeInput)
+}

package/client/editors/grist-code-input-popup.ts

@@ -0,0 +1,196 @@
+import '@material/web/button/elevated-button.js'
+import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-code.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ColumnConfig, GristRecord } from '@operato/data-grist'
+import { OxInputCode } from '@operato/input'
+
+const FETCH_ID_RULE_GQL = type => {
+  return gql`
+  {
+    idRule(type:"${type}") {
+      id,
+      type,
+      rule
+    }
+  }
+`
+}
+
+@customElement('grist-code-input-popup')
+export class GristCodeInputPopup extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        align-items: center;
+        box-sizing: border-box;
+        width: 100%;
+        border: 0;
+        color: var(--popup-content-color);
+        background-color: var(--popup-content-background-color);
+
+        font: var(--grist-object-editor-font);
+
+        justify-content: inherit;
+      }
+
+      :host * {
+        box-sizing: border-box;
+      }
+
+      #wrapper {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 5px;
+      }
+
+      #wrapper > h4 {
+        margin: 0;
+      }
+
+      #wrapper > ul {
+        width: 100%;
+      }
+
+      #wrapper > ul > li {
+        display: flex;
+      }
+      #wrapper > ul > li > span {
+        font-weight: bold;
+        flex-basis: 200px;
+      }
+
+      #wrapper > ul > li > ox-i18n {
+        flex: 1;
+      }
+
+      ox-input-code {
+        width: 100%;
+        flex: 1;
+      }
+
+      #footer {
+        display: flex;
+        justify-content: flex-end;
+      }
+    `
+  ]
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) column?: ColumnConfig
+  @property({ type: Object }) record?: GristRecord
+  @property({ type: Number }) row?: number
+  @property({ type: Object }) field?: any
+  @property({ type: Object }) _idRule?: any
+  @property({ type: Object }) headers?: { [header: string]: string }
+
+  @query('ox-input-code') ruleEditor!: OxInputCode
+
+  render() {
+    return html`
+      <div id="wrapper">
+        <h4><ox-i18n msgid="label.arguments"></ox-i18n></h4>
+        <ul>
+          <li><span>domain</span><ox-i18n msgid="label.argument domain description"></ox-i18n></li>
+          <li><span>seed</span><ox-i18n msgid="label.argument seed description"></ox-i18n></li>
+        </ul>
+        <ox-input-code id="rule-editor" type="text" .value=${(this._idRule || {}).rule}></ox-input-code>
+
+        <div id="footer">
+          <md-elevated-button
+            label=${String(i18next.t('button.save'))}
+            @click=${(e: Event) => {
+              this.updateIdRule()
+            }}
+          ></md-elevated-button>
+        </div>
+      </div>
+    `
+  }
+
+  updated(changed) {
+    if (changed.has('value')) {
+      if (this.value && typeof this.value === 'string') {
+        this.getRule()
+      }
+    }
+  }
+
+  async getRule() {
+    var response = await client.query({
+      query: FETCH_ID_RULE_GQL(this.value)
+    })
+
+    let idRule = response.data.idRule
+    if (!idRule) {
+      idRule = await this.createIdRule()
+    }
+
+    this._idRule = idRule
+    this.requestUpdate()
+  }
+
+  async createIdRule() {
+    var idRule = {
+      type: this.value,
+      rule: `return ''`
+    }
+
+    return (
+      await client.mutate({
+        mutation: gql`
+          mutation createIdRule($idRule: NewIdRule!) {
+            createIdRule(idRule: $idRule) {
+              type
+              rule
+            }
+          }
+        `,
+        variables: { idRule }
+      })
+    ).data?.createIdRule
+  }
+
+  async updateIdRule() {
+    if (!this._idRule) console.error('ID Rule not found')
+
+    const rule = this.ruleEditor.value
+
+    const type = this._idRule.type
+
+    const patch = {
+      ...this._idRule,
+      rule
+    }
+
+    await client.mutate({
+      mutation: gql`
+        mutation updateIdRule($type: String!, $patch: IdRulePatch!) {
+          updateIdRule(type: $type, patch: $patch) {
+            type
+            rule
+          }
+        }
+      `,
+      variables: { type, patch }
+    })
+
+    this.dispatchEvent(
+      new CustomEvent('close-popup', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+}

package/client/editors/grist-code-input.ts

@@ -0,0 +1,121 @@
+import '@material/web/icon/icon.js'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { OxPopup } from '@operato/popup'
+
+import './grist-code-input-popup'
+
+@customElement('grist-code-input')
+export class GristCodeInput extends OxGristEditor {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        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;
+      }
+
+      md-icon {
+        width: 20px;
+        font-size: 1.5em;
+      }
+
+      #popup {
+        display: flex;
+        overflow: hidden;
+      }
+
+      input {
+        border: none;
+        background-color: transparent;
+      }
+
+      input:focus {
+        outline: none;
+        border: none;
+      }
+    `
+  ]
+
+  @property({ type: Object }) headers?: Object
+  @property({ type: Object }) popup?: OxPopup | null
+
+  render() {
+    return html`
+      <input
+        type="text"
+        .value=${this.value}
+        .record=${this.record}
+        .column=${this.column}
+        .field=${this.column}
+        .row=${this.row}
+      ></input>
+
+      <md-icon id="more" @click=${e => this.openPopup()}>more_vert</md-icon>
+    `
+  }
+
+  async firstUpdated() {
+    await this.updateComplete
+    await super.firstUpdated()
+  }
+
+  openPopup() {
+    if (this.record.__dirty__) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: i18next.t('text.please_save_your_modifications_first')
+          }
+        })
+      )
+
+      return
+    }
+
+    document.dispatchEvent(
+      new CustomEvent('open-popup', {
+        detail: {
+          template: html`
+            <grist-code-input-popup
+              .value=${this.value}
+              .column=${this.column}
+              .record=${this.record}
+              .row=${this.row}
+              .field=${this.field}
+              .headers=${this.headers}
+              @close-popup=${e => {
+                this.popup?.close()
+                this.popup = null
+              }}
+            ></grist-code-input-popup>
+          `,
+          options: {
+            title: i18next.t('title.ID Rule Editor')
+          },
+          callback: popup => {
+            this.popup = popup
+          }
+        }
+      })
+    )
+  }
+}