@operato/board 1.1.35 → 1.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.1.35",
+  "version": "1.1.37",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -24,6 +24,10 @@
     "./ox-board-viewer.js": "./dist/src/ox-board-viewer.js",
     "./ox-board-player.js": "./dist/src/ox-board-player.js",
     "./ox-board-modeller.js": "./dist/src/ox-board-modeller.js",
+    "./ox-editor-board-selector.js": "./dist/src/ox-editor-board-selector.js",
+    "./ox-property-editor-board-selector.js": "./dist/src/ox-property-editor-board-selector.js",
+    "./ox-board-selector.js": "./dist/src/selector/ox-board-selector.js",
+    "./ox-board-creation-card.js": "./dist/src/selector/ox-board-creation-card.js",
     "./register-default-groups.js": "./dist/src/component/register-default-groups.js"
   },
   "typesVersions": {
@@ -52,6 +56,18 @@
       "ox-board-modeller.js": [
         "./dist/src/ox-board-modeller.d.ts"
       ],
+      "ox-editor-board-selector.js": [
+        "./dist/src/ox-editor-board-selector.d.ts"
+      ],
+      "ox-property-editor-board-selector.js": [
+        "./dist/src/ox-property-editor-board-selector.d.ts"
+      ],
+      "ox-board-selector.js": [
+        "./dist/src/selector/ox-board-selector.d.ts"
+      ],
+      "ox-board-creation-card.js": [
+        "./dist/src/selector/ox-board-creation-card.d.ts"
+      ],
       "register-default-groups.js": [
         "./dist/src/component/register-default-groups.d.ts"
       ]
@@ -71,17 +87,17 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.1.35",
-    "@operato/data-grist": "^1.1.35",
-    "@operato/font": "^1.1.35",
+    "@operato/app": "^1.1.37",
+    "@operato/data-grist": "^1.1.37",
+    "@operato/font": "^1.1.37",
     "@operato/graphql": "^1.1.13",
     "@operato/i18n": "^1.1.13",
-    "@operato/input": "^1.1.35",
+    "@operato/input": "^1.1.37",
     "@operato/markdown": "^1.1.28",
     "@operato/popup": "^1.1.28",
-    "@operato/property-editor": "^1.1.35",
+    "@operato/property-editor": "^1.1.37",
     "@operato/styles": "^1.1.28",
-    "@operato/utils": "^1.1.15",
+    "@operato/utils": "^1.1.37",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -130,5 +146,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b82d99051caa643ebe7b042afd53be5bbc092195"
+  "gitHead": "6f015266daddd7faec2219a0b7fbbdc935899378"
 }

package/src/modeller/property-sidebar/effects/property-event-hover.ts

@@ -47,11 +47,7 @@ export class PropertyEventHover extends LitElement {
 
       ${action == 'popup'
         ? html`
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
+            <ox-editor-board-selector value-key="target" .value=${target} custom-editor></ox-editor-board-selector>
           `
         : html`
             <input

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -70,11 +70,7 @@ export class PropertyEventTap extends LitElement {
 
       ${action === 'goto' || action?.includes('popup')
         ? html`
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
+            <ox-editor-board-selector value-key="target" .value=${target} custom-editor></ox-editor-board-selector>
           `
         : html`
             <input

package/src/ox-board-list.ts

@@ -404,10 +404,10 @@ class BoardList extends LitElement {
      * string인 경우에는 해당 보드의 id로 해석한다.
      */
     var template = html`
-      <process-creation-popup
+      <board-creation-popup
         .defaultGroup=${this.groupId}
         .groups=${this.groups}
-        @create-process=${async (e: CustomEvent) => {
+        @create-board=${async (e: CustomEvent) => {
           try {
             var { name, description, groupId } = e.detail
             var board: Board = {
@@ -426,13 +426,13 @@ class BoardList extends LitElement {
 
             // await sleep(100)
 
-            this.notify('info', 'new process created')
+            this.notify('info', 'new board created')
           } catch (ex: Error | any) {
             console.error(ex)
             this.notify('error', ex, ex)
           }
         }}
-      ></process-creation-popup>
+      ></board-creation-popup>
     `
 
     OxPopup.open({

package/src/ox-editor-board-selector.ts

@@ -0,0 +1,91 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './selector/ox-board-selector'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('ox-editor-board-selector')
+export class BoardSelector extends LitElement {
+  static get styles() {
+    return [
+      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: 0;
+        }
+      `
+    ]
+  }
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) properties?: any
+
+  private popup: any
+
+  render() {
+    return html`
+      <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
+
+      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>
+    `
+  }
+
+  _onInputChanged(e: Event) {
+    this.value = (e.target as any)?.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 template = html`
+      <ox-board-selector
+        .creatable=${true}
+        .value=${value}
+        @board-selected=${async (e: CustomEvent) => {
+          var board = e.detail.board
+          this.value = board.id
+
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-board-selector>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select board')
+    })
+  }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-editor-board-selector'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
+
+@customElement('ox-property-editor-board-selector')
+class PropertyEditorBoardSelector extends OxPropertyEditor {
+  static get styles() {
+    return [...OxPropertyEditor.styles]
+  }
+
+  editorTemplate(value: any, spec: PropertySpec) {
+    return html`
+      <ox-editor-board-selector id="editor" .value=${value} .properties=${spec.property}></ox-editor-board-selector>
+    `
+  }
+}

package/src/selector/board-creation-popup.ts

@@ -0,0 +1,102 @@
+import '@material/mwc-textfield'
+import '@material/mwc-textarea'
+import '@material/mwc-select'
+import '@material/mwc-list/mwc-list-item'
+import '@material/mwc-button'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('board-creation-popup')
+export class BoardCreationPopup extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          padding: 10px;
+          background-color: white;
+        }
+
+        :host > * {
+          margin: 10px;
+        }
+
+        [content] {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+
+        [content] > * {
+          margin: 10px 0;
+        }
+      `
+    ]
+  }
+
+  @property({ type: String }) defaultGroup?: string
+  @property({ type: Array }) groups?: { id: string; name: string }[]
+
+  render() {
+    var groups = this.groups || []
+
+    return html`
+      <div content>
+        <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
+        <mwc-textarea
+          label=${String(i18next.t('label.description'))}
+          name="description"
+          field-description
+        ></mwc-textarea>
+        <mwc-select
+          label=${String(i18next.t('label.group'))}
+          field-group
+          helper="If there is no group to choose, you can leave it empty."
+        >
+          ${groups.map(
+            group => html`
+              <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</mwc-list-item>
+            `
+          )}
+        </mwc-select>
+      </div>
+
+      <mwc-button
+        raised
+        label=${String(i18next.t('button.create'))}
+        @click=${(e: MouseEvent) => this.onClickSubmit()}
+      ></mwc-button>
+    `
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      ;(this.renderRoot.querySelector('mwc-textfield') as any)?.focus()
+    }, 100)
+  }
+
+  onClickSubmit() {
+    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
+      return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value
+    })
+
+    if (!name) {
+      return
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('create-board', {
+        detail: {
+          name,
+          description,
+          groupId
+        }
+      })
+    )
+  }
+}

package/src/selector/board-thumbnail-card.ts

@@ -0,0 +1,175 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('board-thumbnail-card')
+export class BoardThumbnailCard extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+
+          padding: 0;
+          margin: 0;
+          height: 100%;
+
+          -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+          -webkit-transition: all 0.5s ease-in-out;
+          transition: all 0.5s ease-in-out;
+        }
+
+        :host(.flipped) {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [front],
+        [back] {
+          position: absolute;
+
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+        }
+
+        [front] {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        [front] mwc-icon {
+          margin-top: 15%;
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+
+        [back] {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [back] form {
+          padding: var(--card-list-create-form-padding);
+          display: flex;
+          flex-flow: row wrap;
+        }
+
+        [back] form label {
+          flex: 1 1 25%;
+          font: var(--card-list-create-label-font);
+          color: var(--card-list-create-label-color);
+        }
+
+        [back] form input,
+        [back] form select {
+          flex: 1 1 60%;
+          width: 10px;
+          background-color: #fff;
+          border: var(--card-list-create-input-border);
+          border-radius: var(--card-list-create-input-border-radius);
+          padding: var(--card-list-create-input-padding);
+          font: var(--card-list-create-input-font);
+          color: var(--card-list-create-input-color);
+        }
+
+        form * {
+          margin: var(--card-list-create-margin);
+        }
+
+        input[type='submit'] {
+          background-color: var(--button-background-color) !important;
+          margin: var(--button-margin);
+          font: var(--button-font);
+          color: var(--button-color) !important;
+          border-radius: var(--button-radius);
+          border: var(--button-border);
+        }
+      `
+    ]
+  }
+
+  @property({ type: String }) defaultGroup?: string
+  @property({ type: Array }) groups?: { id: string; name: string }[]
+
+  render() {
+    var groups = this.groups || []
+
+    return html`
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create board</div>
+
+      <div @click=${(e: Event) => this.onClickFlip(e)} back>
+        <form @submit=${(e: Event) => this.onClickSubmit(e)}>
+          <label>${i18next.t('label.name')}</label>
+          <input type="text" name="name" />
+
+          <label>${i18next.t('label.description')}</label>
+          <input type="text" name="description" />
+
+          <label>${i18next.t('label.group')}</label>
+          <select .value=${this.defaultGroup || ''} name="groupId">
+            ${groups.map(
+              group => html`
+                <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>
+              `
+            )}
+          </select>
+
+          <input type="submit" value=${String(i18next.t('button.create'))} />
+        </form>
+      </div>
+    `
+  }
+
+  onClickFlip(e: Event) {
+    if ((e.currentTarget as any)?.hasAttribute('front') || (e.target as any)?.hasAttribute('back')) {
+      this.classList.toggle('flipped')
+    }
+
+    e.stopPropagation()
+  }
+
+  onClickSubmit(e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    var form = e.target as any
+
+    var name = form.elements['name'].value
+    var description = form.elements['description'].value
+    var groupId = form.elements['groupId'].value
+
+    this.dispatchEvent(
+      new CustomEvent('create-board', {
+        detail: {
+          name,
+          description,
+          groupId
+        }
+      })
+    )
+  }
+
+  reset() {
+    var form = this.shadowRoot?.querySelector('form')
+    if (form) {
+      form.reset()
+    }
+
+    this.classList.remove('flipped')
+  }
+}

package/src/selector/ox-board-creation-card.ts

@@ -0,0 +1,92 @@
+import '@material/mwc-icon'
+import './board-creation-popup'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('ox-board-creation-card')
+export class BoardCreationCard extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          align-content: center;
+          justify-content: center;
+        }
+
+        div {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        mwc-icon {
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+      `
+    ]
+  }
+
+  /* default group id */
+  @property({ type: String }) defaultGroup?: string
+  @property({ type: Array }) groups: any
+
+  private popup: any
+
+  render() {
+    return html`<div @click=${(e: Event) => this.onClick()}><mwc-icon>add_circle_outline</mwc-icon>create board</div> `
+  }
+
+  onClick() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var template = html`
+      <board-creation-popup
+        .defaultGroup=${this.defaultGroup}
+        .groups=${this.groups}
+        @create-board=${async (e: CustomEvent) => {
+          var { name, description, groupId } = e.detail
+
+          this.dispatchEvent(
+            new CustomEvent('create-board', {
+              detail: {
+                name,
+                description,
+                groupId
+              }
+            })
+          )
+
+          this.popup && this.popup.close()
+        }}
+      ></board-creation-popup>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.create-board')
+    })
+  }
+
+  reset() {}
+}