1- function toggleFilterDropdown ( ) {
2- const dropdown = document . getElementById ( 'filter-dropdown' ) ;
3- const chevronUp = document . getElementById ( 'chevron-up' ) ;
4- const chevronDown = document . getElementById ( 'chevron-down' ) ;
1+ function toggleFilterDropdown ( tableId ) {
2+ const reportTable = document . getElementById ( tableId ) ;
3+ const dropdown = reportTable . querySelector ( '#filter-dropdown' ) ;
4+ const chevronUp = reportTable . querySelector ( '#chevron-up' ) ;
5+ const chevronDown = reportTable . querySelector ( '#chevron-down' ) ;
56
67 if ( dropdown && chevronUp && chevronDown ) {
78 dropdown . classList . toggle ( 'show' ) ;
@@ -15,10 +16,16 @@ function toggleDiffModal(name) {
1516 modal . style . display = modal . style . display === 'none' ? 'flex' : 'none' ;
1617}
1718
18- function filterAndSearchTable ( ) {
19- const table = document . getElementById ( 'filterable-table-body' ) ;
20- const checkboxes = document . querySelectorAll ( '.filter-checkbox' ) ;
21- const searchInput = document . getElementById ( 'name-search-input' ) ;
19+ function toggleDiffModal ( name ) {
20+ const modal = document . getElementById ( `myModal_${ name } ` ) ;
21+ modal . style . display = modal . style . display === 'none' ? 'flex' : 'none' ;
22+ }
23+
24+ function filterAndSearchTable ( tableId ) {
25+ const reportTable = document . getElementById ( tableId ) ;
26+ const table = reportTable . querySelector ( '#filterable-table-body' ) ;
27+ const checkboxes = reportTable . querySelectorAll ( '.filter-checkbox' ) ;
28+ const searchInput = reportTable . querySelector ( '#name-search-input' ) ;
2229 const searchText = searchInput . value . trim ( ) . toLowerCase ( ) ;
2330 const filters = { } ;
2431 const rows = Array . from ( table ?. rows || [ ] ) ;
@@ -32,7 +39,7 @@ function filterAndSearchTable() {
3239 if ( cb . checked ) filters [ key ] . push ( cb . value ) ;
3340 } ) ;
3441
35- const noRowsMessage = document . getElementById ( ' no-rows-message') ;
42+ const noRowsMessage = reportTable . querySelector ( '# no-rows-message') ;
3643
3744 // NEW: If any filter group has zero selected values → show no rows
3845 const activeFilterKeys = [ ...new Set ( [ ...checkboxes ] . map ( ( cb ) => cb . getAttribute ( 'data-filter-key' ) ) ) ] ;
@@ -44,17 +51,19 @@ function filterAndSearchTable() {
4451 } ) ;
4552 if ( noRowsMessage ) noRowsMessage . style . display = '' ;
4653
54+
4755 // Update visible row count
4856 const visibleRows = Array . from ( table . rows ) . filter (
4957 ( row ) => row . style . display !== 'none' && row . id !== 'no-rows-message'
5058 ) ;
51- document . getElementById ( ' row-count') . textContent = `Showing ${ visibleRows . length } record${
59+ reportTable . querySelector ( '# row-count') . textContent = `Showing ${ visibleRows . length } record${
5260 visibleRows . length !== 1 ? 's' : ''
5361 } `;
5462 return ;
5563 }
5664
5765 // Otherwise, apply filters and search
66+ let processedClasses = new Set ( ) ;
5867 rows . forEach ( ( row ) => {
5968 if ( row . id === 'no-rows-message' ) return ;
6069
@@ -80,7 +89,11 @@ function filterAndSearchTable() {
8089 }
8190 }
8291
83- row . style . display = show ? '' : 'none' ;
92+ // row.style.display = show ? '' : 'none';
93+ if ( ! processedClasses . has ( row . classList [ 0 ] ) ) {
94+ hideOrShowData ( reportTable , row . classList [ 0 ] , show ) ;
95+ processedClasses . add ( row . classList [ 0 ] ) ;
96+ }
8497 if ( show ) visibleRowCount ++ ;
8598 } ) ;
8699
@@ -92,11 +105,43 @@ function filterAndSearchTable() {
92105 const visibleRows = Array . from ( table . rows ) . filter (
93106 ( row ) => row . style . display !== 'none' && row . id !== 'no-rows-message'
94107 ) ;
95- document . getElementById ( ' row-count') . textContent = `Showing ${ visibleRows . length } record${
108+ reportTable . querySelector ( '# row-count') . textContent = `Showing ${ visibleRows . length } record${
96109 visibleRows . length !== 1 ? 's' : ''
97110 } `;
98111}
99112
113+ function hideOrShowData ( reportTable , rowClass , show ) {
114+ const rows = Array . from ( reportTable . querySelectorAll ( `.${ rowClass } ` ) ) ;
115+ rows . forEach ( ( row ) => {
116+ row . style . display = show ? '' : 'none' ;
117+ } ) ;
118+ }
119+
120+ document . addEventListener ( 'DOMContentLoaded' , ( ) => {
121+ document . querySelectorAll ( '.collapsible-content' ) . forEach ( ( collapsibleContent ) => {
122+ collapsibleContent . style . display = 'none' ;
123+ } ) ;
124+
125+ var coll = document . getElementsByClassName ( 'collapsible' ) ;
126+ var i ;
127+
128+ for ( i = 0 ; i < coll . length ; i ++ ) {
129+ coll [ i ] . addEventListener ( 'click' , function ( ) {
130+ this . classList . toggle ( 'active' ) ;
131+ var content = this . nextElementSibling ;
132+ if ( content . style . display === 'block' ) {
133+ content . style . display = 'none' ;
134+ } else {
135+ content . style . display = 'block' ;
136+ }
137+ } ) ;
138+ }
139+
140+ document . querySelectorAll ( '.rpt-table-container' ) . forEach ( ( tableContainer ) => {
141+ filterAndSearchTable ( tableContainer . id ) ;
142+ } ) ;
143+ } ) ;
144+
100145// Expose globally so HTML inline event handlers can access them
101146window . toggleFilterDropdown = toggleFilterDropdown ;
102147window . filterAndSearchTable = filterAndSearchTable ;
0 commit comments