feat(ui5-timeline-header-bar): introduce filterInfoBar slot for active filter display #13419
+362
−23
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Timeline — filterInfoBar Slot</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
|
|
||
| <script src="%VITE_BUNDLE_PATH%" type="module"></script> | ||
| <style> | ||
| body { | ||
| background-color: var(--sapBackgroundColor, #f5f6f7); | ||
| font-family: "72", "72full", Arial, Helvetica, sans-serif; | ||
| padding: 2rem; | ||
| } | ||
|
|
||
| .filter-info-content { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| font-size: 0.875rem; | ||
| font-family: "72", "72full", Arial, Helvetica, sans-serif; | ||
| } | ||
|
|
||
| .filter-info-content .filter-info-text { | ||
| flex: 1; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <ui5-timeline id="timeline" accessible-name="Project Activity Feed"> | ||
| <ui5-timeline-header-bar slot="headerBar" show-search show-filter show-sort filter-by="Category"> | ||
| <ui5-timeline-filter-option text="Meetings"></ui5-timeline-filter-option> | ||
| <ui5-timeline-filter-option text="Development"></ui5-timeline-filter-option> | ||
| <ui5-timeline-filter-option text="Releases"></ui5-timeline-filter-option> | ||
| </ui5-timeline-header-bar> | ||
|
|
||
| <ui5-timeline-item data-category="Meetings" data-date="2024-03-10T09:00" | ||
| title-text="Sprint Planning" subtitle-text="10.03.2024 09:00" | ||
| icon="calendar" name="Sarah Chen"> | ||
| Kick-off for Sprint 24. Estimated velocity: 42 story points. | ||
| </ui5-timeline-item> | ||
|
|
||
| <ui5-timeline-item data-category="Development" data-date="2024-03-10T11:30" | ||
| title-text="PR #487 — Auth Module Refactor" subtitle-text="10.03.2024 11:30" | ||
| icon="developer-settings" name="James Rivera"> | ||
| Replaced legacy session handling with JWT tokens. | ||
| </ui5-timeline-item> | ||
|
|
||
| <ui5-timeline-item data-category="Meetings" data-date="2024-03-10T14:00" | ||
| title-text="Client Requirements Call" subtitle-text="10.03.2024 14:00" | ||
| icon="phone" name="Emily Watson"> | ||
| Discussed Q2 roadmap priorities. | ||
| </ui5-timeline-item> | ||
|
|
||
| <ui5-timeline-item data-category="Development" data-date="2024-03-10T16:00" | ||
| title-text="API Documentation Update" subtitle-text="10.03.2024 16:00" | ||
| icon="document" name="Arun Patel"> | ||
| Added OpenAPI specs for new endpoints. | ||
| </ui5-timeline-item> | ||
|
|
||
| <ui5-timeline-item data-category="Releases" data-date="2024-03-11T06:00" | ||
| title-text="Deploy v2.5.1 to Staging" subtitle-text="11.03.2024 06:00" | ||
| icon="upload" name="DevOps Pipeline" state="Positive"> | ||
| Staging deployment successful. | ||
| </ui5-timeline-item> | ||
|
|
||
| <ui5-timeline-item data-category="Meetings" data-date="2024-03-12T09:00" | ||
| title-text="Post-Release Retrospective" subtitle-text="12.03.2024 09:00" | ||
| icon="group" name="Full Team"> | ||
| Key takeaway: improve staging parity with prod. | ||
| </ui5-timeline-item> | ||
| </ui5-timeline> | ||
|
|
||
| <script> | ||
| const timeline = document.getElementById("timeline"); | ||
| let headerBar; | ||
| let allItems; | ||
| let infoBarElement; | ||
| const state = { searchQuery: "", selectedCategories: [], sortOrder: "Ascending" }; | ||
|
|
||
| function getHeaderBar() { | ||
| if (!headerBar) { | ||
| headerBar = timeline.querySelector("ui5-timeline-header-bar"); | ||
| } | ||
| return headerBar; | ||
| } | ||
|
|
||
| function applyFilters() { | ||
| if (!allItems) { | ||
| allItems = [...timeline.querySelectorAll("[ui5-timeline-item]")]; | ||
| } | ||
|
|
||
| allItems.forEach(item => item.remove()); | ||
|
|
||
| let visibleItems = allItems.filter(item => { | ||
| const text = [item.titleText, item.name, item.subtitleText, item.textContent] | ||
| .join(" ").toLowerCase(); | ||
| const matchesSearch = !state.searchQuery || text.includes(state.searchQuery); | ||
| const matchesCategory = state.selectedCategories.length === 0 | ||
| || state.selectedCategories.includes(item.dataset.category); | ||
| return matchesSearch && matchesCategory; | ||
| }); | ||
|
|
||
| visibleItems.sort((itemA, itemB) => { | ||
| const dateA = new Date(itemA.dataset.date || 0); | ||
| const dateB = new Date(itemB.dataset.date || 0); | ||
| return state.sortOrder === "Ascending" ? dateA - dateB : dateB - dateA; | ||
| }); | ||
|
|
||
| visibleItems.forEach(item => timeline.appendChild(item)); | ||
| } | ||
|
|
||
| function updateFilterInfoBar() { | ||
| if (state.selectedCategories.length > 0) { | ||
| if (!infoBarElement) { | ||
| infoBarElement = document.createElement("div"); | ||
| infoBarElement.slot = "filterInfoBar"; | ||
| infoBarElement.classList.add("filter-info-content"); | ||
|
|
||
| const textElement = document.createElement("ui5-text"); | ||
| textElement.classList.add("filter-info-text"); | ||
|
|
||
| const clearButton = document.createElement("ui5-button"); | ||
| clearButton.icon = "decline"; | ||
| clearButton.design = "Transparent"; | ||
| clearButton.tooltip = "Clear filters"; | ||
| clearButton.addEventListener("click", clearFilters); | ||
|
|
||
| infoBarElement.appendChild(textElement); | ||
| infoBarElement.appendChild(clearButton); | ||
| getHeaderBar().appendChild(infoBarElement); | ||
| } | ||
|
|
||
| infoBarElement.querySelector(".filter-info-text").textContent = | ||
| "Filtered By: " + state.selectedCategories.join(", "); | ||
| } else if (infoBarElement) { | ||
| infoBarElement.remove(); | ||
| infoBarElement = null; | ||
| } | ||
| } | ||
|
|
||
| function clearFilters() { | ||
| getHeaderBar().querySelectorAll("ui5-timeline-filter-option") | ||
| .forEach(option => { option.selected = false; }); | ||
|
|
||
| state.selectedCategories = []; | ||
| updateFilterInfoBar(); | ||
| applyFilters(); | ||
| } | ||
|
|
||
| timeline.addEventListener("search", event => { | ||
| state.searchQuery = event.detail.value.toLowerCase(); | ||
| applyFilters(); | ||
| }); | ||
|
|
||
| timeline.addEventListener("filter", event => { | ||
| state.selectedCategories = event.detail.selectedOptions; | ||
| updateFilterInfoBar(); | ||
| applyFilters(); | ||
| }); | ||
|
|
||
| timeline.addEventListener("sort", event => { | ||
| state.sortOrder = event.detail.sortOrder; | ||
| applyFilters(); | ||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| --- | ||
| slug: ../TimelineHeaderBar | ||
| --- | ||
|
|
||
| import WithSearch from "../../../_samples/fiori/Timeline/WithSearch/WithSearch.md"; | ||
| import WithFilter from "../../../_samples/fiori/Timeline/WithFilter/WithFilter.md"; | ||
| import WithHeaderBar from "../../../_samples/fiori/Timeline/WithHeaderBar/WithHeaderBar.md"; | ||
|
|
||
| <%COMPONENT_OVERVIEW%> | ||
|
|
||
| ## Search | ||
|
|
||
| <WithSearch /> | ||
|
|
||
| ## Filter and Sort | ||
|
|
||
| <WithFilter /> | ||
|
|
||
| ## Combined (Search + Filter + Sort + Filter Info Bar) | ||
|
|
||
| The `ui5-timeline-header-bar` exposes a `filterInfoBar` slot where the application can show active filter information with a clear action. The component provides the styled container; the application controls the content entirely. | ||
|
|
||
| <WithHeaderBar /> | ||
|
|
||
| <%COMPONENT_METADATA%> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could keep TimelineHeaderBarin in variable