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.**
<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 If 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".~~ "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)
<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>
<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 dates remain unchanged and the duration is updated to include the additional days now included. (For example, it might for from 3 to 5 if the date ranges previously spanned one weekend)
* If the user unchecks this box, the same will happen; start and end dates are preserved and duration is updated.
* 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 thes evalues information 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> 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):**
<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:**
<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):**
<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:**
<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:**
<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:
<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
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.**
<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
* ~~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)
<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>
<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 dates remain unchanged and the duration is updated to include the additional days now included. (For example, it might for from 3 to 5 if the date ranges previously spanned one weekend)
* If the user unchecks this box, the same will happen; start and end dates are preserved and duration is updated.
* 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
* 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.
**Regular scheduling, working days only (default):**
<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:**
<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):**
<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:**
<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:**
<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:
<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
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