Content
View differences
Updated by Parimal Satyal almost 4 years ago
This sub-feature is part of the epic related to the duration feature (<mention class="mention" data-id="31992" data-type="work_package" data-text="#31992">#31992</mention>) and describes the functioning of the new date picker.
**Please note that the date picker is being implemented in multiple stages. The first version, for 12.2, is described here:** [**#42047**](https://community.openproject.org/work_packages/42047) **(date picker excluding duration and non-working days).**
**This ticket describes** _**only**_ **additions and changes for 12.3.**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37492/content"> <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34053/content"></div></figure>
### **Acceptance criteria**
The date picker extends the date picker from 12.2 with these new features:
* A new "duration" field next to the finish date.
* Non-working days taken into account (not included in calculation of duration) when date ranges include them. In other words, these days are skipped over.
* A checkbox to include non-working days in date ranges (and thus also duration)
#### Duration
* There are a new "Duration" field to the right of finish date
* The visual format for displaying duration is "4 days".
* When in focus, this retains only the numerical value "4".
* The field only accepts integers when in focus. On blur, it goes back to the normal display with the units ("n days", "n Tage", "n jours"...).
* ~~If the user types "4 days" (or "4 Tage", "4 jours"...), all information apart from the number is ignored. It should be considered the same as typing "4".~~
* On blur (remove focus), the localised word for "days" is added again.
Added 16 August after discussion with <mention class="mention" data-id="39106" data-type="user" data-text="@Henriette Darge">@Henriette Darge</mention> and <mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>:
Normally, when clicking on individual dates in the mini calendar, the active field switches between the start date and the finish date, with each click. With the introduction of Duraiton, this behaviour is maintained, with these particularities:
* When the Duration field is clicked on (for manual input of duration), it is considered "active" (much like the start and finish date fields).
* Clicking outside of the duration field (blur) does not change the active field; it remains duration, and only changes:
* with a click on the start or finish date fields
* with a click on a date in the mini calendar
* when the modal is closed
* When a user modifies the duration integer:
* If no dates are entered, there is no impact on the mini-calendar.
* If both dates are present, the finish date is updated automatically based on the input (preserved, or shifted into the past or the future)
* If only a start date was present, a finish date is now derived.
* If only a finish date was present, a start date is now derived.
* When the user is in the duration field and clicks on a date in the mini calendar:
* If the duration field has a value, the clicked date becomes the the start date, the finish date is derived from the duration, and the active field moves to the finish date (same as when a date is clicked on when the start date is active).
* A click on a second date then modifies the finish date (and can affect duration).
* The active field shifts again back to the start date.
* If the duration field has no value, the clicked date becomes the start date, no finish date is set but the active field becomes the finish date.
* A click on a second date modifies the finish date (which derives duration too).
* The active field shifts again back to the start date.
#### Mini calendar updates
Each calendar day has a few new states:
* **When enabled:**
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* In the selected range but a non-working day (_gray#5_ on a _gray#6_ background)
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37493/content"> <figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34054/content"></div></figure>
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37494/content">
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34055/content"></div></figure>
#### "Include non-working days" checkbox
* The action bar has a new checkbox on the left edge:
* **Include non-working days checkbox:** checking turns non-working days into regular days (and therefore including them even when finish date is derived using duration).
* This removes the grey background on non-working days; all days now look the same as a "normal" day.
* Unchecking the box reverses this (and non-working days become grey again and are skipped in calculations).
* If a work package already has start and end dates (and thus also duration) and the user enables this checkbox, the duration is preserved the dates are updated to include days that were previously skipped (the weekends, primarily).
* **Example:** A work package with a start date on a Thursday, and with a duration of 4 days, had a finish date of Tuesday (since Saturday and Sunday were skipped). Now, that non-working days are included, the finish date is now Sunday, and the duration remains 4 days.
* If the user goes back to working days only (from previously included non-working days), the duration is once again maintained, but the finish date is pushed to now skip over the non-working days.
* **Example:** In the same example as before, the work package now once again starts on a Tuesday, finishes on a Tuesday and has a duration of 4 days.
* If a work package only has one set of date information (just start date, just end date, or just duration), clicking this button will not affect any of the values until a second piece of information is also input.
* For example, for a work package with a start date only (so no duration), clicking this will immediately do nothing. However, if a second date is clicked, the duration calculated will now include non-working days.
* When migrating to 12.3, when the feature is introduced, all previous work packages will have this checkbox enabled (since non-working days will not have been taken into account in previously created work packages).
* For new work packages, this button will remain unchecked and non-working days will not be taken into account when calculating duration by default.
#### Logical changes
* Changing either a date, the duration or the non-working days will have automatic effects on the other fields.The concrete logic is described in <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>
* **Technical note:** Ideally this calculation is done by the backend, so that we don't have to repeat it in the frontend.
### Visuals
**Regular scheduling, working days only (default):**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37495/content"> <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34056/content"></div></figure>
**Regular scheduling, include non-working days:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37496/content"> <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34057/content"></div></figure>
**Automatic scheduling (mini calendar disabled):**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37497/content"> <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34059/content"></div></figure>
**Manual scheduling, working days only, with relations:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37498/content"> <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34060/content"></div></figure>
### Simple date picker
The simple date picker (for work packages with only one date, like milesstones) still does not have a duration field, but now has the "Include non-working days" option:
**Simple date picker with the include non-working days option:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37499/content"> <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34061/content"></div></figure>
### Date-only date picker
The date-only date picker is used in settings for example (outside of work packages). The option to include non-working days exists there too, to allow users to select one of those days:
**\[Work in progress, screens below will soon be updated\]** <figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34065/content"></div></figure>
### Mobile date picker
**\[Work in progress, screens below will soon be updated\]**
In the mobile version:
* the start/finish dates continue to each take 50% of the width and the duration field goes in a new line.
* the "include non-working days" goes in a new line before the action buttons.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34062/content"></div></figure>
**Mobile simple date picker:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34063/content"></div></figure>
**Mobile date-only picker (used outside of work packages):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34064/content"></div></figure>
### Figma prototypes
Please keep in mind that Figma page has a "(12.3) with Duration" in the title (the 12.2 page looks very similar, so do double-check). When in doubt, follow this link:
https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1806%3A50629
**Please note that the date picker is being implemented in multiple stages. The first version, for 12.2, is described here:** [**#42047**](https://community.openproject.org/work_packages/42047) **(date picker excluding duration and non-working days).**
**This ticket describes** _**only**_ **additions and changes for 12.3.**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37492/content">
### **Acceptance criteria**
The date picker extends the date picker from 12.2 with these new features:
* A new "duration" field next to the finish date.
* Non-working days taken into account (not included in calculation of duration) when date ranges include them. In other words, these days are skipped over.
* A checkbox to include non-working days in date ranges (and thus also duration)
#### Duration
* There are a new "Duration" field to the right of finish date
* The visual format for displaying duration is "4 days".
* When in focus, this retains only the numerical value "4".
* The field only accepts integers when in focus. On blur, it goes back to the normal display with the units ("n days", "n Tage", "n jours"...).
* ~~If the user types "4 days" (or "4 Tage", "4 jours"...), all information apart from the number is ignored. It should be considered the same as typing "4".~~
* On blur (remove focus), the localised word for "days" is added again.
Added 16 August after discussion with <mention class="mention" data-id="39106" data-type="user" data-text="@Henriette Darge">@Henriette Darge</mention> and <mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>:
Normally, when clicking on individual dates in the mini calendar, the active field switches between the start date and the finish date, with each click. With the introduction of Duraiton, this behaviour is maintained, with these particularities:
* When the Duration field is clicked on (for manual input of duration), it is considered "active" (much like the start and finish date fields).
* Clicking outside of the duration field (blur) does not change the active field; it remains duration, and only changes:
* with a click on the start or finish date fields
* with a click on a date in the mini calendar
* when the modal is closed
* When a user modifies the duration integer:
* If no dates are entered, there is no impact on the mini-calendar.
* If both dates are present, the finish date is updated automatically based on the input (preserved, or shifted into the past or the future)
* If only a start date was present, a finish date is now derived.
* If only a finish date was present, a start date is now derived.
* When the user is in the duration field and clicks on a date in the mini calendar:
* If the duration field has a value, the clicked date becomes the the start date, the finish date is derived from the duration, and the active field moves to the finish date (same as when a date is clicked on when the start date is active).
* A click on a second date then modifies the finish date (and can affect duration).
* The active field shifts again back to the start date.
* If the duration field has no value, the clicked date becomes the start date, no finish date is set but the active field becomes the finish date.
* A click on a second date modifies the finish date (which derives duration too).
* The active field shifts again back to the start date.
#### Mini calendar updates
Each calendar day has a few new states:
* **When enabled:**
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* In the selected range but a non-working day (_gray#5_ on a _gray#6_ background)
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37493/content">
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37494/content">
* The action bar has a new checkbox on the left edge:
* **Include non-working days checkbox:** checking turns non-working days into regular days (and therefore including them even when finish date is derived using duration).
* This removes the grey background on non-working days; all days now look the same as a "normal" day.
* Unchecking the box reverses this (and non-working days become grey again and are skipped in calculations).
* If a work package already has start and end dates (and thus also duration) and the user enables this checkbox, the duration is preserved the dates are updated to include days that were previously skipped (the weekends, primarily).
* **Example:** A work package with a start date on a Thursday, and with a duration of 4 days, had a finish date of Tuesday (since Saturday and Sunday were skipped). Now, that non-working days are included, the finish date is now Sunday, and the duration remains 4 days.
* If the user goes back to working days only (from previously included non-working days), the duration is once again maintained, but the finish date is pushed to now skip over the non-working days.
* **Example:** In the same example as before, the work package now once again starts on a Tuesday, finishes on a Tuesday and has a duration of 4 days.
* If a work package only has one set of date information (just start date, just end date, or just duration), clicking this button will not affect any of the values until a second piece of information is also input.
* For example, for a work package with a start date only (so no duration), clicking this will immediately do nothing. However, if a second date is clicked, the duration calculated will now include non-working days.
* When migrating to 12.3, when the feature is introduced, all previous work packages will have this checkbox enabled (since non-working days will not have been taken into account in previously created work packages).
* For new work packages, this button will remain unchecked and non-working days will not be taken into account when calculating duration by default.
#### Logical changes
* Changing either a date, the duration or the non-working days will have automatic effects on the other fields.The concrete logic is described in <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>
* **Technical note:** Ideally this calculation is done by the backend, so that we don't have to repeat it in the frontend.
### Visuals
**Regular scheduling, working days only (default):**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37495/content">
**Regular scheduling, include non-working days:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37496/content">
**Automatic scheduling (mini calendar disabled):**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37497/content">
**Manual scheduling, working days only, with relations:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37498/content">
### Simple date picker
The simple date picker (for work packages with only one date, like milesstones) still does not have a duration field, but now has the "Include non-working days" option:
**Simple date picker with the include non-working days option:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37499/content">
### Date-only date picker
The date-only date picker is used in settings for example (outside of work packages). The option to include non-working days exists there too, to allow users to select one of those days:
**\[Work in progress, screens below will soon be updated\]**
### Mobile date picker
**\[Work in progress, screens below will soon be updated\]**
In the mobile version:
* the start/finish dates continue to each take 50% of the width and the duration field goes in a new line.
* the "include non-working days" goes in a new line before the action buttons.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34062/content"></div></figure>
**Mobile simple date picker:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34063/content"></div></figure>
**Mobile date-only picker (used outside of work packages):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34064/content"></div></figure>
### Figma prototypes
Please keep in mind that Figma page has a "(12.3) with Duration" in the title (the 12.2 page looks very similar, so do double-check). When in doubt, follow this link:
https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1806%3A50629