Content
View differences
Updated by Parimal Satyal over 1 year ago
**Acceptance criteria**
##### **Date picker**
* The date picker will be Primerised.
* There is now an UnderlineNav bar at the top:
* With four options:
* Dates
* Predecessors
* Successors
* Children
* Tab: **Dates**
* There is a new segmented control with label "Scheduling mode"
* There is a help icon next to the label. On hover, it displays a tooltip with this text: "‘Manual’ lets you pick fixed dates freely but ignores all predecessors. ‘Automatic’ selects the earliest possible start date for this work package, which cannot be modified."
* Options: "Manual" and "Automatic"
* The "Working days only" toggle becomes a checkbox aligned to the far right edge of the same line as the segmented control.
* In **Manual** mode:
* The dates are freely selectable, without restrictions.
* Relations don't affect the start and finish dates.
* A manually scheduled work package can push and pull successors that are automatically scheduled
* A manual work package can start before any of their predecessors
* A manually scheduled work package will not push a predecessor to the past when it's moved to the past
* In **Automatic** mode:
* The _Start date_ is and _Finish date_ fields are read-only
* The "Today" links under the _Start date_ field is date fields are disabled (but not removed so that elements in the date picker don't move when changing modes)
* Finish date and duration Duration remains editable.
* Unless editable (unless it's a parent; in this case, all three fields (Start date, Finish date, Duration are inactive).
parent)
* All dates prior to the start date are inactive/disabled.
* The user is still able to click on the current or future dates to change the finish date.
mini calendar goes into read-only mode
* If a work package does not have blankslate with a predecessor, primary action to add a blankslate predecessor will be displayed that informs the user that a predecessor is needed to enter this mode. The Save button is disabled until the user switches back to manual mode. (permissions allowing)
* Tabs: **Predecessor, Successor and Children**
* Each of the tabs displays the number of relations of that type with a badge
* If there are no relations of that type, the badge will read 0
* In each tab, all relations of that type are displayed in a box list
* The content is the same as in the "Relations" tab of the work package, but in read only mode and:
* without the section header
* without the "more" icon (⋯), which means it is not possible to edit or remove relations from here in the current scope
* When there are no relations, each section will display a blankslate (see [Figma mockups](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=395-22009&t=HKs33N4NjcnQFpgU-4))
* The blankslate will not offer any actions (eg. add a relation of that type) in this version
**Single date mode (Milestone)**
In single date mode:
* There is only one date field with label "Date"
* Finish date and Duration are not displayed
* On desktop, two mini-calendars are displayed (due to the Underline Nav taking more horizontal space)
* A single click changes the date on the calendar (current behaviour)
##### **Date picker banners:**
**Manual scheduling:**
* Colour: Warning orange
* Action: Show relations
* Case 1: Relations exist but no predecessors.
* **Manually scheduled. Dates not affected by relations.**
Click on “Show relations” for Gantt overview
* Case 2: There are predecessors but a gap of over two days with the finish date of the latest predecessor.
* **Manually scheduled. Dates not affected by relations.**
There is a gap between this and all predecessors.
* Case 3: There are predecessors and the current work package overlaps with at least one of them.
* **Manually scheduled. Dates not affected by relations.**
Overlaps with at least one predecessor.
* Case 4: Work package has children.
* **Manually scheduled. Dates not affected by relations.**
This has child work packages but their start dates are ignored.
* Case 5: There are no relations.
* No banner displayed.
**Automatic:**
* Colour: Info blue
* Action: Show relations
* Case 1: There is a predecessor.
* **The start date is set by a predecessor.**
Click on “Show relations” for Gantt overview.
* Case 2: The work package is a parent.
* **The dates are determined by child work packages.**
Click on “Show relations” for Gantt overview.
* If a work package is both a parent and has predecessors, this "parent" message will be displayed.
#### Mobile behaviour
##### Banners
There are only two variants of banners in mobile: one for manual, one for automatic.
**Manual scheduling**
* Only visible if a manually scheduled work package has relations.
* Colour: Warning orange
* ~~Action: Relations~~ TBD
* Text: "Manually scheduled. Relations ignored."
**Automatic scheduling:**
* Always displayed in automatic mode.
* Colour: Blue orange
* ~~Action: Relations~~ TBD
* Text: Automatically scheduled. Start date derived.
##### Date picker structure
The mobile date picker has these specificities (see mockup for visual reference):
* The input fields are stacked vertically.
* The UnderlineNav component is not visible.
* The banner (when displayed) and rhe footer are fixed; any content that overflows is scrolled between the two.
#### Visuals
_**Note:** Please check_ [_Figma_](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=175-3641) _for the most recent mockups._
**Manual scheduling (but predecessors overlap):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/260443/content">
**Automatic scheduling (start date set by predecessors):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:463px;" src="/api/v3/attachments/265008/content"> style="width:460px;" src="/api/v3/attachments/260444/content">
**Single date picker (Milstone) - Manual scheduling**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/260446/content">
<br>
**Blankslate (No successors)**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/260445/content">**
**Mobile view, automatically scheduled:**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:253px;" src="/api/v3/attachments/262749/content">**
<br>
##### **Date picker**
* The date picker will be Primerised.
* There is now an UnderlineNav bar at the top:
* With four options:
* Dates
* Predecessors
* Successors
* Children
* Tab: **Dates**
* There is a new segmented control with label "Scheduling mode"
* There is a help icon next to the label. On hover, it displays a tooltip with this text: "‘Manual’ lets you pick fixed dates freely but ignores all predecessors. ‘Automatic’ selects the earliest possible start date for this work package, which cannot be modified."
* Options: "Manual" and "Automatic"
* The "Working days only" toggle becomes a checkbox aligned to the far right edge of the same line as the segmented control.
* In **Manual** mode:
* The dates are freely selectable, without restrictions.
* Relations don't affect the start and finish dates.
* A manually scheduled work package can push and pull successors that are automatically scheduled
* A manual work package can start before any of their predecessors
* A manually scheduled work package will not push a predecessor to the past when it's moved to the past
* In **Automatic** mode:
* The _Start date_ is
* The "Today" links under the _Start date_ field is
* Finish date and duration
* Unless
* The user is still able to click on the current or future dates to change the finish date.
* Tabs: **Predecessor, Successor and Children**
* Each of the tabs displays the number of relations of that type with a badge
* If there are no relations of that type, the badge will read 0
* In each tab, all relations of that type are displayed in a box list
* The content is the same as in the "Relations" tab of the work package, but in read only mode and:
* without the section header
* without the "more" icon (⋯), which means it is not possible to edit or remove relations from here in the current scope
* When there are no relations, each section will display a blankslate (see [Figma mockups](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=395-22009&t=HKs33N4NjcnQFpgU-4))
* The blankslate will not offer any actions (eg. add a relation of that type) in this version
**Single date mode (Milestone)**
In single date mode:
* There is only one date field with label "Date"
* Finish date and Duration are not displayed
* On desktop, two mini-calendars are displayed (due to the Underline Nav taking more horizontal space)
* A single click changes the date on the calendar (current behaviour)
##### **Date picker banners:**
**Manual scheduling:**
* Colour: Warning orange
* Action: Show relations
* Case 1: Relations exist but no predecessors.
* **Manually scheduled. Dates not affected by relations.**
Click on “Show relations” for Gantt overview
* Case 2: There are predecessors but a gap of over two days with the finish date of the latest predecessor.
* **Manually scheduled. Dates not affected by relations.**
There is a gap between this and all predecessors.
* Case 3: There are predecessors and the current work package overlaps with at least one of them.
* **Manually scheduled. Dates not affected by relations.**
Overlaps with at least one predecessor.
* Case 4: Work package has children.
* **Manually scheduled. Dates not affected by relations.**
This has child work packages but their start dates are ignored.
* Case 5: There are no relations.
* No banner displayed.
**Automatic:**
* Colour: Info blue
* Action: Show relations
* Case 1: There is a predecessor.
* **The start date is set by a predecessor.**
Click on “Show relations” for Gantt overview.
* Case 2: The work package is a parent.
* **The dates are determined by child work packages.**
Click on “Show relations” for Gantt overview.
* If a work package is both a parent and has predecessors, this "parent" message will be displayed.
#### Mobile behaviour
##### Banners
There are only two variants of banners in mobile: one for manual, one for automatic.
**Manual scheduling**
* Only visible if a manually scheduled work package has relations.
* Colour: Warning orange
* ~~Action: Relations~~ TBD
* Text: "Manually scheduled. Relations ignored."
**Automatic scheduling:**
* Always displayed in automatic mode.
* Colour: Blue orange
* ~~Action: Relations~~ TBD
* Text: Automatically scheduled. Start date derived.
##### Date picker structure
The mobile date picker has these specificities (see mockup for visual reference):
* The input fields are stacked vertically.
* The UnderlineNav component is not visible.
* The banner (when displayed) and rhe footer are fixed; any content that overflows is scrolled between the two.
#### Visuals
_**Note:** Please check_ [_Figma_](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=175-3641) _for the most recent mockups._
**Manual scheduling (but predecessors overlap):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/260443/content">
**Automatic scheduling (start date set by predecessors):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:463px;" src="/api/v3/attachments/265008/content">
**Single date picker (Milstone) - Manual scheduling**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/260446/content">
<br>
**Blankslate (No successors)**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/260445/content">**
**Mobile view, automatically scheduled:**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:253px;" src="/api/v3/attachments/262749/content">**
<br>