filter

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { FilterService, Filter } from '../../../dashboardnew/common-filter/filter.service';
 
 @Component({
@@ -6,13 +6,13 @@ import { FilterService, Filter } from '../../../dashboardnew/common-filter/filte
   templateUrl: './compact-filter-runner.component.html',
   styleUrls: ['./compact-filter-runner.component.scss']
 })
-export class CompactFilterRunnerComponent implements OnInit {
+export class CompactFilterRunnerComponent implements OnInit, OnChanges {
   @Input() filterKey: string = '';
   @Input() filterType: string = 'text';
   @Input() filterOptions: string[] = [];
   @Input() filterLabel: string = '';
   @Input() apiUrl: string = '';
-  @Input() connection: number | undefined; // Changed from connectionId to match DashboardContentModel
+  @Input() connection: number | undefined;
   @Output() filterChange = new EventEmitter<any>();
   
   selectedFilter: Filter | null = null;
@@ -26,6 +26,15 @@ export class CompactFilterRunnerComponent implements OnInit {
   ) { }
 
   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
+    });
+    
     // Register this filter with the filter service
     this.registerFilter();
     
@@ -43,8 +52,19 @@ export class CompactFilterRunnerComponent implements OnInit {
     });
   }
   
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log('CompactFilterRunnerComponent inputs changed:', changes);
+    
+    // If filterKey or filterType changes, re-register the filter
+    if (changes.filterKey || changes.filterType || changes.filterOptions) {
+      this.registerFilter();
+    }
+  }
+  
   // Register this filter with the filter service
   registerFilter(): void {
+    console.log('Registering filter with key:', this.filterKey, 'type:', this.filterType);
+    
     if (this.filterKey) {
       // Get current filter values from the service
       const currentFilterValues = this.filterService.getFilterValues();
@@ -59,6 +79,8 @@ export class CompactFilterRunnerComponent implements OnInit {
         value: this.filterValue // Use the current filter value
       };
       
+      console.log('Created filter definition:', filterDef);
+      
       // Get current filters
       const currentFilters = this.filterService.getFilters();
       
@@ -68,15 +90,18 @@ export class CompactFilterRunnerComponent implements OnInit {
       if (existingFilterIndex >= 0) {
         // Preserve the existing filter configuration
         const existingFilter = currentFilters[existingFilterIndex];
+        console.log('Found existing filter:', existingFilter);
         
         // Preserve the existing filter value if it exists in the service
         if (currentFilterValues.hasOwnProperty(existingFilter.id)) {
           filterDef.value = currentFilterValues[existingFilter.id];
           this.filterValue = filterDef.value; // Update local value
+          console.log('Using value from service:', filterDef.value);
         } else if (existingFilter.value !== undefined) {
           // Fallback to existing filter's value if no service value
           filterDef.value = existingFilter.value;
           this.filterValue = filterDef.value;
+          console.log('Using value from existing filter:', filterDef.value);
         }
         
         // Preserve other configuration properties
@@ -85,15 +110,18 @@ export class CompactFilterRunnerComponent implements OnInit {
         
         // Update existing filter
         currentFilters[existingFilterIndex] = filterDef;
+        console.log('Updated existing filter:', filterDef);
       } else {
         // For new filters, check if there's already a value in the service
         if (currentFilterValues.hasOwnProperty(filterDef.id)) {
           filterDef.value = currentFilterValues[filterDef.id];
           this.filterValue = filterDef.value; // Update local value
+          console.log('Using value from service for new filter:', filterDef.value);
         }
         
         // Add new filter
         currentFilters.push(filterDef);
+        console.log('Added new filter:', filterDef);
       }
       
       // Update the filter service with the new filter list
@@ -101,6 +129,7 @@ export class CompactFilterRunnerComponent implements OnInit {
       
       // Update the selected filter reference
       this.selectedFilter = filterDef;
+      console.log('Selected filter set to:', this.selectedFilter);
     }
   }
   
@@ -120,11 +149,15 @@ export class CompactFilterRunnerComponent implements OnInit {
           // Use the current filter value as fallback
           this.filterValue = this.filterValue || '';
         }
+        
+        console.log('Updated selected filter value:', this.filterValue);
       }
     }
   }
   
   onFilterValueChange(value: any): void {
+    console.log('Filter value changed:', value);
+    
     if (this.selectedFilter) {
       this.filterValue = value;
       this.filterService.updateFilterValue(this.selectedFilter.id, value);

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html

@@ -26,7 +26,11 @@
         <!-- <span><button class="btn btn-primary" (click)="Export(item.name)">Export</button></span> -->
         <!-- <span><app-line-runner (buttonClicked)="generatePDFFile()"></app-line-runner></span> -->
         <!-- <h4 style="margin-top: 10px; margin-left: 10px;">{{ item.charttitle }}</h4> -->
-        <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" (moduleInfo)="display($event)"></ndc-dynamic>
+        <ndc-dynamic class="no-drag" 
+                     [ndcDynamicComponent]="item.component" 
+                     [ndcDynamicInputs]="getComponentInputs(item)"
+                     (moduleInfo)="display($event)">
+        </ndc-dynamic>
       </gridster-item>
     </gridster>
   </div>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts

@@ -295,4 +295,48 @@ dashboard_name = "Dashtest";
     console.log('Button clicked in SomeComponent');
     // Add your custom logic here when the button is clicked in SomeComponent
   }
+  
+  // Method to provide inputs for dynamic components based on their type
+  getComponentInputs(item: any): any {
+    const inputs: any = {};
+    
+    // Common inputs for all components
+    if (item.table !== undefined) inputs.table = item.table;
+    if (item.xAxis !== undefined) inputs.xAxis = item.xAxis;
+    if (item.yAxis !== undefined) inputs.yAxis = item.yAxis;
+    if (item.connection !== undefined) inputs.connection = item.connection;
+    if (item.charttitle !== undefined) inputs.charttitle = item.charttitle;
+    if (item.chartlegend !== undefined) inputs.chartlegend = item.chartlegend;
+    if (item.showlabel !== undefined) inputs.showlabel = item.showlabel;
+    
+    // Compact Filter specific inputs
+    if (item.name === 'Compact Filter') {
+      if (item.filterKey !== undefined) inputs.filterKey = item.filterKey;
+      if (item.filterType !== undefined) inputs.filterType = item.filterType;
+      if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel;
+      if (item.filterOptions !== undefined) inputs.filterOptions = item.filterOptions;
+      if (item.table !== undefined) inputs.apiUrl = item.table; // Use table as API URL for compact filter
+      if (item.connection !== undefined) inputs.connection = item.connection ? parseInt(item.connection, 10) : undefined;
+    }
+    
+    // Grid View specific inputs
+    if (item.name === 'Grid View') {
+      if (item.baseFilters !== undefined) inputs.baseFilters = item.baseFilters;
+    }
+    
+    // Chart specific inputs
+    if (item.name.includes('Chart') && item.name !== 'Compact Filter') {
+      if (item.baseFilters !== undefined) inputs.baseFilters = item.baseFilters;
+      if (item.drilldownEnabled !== undefined) inputs.drilldownEnabled = item.drilldownEnabled;
+      if (item.drilldownApiUrl !== undefined) inputs.drilldownApiUrl = item.drilldownApiUrl;
+      if (item.drilldownXAxis !== undefined) inputs.drilldownXAxis = item.drilldownXAxis;
+      if (item.drilldownYAxis !== undefined) inputs.drilldownYAxis = item.drilldownYAxis;
+      if (item.drilldownParameter !== undefined) inputs.drilldownParameter = item.drilldownParameter;
+      if (item.drilldownFilters !== undefined) inputs.drilldownFilters = item.drilldownFilters;
+      if (item.drilldownLayers !== undefined) inputs.drilldownLayers = item.drilldownLayers;
+    }
+    
+    console.log('Component inputs for', item.name, ':', inputs);
+    return inputs;
+  }
 }