Skip to content

Commit a3420fe

Browse files
sf-pranav-varshneysf-pranav-varshney
authored
feat: W-18535234 [Assess Mode Report] Reports Framework add filter and search.
1 parent 185ee93 commit a3420fe

File tree

4 files changed

+510
-0
lines changed

4 files changed

+510
-0
lines changed

‎src/javascripts/reportGeneratorUtility.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
function toggleFilterDropdown() {
2+
const dropdown = document.getElementById('filter-dropdown');
3+
const chevronUp = document.getElementById('chevron-up');
4+
const chevronDown = document.getElementById('chevron-down');
5+
6+
if (dropdown && chevronUp && chevronDown) {
7+
dropdown.classList.toggle('show');
8+
chevronUp.classList.toggle('hidden');
9+
chevronDown.classList.toggle('hidden');
10+
}
11+
}
12+
13+
function filterAndSearchTable() {
14+
const table = document.getElementById('filterable-table-body');
15+
const checkboxes = document.querySelectorAll('.filter-checkbox');
16+
const searchInput = document.getElementById('name-search-input');
17+
const searchText = searchInput.value.trim().toLowerCase();
18+
const filters = {};
19+
const rows = Array.from(table?.rows || []);
20+
let visibleRowCount = 0;
21+
22+
// Gather checked filter options
23+
checkboxes.forEach((cb) => {
24+
const key = cb.getAttribute('data-filter-key');
25+
if (!key) return;
26+
if (!filters[key]) filters[key] = [];
27+
if (cb.checked) filters[key].push(cb.value);
28+
});
29+
30+
const noRowsMessage = document.getElementById('no-rows-message');
31+
32+
// NEW: If any filter group has zero selected values → show no rows
33+
const activeFilterKeys = [...new Set([...checkboxes].map(cb => cb.getAttribute('data-filter-key')))];
34+
const hasEmptyGroup = activeFilterKeys.some((key) => !filters[key] || filters[key].length === 0);
35+
if (hasEmptyGroup) {
36+
// Hide all rows and show no match message
37+
rows.forEach((row) => {
38+
if (row.id !== 'no-rows-message') row.style.display = 'none';
39+
});
40+
if (noRowsMessage) noRowsMessage.style.display = '';
41+
42+
// Update visible row count
43+
const visibleRows = Array.from(table.rows).filter(row => row.style.display !== 'none' && row.id !== 'no-rows-message');
44+
document.getElementById('row-count').textContent = `Showing ${visibleRows.length} record${visibleRows.length !== 1 ? 's' : ''}`;
45+
return;
46+
}
47+
48+
// Otherwise, apply filters and search
49+
rows.forEach((row) => {
50+
if (row.id === 'no-rows-message') return;
51+
52+
let show = true;
53+
54+
// Apply checkbox filters
55+
for (const key of Object.keys(filters)) {
56+
const selectedValues = filters[key];
57+
const cell = Array.from(row.cells).find(
58+
(c) => c.getAttribute('key') === key
59+
);
60+
const cellValue = cell?.getAttribute('value') || '';
61+
if (!selectedValues.includes(cellValue)) {
62+
show = false;
63+
break;
64+
}
65+
}
66+
67+
// Apply name search filter
68+
if (show && searchText !== '') {
69+
const nameCell = row.querySelector('td[data-name]');
70+
const nameValue = nameCell?.getAttribute('data-name')?.toLowerCase() || '';
71+
if (!nameValue.includes(searchText)) {
72+
show = false;
73+
}
74+
}
75+
76+
row.style.display = show ? '' : 'none';
77+
if (show) visibleRowCount++;
78+
});
79+
80+
if (noRowsMessage) {
81+
noRowsMessage.style.display = visibleRowCount === 0 ? '' : 'none';
82+
}
83+
84+
// Update visible row count
85+
const visibleRows = Array.from(table.rows).filter(row => row.style.display !== 'none' && row.id !== 'no-rows-message');
86+
document.getElementById('row-count').textContent = `Showing ${visibleRows.length} record${visibleRows.length !== 1 ? 's' : ''}`;
87+
}
88+
89+
// Expose globally so HTML inline event handlers can access them
90+
window.toggleFilterDropdown = toggleFilterDropdown;
91+
window.filterAndSearchTable = filterAndSearchTable;

‎src/styles/reportGenerator.css‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* === Filter Header & Toggle === */
2+
.filter-header {
3+
display: flex;
4+
align-items: center;
5+
justify-content: space-between;
6+
text-align: center;
7+
}
8+
9+
.filter-header-bar {
10+
position: absolute;
11+
right: 0;
12+
margin-right: 1.4rem;
13+
}
14+
15+
.filter-header-type {
16+
min-width: 90px;
17+
}
18+
19+
.filter-label,
20+
.filter-label-type {
21+
width: 100%;
22+
text-align: center;
23+
}
24+
25+
.filter-label-type {
26+
margin-left: -32px;
27+
}
28+
29+
.filter-toggle-button {
30+
color: black;
31+
padding: 8px 12px;
32+
cursor: pointer;
33+
font-weight: 600;
34+
display: inline-block;
35+
border: 1px solid #e5e5e5;
36+
line-height: 0rem;
37+
border-radius: 8px;
38+
background: white;
39+
}
40+
41+
/* === Dropdown Styles === */
42+
.filter-dropdown-container {
43+
display: inline-block;
44+
margin: 12px 0;
45+
}
46+
47+
.filter-dropdown {
48+
display: none;
49+
position: absolute;
50+
background-color: white;
51+
min-width: 250px;
52+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
53+
padding: 12px;
54+
z-index: 10;
55+
border: 1px solid #ccc;
56+
border-radius: 8px;
57+
right: 0;
58+
margin: 32px;
59+
}
60+
61+
.filter-dropdown.show {
62+
display: block;
63+
}
64+
65+
.chevron-icon {
66+
cursor: pointer;
67+
}
68+
69+
.chevron-icon.hidden,
70+
.hidden {
71+
display: none;
72+
}
73+
74+
/* === Filter Options === */
75+
.filter-option {
76+
padding-left: 16px;
77+
}
78+
79+
.filter-group {
80+
margin-bottom: 12px;
81+
}
82+
83+
.filter-group-label {
84+
font-weight: bold;
85+
margin-bottom: 4px;
86+
}
87+
88+
.filter-options label {
89+
display: block;
90+
margin-left: 8px;
91+
margin-bottom: 4px;
92+
}
93+
94+
/* === Table Styles === */
95+
.table-container {
96+
overflow: auto;
97+
max-width: 100%;
98+
position: relative;
99+
margin-top: 38px;
100+
}
101+
102+
.slds-table td,
103+
.slds-table th {
104+
white-space: normal;
105+
position: relative;
106+
max-width: 250px;
107+
}
108+
109+
.slds-table--bordered,
110+
.slds-table_bordered {
111+
border: 1.5px solid #d5d5d5;
112+
}
113+
114+
.slds-table--striped tbody tr:nth-of-type(even) > td,
115+
.slds-table--striped tbody tr:nth-of-type(even) > th,
116+
.slds-table_striped tbody tr:nth-of-type(even) > td,
117+
.slds-table_striped tbody tr:nth-of-type(even) > th {
118+
background-color: transparent;
119+
}
120+
121+
.slds-dropdown__item {
122+
text-align: justify;
123+
width: auto;
124+
white-space: nowrap;
125+
}
126+
127+
.filter-dropdown .slds-dropdown__list {
128+
display: table;
129+
min-width: max-content;
130+
}
131+
132+
thead tr {
133+
height: 32px;
134+
background-color: #f3f3f3;
135+
}
136+
137+
tbody tr td {
138+
overflow: auto;
139+
}
140+
141+
/* === Utility / Layout Styles === */
142+
.slds-text-heading_large {
143+
width: auto;
144+
height: 28px;
145+
top: 50px;
146+
left: 43px;
147+
font-weight: 200;
148+
font-size: 28px;
149+
line-height: 28px;
150+
letter-spacing: 0px;
151+
}
152+
153+
.search-container {
154+
position: relative;
155+
display: inline-block;
156+
width: 20rem;
157+
}
158+
159+
.search-icon {
160+
position: absolute;
161+
left: 10px;
162+
top: 50%;
163+
transform: translateY(-50%);
164+
pointer-events: none;
165+
}
166+
167+
.search-input {
168+
padding-left: 32px; /* leave space for icon */
169+
width: 100%;
170+
}
171+
172+
.search-container input {
173+
width: 100%;
174+
border-radius: 4px;
175+
border-width: 0.5px;
176+
line-height: 20px;
177+
vertical-align: middle;
178+
}
179+
180+
.row-count-display {
181+
font-weight: 600;
182+
margin-right: auto;
183+
display: inline-block;
184+
align-items: center;
185+
}
186+
187+
.org-details-section {
188+
display: inline-block;
189+
padding: 1.5rem;
190+
}
191+
192+
.label-key {
193+
font-size: small;
194+
color: #808080;
195+
}
196+
197+
.header-container {
198+
display: inline-block;
199+
width: 100%;
200+
background-color: #fff;
201+
border-radius: 6px;
202+
margin-top: 16px;
203+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
204+
}
205+
206+
.migration-message {
207+
margin-top: 16px;
208+
font-size: 10px;
209+
color: #8c4c00;
210+
font-weight: 600;
211+
padding: 12px;
212+
border-radius: 6px;
213+
background: #fae2b6;
214+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
215+
}
216+
217+
html {
218+
background: #f8f8f8;
219+
}

0 commit comments

Comments
 (0)