@dpa-connect/dpa-id-collab

@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>