@things-factory/board-ui 8.0.0-beta.1 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -41,9 +41,9 @@
     "@operato/shell": "^8.0.0-beta",
     "@operato/styles": "^8.0.0-beta",
     "@operato/utils": "^8.0.0-beta",
-    "@things-factory/barcode-base": "^8.0.0-beta.1",
-    "@things-factory/fav-base": "^8.0.0-beta.1",
-    "@things-factory/utils": "^8.0.0-beta.1"
+    "@things-factory/barcode-base": "^8.0.0-beta.2",
+    "@things-factory/fav-base": "^8.0.0-beta.2",
+    "@things-factory/utils": "^8.0.0-beta.2"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/apptools/favorite-tool.ts

@@ -1,124 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } 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/client'
-
-@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`
-          <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
-            >${this.favored ? 'star' : 'star_border'}</md-icon
-          >
-        `
-      : nothing
-  }
-
-  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-tile-list.ts

@@ -1,272 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/board/ox-board-creation-card.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, PropertyValues, nothing } from 'lit'
-import { customElement, property, state, query } from 'lit/decorators.js'
-import { keyed } from 'lit/directives/keyed.js'
-
-import { client } from '@operato/graphql'
-
-import { privileged } from '@things-factory/auth-base/dist-client'
-
-@customElement('board-tile-list')
-export class BoardTileList extends LitElement {
-  static styles = [
-    css`
-      :host {
-        overflow: auto;
-        padding: var(--popup-content-padding);
-        display: grid;
-        background-color: var(--md-sys-color-background);
-
-        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-        grid-auto-rows: var(--card-list-rows-height);
-        grid-gap: 20px;
-      }
-
-      [card] {
-        position: relative;
-        align-items: center;
-        overflow: hidden;
-      }
-
-      [card][create] {
-        overflow: visible;
-        background-color: initial;
-      }
-
-      [card] > a {
-        display: flex;
-        clip-path: border-box;
-      }
-
-      [card]:hover {
-        cursor: pointer;
-      }
-
-      [name] {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        margin-top: var(--spacing-small);
-        width: calc(100% - 45px);
-        color: var(--md-sys-color-on-background);
-        font-weight: bolder;
-        font-size: var(--fontsize-small);
-      }
-
-      img {
-        flex: 1;
-        object-fit: contain;
-      }
-
-      md-icon[iconBtn] {
-        float: right;
-        margin-top: -20px;
-        margin-left: 2px;
-        color: var(--board-list-star-color);
-        font-size: 1.4em;
-      }
-      md-icon[info] {
-        color: var(--md-sys-color-primary);
-      }
-
-      md-icon[iconBtn][favored],
-      md-icon[info]:hover {
-        color: var(--board-list-star-active-color);
-      }
-
-      a {
-        display: block;
-        border-radius: var(--card-list-border-radius);
-        border: var(--border-dim-color);
-        box-sizing: border-box;
-        color: var(--card-list-color);
-        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;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) boards: any[] = []
-  @property({ type: Array }) favorites: any[] = []
-  @property({ type: Array }) groups: any[] = []
-  @property({ type: String }) group?: string
-  @property({ type: Boolean }) creatable?: boolean = false
-  @property({ type: String, attribute: 'search-text' }) searchText?: string
-  @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false
-
-  private draggedItem
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (this.reorderable) {
-      this.renderRoot.addEventListener('dragstart', (e: Event) => {
-        const target = e.target! as HTMLElement
-        this.draggedItem = target.closest('[card]')
-        ;(e as DragEvent).dataTransfer?.setData('text/plain', target.innerHTML)
-      })
-
-      this.renderRoot.addEventListener('dragover', (e: Event) => {
-        e.preventDefault()
-
-        const target = e.target! as HTMLElement
-        const targetItem = target.closest('[card]')
-        if (targetItem && targetItem !== this.draggedItem) {
-          const targetRect = targetItem.getBoundingClientRect()
-          const mousePos = (e as DragEvent).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: Event) => {
-        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
-        ? privileged(
-            { privilege: 'mutation', category: 'board' },
-            html`
-              <ox-board-creation-card
-                .groups=${this.groups}
-                .defaultGroup=${this.group}
-                @create-board=${e => this.onCreateBoard(e)}
-                card
-                create
-              ></ox-board-creation-card>
-            `
-          )
-        : nothing}
-      ${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> -->
-
-              <md-icon
-                iconBtn
-                info
-                @click=${e => {
-                  this.infoBoard(board)
-                  e.preventDefault()
-                }}
-                >info</md-icon
-              >
-
-              ${(this.favorites || []).includes(board.id)
-                ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `
-                : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}
-            </div>
-          `
-        )
-      )}
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    var creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any
-    if (creationCard) {
-      creationCard.reset()
-    }
-  }
-
-  onCreateBoard(e) {
-    this.dispatchEvent(
-      new CustomEvent('create-board', {
-        detail: e.detail
-      })
-    )
-  }
-
-  infoBoard(board) {
-    this.dispatchEvent(
-      new CustomEvent('info-board', {
-        detail: board
-      })
-    )
-  }
-
-  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'))
-  }
-}

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

@@ -1,63 +0,0 @@
-import { css } from 'lit'
-
-export const GroupBarStyles = css`
-  :host {
-    background-color: var(--group-bar-background-color);
-
-    overflow-x: hidden;
-  }
-
-  ul {
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    box-sizing: border-box;
-    border-bottom: var(--group-bar-line);
-    align-self: auto;
-    min-height: 43px;
-    padding: 4px 8px;
-
-    * {
-      vertical-align: middle;
-    }
-
-    a {
-      display: block;
-      text-decoration: none;
-      font: var(--group-bar-textbutton);
-      color: var(--md-sys-color-on-secondary-container);
-      opacity: 0.8;
-    }
-
-    a md-icon {
-      font-variation-settings: 'FILL' 1;
-    }
-
-    &[active] {
-      border-color: var(--group-bar-active-line-color);
-
-      a {
-        font: var(--group-bar-textbutton-active);
-        opacity: 1;
-      }
-    }
-
-    &[padding] {
-      flex: 1;
-    }
-
-    &[add] * {
-      color: var(--md-sys-color-on-secondary-container);
-    }
-  }
-`

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

@@ -1,99 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import ScrollBooster from 'scrollbooster'
-
-import { longpressable } from '@operato/utils'
-import { privileged } from '@things-factory/auth-base/dist-client'
-import { GroupBarStyles } from './group-bar-styles'
-
-@customElement('group-bar')
-export default class GroupBar extends LitElement {
-  static styles = [GroupBarStyles]
-
-  @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 || ''}><md-icon>dashboard</md-icon></a>
-        </li>
-
-        <li ?active=${this.groupId === 'favor'}>
-          <a href="${this.targetPage}/favor"><md-icon>star</md-icon></a>
-        </li>
-
-        ${privileged(
-          { privilege: 'mutation', category: 'board' },
-          html`<li ?active=${this.groupId === 'mywork'}>
-            <a href="${this.targetPage}/mywork"><md-icon>engineering</md-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>
-          <md-icon @click=${e => this.infoGroup()}>add</md-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
-      }
-    })
-  }
-}

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

@@ -1,88 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import ScrollBooster from 'scrollbooster'
-
-import { longpressable } from '@operato/utils'
-import { GroupBarStyles } from './group-bar-styles'
-
-@customElement('play-group-bar')
-export default class PlayGroupBar extends LitElement {
-  static styles = [GroupBarStyles]
-
-  @property({ type: Array }) groups: { id: string; name: string }[] = []
-  @property({ type: String }) groupId: string = ''
-  @property({ type: String, attribute: 'target-page' }) targetPage: string = ''
-
-  private __sb?: ScrollBooster
-
-  render() {
-    return html`
-      <ul>
-        ${(this.groups || []).map(
-          group => html`
-            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>
-              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
-            </li>
-          `
-        )}
-
-        <li padding>&nbsp;</li>
-
-        <li add>
-          <md-icon @click=${e => this._infoGroup()}>add</md-icon>
-        </li>
-      </ul>
-    `
-  }
-
-  _infoGroup(group?: { id: string; name: string }) {
-    this.dispatchEvent(
-      new CustomEvent('info-play-group', {
-        detail: group
-      })
-    )
-  }
-
-  _onWheelEvent(e) {
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  _onClickAdd(e) {
-    // TODO Implements
-  }
-
-  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
-      }
-    })
-  }
-}