From 296373d7fdbaf4f7c948b26d4642b22010f0af20 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Mon, 12 Aug 2024 09:44:06 +0300 Subject: [PATCH] fix(ui5-special-date): add visual representation for Working/NonWorking types (#9524) Previously, when adding a `SpecialCalendarDate` to the `Calendar` component and specifying the public types `Working` and `NonWorking`, these settings were not properly applied. For example, setting a `Working` type to a weekend day did not visually reflect that the day was designated as a working day and vice versa for `NonWorking` type. With this change we resolve that issue, ensuring that the specified types (`Working` and `NonWorking`) now take effect as intended. --- packages/main/src/Calendar.ts | 14 +++++++++----- packages/main/src/DayPicker.ts | 5 ++--- packages/main/src/themes/DayPicker.css | 11 ++++++++--- packages/main/test/pages/CalendarLegend.html | 19 +++++++++++++++++-- .../main/test/specs/CalendarLegend.spec.js | 6 +++--- .../main/Calendar/CalendarWithLegend/main.js | 2 +- .../Calendar/CalendarWithLegend/sample.html | 3 +++ .../main/CalendarLegend/Basic/main.js | 2 +- .../main/CalendarLegend/Basic/sample.html | 3 +++ 9 files changed, 47 insertions(+), 18 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index c5a98fafc97d..c843b5aa2ec1 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -412,17 +412,16 @@ class Calendar extends CalendarPart { } get _specialCalendarDates() { + const hasSelectedType = this._specialDates.some(date => date.type === this._selectedItemType); const validSpecialDates = this._specialDates.filter(date => { const dateType = date.type; const dateValue = date.value; - const isTypeMatch = this._selectedItemType !== "None" ? dateType === this._selectedItemType : true; + const isTypeMatch = hasSelectedType + ? (dateType === this._selectedItemType || dateType === "Working" || dateType === "NonWorking") + : true; return isTypeMatch && dateValue && this._isValidCalendarDate(dateValue); }); - if (validSpecialDates.length === 0) { - this._selectedItemType = "None"; - } - const uniqueDates = new Set(); const uniqueSpecialDates: Array = []; @@ -442,7 +441,12 @@ class Calendar extends CalendarPart { } _onCalendarLegendSelectionChange(e: CustomEvent) { + const defaultTypes = ["Working", "NonWorking", "Selected", "Today"]; this._selectedItemType = e.detail.item.type; + + if (defaultTypes.includes(this._selectedItemType)) { + this._selectedItemType = "None"; // In order to avoid filtering of default types + } this._currentPickerDOM._autoFocus = false; } diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index d41c8272fbab..000f1f5b0523 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -278,7 +278,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { if (isSelectedBetween) { day.classes += " ui5-dp-item--selected-between"; - day.parts += " day-cell-selected-between"; } @@ -290,8 +289,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker { day.classes += " ui5-dp-item--othermonth"; } - if (isWeekend) { - day.classes += " ui5-dp-item--weeekend"; + if ((isWeekend || specialDayType === "NonWorking") && specialDayType !== "Working") { + day.classes += " ui5-dp-item--weekend"; } if (isDisabled) { diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css index 21b0df28dd05..f0017b93c235 100644 --- a/packages/main/src/themes/DayPicker.css +++ b/packages/main/src/themes/DayPicker.css @@ -107,7 +107,7 @@ height: 100%; } -.ui5-dp-item.ui5-dp-item--weeekend { +.ui5-dp-item.ui5-dp-item--weekend { background: var(--sapLegend_NonWorkingBackground); } @@ -117,7 +117,7 @@ } -.ui5-dp-item.ui5-dp-item--weeekend:hover { +.ui5-dp-item.ui5-dp-item--weekend:hover { background: var(--sapList_Hover_Background); filter: var(--_ui5_daypicker_item_weeekend_filter); } @@ -129,7 +129,7 @@ } .ui5-dp-item.ui5-dp-item--othermonth:hover, -.ui5-dp-item.ui5-dp-item--weeekend.ui5-dp-item--othermonth:hover { +.ui5-dp-item.ui5-dp-item--weekend.ui5-dp-item--othermonth:hover { color: var(--_ui5_daypicker_item_othermonth_hover_color); background: var(--sapList_Hover_Background); } @@ -328,6 +328,11 @@ border-block-start: var(--_ui5_daypicker_special_day_border_top); } +.ui5-dp-specialday.NonWorking, +.ui5-dp-specialday.Working { + border-block-start: none; +} + .ui5-dp-item--selected .ui5-dp-specialday { width: var(--_ui5_daypicker_selected_item_special_day_width); } diff --git a/packages/main/test/pages/CalendarLegend.html b/packages/main/test/pages/CalendarLegend.html index c5973d520a27..a67849d1a5ff 100644 --- a/packages/main/test/pages/CalendarLegend.html +++ b/packages/main/test/pages/CalendarLegend.html @@ -47,6 +47,17 @@ + + + + + + + + + + + - diff --git a/packages/main/test/specs/CalendarLegend.spec.js b/packages/main/test/specs/CalendarLegend.spec.js index fd2bbdd9f78b..42e7892b850d 100644 --- a/packages/main/test/specs/CalendarLegend.spec.js +++ b/packages/main/test/specs/CalendarLegend.spec.js @@ -56,7 +56,7 @@ describe("Calendar Legend with standard items", () => { const dayPicker = await calendar.$("#ui5wc_22-daypicker"); const filteredDays = await dayPicker.shadow$$("[special-day]"); - assert.strictEqual(filteredDays.length, 1, "Only one day is filtered"); + assert.strictEqual(filteredDays.length, 12, "Only one day is filtered"); }); it("Focusing item in the legend and then focus out, reset filtered days", async () => { @@ -73,13 +73,13 @@ describe("Calendar Legend with standard items", () => { const dayPicker = await calendar.$("#ui5wc_22-daypicker"); let filteredDays = await dayPicker.shadow$$("[special-day]"); - assert.strictEqual(filteredDays.length, 1, "Days are filtered"); + assert.strictEqual(filteredDays.length, 12, "Days are filtered"); await calendar.click(); // get the items again filteredDays = await dayPicker.shadow$$("[special-day]"); - assert.strictEqual(filteredDays.length, 20, "Days are un-filtered") + assert.strictEqual(filteredDays.length, 31, "Days are un-filtered") }); }) \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js b/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js index a677fb702314..bc1b5b36efe5 100644 --- a/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js +++ b/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js @@ -9,7 +9,7 @@ function updateSpecialDates() { const year = currentDate.getFullYear(); const formattedMonth = (currentDate.getMonth() + 1).toString().padStart(2, "0"); const specialDates = document.querySelectorAll("ui5-special-date"); - const types = ["Type05", "Type07", "Type13"]; + const types = ["Type05", "Type07", "Type13", "NonWorking"]; const daysInMonth = new Date(year, currentDate.getMonth() + 1, 0).getDate(); let assignedDays = new Set(); diff --git a/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/sample.html b/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/sample.html index ca7a752448fd..400f4c686c21 100644 --- a/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/sample.html +++ b/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/sample.html @@ -20,6 +20,9 @@ + + + diff --git a/packages/website/docs/_samples/main/CalendarLegend/Basic/main.js b/packages/website/docs/_samples/main/CalendarLegend/Basic/main.js index a677fb702314..bc1b5b36efe5 100644 --- a/packages/website/docs/_samples/main/CalendarLegend/Basic/main.js +++ b/packages/website/docs/_samples/main/CalendarLegend/Basic/main.js @@ -9,7 +9,7 @@ function updateSpecialDates() { const year = currentDate.getFullYear(); const formattedMonth = (currentDate.getMonth() + 1).toString().padStart(2, "0"); const specialDates = document.querySelectorAll("ui5-special-date"); - const types = ["Type05", "Type07", "Type13"]; + const types = ["Type05", "Type07", "Type13", "NonWorking"]; const daysInMonth = new Date(year, currentDate.getMonth() + 1, 0).getDate(); let assignedDays = new Set(); diff --git a/packages/website/docs/_samples/main/CalendarLegend/Basic/sample.html b/packages/website/docs/_samples/main/CalendarLegend/Basic/sample.html index 6ec83266e88f..97e7fb24b816 100644 --- a/packages/website/docs/_samples/main/CalendarLegend/Basic/sample.html +++ b/packages/website/docs/_samples/main/CalendarLegend/Basic/sample.html @@ -20,6 +20,9 @@ + + +