Content
View differences
Updated by Parimal Satyal 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 dd 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).
**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 highligted.
* 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 either pressing the escape key (KEY) or dragging the work package back to the search pane.
**Removing a work package from the team planner**
Remooving work packages is described in epic <mention class="mention" data-id="39784" data-type="work_package" data-text="#39784">#39784</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>
_**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
* 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).
**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 highligted.
* 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 either pressing the escape key (KEY) or dragging the work package back to the search pane.
**Removing a work package from the team planner**
Remooving work packages is described in epic <mention class="mention" data-id="39784" data-type="work_package" data-text="#39784">#39784</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>
_**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)