@things-factory/integration-ui 10.0.0-beta.95 → 10.0.0-beta.96

package/client/viewparts/env-var-quick-editor.ts

@@ -1,7 +1,6 @@
 import '@material/web/button/filled-button.js'
 import '@material/web/button/outlined-button.js'
 import '@material/web/button/text-button.js'
-import '@material/web/textfield/outlined-text-field.js'
 import '@material/web/icon/icon.js'
 
 import gql from 'graphql-tag'
@@ -9,6 +8,7 @@ import { LitElement, css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { notify } from '@operato/layout'
+import { OxPropertyEditor } from '@operato/property-editor'
 import { i18next, localize } from '@operato/i18n'
 
 interface Resolution {
@@ -253,13 +253,7 @@ export class EnvVarQuickEditor extends localize(i18next)(LitElement) {
 
         ${this._renderScopePanel(isLocal, isInherited)}
 
-        <md-outlined-text-field
-          label=${i18next.t('field.value')}
-          type=${this.isSecret ? 'password' : 'text'}
-          .value=${this.editedValue}
-          @input=${(e: any) => (this.editedValue = e.target.value)}
-          ?disabled=${this.busy}
-        ></md-outlined-text-field>
+        ${this._renderValueInput()}
       </div>
 
       <div class="actions">
@@ -278,6 +272,101 @@ export class EnvVarQuickEditor extends localize(i18next)(LitElement) {
     `
   }
 
+  /**
+   * 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에
+   * 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서
+   * 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.
+   *
+   * EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은
+   * 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.
+   */
+  private _renderValueInput() {
+    // host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.
+    // secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.
+    if (this.isSecret) {
+      return html`
+        <input
+          part="secret-input"
+          type="password"
+          .value=${this.editedValue}
+          @input=${(e: any) => (this.editedValue = e.target.value)}
+          ?disabled=${this.busy}
+          style="width:100%; padding:8px; box-sizing:border-box;"
+        />
+      `
+    }
+    return html`<div id="editor-host"></div>`
+  }
+
+  private _editorEl: HTMLElement | null = null
+  private _editorChangeBound: ((e: Event) => void) | null = null
+
+  protected updated(changed: Map<string, unknown>) {
+    super.updated?.(changed)
+    if (this.isSecret) return
+    if (changed.has('propSpec') || !this._editorEl) {
+      this._mountEditor()
+    } else if (changed.has('editedValue') && this._editorEl) {
+      // 외부에서 editedValue 변경 시 editor 도 동기화
+      const cur = (this._editorEl as any).value
+      if (cur !== this.editedValue) (this._editorEl as any).value = this.editedValue
+    }
+  }
+
+  private _mountEditor() {
+    const host = this.renderRoot.querySelector('#editor-host') as HTMLElement | null
+    if (!host) return
+    host.replaceChildren()
+    this._cleanupEditorListener()
+
+    const spec = this.propSpec || {}
+    const type = spec.type || 'string'
+    const elementType = OxPropertyEditor.getEditor(type)
+    if (!elementType) {
+      // 등록 editor 없음 — fallback 으로 단순 text input
+      const fallback = document.createElement('input')
+      fallback.type = 'text'
+      fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;'
+      fallback.value = this.editedValue || ''
+      fallback.addEventListener('input', () => (this.editedValue = fallback.value))
+      host.appendChild(fallback)
+      this._editorEl = fallback
+      return
+    }
+
+    const el = document.createElement(elementType) as any
+    el.label = spec.label || i18next.t('field.value')
+    el.type = type
+    el.placeholder = spec.placeholder || ''
+    el.property = spec.property
+    el.editor = spec.editor
+    el.value = this.editedValue || (type === 'checkbox' ? false : '')
+
+    // editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라
+    // value 가 boolean/number 면 String() 변환.
+    const onChange = () => {
+      const v = el.value
+      this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v)
+    }
+    el.addEventListener('change', onChange)
+    this._editorChangeBound = onChange
+    host.appendChild(el)
+    this._editorEl = el
+  }
+
+  private _cleanupEditorListener() {
+    if (this._editorEl && this._editorChangeBound) {
+      this._editorEl.removeEventListener('change', this._editorChangeBound)
+    }
+    this._editorChangeBound = null
+    this._editorEl = null
+  }
+
+  disconnectedCallback() {
+    this._cleanupEditorListener()
+    super.disconnectedCallback()
+  }
+
   private _cancel() {
     this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }))
   }