githubEdit Page

Proofreading Dashboard

Goal

Our goal of this walkthrough is to show how to set up a Proofreading Task Dashboard with Realtime Collaboration.

Key features

  • You have your own dashboard with your own design card
  • Your dashboard will be updated in realtime (when a task changes)
  • You can change the priority of a proofreading task

Guide

1) Add your own metadata field on the server

As a first step, you have to configure a proofreading task metadata field. Later this field will be used to show documents on the right place on the proofreading dashboard (sort order, filter, status)

metadata: [{
  // handle of the proofreading metadata field
  handle: 'my-proofreading',
  type: 'li-task-v2',
  config: {
    label: 'My Proofreading',
    realtimeNotification: true,
    showInTaskList: true,
    // handle of the proofreading dashboard (the dashboard will be configured later in the editor)
    linkToDashboard: 'my-kanban-proofreading',
    setPriority: true
  }
}]

References:

Add my-proofreading to elasticsearch

The metadata field my-proofreading should be searchable by the proofreading dashboard later. Therefore you have to extend the Elasticsearch document mapping. You will find an example on the server.

2) Register your custom dashboard on the editor

As a second step you have to register a custom dashboard in the project config.

dashboards: [{
  handle: 'my-kanban-proofreading',
  type: 'taskBoard',
  pageTitle: 'My Proofreading',
  // This is the name of the previously added metadata field on the server
  taskName: 'my-proofreading',
  displayFilters: ['documentState', 'timeRange']
}]

References:

3) Add your custom dashboard to the menu

As third step you can add the custom dashboard to the main navigation.

{
  label: 'My Proofreading',
  // 'my-kanban-proofreading' is the dashboard handle configured in the last step
  dashboard: 'my-kanban-proofreading',
  icon: 'file-document'
}

🎉 After you have added your dashboard to the menu, you have a working custom realtime dashboard filtered by your custom metadata field 🎉

How to test it

  • go to the tasks feature in the top bar of an article and change the status of your task
  • go to the My Proofreading dashboard via the menu and look if your task is on the board

References:

4) Customise a card on the dashboard

The default card on the My Proofreading dashboard is quite simple. If you want to implement your own card (with a custom behavior and also a custom look and feel), you have to register a card in your downstream editor and assign it to your custom dashboard.

// extend the custom dashboard config from step 2 with your own card
dashboards: [{
  handle: 'my-kanban-proofreading',
  // other config options ...
  componentName: 'myProofreadingCard'
}]

As last step you have to register your own card myProofreadingCard in your downstream as an angular component.

angular.module('livingdocs-editor').component('myProofreadingCard', {
  template: require('./my_proofreading_card.html'),
  controller: require('./my_proofreading_controller.js'),
  bindings: {
    documentInfo: '<',
    documentMetadata: '<',
    actions: '<',
    options: '<'
  }
})

If you want to have all features available in your own card, you can copy and modify our liTaskCard example from the upstream.

References: