•  
     
    story #13730 display columns
Summary
Empty
display columns
Empty

Link to mockup: https://s.codepen.io/enalean/debug/615728ad14def79e9b694647c582ce16

Overview

The "Taskboard" tab introduced in story #13729 now shows the taskboard columns, respecting the mapping defined in the Milestone planning configuration.
The columns have a color defined in their configuration.
The columns cannot be collapsed at this stage.

Technical overview

The column information will not be queried over a REST API. There is no business need for it, so we can simply pass JSON data to the Vue app. Using REST at this early stage would mean showing an empty app with a spinner while the app loads data it could already have at startup. This would not be a good UX.
We do not need to pass the actual "cardwall field value to cardwall column" mapping, as there is no card displayed at this stage, just columns.

Design overview

There are actually at least two "empty states":

  1. When there is no mapping at all. In this case, we should display a message explaining the lack of configuration and a link to the current planning configuration to let admin create a mapping. See attached mockup export. The image should be in SVG format and colors should adapt to current theme (see TLP doc).
    When a non-admin user browses this kind of cardwall, there should be a different image. There is no link (non-admin user can't do anything).
  2. When there are no cards in columns. In this case, the columns are simply left empty (See attachment) as is the case for Kanban.
Empty kanban. Cardwall columns will have a similar look when empty
Empty mapping state mockup
Empty mapping state mockup (for non-admin)
SVG for no mapping state. Please adapt the colors
SVG for no mapping state (for admin user). Please adapt the colors
Empty
Status
Empty
Done
Development
  • [ ] Does it involves User Interface? 
  • [ ] Are there any mockups?
  • [ ] Are permissions checked?
  • [ ] Does it need Javascript development?
  • [ ] Does it need a forge upgrade bucket?
  • [ ] Does it need to execute things in system events?
  • [ ] Does it impact project creation (templates)?
  • [ ] Is it exploratory?
Empty
Details
#13730
Manuel Vacelet (vaceletm)
2019-09-09 10:45
2019-08-07 16:13
14848

References
Referencing story #13730

Git commit

tuleap/tuleap/stable

Reuse state 664ac75015
Error state for misconfigured planning bb1a020e03
Use dedicated error page for regular users eb7310010a
Display "under construction" modal 0b16c1f9a8
Retrieve columns 8844d9160b
Add Typescript type definitions for tlp 5b2961a438
Display columns e934b15310
Display taskboard pane link in PV2 8c5488ffa9
Colorize columns be9a48d927
Display empty state 409a980c4f
Better naming of overview.js asset 38689a54a2
Do not load burndow-chart.js asset in taskboard f5b2e24ba6
Unit-test vue-gettext-init f288cbc4e2
Warn admin that color is not compatible b716cdf976
Enable @typescript-eslint/recommended ESLint rules 1c8526d28f
Move columns in store caad818e74
Update flatpicker library and add type for tlp.datePicker a3203d403d

Follow-ups

User avatar
Joris MASSON (jmasson)2019-08-26 14:42
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
  • Attachments taskboard-no-mapping.svg added
User avatar
Joris MASSON (jmasson)2019-08-26 14:08
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2019-08-26 11:21
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2019-08-08 15:31
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes