CnTasksCard
Inline tasks widget for detail pages. Fetches tasks from the OpenRegister API and displays them sorted by due date (soonest first). Shows status icons, assignee names (with CnUserActionMenu), and due dates. Overdue tasks are highlighted in red.
Wraps: CnDetailCard, CnUserActionMenu
Try it
Loading CnTasksCard playground…
Usage
<CnTasksCard
register-id="uuid-register"
schema-id="uuid-schema"
object-id="uuid-object"
@show-all="openSidebarTasksTab" />
Pass pre-translated labels when your app handles i18n:
<CnTasksCard
register-id="reg"
schema-id="schema"
object-id="obj"
:title-label="t('myapp', 'Tasks')"
:no-tasks-label="t('myapp', 'No tasks')"
:show-all-label="t('myapp', 'Show all')"
:unassigned-label="t('myapp', 'Unassigned')" />
Status icons
| Status value | Icon | Color |
|---|---|---|
'completed' | Checkbox checked | Green (success) |
'active' / 'in-process' | Progress clock | Blue (primary) |
'terminated' | Close circle | Red (error) |
| Any other | Empty checkbox | Grey |
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
registerId | String | ✓ | — | OpenRegister register UUID |
schemaId | String | ✓ | — | OpenRegister schema UUID |
objectId | String | ✓ | — | Object UUID |
apiBase | String | '/apps/openregister/api' | Base URL for OpenRegister API calls | |
maxDisplay | Number | 5 | Maximum number of tasks to show before the "Show all" footer appears | |
collapsible | Boolean | false | Whether the card supports collapse/expand | |
titleLabel | String | 'Tasks' | Card title | |
noTasksLabel | String | 'No tasks' | Empty state text | |
showAllLabel | String | 'Show all' | Footer link label | |
unassignedLabel | String | 'Unassigned' | Text shown when a task has no assignee |
Events
| Event | Payload | Description |
|---|---|---|
show-all | — | Emitted when the "Show all" footer link is clicked |
Reference (auto-generated)
The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnTasksCard.vue and update automatically whenever the component changes.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
registerId | string | ✓ | — | OpenRegister register ID |
schemaId | string | ✓ | — | OpenRegister schema ID |
objectId | string | ✓ | — | Object UUID |
apiBase | string | '/apps/openregister/api' | Base API URL for OpenRegister | |
maxDisplay | number | 5 | Maximum number of tasks to display | |
collapsible | boolean | false | Whether the card is collapsible | |
titleLabel | string | () => t('nextcloud-vue', 'Tasks') | ||
noTasksLabel | string | () => t('nextcloud-vue', 'No tasks') | ||
showAllLabel | string | () => t('nextcloud-vue', 'Show all') | ||
unassignedLabel | string | () => t('nextcloud-vue', 'Unassigned') |
Events
| Name | Payload | Description |
|---|---|---|
show-all | — |