Skip to content

Commit

Permalink
fix(ui5-special-date): add visual representation for Working/NonWorki…
Browse files Browse the repository at this point in the history 
…ng types (SAP#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.
  • Loading branch information
@hinzzx
hinzzx authored Aug 12, 2024
1 parent ec5d614 commit 296373d
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 18 deletions.
14 changes: 9 additions & 5 deletions packages/main/src/Calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<SpecialCalendarDateT> = [];

Expand All @@ -442,7 +441,12 @@ class Calendar extends CalendarPart {
}

_onCalendarLegendSelectionChange(e: CustomEvent<CalendarLegendItemSelectionChangeEventDetail>) {
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;
}

Expand Down
5 changes: 2 additions & 3 deletions packages/main/src/DayPicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}

Expand All @@ -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) {
Expand Down
11 changes: 8 additions & 3 deletions packages/main/src/themes/DayPicker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
height: 100%;
}

.ui5-dp-item.ui5-dp-item--weeekend {
.ui5-dp-item.ui5-dp-item--weekend {
background: var(--sapLegend_NonWorkingBackground);
}

Expand All @@ -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);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down
19 changes: 17 additions & 2 deletions packages/main/test/pages/CalendarLegend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,17 @@
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>
<ui5-special-date slot="specialDates" value="" type=""></ui5-special-date>

<ui5-calendar-legend
slot="calendarLegend"
Expand Down Expand Up @@ -94,13 +105,17 @@
const formattedDay = day < 10 ? "0" + day : day.toString();
const newValue = year + "-" + formattedMonth + "-" + formattedDay;
specDate.setAttribute("value", newValue);
specDate.setAttribute("type", `Type${formattedDay}`);

if (day <= 20) {
specDate.setAttribute("type", `Type${formattedDay}`);
} else {
specDate.setAttribute("type", "NonWorking");
}
});
}

updateSpecialDates();
</script>


</body>
</html>
6 changes: 3 additions & 3 deletions packages/main/test/specs/CalendarLegend.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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")
});
})
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
3 changes: 3 additions & 0 deletions packages/website/docs/_samples/main/Calendar/CalendarWithLegend/sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>

<ui5-calendar-legend slot="calendarLegend" id="calendarLegend" hide-today hide-selected-day>
<ui5-calendar-legend-item type="Type05" text="Holiday"></ui5-calendar-legend-item>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/CalendarLegend/Basic/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
3 changes: 3 additions & 0 deletions packages/website/docs/_samples/main/CalendarLegend/Basic/sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-special-date slot="specialDates"></ui5-special-date>
<ui5-calendar-legend slot="calendarLegend">
<ui5-calendar-legend-item type="Type05" text="Holiday"></ui5-calendar-legend-item>
<ui5-calendar-legend-item type="Type07" text="School Vacation"></ui5-calendar-legend-item>
Expand Down

0 comments on commit 296373d

Please sign in to comment.