@things-factory/board-ui 8.0.0 → 9.0.0-beta.3

package/translations/zh.json

@@ -1,4 +1,5 @@
 {
+  "EDIT": "编辑",
   "button.accept": "同意",
   "button.account": "账户",
   "button.add": "添加",
@@ -79,45 +80,44 @@
   "button.view-short": "查看",
   "button.zoom-in": "放大",
   "button.zoom-out": "缩小",
+  "component.audio": "音频",
+  "component.both arrow": "双向箭头",
+  "component.color image": "彩色图像",
   "component.container": "容器",
-  "component.popup": "弹出窗口",
-  "component.info-window": "信息窗口",
-  "component.local-ref": "本地引用",
+  "component.dash": "虚线",
+  "component.donut": "圆环",
+  "component.ellipse": "椭圆",
+  "component.embed": "嵌入",
+  "component.gif image": "GIF图像",
+  "component.gif-view": "GIF视图",
   "component.global-ref": "全球引用",
+  "component.gray image": "灰色图像",
   "component.group": "组",
+  "component.image-view": "图像视图",
+  "component.info-window": "信息窗口",
   "component.line": "线条",
-  "component.dash": "虚线",
-  "component.single arrow": "单箭头",
-  "component.both arrow": "双向箭头",
-  "component.polyline": "多段线",
+  "component.local-ref": "本地引用",
+  "component.model-layer": "画布",
   "component.ortholine": "正交线",
-  "component.rect": "矩形",
-  "component.ellipse": "椭圆",
-  "component.donut": "圆环",
-  "component.triangle": "三角形",
   "component.polygon": "多边形",
+  "component.polyline": "多段线",
+  "component.popup": "弹出窗口",
+  "component.rect": "矩形",
+  "component.single arrow": "单箭头",
   "component.star": "星形",
   "component.text": "文本",
-  "component.color image": "彩色图像",
-  "component.gray image": "灰色图像",
-  "component.image-view": "图像视图",
-  "component.gif image": "GIF图像",
-  "component.gif-view": "GIF视图",
-  "component.audio": "音频",
+  "component.triangle": "三角形",
   "component.video": "视频",
-  "component.embed": "嵌入",
-  "component.model-layer": "画布",
-  "EDIT": "编辑",
+  "error.MAX_LENGTH_OF_X_IS_Y": "{name}的最大长度是 {value}。",
+  "error.SERVER-ERROR": "发生了服务端错误。({msg})",
+  "error.SHOULD_NOT_BE_EMPTY": "值'{value}'不能为空值。",
   "error.count over license limit": "您的看板或子域数量超过了许可证限制！",
   "error.invalid license key": "无效的许可证密钥！",
   "error.license expiration notice": "许可证到期提醒",
   "error.license key is empty": "许可证密钥为空！",
   "error.license key is not certified": "许可证密钥未通过认证！",
   "error.license token not valid": "您的数据密钥验证失败，系统许可无效！",
-  "error.MAX_LENGTH_OF_X_IS_Y": "{name}的最大长度是 {value}。",
-  "error.SERVER-ERROR": "发生了服务端错误。({msg})",
   "error.setting-error": "设置错误",
-  "error.SHOULD_NOT_BE_EMPTY": "值'{value}'不能为空值。",
   "error.your license due date is x, please renewal your license!": "您的许可证到期日期为{x}，请续订您的许可证！",
   "error.your license is expired! expired date is [x]": "您的许可证已过期！ 过期日为[{x}]",
   "error.your license is not valid in this host": "您的许可证在此主机中无效！",
@@ -240,6 +240,7 @@
   "label.domain-url": "域地址",
   "label.domain_app": "域应用程序",
   "label.donut-style": "圆环样式",
+  "label.draggable": "可拖动",
   "label.duration": "持续期间",
   "label.email": "邮件",
   "label.email-id": "邮件ID",
@@ -351,6 +352,7 @@
   "label.min": "最小",
   "label.min-section": "最小段",
   "label.min-unit": "最小单位",
+  "label.minimizable": "可最小化",
   "label.minor": "次要",
   "label.minute-width": "分针厚度",
   "label.miter": "斜边",
@@ -603,6 +605,12 @@
   "menu.variables": "变量",
   "scene.scene-height": "标签高(Pixel)",
   "scene.scene-width": "标签宽(Pixel)",
+  "text.NOTHING_CHANGED": "没有新的更新。",
+  "text.New Alarm Message is Arrived.": "新报警到达！",
+  "text.Server Processing": "执行服务中..",
+  "text.Success to Process": "执行成功",
+  "text.Sure To Delete Important": "所有相关数据都会被删除，请确认是否删除？",
+  "text.Sure to X": "确定要{x}吗？",
   "text.add_files": "添加文件",
   "text.board cloned": "看板 '{board}' 已成功克隆",
   "text.board created": "看板 '{board}' 创建成功",
@@ -655,9 +663,7 @@
   "text.modeller-save-title": "保存：版本报警",
   "text.move-to-home": "将会移动到主页。",
   "text.name-and-group-required": "请指定仪表盘名称和仪表盘组！",
-  "text.New Alarm Message is Arrived.": "新报警到达！",
   "text.no released version information available": "没有发布版本信息可用",
-  "text.NOTHING_CHANGED": "没有新的更新。",
   "text.only-edit-status-label-can-be-deleted": "只有EDIT状态的标签才可以删除！",
   "text.only-edit-status-label-can-be-saved": "只有EDIT状态的标签才可以更改！",
   "text.password-missmatch": "新密码与确认密码不同",
@@ -680,13 +686,9 @@
   "text.saved": "已保存",
   "text.search with type, id or tag": "通过类型、ID或标签名搜索",
   "text.select_file": "选择文件",
-  "text.Server Processing": "执行服务中..",
   "text.server_unavailable": "服务器无法链接",
   "text.settings-already-done": "已有设置。",
   "text.stalled": "停滞",
-  "text.Success to Process": "执行成功",
-  "text.Sure To Delete Important": "所有相关数据都会被删除，请确认是否删除？",
-  "text.Sure to X": "确定要{x}吗？",
   "text.sure-delete-domain": "所有相关数据都会被删除，请确认是否删除？",
   "text.sure-delete-domain-final": "将会删除所有相关数据。是否继续进行删除？",
   "text.sure-to-delete": "是否执行删除操作？",

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
-      }
-    })
-  }
-}