@operato/attachment 1.0.0-alpha.6 → 1.0.0-beta.0

package/src/ox-attachment-list.ts

@@ -1,11 +1,6 @@
 import '@operato/data-grist'
 import '@operato/input/ox-input-file.js'
 
-import gql from 'graphql-tag'
-import i18next from 'i18next'
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
 import {
   ColumnConfig,
   DataGrist,
@@ -17,8 +12,13 @@ import {
   QueryFilter,
   SortersConfig
 } from '@operato/data-grist'
-import { buildArgs, client } from '@operato/graphql'
+import { LitElement, PropertyValues, css, html } from 'lit'
 import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
+import { buildArgs, client } from '@operato/graphql'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import gql from 'graphql-tag'
+import i18next from 'i18next'
 import { sleep } from '@operato/utils'
 
 const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
@@ -324,6 +324,18 @@ export class OxAttachmentList extends LitElement {
                     </div>
                   `
             } as FieldRenderer
+          },
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number,
+              target: HTMLElement
+            ): void => {
+              this.onClickSelect(record)
+            }
           }
         },
         {

package/src/ox-attachment-selector.ts

@@ -0,0 +1,111 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './ox-attachment-list.js'
+
+import { LitElement, css, html } from 'lit'
+import { PopupHandle, openPopup } from '@operato/layout'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+@customElement('ox-attachment-selector')
+export class OxPropertyEditorAttachmentSelector extends LitElement {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      input[type='text'] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        right: 3px;
+      }
+    `
+  ]
+
+  @property({ type: String }) value: string = ''
+  @property({ type: Object }) properties: any
+
+  private popup?: PopupHandle
+
+  render() {
+    return html`
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ''}
+        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}
+      />
+
+      <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>
+    `
+  }
+
+  getIconByCategory() {
+    var { category } = this.properties || {}
+    switch (category) {
+      case 'audio':
+        return 'library_music'
+      case 'video':
+        return 'video_library'
+      case 'image':
+        return 'image'
+      case 'text':
+      case 'application':
+      default:
+        return 'attachment'
+    }
+  }
+
+  _onInputChanged(e: KeyboardEvent) {
+    this.value = (e.target as HTMLInputElement).value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+    var { category = 'application' } = this.properties || {}
+
+    var template = html`
+      <ox-attachment-list
+        .creatable=${true}
+        .category=${category}
+        @attachment-selected=${async (e: CustomEvent) => {
+          var attachment = e.detail.attachment
+          this.value = `/attachment/${attachment.path}`
+
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-attachment-list>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select attachment')
+    })
+  }
+}

package/src/ox-property-editor-attachment-selector.ts

@@ -0,0 +1,14 @@
+import './ox-attachment-selector'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+
+@customElement('ox-property-editor-attachment-selector')
+class OxPropertyEditorAttachmentSelector extends OxPropertyEditor {
+  editorTemplate() {
+    return html`
+      <ox-attachment-selector id="editor" .value=${this.value} .properties=${this.property}></ox-attachment-selector>
+    `
+  }
+}

package/src/ox-property-editor-image-selector.ts

@@ -0,0 +1,21 @@
+import './ox-attachment-selector'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+
+@customElement('ox-property-editor-image-selector')
+class OxPropertyEditorImageSelector extends OxPropertyEditor {
+  editorTemplate() {
+    return html`
+      <ox-attachment-selector
+        id="editor"
+        .value=${this.value}
+        .properties=${{
+          ...this.property,
+          category: 'image'
+        }}
+      ></ox-attachment-selector>
+    `
+  }
+}