@operato/board 0.2.48 → 0.2.52

package/src/component/warehouse.ts

@@ -0,0 +1,26 @@
+import { ComponentGroup } from '../types'
+
+const icon = `
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:{{strokeColor}};}
+    .st14{fill:none;stroke:{{strokeColor}};stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10;}
+    .st15{fill:none;stroke:{{strokeColor}};stroke-linecap:round;stroke-miterlimit:10;}
+  </style>
+  <g>
+    <polyline class="st14" points="1.5,11.2 15,5.2 28.5,11 	"/>
+    <line class="st15" x1="3.2" y1="11.6" x2="3.2" y2="23.8"/>
+    <line class="st15" x1="26.9" y1="11.6" x2="26.9" y2="23.8"/>
+    <line class="st5" x1="1.7" y1="24.8" x2="28.3" y2="24.8"/>
+    <rect x="21.1" y="18.3" class="st0" width="3.4" height="5.5"/>
+    <path class="st0" d="M5.9,13.6v10.2h13.8V13.6H5.9z M18.7,17.3H6.8v-2.4h11.9V17.3z"/>
+  </g>
+</svg>
+`
+
+export const warehouse: ComponentGroup = {
+  name: 'warehouse',
+  description: 'a group of various components used in a warehouse depiction',
+  icon,
+  templates: []
+}

package/src/graphql/board.ts

@@ -0,0 +1,144 @@
+import { buildArgs, client } from '@operato/graphql'
+
+import { Board } from '../types'
+import gql from 'graphql-tag'
+
+export async function fetchBoardList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        boards(${buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchBoard(id: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchBoardById($id: String!) {
+        board(id: $id) {
+          id
+          name
+          description
+          group {
+            id
+            name
+          }
+          thumbnail
+          model
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function createBoard(board: Board) {
+  /*
+    input NewBoard {
+      name        : String!
+      description : String
+      model       : String!
+      groupId     : String!
+    }
+  */
+
+  board.model = JSON.stringify(board.model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateBoard($board: NewBoard!) {
+        createBoard(board: $board) {
+          id
+          name
+          description
+          model
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      board
+    }
+  })
+
+  return response.data
+}
+
+export async function updateBoard(board: Board) {
+  /*
+    input BoardPatch {
+      name        : String
+      description : String
+      model       : String
+    }
+    */
+  var { id, name, description, model, groupId } = board
+  model = JSON.stringify(model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
+        updateBoard(id: $id, patch: $patch) {
+          id
+          name
+          description
+          model
+          group {
+            id
+            name
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description, model, groupId }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteBoard(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteBoard(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}

package/src/graphql/favorite-board.ts

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

package/src/graphql/group.ts

@@ -0,0 +1,138 @@
+import { BoardGroup } from '../types'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+export async function fetchGroup(id: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchGroupById($id: String!) {
+        group(id: $id) {
+          id
+          name
+          description
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function updateGroup(group: BoardGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateGroup($id: String!, $patch: GroupPatch!) {
+        updateGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteGroup(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteGroup(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}
+
+export async function fetchGroupList() {
+  const response = await client.query({
+    query: gql`
+      {
+        groups {
+          items {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function createGroup(group: BoardGroup) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateGroup($group: NewGroup!) {
+        createGroup(group: $group) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: { group }
+  })
+
+  return response.data
+}
+
+export async function joinGroup(boardId: string, groupId: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation JoinGroup($id: String!, $boardIds: [String!]!) {
+        joinGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id: groupId,
+      boardIds: [boardId]
+    }
+  })
+
+  return response.data
+}

package/src/graphql/index.ts

@@ -0,0 +1,4 @@
+export * from './board'
+export * from './group'
+export * from './play-group'
+export * from './favorite-board'

package/src/graphql/play-group.ts

@@ -0,0 +1,189 @@
+import { PlayGroup } from '../types'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+export async function fetchPlayGroupList() {
+  const response = await client.query({
+    query: gql`
+      {
+        playGroups {
+          items {
+            id
+            name
+            description
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchPlayGroup(groupId: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchPlayGroup($id: String!) {
+        playGroup(id: $id) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            model
+            thumbnail
+            createdAt
+            creator {
+              id
+              name
+            }
+            updatedAt
+            updater {
+              id
+              name
+            }
+          }
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: {
+      id: groupId
+    }
+  })
+
+  return response.data
+}
+
+export async function createPlayGroup(group: PlayGroup) {
+  var { name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {
+        createPlayGroup(playGroup: $playGroup) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      playGroup: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function updatePlayGroup(group: PlayGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {
+        updatePlayGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function deletePlayGroup(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deletePlayGroup(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+  return response.data
+}
+
+export async function joinPlayGroup(boardId: string, group: PlayGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
+        joinPlayGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      boardIds: [boardId]
+    }
+  })
+
+  return response.data
+}
+
+export async function leavePlayGroup(boardId: string, groupId: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!, $boardIds: [String]!) {
+        leavePlayGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id: groupId,
+      boardIds: [boardId]
+    }
+  })
+
+  return response.data
+}

package/src/modeller/component-toolbar/component-detail.ts

@@ -2,7 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import '@operato/markdown'
+
+import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
@@ -19,7 +21,7 @@ class ComponentDetail extends LitElement {
 
         background-color: var(--component-detail-background-color, white);
         margin: 0px;
-        padding: 0px;
+        padding: 10px;
 
         width: 360px;
         height: 100%;
@@ -35,7 +37,7 @@ class ComponentDetail extends LitElement {
         z-index: 1;
       }
 
-      iframe {
+      ox-markdown {
         flex: 1;
       }
     `
@@ -44,10 +46,8 @@ class ComponentDetail extends LitElement {
   @property({ type: Object }) template: { about: string } | null = null
 
   render() {
-    const { about = '/helps/board-modeller/effects/animation.md' } = this.template || {}
+    const { about } = this.template || {}
 
-    return this.template ? html` <iframe .src=${about}></iframe> ` : html``
+    return html` <ox-markdown .src=${about}></ox-markdown> `
   }
-
-  updated(changes: PropertyValues<this>) {}
 }

package/src/modeller/component-toolbar/component-menu.ts

@@ -4,14 +4,13 @@
 
 import './component-detail'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { Pallet, PalletItem } from '../../types'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
 import { ScrollbarStyles } from '@operato/styles'
-
 import noImage from '../../../../assets/images/components/no-image.png'
-import { Pallet, PalletItem } from '../../types'
 
 @customElement('component-menu')
 class ComponentMenu extends LitElement {
@@ -174,8 +173,6 @@ class ComponentMenu extends LitElement {
       return
     }
 
-    // var group = this.groups.find(g => g.name == this.group)
-
     if (this.scene) {
       this.template = this.templates.find(template => template.type == type)
       this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })