diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts index 32ee3b9..e026117 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts @@ -346,7 +346,7 @@ export class CompactFilterComponent implements OnInit, OnChanges { return this.filterValue.includes(option); } - + // need to check this // Add method to handle multiselect option change onMultiselectOptionChange(event: any, option: string): void { // Initialize filterValue array if it doesn't exist diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html index 46fff9f..737db11 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html @@ -1,3 +1,6 @@ + + +
@@ -5,7 +8,17 @@ {{ filterKey }} ({{ filterType }})
- + + +
+ Current filter type: {{ filterType }} +
Showing TEXT filter
+
Showing DROPDOWN filter
+
Showing MULTISELECT filter
+
Showing DATE-RANGE filter
+
Showing TOGGLE filter
+
+
- +
-
-
- - +
+
+
+ + +
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss index 7dbe526..63d960f 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss @@ -1,74 +1,148 @@ +// Make sure the component is visible with very obvious styling .compact-filter { - padding: 10px; - border: 1px solid #ddd; - border-radius: 4px; - margin-bottom: 10px; - background-color: #f8f8f8; + display: block !important; + min-width: 200px !important; + max-width: 300px !important; + margin: 10px !important; + padding: 15px !important; + background: #e3f2fd !important; // Light blue background + border: 3px solid #1976d2 !important; // Dark blue border + border-radius: 8px !important; + font-size: 14px !important; .filter-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + margin-bottom: 10px !important; + padding: 5px !important; + background: #bbdefb !important; // Lighter blue header + border-radius: 4px !important; .filter-label, .filter-key { - font-weight: bold; + font-weight: bold !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + flex-grow: 1 !important; + color: #0d47a1 !important; // Dark blue text } .filter-type { - font-size: 0.8em; - color: #666; + font-size: 12px !important; + color: #424242 !important; + margin-left: 8px !important; + background: #fff !important; + padding: 2px 6px !important; + border-radius: 10px !important; } } .filter-control { - margin-bottom: 10px; - - .compact-input, .compact-select, .compact-date { - width: 100%; - padding: 5px; - border: 1px solid #ccc; - border-radius: 4px; - } - - .compact-multiselect { - width: 100%; - height: 100px; - } - - .checkbox-group { - display: flex; - flex-direction: column; - - .checkbox-item { - margin: 5px 0; - - input[type="checkbox"] { - margin-right: 5px; - } - } - } + display: block !important; + margin: 8px 0 !important; + padding: 8px !important; + background: #f5f5f5 !important; + border-radius: 4px !important; &.date-range { - display: flex; - gap: 10px; - - .compact-date { - flex: 1; - } + display: flex !important; + flex-direction: column !important; + gap: 5px !important; } &.toggle { - display: flex; - align-items: center; - - .clr-toggle { - margin-right: 10px; - } - - .toggle-label { - margin: 0; - } + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 8px !important; } } + + .compact-input, + .compact-select, + .compact-multiselect, + .compact-date { + width: 100% !important; + padding: 8px 12px !important; + font-size: 14px !important; + border-radius: 4px !important; + min-height: 36px !important; + border: 2px solid #4caf50 !important; // Green border + background: #fff !important; + } + + .compact-select { + height: 36px !important; + } + + .multiselect-container { + max-height: 200px !important; + overflow-y: auto !important; + border: 2px solid #ff9800 !important; // Orange border + border-radius: 4px !important; + padding: 10px !important; + background: #fff8e1 !important; // Light yellow background + } + + .checkbox-group { + display: flex !important; + flex-direction: column !important; + gap: 8px !important; + } + + .checkbox-item { + display: flex !important; + align-items: center !important; + gap: 8px !important; + padding: 5px !important; + border-radius: 4px !important; + + &:hover { + background: #f0f0f0 !important; + } + } + + .checkbox-label { + font-size: 14px !important; + margin: 0 !important; + cursor: pointer !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + color: #333 !important; + } + + .clr-checkbox { + margin: 0 !important; + cursor: pointer !important; + width: 18px !important; + height: 18px !important; + } + + .toggle-label { + margin: 0 !important; + font-size: 14px !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + max-width: 200px !important; + color: #333 !important; + } + + .clr-toggle { + margin: 0 8px 0 0 !important; + width: 40px !important; + height: 20px !important; + } +} + +// Add a very obvious background to make sure the component is visible +:host { + display: block !important; + background-color: #fffde7 !important; // Very light yellow + padding: 15px !important; + margin: 15px !important; + border: 4px solid #f57f17 !important; // Orange border + border-radius: 10px !important; } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts index 41bd3d3..2e6e7fc 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts @@ -23,17 +23,20 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { constructor( private filterService: FilterService - ) { } + ) { + console.log('=== COMPACT FILTER RUNNER CONSTRUCTOR CALLED ==='); + } ngOnInit(): void { - console.log('CompactFilterRunnerComponent initialized with inputs:', { - filterKey: this.filterKey, - filterType: this.filterType, - filterOptions: this.filterOptions, - filterLabel: this.filterLabel, - apiUrl: this.apiUrl, - connection: this.connection - }); + console.log('=== COMPACT FILTER RUNNER DEBUG INFO ==='); + console.log('Component initialized with inputs:'); + console.log('- filterKey:', this.filterKey); + console.log('- filterType:', this.filterType); + console.log('- filterOptions:', this.filterOptions); + console.log('- filterLabel:', this.filterLabel); + console.log('- apiUrl:', this.apiUrl); + console.log('- connection:', this.connection); + console.log('========================================'); // Register this filter with the filter service this.registerFilter(); @@ -41,24 +44,30 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { // Subscribe to filter definitions to get available filters this.filterService.filters$.subscribe(filters => { this.availableFilters = filters; + console.log('Available filters updated:', filters); this.updateSelectedFilter(); }); // Subscribe to filter state changes this.filterService.filterState$.subscribe(state => { + console.log('Filter state updated:', state); if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) { this.filterValue = state[this.selectedFilter.id]; + console.log('Filter value updated for', this.selectedFilter.id, ':', this.filterValue); } }); } ngOnChanges(changes: SimpleChanges): void { - console.log('CompactFilterRunnerComponent inputs changed:', changes); + console.log('=== COMPACT FILTER RUNNER CHANGES DEBUG ==='); + console.log('Component inputs changed:', changes); // If filterKey or filterType changes, re-register the filter if (changes.filterKey || changes.filterType || changes.filterOptions) { + console.log('Re-registering filter due to input changes'); this.registerFilter(); } + console.log('=========================================='); } // Register this filter with the filter service @@ -68,6 +77,7 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { if (this.filterKey) { // Get current filter values from the service const currentFilterValues = this.filterService.getFilterValues(); + console.log('Current filter values from service:', currentFilterValues); // Create a filter definition for this compact filter const filterDef: Filter = { @@ -83,9 +93,11 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { // Get current filters const currentFilters = this.filterService.getFilters(); + console.log('Current filters from service:', currentFilters); // Check if this filter is already registered const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id); + console.log('Existing filter index:', existingFilterIndex); if (existingFilterIndex >= 0) { // Preserve the existing filter configuration @@ -130,15 +142,20 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { // Update the selected filter reference this.selectedFilter = filterDef; console.log('Selected filter set to:', this.selectedFilter); + } else { + console.log('No filterKey provided, skipping filter registration'); } } updateSelectedFilter(): void { + console.log('Updating selected filter. Filter key:', this.filterKey, 'Available filters:', this.availableFilters); if (this.filterKey && this.availableFilters.length > 0) { this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null; + console.log('Found selected filter:', this.selectedFilter); if (this.selectedFilter) { // Get current value for this filter from the service const currentState = this.filterService.getFilterValues(); + console.log('Current state from service:', currentState); const filterValue = currentState[this.selectedFilter.id]; if (filterValue !== undefined) { this.filterValue = filterValue; @@ -181,8 +198,14 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { this.onFilterValueChange(dateRange); } + // Handle multi-select changes onMultiSelectChange(option: string, event: any): void { + console.log('=== MULTISELECT CHANGE DEBUG ==='); + console.log('Option:', option); + console.log('Event:', event); + console.log('Checked:', event.target.checked); + const checked = event.target.checked; // Initialize filterValue as array if it's not already @@ -194,13 +217,38 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges { // Add option to array if not already present if (!this.filterValue.includes(option)) { this.filterValue.push(option); + console.log('Added option to filter value:', option); } } else { // Remove option from array this.filterValue = this.filterValue.filter((item: string) => item !== option); + console.log('Removed option from filter value:', option); } + console.log('Updated filter value:', this.filterValue); + // Emit the change this.onFilterValueChange(this.filterValue); + console.log('=============================='); + } + + // Add method to check if an option is selected for checkboxes (needed for proper UI rendering) + isOptionSelected(option: string): boolean { + console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue); + if (!this.filterValue) { + console.log('No filter value, returning false'); + return false; + } + + // Ensure filterValue is an array for multiselect + if (!Array.isArray(this.filterValue)) { + console.log('Filter value is not an array, converting to array'); + this.filterValue = []; + return false; + } + + const result = this.filterValue.includes(option); + console.log('Option', option, 'is selected:', result); + return result; } } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html index 78220cb..f2810c3 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html @@ -26,6 +26,9 @@ + + +