@things-factory/board-ui 6.1.197 → 6.2.5

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

@@ -112,6 +112,7 @@ export class BoardTileList extends LitElement {
   @property({ type: Array }) favorites: any[] = []
   @property({ type: Array }) groups: any[] = []
   @property({ type: String }) group?: string
+  @property({ type: String, attribute: 'search-text' }) searchText?: string
   @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false
 
   private draggedItem

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

@@ -1,6 +1,6 @@
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, nothing, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import ScrollBooster from 'scrollbooster'
@@ -70,6 +70,7 @@ export default class GroupBar extends LitElement {
   @property({ type: Array }) groups?: any[]
   @property({ type: String }) groupId?: string
   @property({ type: String }) targetPage?: string
+  @property({ type: Boolean, attribute: true }) creatable?: boolean
 
   private __sb?: ScrollBooster
 
@@ -84,6 +85,11 @@ export default class GroupBar extends LitElement {
           <a href="${this.targetPage}/favor"><mwc-icon>star</mwc-icon></a>
         </li>
 
+        ${this.creatable
+          ? html`<li ?active=${this.groupId === 'mywork'}>
+              <a href="${this.targetPage}/mywork"><mwc-icon>engineering</mwc-icon></a>
+            </li>`
+          : nothing}
         ${(this.groups || []).map(
           group => html`
             <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>

package/client/graphql/index.ts

@@ -2,3 +2,4 @@ export * from './board'
 export * from './group'
 export * from './play-group'
 export * from './favorite-board'
+export * from './my-board'

package/client/graphql/my-board.ts

@@ -0,0 +1,25 @@
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
+import { gqlBuilder } from '@things-factory/utils'
+
+export async function fetchMyBoardList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        boardsCreatedByMe(${gqlBuilder.buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}

package/client/pages/{board-list-page.js → board-list-page.ts}

@@ -6,6 +6,7 @@ import '../board-list/group-bar'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
@@ -28,58 +29,75 @@ import {
   deleteGroup,
   fetchBoardList,
   fetchFavoriteBoardList,
+  fetchMyBoardList,
   fetchGroupList,
   updateBoard,
   updateGroup,
   importBoards
 } from '../graphql'
 
-class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(PageView))) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-
-          overflow: hidden;
-        }
+@customElement('board-list-page')
+export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(PageView))) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        overflow: hidden;
+      }
 
-        board-tile-list {
-          flex: 1;
-          overflow-y: auto;
-        }
+      board-tile-list {
+        flex: 1;
+        overflow-y: auto;
+      }
 
-        #create {
-          position: absolute;
-          bottom: 15px;
-          right: 16px;
-        }
-      `
-    ]
-  }
+      #create {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      groupId: String,
-      groups: Array,
-      boards: Array,
-      favorites: Array,
-      boardPermissions: Array,
-      _page: Number,
-      _total: Number
-    }
-  }
+  @property({ type: String }) groupId?: String
+  @property({ type: Array }) groups: any[] = []
+  @property({ type: Array }) boards: any[] = []
+  @property({ type: Array }) favorites: any[] = []
+  @property({ type: Array }) boardPermissions: any[] = []
+
+  @state() searchText: string = ''
+
+  @query('board-tile-list') scrollTargetEl!: HTMLElement
+
+  private _page: number = 1
+  private _total: number = 0
+
+  private page?: string
 
   get context() {
-    var group = this.groups && this.groups.find(group => group.id === this.groupId)
+    var groupId = this.groupId
+    var group = this.groups && this.groups.find(group => group.id === groupId)
 
     return {
       title: {
         icon: 'dashboard',
-        text: group ? group.name : 'Board List'
+        text: group
+          ? 'Group ' + group.name
+          : groupId == 'favor'
+          ? 'Favorite'
+          : groupId == 'mywork'
+          ? 'My works'
+          : 'Board List'
+      },
+      search: {
+        handler: search => {
+          this.searchText = search
+          this.refreshBoards()
+        },
+        value: this.searchText || ''
       },
       board_topmenu: true
     }
@@ -88,9 +106,6 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
   constructor() {
     super()
 
-    this._page = 1
-    this._total = 0
-
     this._infiniteScrollOptions.limit = 50
   }
 
@@ -101,6 +116,7 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
         .groupId=${this.groupId}
         targetPage="board-list"
         @info-group=${e => this.onInfoGroup(e.detail)}
+        ?creatable=${this.boardPermissions?.includes('Modeller')}
       ></group-bar>
 
       <board-tile-list
@@ -109,6 +125,7 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
         .favorites=${this.favorites}
         .groups=${this.groups}
         .group=${this.groupId}
+        search-text=${this.searchText}
         ?creatable=${this.boardPermissions?.includes('Modeller')}
         @info-board=${e => this.onInfoBoard(e.detail)}
         @scroll=${e => {
@@ -120,10 +137,6 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
     `
   }
 
-  get scrollTargetEl() {
-    return this.shadowRoot.querySelector('board-tile-list')
-  }
-
   async refresh() {
     this.groups = (await fetchGroupList()).groups.items
 
@@ -133,22 +146,38 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
   }
 
   async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-    if (this.groupId && this.groupId == 'favor')
+    if (this.groupId && this.groupId == 'favor') {
       return await this.getFavoriteBoards({
         page,
         limit
       })
+    } else if (this.groupId && this.groupId == 'mywork') {
+      return await this.getMyBoards({
+        page,
+        limit
+      })
+    }
+
+    const filters = [] as any[]
+
+    if (this.groupId) {
+      filters.push({
+        name: 'groupId',
+        operator: 'eq',
+        value: this.groupId
+      })
+    }
+
+    if (this.searchText) {
+      filters.push({
+        name: 'name',
+        operator: 'search',
+        value: '%' + this.searchText + '%'
+      })
+    }
 
     var listParam = {
-      filters: this.groupId
-        ? [
-            {
-              name: 'groupId',
-              operator: 'eq',
-              value: this.groupId
-            }
-          ]
-        : [],
+      filters,
       sortings: [
         {
           name: 'name',
@@ -165,7 +194,18 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
   }
 
   async getFavoriteBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+    const filters = [] as any[]
+
+    if (this.searchText) {
+      filters.push({
+        name: 'name',
+        operator: 'search',
+        value: '%' + this.searchText + '%'
+      })
+    }
+
     var listParam = {
+      filters,
       pagination: {
         page,
         limit
@@ -175,6 +215,28 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
     return (await fetchFavoriteBoardList(listParam)).favoriteBoards
   }
 
+  async getMyBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+    const filters = [] as any[]
+
+    if (this.searchText) {
+      filters.push({
+        name: 'name',
+        operator: 'search',
+        value: '%' + this.searchText + '%'
+      })
+    }
+
+    var listParam = {
+      filters,
+      pagination: {
+        page,
+        limit
+      }
+    }
+
+    return (await fetchMyBoardList(listParam)).boardsCreatedByMe
+  }
+
   async refreshBoards() {
     if (!this.groups) {
       await this.refresh()
@@ -188,10 +250,8 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
 
     this.updateContext()
 
-    var list = this.shadowRoot.querySelector('board-tile-list')
-
-    list.style.transition = ''
-    list.style.transform = `translate3d(0, 0, 0)`
+    this.scrollTargetEl.style.transition = ''
+    this.scrollTargetEl.style.transform = `translate3d(0, 0, 0)`
   }
 
   async appendBoards() {
@@ -218,6 +278,7 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
     if (this.active) {
       this.page = lifecycle.page
       this.groupId = lifecycle.resourceId
+      this.searchText = lifecycle.params?.search || ''
 
       await this.updateComplete
 
@@ -231,10 +292,10 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
   }
 
   firstUpdated() {
-    var list = this.shadowRoot.querySelector('board-tile-list')
+    const list = this.scrollTargetEl
 
     pulltorefresh({
-      container: this.shadowRoot,
+      container: this.renderRoot,
       scrollable: list,
       refresh: () => {
         return this.refresh()
@@ -274,7 +335,11 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
             list.style.transition = 'transform 0.3s'
             list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`
 
-            navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}`)
+            navigate(
+              `${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}${
+                this.searchText ? '?search=' + this.searchText : ''
+              }`
+            )
           }
         }
       }
@@ -503,7 +568,7 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
       })
   }
 
-  _notify(level, message, ex) {
+  _notify(level: 'info' | 'error' | 'warn', message: any, ex?: any) {
     document.dispatchEvent(
       new CustomEvent('notify', {
         detail: {
@@ -515,5 +580,3 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
     )
   }
 }
-
-window.customElements.define('board-list-page', BoardListPage)

package/client/pages/{play-list-page.js → play-list-page.ts}

@@ -6,6 +6,7 @@ import '../board-list/play-group-bar'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { UPDATE_FAVORITES } from '@things-factory/fav-base'
@@ -27,42 +28,41 @@ import {
   updatePlayGroup
 } from '../graphql'
 
-class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-
-          overflow: hidden;
-        }
+@customElement('play-list-page')
+export class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        overflow: hidden;
+      }
 
-        board-tile-list {
-          flex: 1;
-          overflow-y: auto;
-        }
+      board-tile-list {
+        flex: 1;
+        overflow-y: auto;
+      }
 
-        #play {
-          position: absolute;
-          bottom: 15px;
-          right: 16px;
-          text-decoration: auto;
-        }
-      `
-    ]
-  }
+      #play {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      groupId: String,
-      groups: Array,
-      boards: Array,
-      favorites: Array
-    }
-  }
+  @property({ type: String }) groupId?: string
+  @property({ type: Array }) groups: any[] = []
+  @property({ type: Array }) boards: any[] = []
+  @property({ type: Array }) favorites: any[] = []
+
+  @query('board-tile-list') boardTileList!: HTMLElement
+
+  private page?: string
 
   get context() {
     var group = this.groups && this.groups.find(group => group.id === this.groupId)
@@ -116,12 +116,12 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
 
     if (!this.groupId) {
       let groupId = this.groups && this.groups[0] && this.groups[0].id
-      var newURL = new URL(window.location)
+      var newURL = new URL(window.location.href)
 
       newURL.pathname += `/${groupId}`
 
       if (groupId) {
-        navigate(newURL, true)
+        navigate(newURL.href, true)
       }
       return
     }
@@ -135,7 +135,7 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
 
     this.updateContext()
 
-    var list = this.shadowRoot.querySelector('board-tile-list')
+    var list = this.boardTileList
 
     list.style.transition = ''
     list.style.transform = `translate3d(0, 0, 0)`
@@ -161,7 +161,7 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
   }
 
   firstUpdated() {
-    var list = this.shadowRoot.querySelector('board-tile-list')
+    var list = this.boardTileList
 
     pulltorefresh({
       container: this.shadowRoot,
@@ -383,7 +383,7 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
     })
   }
 
-  _notify(level, message, ex) {
+  _notify(level: 'info' | 'warn' | 'error', message: any, ex?: any) {
     document.dispatchEvent(
       new CustomEvent('notify', {
         detail: {
@@ -395,5 +395,3 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
     )
   }
 }
-
-window.customElements.define('play-list-page', PlayListPage)

package/dist-client/board-list/board-tile-list.d.ts

@@ -8,6 +8,7 @@ export declare class BoardTileList extends LitElement {
     favorites: any[];
     groups: any[];
     group?: string;
+    searchText?: string;
     reorderable: boolean;
     private draggedItem;
     connectedCallback(): void;

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

@@ -254,6 +254,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], BoardTileList.prototype, "group", void 0);
+__decorate([
+    property({ type: String, attribute: 'search-text' }),
+    __metadata("design:type", String)
+], BoardTileList.prototype, "searchText", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'reorderable' }),
     __metadata("design:type", Boolean)

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

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

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

@@ -5,6 +5,7 @@ export default class GroupBar extends LitElement {
     groups?: any[];
     groupId?: string;
     targetPage?: string;
+    creatable?: boolean;
     private __sb?;
     render(): import("lit-html").TemplateResult<1>;
     infoGroup(groupId?: string): void;

package/dist-client/board-list/group-bar.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
+import { css, html, nothing, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import ScrollBooster from 'scrollbooster';
 import { longpressable } from '@things-factory/utils';
@@ -16,6 +16,11 @@ let GroupBar = class GroupBar extends LitElement {
           <a href="${this.targetPage}/favor"><mwc-icon>star</mwc-icon></a>
         </li>
 
+        ${this.creatable
+            ? html `<li ?active=${this.groupId === 'mywork'}>
+              <a href="${this.targetPage}/mywork"><mwc-icon>engineering</mwc-icon></a>
+            </li>`
+            : nothing}
         ${(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>
@@ -134,6 +139,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], GroupBar.prototype, "targetPage", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true }),
+    __metadata("design:type", Boolean)
+], GroupBar.prototype, "creatable", void 0);
 GroupBar = __decorate([
     customElement('group-bar')
 ], GroupBar);

package/dist-client/board-list/group-bar.js.map

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

package/dist-client/graphql/index.d.ts

@@ -2,3 +2,4 @@ export * from './board';
 export * from './group';
 export * from './play-group';
 export * from './favorite-board';
+export * from './my-board';