@dpa-connect/dpa-id-collab

⚠ this package is under active development.

Provides shared components for collaboration integrations (e.g. Sidebar, Value Unit Templates).

Installation

You need access to the @dpa-connect organization on npm while we are in closed source.

yarn add @dpa-connect/dpa-id-collab

Usage

GraphQL

This package comes with villus as graphql library. Therefore it needs to be wrapped with the provided DpaIdCollabGraphqlProvider.

Props

DpaIdCollabSidebar

| prop | type | default | desc | | ---------------------------- | ------ | --------- | -------------------------------------------------------------------------------------- | | folderId | String | undefined | The uuid of the currently selected folder in the host application. | | collabOrigin | String | undefined | URL for the collaboration interface. | | width | Number | 400 | Width of the sidebar. | | consumer | String | "" | The name of the service which is using the sidebar, e.g. dpa-agenda or dpa-select |

DpaIdCollabUnitTemplateEvent

| prop | type | default | desc | | --------- | ------ | --------- | ----------------------------------------------------------------- | | startTime | String | undefined | Datetime string for events start time. | | title | String | undefined | title for the event. | | location | Object | undefined | object containing the region and country for the given event. |

DpaIdCollabUnitTemplatePicture

| prop | type | default | desc | | --------- | ------ | --------- | ----------------------------------------- | | thumbnail | String | undefined | required Base64 encoded thumbnail. | | title | String | undefined | title for the picture. | | subtype | String | undefined | subtype of the picture (e.g. picture). |

DpaIdCollabUnitTemplateText

| prop | type | default | desc | | --------- | ------ | --------- | ------------------- | | title | String | undefined | title for the item. |

DpaIdCollabUnitTemplateTopic

| prop | type | default | desc | | --------- | ------ | --------- | ----------------------------------------------------------------- | | startTime | String | undefined | Datetime string for topics start time. | | title | String | undefined | title for the topic. |

DpaIdCollabGraphqlProvider

| prop | type | default | desc | | ---------------------------- | ------ | --------- | ------------------------------------------------------------------- | | endpoint | String | undefined | URL for the graphql endpoint. | | subscriptionsEndpoint | String | undefined | URL for the graphql subscriptions endpoint. | | token | String | undefined | A valid JWT Token for authentication against the graphql endpoints. |

Events

DpaIdCollabSidebar

| event | payload | desc | | ------------- | ------- | -------------------------------------------------------------------------------------------------------------- | | @folderChange | Object | Triggered when folder is changed in the selection. | | @listChange | Object | Triggered when a new sublist is selected. | | @itemClick | Object | Triggered when a list item inside the Sidebar is clicked. The payload will be the ID of the item and the type. | | @close | Array | Triggered when the close button in the sidebar was clicked. |

With a module System (commonjs-node)

DpaIdCollabSidebar

Using Vue single file components and postcss imports

<template>
  <dpa-id-collab-graphql-provider
    :endpoint="<graphql-endpoint-url>"
    :subscriptions-endpoint="<graphql-subscriptions-endpoint-url>"
    :token="<authorization-token>"
  >
    <dpa-id-collab-sidebar
      :folder-id="<yoor_folder_uuid>"
      @folderChange="handleFolderChange"
      @listChange="handleListChange"
      @itemClick="handleItemClick"
      @close="handleClose"
    />
  </dpa-id-collab-graphql-provider>
</template>
<script>
  import { DpaIdCollabGraphqlProvider, DpaIdCollabSidebar } from "@dpa-connect/dpa-id-collab";

  export default {
    components: {
      DpaIdCollabGraphqlProvider
      DpaIdCollabSidebar
    },
    methods: {
      handleFolderChange(activeFolder) {
        console.log(activeFolder);
      },
      handleListChange(activeList) {
        console.log(activeList);
      },
      handleClose() {
        console.log("Close Button has been clicked.");
      },
      handleItemClick({ id, type }) {
        console.log(`List item with ID ${id} and ${type} was clicked!`);
      }
    }
  };
</script>

<style postcss>
  @import "@dpa-connect/dpa-id-collab/lib/dpa-id-collab.css";
</style>