Content
View differences
Updated by Parimal Satyal over 4 years ago
This feature describes what a "card" in the Add Existing panel should look like. It is a break-away from <mention class="mention" data-id="40031" data-type="work_package" data-text="#40031">#40031</mention>.
### Note
The design and order of elements here will be the same as in _Boards_ module, and in the team planner calendar area itself. There will naturally be minor differences and variations, but they will be minor and extensions/variations of this same component.
The disabled, clicked and hover behaviour for these cards is described in <mention class="mention" data-id="40810" data-type="work_package" data-text="#40810">#40810</mention>.
### Acceptance Criteria
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27121/content"></div></figure>
* Each card displays these attributes (not configurable in this first version)
* _Line 1:_
* Long status truncated to 10 chars ("In develop...")
* Six-character ID ("818755")
* A project name truncated to remaining available space ("Project Dumbledore", why not)
* ~~Status Status dropdown (never truncated)~~
truncated)
* Work package #ID followed by a dash (eg. "#2415 -")
* ~~Project Project name (truncated if necessary, depending on available space)~~
space)
* ~~**\[open\]** **\[open\]** Some customers have lengthy status names, i.g. the longest I could find has 30 chars, and the work packages within that same installation have 6 digit ids. That might lead to very little space being left for the project name. Do we want to e.g. have a~~ `~~title~~` ~~attribute a `title` attribute displaying that information in full or do we want to wrap lines after all, or ...?~~
~~~~ ...?
* _Line 2 (can span multiple lines):_
* Type,
* Title (has a limit of 255 characters, no truncation necessary; flows around Type)
* _Line 3 (optional, only if information exists)_
* Assignee (left-side, avatar + name truncated with ... after 15 characters)
* Start/end-dates (right side, format "Aug 2–5, 2021" for brevity).
* For text styles used, please refer to Figma prototype.
* All work packages display the first two lines; the last line is variable because a work package can:
* Have neither an assignee nor dates (start/end)
* Have an assignee but no dates (start/end)
* Not have an assignee but have dates (start/end)
* If only partial date information is present work a work package, the date formate adapts accordingly:
* Only start date exists: format it as "Aug 2, 2021–" (dash at the end)
* Only end date exists: format it as "–Aug 8, 2021" (dash at the start)
* Overdue work packages (end date is in the past) display the date information in red.
* The user is encouraged to search to find a work package (vs. scroll indefinitely until they see it).
* **Open:** How many results should be load/display in the pane initially, pre-scroll? How should we deal with lazy loading/caching? (<mention class="mention" data-id="87" data-type="user" data-text="@Jens Ulferts">@Jens Ulferts</mention>).
* The search will display all work packages that correspond to the search result, including (important: this is notably different from what was specified previously) work packages that are visible in the Team planner. This means that the result of search results is _unaffected_ by the contents of what is visible in the calendar. This is only one exception, which is:
* When a user drags a work package to the team planner, that card needs to be removed from the search result temporarily. (As in, immediately when the item is successfully dragged to the team planner). If the user refreshes the search, the item will appear again, obviously with the new assignee/dates.
### Visuals
_**Search results for the "work" search term**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27122/content"></div></figure>
### Figma protype
The Figma prototype is available here (same as before):
https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1741%3A69193
### Note
The design and order of elements here will be the same as in _Boards_ module, and in the team planner calendar area itself. There will naturally be minor differences and variations, but they will be minor and extensions/variations of this same component.
The disabled, clicked and hover behaviour for these cards is described in <mention class="mention" data-id="40810" data-type="work_package" data-text="#40810">#40810</mention>.
### Acceptance Criteria
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27121/content"></div></figure>
* Each card displays these attributes (not configurable in this first version)
* _Line 1:_
* Six-character ID ("818755")
* A project name truncated to remaining available space ("Project Dumbledore", why not)
* ~~Status
~~~~
* _Line 2 (can span multiple lines):_
* Type,
* Title (has a limit of 255 characters, no truncation necessary; flows around Type)
* _Line 3 (optional, only if information exists)_
* Assignee (left-side, avatar + name truncated with ... after 15 characters)
* Start/end-dates (right side, format "Aug 2–5, 2021" for brevity).
* For text styles used, please refer to Figma prototype.
* All work packages display the first two lines; the last line is variable because a work package can:
* Have neither an assignee nor dates (start/end)
* Have an assignee but no dates (start/end)
* Not have an assignee but have dates (start/end)
* If only partial date information is present work a work package, the date formate adapts accordingly:
* Only start date exists: format it as "Aug 2, 2021–" (dash at the end)
* Only end date exists: format it as "–Aug 8, 2021" (dash at the start)
* Overdue work packages (end date is in the past) display the date information in red.
* The user is encouraged to search to find a work package (vs. scroll indefinitely until they see it).
* **Open:** How many results should be load/display in the pane initially, pre-scroll? How should we deal with lazy loading/caching? (<mention class="mention" data-id="87" data-type="user" data-text="@Jens Ulferts">@Jens Ulferts</mention>).
* The search will display all work packages that correspond to the search result, including (important: this is notably different from what was specified previously) work packages that are visible in the Team planner. This means that the result of search results is _unaffected_ by the contents of what is visible in the calendar. This is only one exception, which is:
* When a user drags a work package to the team planner, that card needs to be removed from the search result temporarily. (As in, immediately when the item is successfully dragged to the team planner). If the user refreshes the search, the item will appear again, obviously with the new assignee/dates.
### Visuals
_**Search results for the "work" search term**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27122/content"></div></figure>
### Figma protype
The Figma prototype is available here (same as before):
https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1741%3A69193