@operato/board 8.0.0-alpha.9 → 8.0.0-beta.1

package/src/selector/board-thumbnail-card.ts

@@ -1,175 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-
-@customElement('board-thumbnail-card')
-export class BoardThumbnailCard extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-
-          padding: 0;
-          margin: 0;
-          height: 100%;
-
-          -webkit-transform-style: preserve-3d;
-          transform-style: preserve-3d;
-          -webkit-transition: all 0.5s ease-in-out;
-          transition: all 0.5s ease-in-out;
-        }
-
-        :host(.flipped) {
-          -webkit-transform: var(--card-list-flip-transform);
-          transform: var(--card-list-flip-transform);
-        }
-
-        [front],
-        [back] {
-          position: absolute;
-
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          padding: 0;
-
-          border: var(--card-list-create-border);
-          border-radius: var(--card-list-create-border-radius);
-
-          background-color: var(--md-sys-color-surface);
-
-          -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-        }
-
-        [front] {
-          text-align: center;
-          font-size: 0.8em;
-          color: var(--card-list-create-color);
-          text-transform: capitalize;
-        }
-
-        [front] md-icon {
-          margin-top: 15%;
-          display: block;
-          font-size: 3.5em;
-          color: var(--card-list-create-icon-color);
-        }
-
-        [back] {
-          -webkit-transform: var(--card-list-flip-transform);
-          transform: var(--card-list-flip-transform);
-        }
-
-        [back] form {
-          padding: var(--card-list-create-form-padding);
-          display: flex;
-          flex-flow: row wrap;
-        }
-
-        [back] form label {
-          flex: 1 1 25%;
-          font: var(--card-list-create-label-font);
-          color: var(--card-list-create-label-color);
-        }
-
-        [back] form input,
-        [back] form select {
-          flex: 1 1 60%;
-          width: 10px;
-          background-color: var(--md-sys-color-surface);
-          border: var(--card-list-create-input-border);
-          border-radius: var(--card-list-create-input-border-radius);
-          padding: var(--card-list-create-input-padding);
-          font: var(--card-list-create-input-font);
-          color: var(--card-list-create-input-color);
-        }
-
-        form * {
-          margin: var(--card-list-create-margin);
-        }
-
-        input[type='submit'] {
-          background-color: var(--button-background-color) !important;
-          margin: var(--button-margin);
-          font: var(--button-font);
-          color: var(--button-color) !important;
-          border-radius: var(--button-radius);
-          border: var(--button-border);
-        }
-      `
-    ]
-  }
-
-  @property({ type: String }) defaultGroup?: string
-  @property({ type: Array }) groups?: { id: string; name: string }[]
-
-  render() {
-    var groups = this.groups || []
-
-    return html`
-      <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create board</div>
-
-      <div @click=${(e: Event) => this.onClickFlip(e)} back>
-        <form @submit=${(e: Event) => this.onClickSubmit(e)}>
-          <label>${i18next.t('label.name')}</label>
-          <input type="text" name="name" />
-
-          <label>${i18next.t('label.description')}</label>
-          <input type="text" name="description" />
-
-          <label>${i18next.t('label.group')}</label>
-          <select .value=${this.defaultGroup || ''} name="groupId">
-            ${groups.map(
-              group => html`
-                <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>
-              `
-            )}
-          </select>
-
-          <input type="submit" value=${String(i18next.t('button.create'))} />
-        </form>
-      </div>
-    `
-  }
-
-  onClickFlip(e: Event) {
-    if ((e.currentTarget as any)?.hasAttribute('front') || (e.target as any)?.hasAttribute('back')) {
-      this.classList.toggle('flipped')
-    }
-
-    e.stopPropagation()
-  }
-
-  onClickSubmit(e: Event) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    var form = e.target as any
-
-    var name = form.elements['name'].value
-    var description = form.elements['description'].value
-    var groupId = form.elements['groupId'].value
-
-    this.dispatchEvent(
-      new CustomEvent('create-board', {
-        detail: {
-          name,
-          description,
-          groupId
-        }
-      })
-    )
-  }
-
-  reset() {
-    var form = this.shadowRoot?.querySelector('form')
-    if (form) {
-      form.reset()
-    }
-
-    this.classList.remove('flipped')
-  }
-}

package/src/selector/ox-board-creation-card.ts

@@ -1,98 +0,0 @@
-import '@material/web/icon/icon.js'
-import './board-creation-popup'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-board-creation-card')
-export class BoardCreationCard extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          border: var(--card-list-create-border);
-          border-radius: var(--card-list-create-border-radius);
-
-          background-color: var(--md-sys-color-surface);
-
-          align-content: center;
-          justify-content: center;
-        }
-
-        div {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
-          font-size: 0.8em;
-          color: var(--card-list-create-color);
-          text-transform: capitalize;
-        }
-
-        md-icon {
-          --md-icon-size: 42px;
-          display: block;
-          font-size: 3.5em;
-          color: var(--card-list-create-icon-color);
-        }
-      `
-    ]
-  }
-
-  /* default group id */
-  @property({ type: String }) defaultGroup?: string
-  @property({ type: Array }) groups: any
-
-  private popup: any
-
-  render() {
-    return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create board</div> `
-  }
-
-  onClick() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var template = html`
-      <board-creation-popup
-        .defaultGroup=${this.defaultGroup}
-        .groups=${this.groups}
-        @create-board=${async (e: CustomEvent) => {
-          var { name, description, groupId, model, thumbnail } = e.detail
-
-          this.dispatchEvent(
-            new CustomEvent('create-board', {
-              detail: {
-                name,
-                description,
-                groupId,
-                model,
-                thumbnail
-              }
-            })
-          )
-
-          this.popup && this.popup.close()
-        }}
-      ></board-creation-popup>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.create-board')
-    })
-  }
-
-  reset() {}
-}

package/src/selector/ox-board-selector.ts

@@ -1,382 +0,0 @@
-import '@operato/input/ox-input-search.js'
-import './ox-board-creation-card'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'
-import { InheritedValueType } from '@operato/shell'
-import { adjustFilters } from '@operato/utils'
-
-const FETCH_BOARD_LIST_GQL = gql`
-  query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {
-    boards(filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {
-      items {
-        id
-        name
-        description
-        thumbnail
-      }
-      total
-    }
-  }
-`
-
-const FETCH_BOARD_GROUP_LIST_GQL = gql`
-  {
-    groups {
-      items {
-        id
-        name
-        description
-      }
-      total
-    }
-  }
-`
-
-const CREATE_BOARD_GQL = gql`
-  mutation CreateBoard($board: NewBoard!) {
-    createBoard(board: $board) {
-      id
-      name
-      description
-      model
-      createdAt
-      updatedAt
-    }
-  }
-`
-
-@customElement('ox-board-selector')
-export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: grid;
-          grid-template-rows: auto auto 1fr;
-          overflow: hidden;
-          color: var(--md-sys-color-on-surface);
-          background-color: var(--md-sys-color-surface);
-        }
-
-        #main {
-          overflow: auto;
-          padding: var(--popup-content-padding);
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-          grid-auto-rows: var(--card-list-rows-height);
-          grid-gap: 20px;
-        }
-
-        .card {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          overflow: hidden;
-          border-radius: var(--card-list-border-radius);
-          background-color: var(--card-list-background-color);
-        }
-
-        .card[selected] {
-          border: red solid;
-        }
-
-        .card.create {
-          overflow: visible;
-        }
-
-        .card:hover {
-          cursor: pointer;
-        }
-
-        .card > .name {
-          color: var(--md-sys-color-on-secondary);
-          background-color: var(--md-sys-color-secondary);
-          opacity: 0.9;
-          margin-top: -35px;
-          width: 100%;
-          font-weight: bolder;
-          font-size: 13px;
-          text-indent: 7px;
-        }
-
-        .card > .description {
-          color: var(--md-sys-color-on-secondary);
-          background-color: var(--md-sys-color-secondary);
-          width: 100%;
-          min-height: 16px;
-          font-size: 0.6rem;
-          text-indent: 7px;
-        }
-        .card img {
-          max-height: 100%;
-          min-height: 100%;
-        }
-
-        #filter {
-          display: flex;
-          align-items: center;
-          padding: var(--popup-content-padding);
-          color: var(--md-sys-color-on-surface-variant);
-          background-color: var(--md-sys-color-surface-variant);
-          box-shadow: var(--box-shadow);
-        }
-
-        #filter > ox-input-search {
-          margin-right: auto;
-          border: var(--md-sys-color-primary) 1px solid;
-          padding: var(--spacing-small) var(--spacing-small);
-          border-radius: 999px;
-          color: var(--md-sys-color-primary);
-        }
-
-        #filter > div {
-          float: right;
-          margin-left: 10px;
-        }
-
-        #filter * {
-          font-size: 15px;
-        }
-
-        select {
-          text-transform: capitalize;
-        }
-      `
-    ]
-  }
-
-  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []
-  @property({ type: Array }) boards: any[] = []
-  @property({ type: String }) group?: string
-  @property({ type: String }) search?: string
-  @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
-  @property({ type: Boolean }) creatable: boolean = false
-  @property({ type: String }) value?: string
-
-  private _page: number = 1
-  private _total: number = 0
-
-  constructor() {
-    super()
-
-    this._infiniteScrollOptions.limit = 50
-  }
-
-  render() {
-    return html`
-      <div id="filter">
-        <ox-input-search
-          @change=${(e: Event) => {
-            this.search = (e.currentTarget as any)?.value
-          }}
-        ></ox-input-search>
-        <div>
-          <label for="group">Group</label>
-          <select
-            id="group"
-            @change=${(e: Event) => {
-              this.group = (e.currentTarget as any)?.value
-              this.requestUpdate()
-            }}
-          >
-            <option value="">${i18next.t('label.all')}</option>
-            ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}
-          </select>
-        </div>
-
-        <div>
-          <label for="inherited">Inherited</label>
-          <select
-            id="inherited"
-            @change=${(e: Event) => {
-              this.inherited = (e.currentTarget as any)?.value
-              this.requestUpdate()
-            }}
-          >
-            <option value="Include">Include</option>
-            <option value="Only">Only</option>
-            <option value="None">None</option>
-          </select>
-        </div>
-      </div>
-
-      <div
-        id="main"
-        @scroll=${(e: Event) => {
-          this.onScroll(e)
-        }}
-      >
-        ${this.creatable
-          ? html`
-              <ox-board-creation-card
-                class="card create"
-                .groups=${this.groups}
-                .defaultGroup=${this.group}
-                @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}
-              ></ox-board-creation-card>
-            `
-          : html``}
-        ${this.boards.map(
-          board => html`
-            <div class="card" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>
-              <img src=${board.thumbnail} />
-              <div class="name">${board.name}</div>
-              <div class="description">${board.description}</div>
-            </div>
-          `
-        )}
-      </div>
-    `
-  }
-
-  get scrollTargetEl(): HTMLElement | null {
-    return this.renderRoot.querySelector('#main') as HTMLElement
-  }
-
-  async scrollAction() {
-    return this.appendBoards()
-  }
-
-  firstUpdated() {
-    this.refreshGroups()
-  }
-
-  async updated(changed: PropertyValues<this>) {
-    if (changed.has('group') || changed.has('inherited') || changed.has('search')) {
-      this.refreshBoards()
-    }
-  }
-
-  onClickSelect(board: any) {
-    this.dispatchEvent(
-      new CustomEvent('board-selected', {
-        composed: true,
-        bubbles: true,
-        detail: {
-          board
-        }
-      })
-    )
-  }
-
-  async onCreateBoard(e: CustomEvent) {
-    var { name, description, groupId, model, thumbnail } = e.detail
-
-    await this.createBoard(name, description, groupId, model, thumbnail)
-    this.refreshBoards()
-  }
-
-  async refreshGroups() {
-    var groupListResponse = await client.query({
-      query: FETCH_BOARD_GROUP_LIST_GQL,
-      context: gqlContext()
-    })
-
-    if (!groupListResponse || !groupListResponse.data) return
-
-    var groups = groupListResponse.data.groups.items
-    this.groups = [...groups]
-
-    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''
-  }
-
-  async refreshBoards() {
-    var boards = await this.getBoards()
-    this.boards = [...boards]
-
-    var creationCard = this.renderRoot.querySelector('ox-board-creation-card')
-    if (creationCard) {
-      ;(creationCard as any).reset()
-    }
-  }
-
-  async appendBoards() {
-    var boards = await this.getBoards({ page: this._page + 1 })
-    this.boards = [...this.boards, ...boards]
-  }
-
-  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-    var filters = []
-    var sortings = [] as any[]
-    var pagination = {
-      limit,
-      page
-    }
-
-    if (this.group) {
-      filters.push({
-        name: 'groupId',
-        operator: 'eq',
-        value: this.group
-      })
-    }
-
-    if (this.search) {
-      const value = `%${this.search.trim()}%`
-
-      filters.push({
-        name: 'name',
-        operator: 'search',
-        value: this.search
-      })
-
-      filters.push({
-        name: 'description',
-        operator: 'search',
-        value: this.search
-      })
-    }
-
-    var variables = {
-      filters,
-      sortings,
-      pagination,
-      inherited: this.inherited || InheritedValueType.Include
-    }
-
-    var boardListResponse = await client.query({
-      query: FETCH_BOARD_LIST_GQL,
-      variables
-    })
-
-    if (!boardListResponse || !boardListResponse.data) return []
-    this._total = boardListResponse.data.boards.total
-    this._page = page
-
-    return boardListResponse.data.boards.items
-  }
-
-  async createBoard(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {
-    var model = JSON.stringify(
-      modelTemplate || {
-        width: 1200,
-        height: 800,
-        fillStyle: 'white'
-      }
-    )
-
-    const response = await client.mutate({
-      mutation: CREATE_BOARD_GQL,
-      variables: {
-        board: {
-          name,
-          description,
-          groupId,
-          model,
-          thumbnail
-        }
-      },
-      context: gqlContext()
-    })
-
-    return response.data
-  }
-}

package/src/types.ts

@@ -1,63 +0,0 @@
-import { Model } from '@hatiolab/things-scene'
-
-export interface PalletItem {
-  type: string
-  description: string
-  icon: HTMLImageElement
-  group: string | string[]
-  model: Model
-}
-
-export interface Pallet {
-  name: string
-  templates: PalletItem[]
-}
-
-export type ComponentTemplate = {
-  type: string
-  description: string
-  group:
-    | 'line'
-    | 'shape'
-    | 'textAndMedia'
-    | 'chartAndGauge'
-    | 'table'
-    | 'container'
-    | 'dataSource'
-    | 'IoT'
-    | '3D'
-    | 'warehouse'
-    | 'form'
-    | 'etc'
-    | string
-  icon: any
-  model: Model
-}
-
-export type ComponentGroup = {
-  name: string
-  description: string
-  icon: string
-  templates: ComponentTemplate[]
-}
-
-export type Board = {
-  id?: string
-  name?: string
-  description?: string
-  model?: any
-  groupId?: string
-  thumbnail?: string
-}
-
-export type BoardGroup = {
-  id?: string
-  name?: string
-  description?: string
-}
-
-export type PlayGroup = {
-  id?: string
-  name?: string
-  description?: string
-}