@operato/board 0.2.49 → 0.3.1

package/src/component/text-and-media.ts

@@ -0,0 +1,124 @@
+import { ComponentGroup } from '../types'
+import audio from '../../../assets/images/components/audio.png'
+import colorImage from '../../../assets/images/components/color-image.png'
+import gifImage from '../../../assets/images/components/gif-image.png'
+import grayImage from '../../../assets/images/components/gray-image.png'
+import text from '../../../assets/images/components/text.png'
+
+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:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
+	  .st1{fill:{{strokeColor}};}
+  </style>
+  <g>
+	  <polyline class="st0" points="20.6,12.8 20.6,5.1 1.6,5.1 1.6,18 15,18"/>
+	  <path class="st1" d="M5.7,7.9c-0.9,0-1.6,0.7-1.6,1.6s0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6S6.6,7.9,5.7,7.9z"/>
+	  <polygon class="st1" points="12.8,8.6 8.5,14.7 5.9,12.7 3.2,16.1 15.1,16.1 15.2,13.7"/>
+	  <path class="st1" d="M24.1,15.1h2.1l0.6,2.8h1.7l-0.1-3.8H16.5l-0.1,3.8h1.7l0.4-2.8h2.1c0.1,2,0.1,3.1,0.1,5.2V21
+		  c0,1.6,0,1.9,0,2.7l-1.8,0.2V25h6.9v-1.1L24,23.7c0-0.9,0-1.1,0-2.7v-0.7C24,18.1,24,17,24.1,15.1z"/>
+  </g>
+</svg>
+`
+
+export const textAndMedia: ComponentGroup = {
+  name: 'textAndMedia',
+  description: 'a group of text and various media components',
+  icon,
+  templates: [
+    {
+      type: 'text',
+      description: 'text',
+      icon: text,
+      group: 'textAndMedia',
+      model: {
+        type: 'text',
+        left: 100,
+        top: 100,
+        width: 200,
+        height: 50,
+        text: 'Text',
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 5,
+        lineDash: 'solid',
+        lineCap: 'butt',
+        textAlign: 'left',
+        textBaseline: 'top',
+        textWrap: false,
+        fontFamily: 'serif',
+        fontSize: 30
+      }
+    },
+    {
+      type: 'color image',
+      description: 'color image',
+      icon: colorImage,
+      group: 'textAndMedia',
+      model: {
+        type: 'image-view',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        isGray: false,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 1,
+        lineDash: 'solid',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'gray image',
+      description: 'gray image',
+      icon: grayImage,
+      group: 'textAndMedia',
+      model: {
+        type: 'image-view',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        isGray: true,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 1,
+        lineDash: 'solid',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'gif image',
+      description: 'gif image',
+      icon: gifImage,
+      group: 'textAndMedia',
+      model: {
+        type: 'gif-view',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100
+      }
+    },
+    {
+      type: 'audio',
+      description: 'audio',
+      icon: audio,
+      group: 'textAndMedia',
+      model: {
+        type: 'audio',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100
+      }
+    }
+  ]
+}

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/index.ts

@@ -1,3 +1,8 @@
+export * from './types'
+
+export { registerDefaultGroups } from './component/register-default-groups'
+
 export * from './ox-board-viewer'
 export * from './ox-board-player'
 export * from './ox-board-modeller'
+export * from './ox-board-list'