@things-factory/board-ui 8.0.0-beta.9 → 8.0.2

package/client/apptools/favorite-tool.ts

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,272 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,88 @@
+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
+      }
+    })
+  }
+}