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

package/client/pages/board-list-page.ts

@@ -1,603 +0,0 @@
-import '../viewparts/board-info'
-import '../viewparts/group-info'
-import '../board-list/board-tile-list'
-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'
-import { i18next, localize } from '@operato/i18n'
-import { openOverlay } from '@operato/layout'
-import { pulltorefresh } from '@operato/pull-to-refresh'
-import { navigate, PageView, store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'
-import { UPDATE_FAVORITES } from '@things-factory/fav-base/client'
-import { swipe } from '@things-factory/utils/src/index.js'
-
-import {
-  cloneBoard,
-  releaseBoard,
-  revertBoardVersion,
-  createBoard,
-  createGroup,
-  deleteBoard,
-  deleteGroup,
-  fetchBoardList,
-  fetchFavoriteBoardList,
-  fetchMyBoardList,
-  fetchGroupList,
-  updateBoard,
-  updateGroup,
-  importBoards
-} from '../graphql'
-
-@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;
-      }
-
-      #create {
-        position: absolute;
-        bottom: 15px;
-        right: 16px;
-      }
-    `
-  ]
-
-  @property({ type: String }) groupId?: string
-  @property({ type: Array }) groups: any[] = []
-  @property({ type: Array }) boards: any[] = []
-  @property({ type: Array }) favorites: any[] = []
-
-  @state() searchText: string = ''
-
-  @query('board-tile-list') scrollTargetEl!: HTMLElement
-
-  private _page: number = 1
-  private _total: number = 0 /* required for infinite-scrolling */
-
-  private page?: string
-
-  get context() {
-    var groupId = this.groupId
-    var group = this.groups && this.groups.find(group => group.id === groupId)
-
-    return {
-      title: {
-        icon: 'dashboard',
-        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
-    }
-  }
-
-  constructor() {
-    super()
-
-    this._infiniteScrollOptions.limit = 50
-  }
-
-  render() {
-    return html`
-      <group-bar
-        .groups=${this.groups}
-        .groupId=${this.groupId}
-        targetPage="board-list"
-        @info-group=${e => this.onInfoGroup(e.detail)}
-      ></group-bar>
-
-      <board-tile-list
-        id="list"
-        .boards=${this.boards}
-        .favorites=${this.favorites}
-        .groups=${this.groups}
-        .group=${this.groupId}
-        search-text=${this.searchText}
-        @info-board=${e => this.onInfoBoard(e.detail)}
-        @scroll=${e => {
-          this.onScroll(e)
-        }}
-        @create-board=${e => this.onCreateBoard(e.detail)}
-        @refresh-favorites=${e => this.refreshFavorites()}
-        creatable
-      ></board-tile-list>
-    `
-  }
-
-  async refresh() {
-    this.groups = (await fetchGroupList()).groups.items
-
-    if (this.groups) {
-      await this.refreshBoards()
-    }
-  }
-
-  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-    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,
-      sortings: [
-        {
-          name: 'name',
-          desc: false
-        }
-      ],
-      pagination: {
-        page,
-        limit
-      }
-    }
-
-    return (await fetchBoardList(listParam)).boards
-  }
-
-  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
-      }
-    }
-
-    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()
-      return
-    }
-
-    var { items: boards, total } = await this.getBoards()
-    this.boards = boards
-    this._page = 1
-    this._total = total
-
-    this.updateContext()
-
-    this.scrollTargetEl.style.transition = ''
-    this.scrollTargetEl.style.transform = `translate3d(0, 0, 0)`
-  }
-
-  async appendBoards() {
-    if (!this.groups) {
-      await this.refresh()
-      return
-    }
-
-    var { items: boards, total } = await this.getBoards({ page: this._page + 1 })
-    this.boards = [...this.boards, ...boards]
-    this._page = this._page + 1
-    this._total = total
-  }
-
-  async scrollAction() {
-    return this.appendBoards()
-  }
-
-  async pageInitialized() {
-    this.refresh()
-  }
-
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      this.page = lifecycle.page
-      this.groupId = lifecycle.resourceId
-      this.searchText = lifecycle.params?.search || ''
-
-      await this.updateComplete
-
-      this.refreshBoards()
-    }
-  }
-
-  stateChanged(state) {
-    this.favorites = state.favorite.favorites
-  }
-
-  firstUpdated() {
-    const list = this.scrollTargetEl
-
-    pulltorefresh({
-      container: this.renderRoot,
-      scrollable: list,
-      refresh: () => {
-        return this.refresh()
-      }
-    })
-
-    swipe({
-      container: list,
-      animates: {
-        dragging: async (d, opts) => {
-          var groups = [{ id: '' }, { id: 'favor' }, ...this.groups]
-          var currentIndex = groups.findIndex(group => group.id == this.groupId)
-
-          if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
-            /* TODO blocked gesture */
-            return false
-          }
-
-          list.style.transform = `translate3d(${d}px, 0, 0)`
-        },
-        aborting: async opts => {
-          list.style.transition = 'transform 0.3s'
-          list.style.transform = `translate3d(0, 0, 0)`
-
-          setTimeout(() => {
-            list.style.transition = ''
-          })
-        },
-        swiping: async (d, opts) => {
-          var groups = [{ id: '' }, { id: 'favor' }, ...this.groups]
-          var currentIndex = groups.findIndex(group => group.id == this.groupId)
-
-          if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
-            list.style.transition = ''
-            list.style.transform = `translate3d(0, 0, 0)`
-          } else {
-            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}${this.searchText ? '?search=' + this.searchText : ''}`
-            )
-          }
-        }
-      }
-    })
-  }
-
-  async onInfoBoard(board) {
-    openOverlay('viewpart-info', {
-      template: html`
-        <board-info
-          .board=${board}
-          .groupId=${this.groupId}
-          @clone-board=${e => this.onCloneBoard(e.detail)}
-          @release-board=${e => this.onReleaseBoard(e.detail)}
-          @revert-board-version=${e => this.onRevertBoardVersion(e.detail)}
-          @update-board=${e => this.onUpdateBoard(e.detail)}
-          @delete-board=${e => this.onDeleteBoard(e.detail)}
-          @join-playgroup=${e => this.onJoinPlayGroup(e.detail)}
-          @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}
-          @register-template=${e => this.onRegisterTemplate(e.detail)}
-        ></board-info>
-      `
-    })
-  }
-
-  async onInfoGroup(groupId) {
-    openOverlay('viewpart-info', {
-      template: html`
-        <group-info
-          .groupId=${groupId}
-          @update-group=${e => this.onUpdateGroup(e.detail)}
-          @delete-group=${e => this.onDeleteGroup(e.detail)}
-          @create-group=${e => this.onCreateGroup(e.detail)}
-          @import-boards=${e => this.onImportBoards(e.detail)}
-        ></group-info>
-      `
-    })
-  }
-
-  async onCreateGroup(group) {
-    try {
-      const data = await createGroup(group)
-      data && this._notify('info', i18next.t('text.group created', { group: group.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refresh()
-  }
-
-  async onUpdateGroup(group) {
-    try {
-      const data = await updateGroup(group)
-      data && this._notify('info', i18next.t('text.group updated', { group: group.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refresh()
-  }
-
-  async onDeleteGroup(group) {
-    try {
-      const data = await deleteGroup(group.id)
-      data && this._notify('info', i18next.t('text.group deleted', { group: group.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refresh()
-  }
-
-  async onImportBoards({ group, files, overwrite }) {
-    try {
-      const data = await importBoards({ groupId: group.id, files, overwrite })
-      data && this._notify('info', i18next.t('text.boards imported', { count: files.length, group: group.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refresh()
-  }
-
-  async onCreateBoard(board) {
-    try {
-      if (!board.model) {
-        board.model = {
-          width: 800,
-          height: 600
-        }
-      }
-
-      const data = await createBoard(board)
-
-      data && this._notify('info', i18next.t('text.board created', { board: board.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refreshBoards()
-  }
-
-  async onCloneBoard({ id, name, description, targetSubdomain, targetGroupId }) {
-    try {
-      const data = await cloneBoard({
-        id,
-        name,
-        description,
-        targetSubdomain,
-        targetGroupId
-      })
-      data && this._notify('info', i18next.t('text.board cloned', { board: name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refreshBoards()
-  }
-
-  async onReleaseBoard(board) {
-    try {
-      const data = await releaseBoard(board)
-      data && this._notify('info', i18next.t('text.board released', { board: board.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refreshBoards()
-  }
-
-  async onRevertBoardVersion({ id, version }) {
-    try {
-      const board = await revertBoardVersion(id, version)
-      board && this._notify('info', i18next.t('text.board reverted', { board: board.name, version }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refreshBoards()
-  }
-
-  async onUpdateBoard(board) {
-    try {
-      const data = await updateBoard(board)
-      data && this._notify('info', i18next.t('text.board updated', { board: board.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refreshBoards()
-  }
-
-  async onDeleteBoard(board) {
-    try {
-      const data = await deleteBoard(board.id)
-      data && this._notify('info', i18next.t('text.board deleted', { board: board.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-
-    this.refreshBoards()
-  }
-
-  async onJoinPlayGroup({ board, playGroup }) {
-    try {
-      const { data } = await client.mutate({
-        mutation: gql`
-          mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
-            joinPlayGroup(id: $id, boardIds: $boardIds) {
-              id
-            }
-          }
-        `,
-        variables: {
-          id: playGroup.id,
-          boardIds: [board.id]
-        }
-      })
-
-      data &&
-        this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-  }
-
-  async onLeavePlayGroup({ board, playGroup }) {
-    try {
-      const { data } = await client.mutate({
-        mutation: gql`
-          mutation ($id: String!, $boardIds: [String!]!) {
-            leavePlayGroup(id: $id, boardIds: $boardIds) {
-              id
-            }
-          }
-        `,
-        variables: {
-          id: playGroup.id,
-          boardIds: [board.id]
-        }
-      })
-
-      data &&
-        this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }))
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-  }
-
-  async onRegisterTemplate({ id, name, description, visibility }) {
-    try {
-      const { data } = await client.mutate({
-        mutation: gql`
-          mutation ($id: String!, $name: String!, $description: String!, $visibility: String!) {
-            registerBoardAsTemplate(id: $id, name: $name, description: $description, visibility: $visibility) {
-              id
-            }
-          }
-        `,
-        variables: {
-          id,
-          name,
-          description,
-          visibility
-        }
-      })
-
-      data &&
-        this._notify('info', i18next.t('text.info_x_successfully', { x: i18next.t('text.register-template') }), {
-          name
-        })
-    } catch (ex) {
-      this._notify('error', ex, ex)
-    }
-  }
-
-  async refreshFavorites() {
-    const { data } = await client.query({
-      query: gql`
-        query {
-          myFavorites {
-            id
-            routing
-          }
-        }
-      `
-    })
-
-    data &&
-      store.dispatch({
-        type: UPDATE_FAVORITES,
-        favorites: data.myFavorites.map(favorite => favorite.routing)
-      })
-  }
-
-  _notify(level: 'info' | 'error' | 'warn', message: any, ex?: any) {
-    document.dispatchEvent(
-      new CustomEvent('notify', {
-        detail: {
-          level,
-          message,
-          ex
-        }
-      })
-    )
-  }
-}