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: