filter with runner

2025-10-27 20:12:22 +05:30 · 2025-10-27 20:12:22 +05:30 · afc2c1f8a1
commit afc2c1f8a1
parent 418b02acd7
6 changed files with 221 additions and 74 deletions
--- 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
--- 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 @@
+<!-- Debug: Show all input values -->
+
+
 <!-- Display Mode - No configuration UI in runner -->
 <div class="compact-filter">
  <div class="filter-header">
@ -5,7 +8,17 @@
    <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
    <span class="filter-type">({{ filterType }})</span>
  </div>
-  
+
+  <!-- Debug: Show which filter type is active -->
+  <div style="background-color: yellow; padding: 5px; margin: 5px;">
+    Current filter type: {{ filterType }}
+    <div *ngIf="filterType === 'text'">Showing TEXT filter</div>
+    <div *ngIf="filterType === 'dropdown'">Showing DROPDOWN filter</div>
+    <div *ngIf="filterType === 'multiselect'">Showing MULTISELECT filter</div>
+    <div *ngIf="filterType === 'date-range'">Showing DATE-RANGE filter</div>
+    <div *ngIf="filterType === 'toggle'">Showing TOGGLE filter</div>
+  </div>
+
  <!-- Text Filter -->
  <div class="filter-control" *ngIf="filterType === 'text'">
    <input type="text" 
@ -21,19 +34,22 @@
            (ngModelChange)="onFilterValueChange($event)"
            class="clr-select compact-select">
      <option value="">{{ filterLabel || filterKey }}</option>
-      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
+      <option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
    </select>
  </div>

  <!-- Multi-Select Filter -->
  <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <div class="checkbox-group">
-      <div *ngFor="let option of filterOptions" class="checkbox-item">
-        <input type="checkbox" 
-               [checked]="filterValue && filterValue.includes(option)"
-               (change)="onMultiSelectChange(option, $event)"
-               [id]="'checkbox-' + option">
-        <label [for]="'checkbox-' + option">{{ option }}</label>
+    <div class="multiselect-container">
+      <div class="checkbox-group">
+        <div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
+          <input type="checkbox" 
+                 [checked]="isOptionSelected(option)" 
+                 (change)="onMultiSelectChange(option, $event)"
+                 [id]="'checkbox-' + filterKey + '-' + i" 
+                 class="clr-checkbox">
+          <label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
+        </div>
      </div>
    </div>
  </div>
--- 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;
 }
--- 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;
  }
 }
--- 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 @@
        <!-- <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" 
                     [ndcDynamicInputs]="getComponentInputs(item)"
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
@ -311,12 +311,18 @@ dashboard_name = "Dashtest";
    
    // Compact Filter specific inputs
    if (item.name === 'Compact Filter') {
+      console.log('=== COMPACT FILTER INPUTS DEBUG ===');
+      console.log('Item data for compact filter:', item);
+      
      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;
+      
+      console.log('Final inputs for compact filter:', inputs);
+      console.log('==============================');
    }
    
    // Grid View specific inputs