diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js index 9ac28b0b3..51ade758f 100644 --- a/src/webcomponents/commons/grid-commons.js +++ b/src/webcomponents/commons/grid-commons.js @@ -324,13 +324,12 @@ export default class GridCommons { return columns; } - displayResponseWarningEvents(response) { + displayResponseWarningEvents(response, maxVisibleEvents = 3) { const eventsContainer = this.context.querySelector(`div#${this.gridId}WarningEvents`); if (eventsContainer && (response?.events?.length > 0 || response?.responses?.[0]?.events?.length > 0)) { const events = [...(response?.events || []), ...(response?.responses?.[0]?.events || [])] - .filter(event => event && event.type === "WARNING" && !!event.message); - if (events.length > 0) { - const eventsMessages = events.map(event => { + .filter(event => event && event.type === "WARNING" && !!event.message) + .map(event => { return `
@@ -338,7 +337,43 @@ export default class GridCommons {
`; }); - eventsContainer.replaceChildren(UtilsNew.renderHTML(eventsMessages.join(""))); + if (events.length > 0) { + const defaultVisibleEvents = events.length > maxVisibleEvents ? events.slice(0, maxVisibleEvents) : events; + const defaultHiddenEvents = events.length > maxVisibleEvents ? events.slice(maxVisibleEvents) : []; + const eventsMessages = UtilsNew.renderHTML(` +
+ ${defaultVisibleEvents.join("")} + ${defaultHiddenEvents.length > 0 ? ` +
${defaultHiddenEvents.join("")}
+
+
+ Show more warning events (${defaultHiddenEvents.length}) +
+
+ Show less warning events +
+
+ ` : ""} +
+ `).querySelector("div"); + eventsContainer.replaceChildren(eventsMessages); + if (defaultHiddenEvents.length > 0) { + const hiddenEventsElement = eventsMessages.querySelector(`div[data-role="hidden-events"]`); + const showMoreEventsElement = eventsMessages.querySelector(`div[data-role="show-more-events"]`); + const showLessEventsElement = eventsMessages.querySelector(`div[data-role="show-less-events"]`); + // Show more events click + showMoreEventsElement.addEventListener("click", () => { + hiddenEventsElement.style.display = "block"; + showLessEventsElement.style.display = "inline-block"; + showMoreEventsElement.style.display = "none"; + }); + // Show less events click + showLessEventsElement.addEventListener("click", () => { + hiddenEventsElement.style.display = "none"; + showLessEventsElement.style.display = "none"; + showMoreEventsElement.style.display = "inline-block"; + }); + } } } }