@things-factory/board-ui 6.1.191 → 6.1.195

package/client/actions/permissions.ts

@@ -0,0 +1 @@
+export const UPDATE_PERMISSION = 'UPDATE_PERMISSION'

package/client/apptools/favorite-tool.ts

@@ -0,0 +1,123 @@
+import '@material/mwc-icon'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { store } from '@operato/shell'
+import { client } from '@operato/graphql'
+import { UPDATE_FAVORITES } from '@things-factory/fav-base'
+
+@customElement('favorite-tool')
+export class FavoriteTool extends connect(store)(LitElement) {
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 0;
+    }
+
+    [favorable] {
+      opacity: 0.5;
+    }
+  `
+
+  @property({ type: Array }) favorites: any[] = []
+  @property({ type: Object }) user: any
+  @property({ type: String }) resourceId?: string
+  @property({ type: Boolean }) favored?: boolean
+  @property({ type: Array }) acceptedPages: any[] = []
+
+  page: any
+
+  render() {
+    var renderable = (this.acceptedPages || []).indexOf(this.page) !== -1
+
+    return renderable
+      ? html`
+          <mwc-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
+            >${this.favored ? 'star' : 'star_border'}</mwc-icon
+          >
+        `
+      : html``
+  }
+
+  updated(changes) {
+    if (changes.has('user')) {
+      this.refreshFavorites()
+    }
+
+    this.favored = (this.favorites || []).includes(this.resourceId)
+  }
+
+  stateChanged(state) {
+    this.page = state.route.page
+    this.favorites = state.favorite.favorites
+    this.user = state.auth.user
+    this.resourceId = state.route.resourceId
+  }
+
+  onClick(event) {
+    if (!this.resourceId) {
+      return
+    }
+
+    if (this.favored) {
+      this.removeFavorite(this.resourceId)
+    } else {
+      this.addFavorite(this.resourceId)
+    }
+  }
+
+  async refreshFavorites() {
+    if (!this.user || !this.user.email) {
+      return
+    }
+
+    const response = await client.query({
+      query: gql`
+        query {
+          myFavorites {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    store.dispatch({
+      type: UPDATE_FAVORITES,
+      favorites: response.data.myFavorites.map(favorite => favorite.routing)
+    })
+  }
+
+  async removeFavorite(routing) {
+    await client.query({
+      query: gql`
+        mutation {
+          deleteFavorite(routing: "${routing}")
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  async addFavorite(routing) {
+    await client.query({
+      query: gql`
+        mutation {
+          createFavorite(favorite: {
+            routing: "${routing}"
+          }) {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+}

package/client/board-list/board-importer.ts

@@ -0,0 +1,138 @@
+import '@operato/board/ox-board-viewer.js'
+
+import { BoardViewer } from '@operato/board/ox-board-viewer.js'
+
+function setHighlightStyle(dropArea) {
+  var style = document.createElement('style')
+
+  style.type = 'text/css'
+  style.innerHTML = `.highlight_me {
+    background: orange;
+    cursor: pointer;
+  }`
+
+  dropArea.appendChild(style)
+}
+
+export default class BoardImporter {
+  static import(file, importer) {
+    let reader = new FileReader()
+    reader.readAsText(file)
+    reader.onloadend = () => {
+      try {
+        let model = JSON.parse(reader.result as any)
+        importer(file.name.replace(/\.[^/.]+$/, ''), model)
+      } catch (e) {
+        console.error('board import failed', e)
+      }
+    }
+  }
+
+  static preview(file) {
+    let reader = new FileReader()
+    reader.readAsText(file)
+    reader.onloadend = () => {
+      try {
+        let previewModel = JSON.parse(reader.result as any)
+
+        var preview = document.createElement('ox-board-viewer') as BoardViewer
+
+        preview.style.width = '100%'
+        preview.style.height = '80%'
+        preview.style.margin = '0'
+        preview.style.padding = '0'
+
+        // TODO how to hand over model to previewer
+        // preview.model = previewModel
+        // preview.provider = provider;
+
+        var buttons = document.createElement('div')
+
+        buttons.className = 'buttons'
+        buttons.innerHTML = `
+          <paper-button dialog-dismiss>Cancel</paper-button>
+          <paper-button dialog-confirm autofocus>Accept</paper-button>
+        `
+
+        var dialog = document.createElement('paper-dialog')
+
+        dialog.style.width = '100%'
+        dialog.style.height = '100%'
+        dialog.setAttribute('with-backdrop', 'true')
+        dialog.setAttribute('auto-fit-on-attach', 'true')
+        dialog.setAttribute('always-on-top', 'true')
+        dialog.addEventListener('iron-overlay-closed', () => {
+          dialog.parentNode!.removeChild(dialog)
+        })
+
+        dialog.appendChild(preview)
+        dialog.appendChild(buttons)
+        document.body.appendChild(dialog)
+
+        requestAnimationFrame(() => {
+          ;(dialog as any).open()
+        })
+      } catch (e) {
+        console.error('board preview failed', e)
+      }
+    }
+    // let url = 'YOUR URL HERE'
+    // let formData = new FormData()
+
+    // formData.append('file', file)
+
+    // fetch(url, {
+    //   method: 'POST',
+    //   body: formData
+    // })
+    //   .then(() => { /* Done. Inform the user */ })
+    //   .catch(() => { /* Error. Inform the user */ })
+  }
+
+  static set(dropArea, judge, importer) {
+    setHighlightStyle(dropArea)
+
+    var preventDefaults = e => {
+      if (!judge || judge()) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+
+    var highlight = e => {
+      if (!judge || judge()) {
+        dropArea.classList.add('highlight_me')
+      }
+    }
+
+    var unhighlight = e => {
+      if (!judge || judge()) {
+        dropArea.classList.remove('highlight_me')
+      }
+    }
+
+    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
+      dropArea.addEventListener(event, preventDefaults, false)
+    })
+    ;['dragenter', 'dragover'].forEach(event => {
+      dropArea.addEventListener(event, highlight, false)
+    })
+    ;['dragleave', 'drop'].forEach(event => {
+      dropArea.addEventListener(event, unhighlight, false)
+    })
+
+    dropArea.addEventListener(
+      'drop',
+      e => {
+        if (!judge || judge()) {
+          let dt = e.dataTransfer
+          let files = dt.files
+
+          // [...files].forEach((file) => BoardImporter.preview(file))
+          ;[...files].forEach(file => BoardImporter.import(file, importer))
+        }
+      },
+      false
+    )
+  }
+}

package/client/board-list/board-tile-list.js

@@ -0,0 +1,282 @@
+import '@operato/board/ox-board-creation-card.js'
+import '@material/mwc-icon'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { keyed } from 'lit/directives/keyed.js'
+
+import { client } from '@things-factory/shell'
+
+export default class BoardTileList extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          overflow: auto;
+          padding: var(--popup-content-padding);
+          display: grid;
+
+          grid-template-columns: var(--card-list-template);
+          grid-auto-rows: var(--card-list-rows-height);
+          grid-gap: 20px;
+          --mdc-button-horizontal-padding: var(--padding-default);
+        }
+
+        [card] {
+          position: relative;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        [card][create] {
+          overflow: visible;
+          background-color: initial;
+        }
+
+        [card] > a {
+          display: flex;
+        }
+
+        [card]:hover {
+          cursor: pointer;
+        }
+
+        [name] {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          margin-top: var(--margin-narrow);
+          width: calc(100% - 45px);
+          color: var(--primary-text-color);
+          font-weight: bolder;
+          font-size: var(--fontsize-small);
+        }
+
+        img {
+          display: block;
+
+          margin: auto;
+          max-width: 100%;
+          max-height: 100%;
+        }
+
+        mwc-icon[iconBtn] {
+          float: right;
+          margin-top: -20px;
+          margin-left: 2px;
+          color: var(--board-list-star-color);
+          font-size: 1.4em;
+        }
+        mwc-icon[info] {
+          color: var(--primary-color);
+        }
+
+        mwc-icon[iconBtn][favored],
+        mwc-icon[info]:hover {
+          color: var(--board-list-star-active-color);
+        }
+
+        a {
+          display: block;
+          border-radius: var(--card-list-border-radius);
+          border: var(--border-dark-color);
+          box-sizing: border-box;
+          background-color: var(--card-list-background-color);
+          margin: 0px;
+          height: calc(100% - 25px);
+        }
+
+        :host > *:hover [info] {
+          opacity: 1;
+          -webkit-transition: opacity 0.8s;
+          -moz-transition: opacity 0.8s;
+          -o-transition: opacity 0.8s;
+          transition: opacity 0.8s;
+        }
+
+        [draggable='true'] {
+          cursor: grab;
+        }
+
+        @media screen and (max-width: 800px), screen and (max-height: 600px) {
+          ox-board-creation-card {
+            display: none;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      creatable: {
+        type: Boolean,
+        attribute: 'creatable'
+      },
+      boards: Array,
+      favorites: Array,
+      groups: Array,
+      group: String,
+      reorderable: {
+        type: Boolean,
+        attribute: 'reorderable'
+      }
+    }
+  }
+
+  draggingItem
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    if (this.reorderable) {
+      this.renderRoot.addEventListener('dragstart', e => {
+        // if (!e.target.getAttribute('draggable')) {
+        //   e.preventDefault()
+        // }
+
+        // this.draggedItem = e.target
+        this.draggedItem = e.target.closest('[card]')
+        e.dataTransfer.setData('text/plain', e.target.innerHTML)
+      })
+
+      this.renderRoot.addEventListener('dragover', e => {
+        e.preventDefault()
+        const targetItem = e.target.closest('[card]')
+        if (targetItem !== this.draggedItem) {
+          const targetRect = targetItem.getBoundingClientRect()
+          const mousePos = e.clientX - targetRect.left
+
+          if (mousePos < targetRect.width / 2) {
+            // 마우스 위치가 아이템 좌측 반절에 있을 때
+            this.renderRoot.insertBefore(this.draggedItem, targetItem)
+          } else {
+            // 마우스 위치가 아이템 우측 반절에 있을 때
+            this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)
+          }
+        }
+      })
+
+      this.renderRoot.addEventListener('drop', e => {
+        e.preventDefault()
+
+        const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))
+          .map(board => board.getAttribute('id'))
+          .filter(Boolean)
+
+        this.dispatchEvent(
+          new CustomEvent('reordered', {
+            detail: {
+              groupId: this.group,
+              boardIds
+            }
+          })
+        )
+      })
+    }
+  }
+
+  render() {
+    var boards = this.boards || []
+
+    return html`
+      ${this.creatable
+        ? html`
+            <ox-board-creation-card
+              .groups=${this.groups}
+              .defaultGroup=${this.group}
+              @create-board=${e => this.onCreateBoard(e)}
+              card
+              create
+            ></ox-board-creation-card>
+          `
+        : html``}
+      ${keyed(
+        Date.now(),
+        boards.map(
+          board =>
+            html`
+              <div card draggable="true" id=${board.id}>
+                <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
+
+                <div name>${board.name}</div>
+                <!-- <div description>${board.description}</div> -->
+
+                <mwc-icon
+                  iconBtn
+                  info
+                  @click=${e => {
+                    this.infoBoard(board.id)
+                    e.preventDefault()
+                  }}
+                  >info</mwc-icon
+                >
+
+                ${(this.favorites || []).includes(board.id)
+                  ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `
+                  : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}
+              </div>
+            `
+        )
+      )}
+    `
+  }
+
+  updated(changes) {
+    var creationCard = this.shadowRoot.querySelector('ox-board-creation-card')
+    if (creationCard) {
+      creationCard.reset()
+    }
+  }
+
+  onCreateBoard(e) {
+    this.dispatchEvent(
+      new CustomEvent('create-board', {
+        detail: e.detail
+      })
+    )
+  }
+
+  infoBoard(boardId) {
+    this.dispatchEvent(
+      new CustomEvent('info-board', {
+        detail: boardId
+      })
+    )
+  }
+
+  async removeFavorite(boardId) {
+    await client.query({
+      query: gql`
+        mutation {
+          deleteFavorite(routing: "${boardId}")
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  async addFavorite(boardId) {
+    await client.query({
+      query: gql`
+        mutation {
+          createFavorite(favorite: {
+            routing: "${boardId}"
+          }) {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  async refreshFavorites() {
+    this.dispatchEvent(new CustomEvent('refresh-favorites'))
+  }
+}
+
+window.customElements.define('board-tile-list', BoardTileList)

package/client/board-list/group-bar.ts

@@ -0,0 +1,148 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import ScrollBooster from 'scrollbooster'
+
+import { longpressable } from '@things-factory/utils'
+
+@customElement('group-bar')
+export default class GroupBar extends LitElement {
+  static styles = [
+    css`
+      :host {
+        background-color: var(--group-bar-background-color);
+
+        overflow-x: hidden;
+      }
+
+      ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+      }
+
+      li {
+        display: inline-block;
+        padding: 0px 3px;
+
+        border-bottom: var(--group-bar-line);
+      }
+
+      li[active] {
+        border-color: var(--group-bar-active-line-color);
+      }
+
+      li a {
+        display: block;
+        padding: 5px 4px 1px 4px;
+        text-decoration: none;
+        font: var(--group-bar-textbutton);
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      li[active] a {
+        font: var(--group-bar-textbutton-active);
+        color: rgba(255, 255, 255, 1);
+      }
+
+      li[padding] {
+        flex: 1;
+      }
+
+      li[add] {
+        padding: 5px 4px 1px 4px;
+      }
+
+      li[add] * {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      mwc-icon {
+        vertical-align: middle;
+      }
+    `
+  ]
+
+  @property({ type: Array }) groups?: any[]
+  @property({ type: String }) groupId?: string
+  @property({ type: String }) targetPage?: string
+
+  private __sb?: ScrollBooster
+
+  render() {
+    return html`
+      <ul>
+        <li ?active=${!this.groupId}>
+          <a href=${this.targetPage || ''}><mwc-icon>dashboard</mwc-icon></a>
+        </li>
+
+        <li ?active=${this.groupId === 'favor'}>
+          <a href="${this.targetPage}/favor"><mwc-icon>star</mwc-icon></a>
+        </li>
+
+        ${(this.groups || []).map(
+          group => html`
+            <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>
+              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
+            </li>
+          `
+        )}
+
+        <li padding></li>
+
+        <li add>
+          <mwc-icon @click=${e => this.infoGroup()}>add</mwc-icon>
+        </li>
+      </ul>
+    `
+  }
+
+  infoGroup(groupId?: string) {
+    this.dispatchEvent(
+      new CustomEvent('info-group', {
+        detail: groupId
+      })
+    )
+  }
+
+  onWheelEvent(e) {
+    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
+    this.scrollLeft -= delta * 40
+
+    e.preventDefault()
+  }
+
+  updated(change) {
+    if (change.has('groups')) {
+      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
+      this.__sb && this.__sb.updateMetrics()
+    }
+
+    if (change.has('groupId')) {
+      var active = this.renderRoot.querySelector('li[active]')
+      active && active.scrollIntoView()
+    }
+  }
+
+  firstUpdated() {
+    var scrollTarget = this.renderRoot.querySelector('ul')
+
+    /* long-press */
+    longpressable(scrollTarget)
+
+    scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
+
+    this.__sb = new ScrollBooster({
+      viewport: this,
+      content: scrollTarget,
+      mode: 'x',
+      onUpdate: data => {
+        this.scrollLeft = data.position.x
+      }
+    })
+  }
+}