Content
View differences
Updated by Henriette Darge over 4 years ago
**As a** project member,
**I want to** to be able to quickly search for work packages to add to the team planner
**so that** I can assign it to a certain team member, for a certain start/end dates.
### **Note**
This extends the specifications in the Team planner epic (<mention class="mention" data-id="39784" data-type="work_package" data-text="#39784">#39784</mention> ).
### Acceptance criteria
#### **Displaying the left-side search pane**
There is a button on the secondary toolbar (same level as the date range indicator and the "today", "left" and "right" buttons), on the left, with the title "+ Add existing".
* The button is a toggle; clicking on it activates the add existing search pane on the left-hand side of the screen, and the button state changes to active.
* Clicking on the button when active then hides the left-side pane, and returns the button to its default (non-active) state.
* The left pane takes the entire available vertical height (and pushes the calendar, along with the "Add assignee" button, to the right).
* The pane can overflow; users can scroll within it when there are a lot of search results.
#### **Empty state**
* The left pane is initially empty; the empty state consists of a search box on the top, an illustration and a text explanation of how they can use the search to add work packages to the team planner.
* The text should read: "Use the search field to find work packages and drag them to the planner to assign it to someone and define start and end dates."
#### **Searching**
* Entering a search term begins the search process. The search mechanism is the same as that of the existing main search bar.
* The scope is nevertheless limited by any active filters on the team planner.
* Whilst the results are loading, an animated skeletal outline of a card serves as a loading indicator (same as in the notification center).
#### **Search results**
* Once the results are available, they are displayed as cards, one per work package, sorted by ID in descending order (i.e, newest work packages first).
* _**Open**: possible to sort by last modified? <mention class="mention" data-id="87" data-type="user" data-text="@Jens Ulferts">@Jens Ulferts</mention>._
* Each card contains display attributes (not configurable in this first version)
* Line 1:
* Project name (truncated with ... after 10 characters)
* Type
* Status (truncated with ... if necessary)
* Line 2 (can span multiple lines):
* Title
* Line 3 (optional, only if information exists)
* Assignee (left-side, truncated with ... after 15 characters)
* Start/end-dates (right side, format "Aug 2–5, 2021" for brevity)
* 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)
* Overdue work packages (end date is in the past) display the dates 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 display all work packages that correspond to the search result, with the notable exception of ones that are currently visible on the team planner (i.e, the currently visible date range contains any date between start the end dates of the work package).
#### **Hover state**
On hover, there are two changes to a card in the left-side pane:
* it will display the "info" icon-only button (32px x 32px zone button zone, with a 24px x 24px icon) in standard blue in the top-right corner.
* the project name attribute will be dimmed to 20% opacity (in order to make the icon legible)
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27001/content"></div></figure>
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27000/content"></div></figure>
_**Please note that on the boards module**, there will be an additional "close" icon also visible to the left of the "info" icon, like so:_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27002/content"></div></figure>
**Clicked (active) state**
When the user clicks on the "info" icon, the card goes to a clicked state:
* the background colour of the card becomes light blue
* the split screen is displayed for that work package
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27003/content"></div></figure>
#### **Disabled state**
In certain cases, a card must be "disabled" in the left-hand pane. With @Henriette, we have identified a number of cases, where the should should not be able to drag and drop a work package into the team planner. In each of these cases:
* the card is greyed-out at 60% opacity
* a grey"warning" icon is present on the top-right edge, above the opacity layer
* hovering on this with display a tooltip explaining why the card is disabled
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27008/content"></div></figure>
Please not that the "info" icon described in the hover state also applies to hover on a disabled card: the grey icon on the right is complemented by the blue icon on the left.
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27009/content"></div></figure>
The tooltip text depends on the reason for the block:
* **The user doesn't have the permission to change dates:**
* Tooltip text: "_You do not have the necessary permissions to modify the dates of this work package._"
* **The user doesn't have the permission to change assignee**
* Tooltip text: "_You do not have the necessary permissions to modify the assignee of this work package._"
* **The user doesn't have the permissions (specific reason unknown)**
* Tooltip text: "_You do not have the necessary permissions to modify this work package._"
* **The work package is manually scheduled**
* Tooltip text: "_This work package is manually scheduled and can’t be moved._"
#### **Adding to team planner**
* To add a work package to the team planner, the user may simple drag and drop it on to a calendar date.
* During drag, calendar dates turn blue to indicate currently selected date on hover.
* The space where the work package was dragged is represented by a dashed outline (the same as in the boards).
* The number of calendar days highlighted on drag depends on the duration of the work package, inferred from start/end dates if present:
* If start/end dates are known, drag highlights the number of calendar days corresponding to the duration of the work package, in blue. (Within the limit of the current view, naturally)
* If start/end dates are unknown, only one day is highlighted.
* _Please see section "Resolving dates for work packages with partial date information" for more details._
* On mouse out, the work package is dropped onto the calendar. The work package is then assigned to the assignee of the row it was dropped on, and for the start date that was selected.
* If the work package previously did not have start/end dates, initially the start date will be the same as the end date (a duration of 1 day). The user can then extend the strip using the drag handles to specify a different end date.
* If the work package already had an end date, that duration (inferred) is maintained, and an appropriate end date automatically selected.
* The user can cancel the drag at any point by dragging the work package back to the search pane.
#### **Resolving dates for work packages with partial date information**
Not all work package that can be dragged over to the team planner have start _and_ end dates. If a work package has:
* **both start and end dates:**
* dragging to the calendar will change the start date to the selected (new) start date, and set change the end date to one that is inferred to maintaining total duration.
* **only a start date:**
* dragging to the calendar with change the start _and_ end dates to the selected (new) start date, with a default duration to 1 day. The user is free to change this using the drag handles.
* **only an end date:**
* dragging to the calendar with change the start _and_ end dates to the selected (new) start date, with a default duration to 1 day. The user is free to change this using the drag handles.
* **only a duration** _**(not possible in the current version)**_
* dragging to the calendar will change the start date to the selected (new) start date, and set change the end date to one that is inferred to maintaining total duration.
**Removing a work package from the team planner**
Removing work packages is described in epic <mention class="mention" data-id="39784" data-type="work_package" data-text="#39784">#39784</mention>.
**Out of scope**
* The user can cancel the drag at any point by either pressing the escape key (KEY)
* Disabled state of cards (tracked in <mention class="mention" data-id="40810" data-type="work_package" data-text="#40810">#40810</mention> )
### **Visuals**
_**Empty state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26285/content"></div></figure>
_**Search results loading (after search term entered):**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26286/content"></div></figure>
_**Search results:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26287/content"></div></figure>
_**"Disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27004/content"></div></figure>
_**Tooltip on hover for "disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27005/content"></div></figure>
_**Hover state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27007/content"></div></figure>
_**Clicked (active) state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27006/content"></div></figure>
_**Drag work package to team planner:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26288/content"></div></figure>
### **Figma prototype**
Figma screens available here:
[https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1466%3A54476](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1466%3A54476)
**I want to** to be able to quickly search for work packages to add to the team planner
**so that** I can assign it to a certain team member, for a certain start/end dates.
### **Note**
This extends the specifications in the Team planner epic (<mention class="mention" data-id="39784" data-type="work_package" data-text="#39784">#39784</mention> ).
### Acceptance criteria
#### **Displaying the left-side search pane**
There is a button on the secondary toolbar (same level as the date range indicator and the "today", "left" and "right" buttons), on the left, with the title "+ Add existing".
* The button is a toggle; clicking on it activates the add existing search pane on the left-hand side of the screen, and the button state changes to active.
* Clicking on the button when active then hides the left-side pane, and returns the button to its default (non-active) state.
* The left pane takes the entire available vertical height (and pushes the calendar, along with the "Add assignee" button, to the right).
* The pane can overflow; users can scroll within it when there are a lot of search results.
#### **Empty state**
* The left pane is initially empty; the empty state consists of a search box on the top, an illustration and a text explanation of how they can use the search to add work packages to the team planner.
* The text should read: "Use the search field to find work packages and drag them to the planner to assign it to someone and define start and end dates."
#### **Searching**
* Entering a search term begins the search process. The search mechanism is the same as that of the existing main search bar.
* The scope is nevertheless limited by any active filters on the team planner.
* Whilst the results are loading, an animated skeletal outline of a card serves as a loading indicator (same as in the notification center).
#### **Search results**
* Once the results are available, they are displayed as cards, one per work package, sorted by ID in descending order (i.e, newest work packages first).
* _**Open**: possible to sort by last modified? <mention class="mention" data-id="87" data-type="user" data-text="@Jens Ulferts">@Jens Ulferts</mention>._
* Each card contains display attributes (not configurable in this first version)
* Line 1:
* Project name (truncated with ... after 10 characters)
* Type
* Status (truncated with ... if necessary)
* Line 2 (can span multiple lines):
* Title
* Line 3 (optional, only if information exists)
* Assignee (left-side, truncated with ... after 15 characters)
* Start/end-dates (right side, format "Aug 2–5, 2021" for brevity)
* 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)
* Overdue work packages (end date is in the past) display the dates 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 display all work packages that correspond to the search result, with the notable exception of ones that are currently visible on the team planner (i.e, the currently visible date range contains any date between start the end dates of the work package).
####
On hover, there are two changes to a card in the left-side pane:
* it will display the "info" icon-only button (32px x 32px zone button zone, with a 24px x 24px icon) in standard blue in the top-right corner.
* the project name attribute will be dimmed to 20% opacity (in order to make the icon legible)
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27001/content"></div></figure>
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27000/content"></div></figure>
_**Please note that on the boards module**, there will be an additional "close" icon also visible to the left of the "info" icon, like so:_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27002/content"></div></figure>
**Clicked (active) state**
When the user clicks on the "info" icon, the card goes to a clicked state:
* the background colour of the card becomes light blue
* the split screen is displayed for that work package
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27003/content"></div></figure>
#### **Disabled state**
In certain cases, a card must be "disabled" in the left-hand pane. With @Henriette, we have identified a number of cases, where the should should not be able to drag and drop a work package into the team planner. In each of these cases:
* the card is greyed-out at 60% opacity
* a grey"warning" icon is present on the top-right edge, above the opacity layer
* hovering on this with display a tooltip explaining why the card is disabled
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27008/content"></div></figure>
Please not that the "info" icon described in the hover state also applies to hover on a disabled card: the grey icon on the right is complemented by the blue icon on the left.
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27009/content"></div></figure>
The tooltip text depends on the reason for the block:
* **The user doesn't have the permission to change dates:**
* Tooltip text: "_You do not have the necessary permissions to modify the dates of this work package._"
* **The user doesn't have the permission to change assignee**
* Tooltip text: "_You do not have the necessary permissions to modify the assignee of this work package._"
* **The user doesn't have the permissions (specific reason unknown)**
* Tooltip text: "_You do not have the necessary permissions to modify this work package._"
* **The work package is manually scheduled**
* Tooltip text: "_This work package is manually scheduled and can’t be moved._"
####
* To add a work package to the team planner, the user may simple drag and drop it on to a calendar date.
* During drag, calendar dates turn blue to indicate currently selected date on hover.
* The space where the work package was dragged is represented by a dashed outline (the same as in the boards).
* The number of calendar days highlighted on drag depends on the duration of the work package, inferred from start/end dates if present:
* If start/end dates are known, drag highlights the number of calendar days corresponding to the duration of the work package, in blue. (Within the limit of the current view, naturally)
* If start/end dates are unknown, only one day is highlighted.
* _Please see section "Resolving dates for work packages with partial date information" for more details._
* On mouse out, the work package is dropped onto the calendar. The work package is then assigned to the assignee of the row it was dropped on, and for the start date that was selected.
* If the work package previously did not have start/end dates, initially the start date will be the same as the end date (a duration of 1 day). The user can then extend the strip using the drag handles to specify a different end date.
* If the work package already had an end date, that duration (inferred) is maintained, and an appropriate end date automatically selected.
* The user can cancel the drag at any point by dragging the work package back to the search pane.
#### **Resolving dates for work packages with partial date information**
Not all work package that can be dragged over to the team planner have start _and_ end dates. If a work package has:
* **both start and end dates:**
* dragging to the calendar will change the start date to the selected (new) start date, and set change the end date to one that is inferred to maintaining total duration.
* **only a start date:**
* dragging to the calendar with change the start _and_ end dates to the selected (new) start date, with a default duration to 1 day. The user is free to change this using the drag handles.
* **only an end date:**
* dragging to the calendar with change the start _and_ end dates to the selected (new) start date, with a default duration to 1 day. The user is free to change this using the drag handles.
* **only a duration** _**(not possible in the current version)**_
* dragging to the calendar will change the start date to the selected (new) start date, and set change the end date to one that is inferred to maintaining total duration.
**Removing a work package from the team planner**
Removing work packages is described in epic <mention class="mention" data-id="39784" data-type="work_package" data-text="#39784">#39784</mention>.
**Out of scope**
* The user can cancel the drag at any point by either pressing the escape key (KEY)
* Disabled state of cards (tracked in <mention class="mention" data-id="40810" data-type="work_package" data-text="#40810">#40810</mention> )
### **Visuals**
_**Empty state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26285/content"></div></figure>
_**Search results loading (after search term entered):**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26286/content"></div></figure>
_**Search results:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26287/content"></div></figure>
_**"Disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27004/content"></div></figure>
_**Tooltip on hover for "disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27005/content"></div></figure>
_**Hover state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27007/content"></div></figure>
_**Clicked (active) state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27006/content"></div></figure>
_**Drag work package to team planner:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26288/content"></div></figure>
### **Figma prototype**
Figma screens available here:
[https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1466%3A54476](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1466%3A54476)