filter
This commit is contained in:
parent
e533362122
commit
0e3aa9b903
@ -343,8 +343,20 @@
|
||||
<h5>Base Drilldown Filters</h5>
|
||||
<div class="clr-subtext">Configure filters for the base drilldown level</div>
|
||||
|
||||
<!-- Common Filter Toggle for Base Drilldown -->
|
||||
<div class="clr-form-control" style="margin-top: 10px;">
|
||||
<div class="clr-control-container">
|
||||
<div class="clr-checkbox-wrapper">
|
||||
<input type="checkbox" id="commonFilterToggleDrilldown" [(ngModel)]="gadgetsEditdata.commonFilterEnabledDrilldown"
|
||||
(change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
|
||||
<label for="commonFilterToggleDrilldown" class="clr-control-label">Use Common Filter</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Drilldown Filter Button -->
|
||||
<button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" style="margin-top: 10px; margin-bottom: 10px;">
|
||||
<button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" style="margin-top: 10px; margin-bottom: 10px;"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<clr-icon shape="plus"></clr-icon> Add Filter
|
||||
</button>
|
||||
|
||||
@ -353,14 +365,16 @@
|
||||
style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>Filter {{i + 1}}</span>
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)">
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="clr-row" style="margin-top: 8px;">
|
||||
<div class="clr-col-sm-5">
|
||||
<select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select">
|
||||
<select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<option value="">Select Field</option>
|
||||
<option *ngFor="let column of getAvailableFields(gadgetsEditdata.drilldownFilters, i, drilldownColumnData)" [value]="column">{{column}}</option>
|
||||
</select>
|
||||
@ -368,11 +382,13 @@
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
|
||||
class="clr-input" placeholder="Filter Value" />
|
||||
class="clr-input" placeholder="Filter Value"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown"/>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)">
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
@ -472,8 +488,20 @@
|
||||
<h5>Layer {{i + 1}} Filters</h5>
|
||||
<div class="clr-subtext">Configure filters for this drilldown layer</div>
|
||||
|
||||
<!-- Common Filter Toggle for Layer -->
|
||||
<div class="clr-form-control" style="margin-top: 10px;">
|
||||
<div class="clr-control-container">
|
||||
<div class="clr-checkbox-wrapper">
|
||||
<input type="checkbox" [id]="'commonFilterToggleLayer' + i" [(ngModel)]="layer.commonFilterEnabled"
|
||||
(change)="onCommonFilterToggleLayer(i)" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
|
||||
<label [for]="'commonFilterToggleLayer' + i" class="clr-control-label">Use Common Filter</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Layer Filter Button -->
|
||||
<button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" style="margin-top: 10px; margin-bottom: 10px;">
|
||||
<button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" style="margin-top: 10px; margin-bottom: 10px;"
|
||||
[disabled]="layer.commonFilterEnabled">
|
||||
<clr-icon shape="plus"></clr-icon> Add Filter
|
||||
</button>
|
||||
|
||||
@ -482,14 +510,16 @@
|
||||
style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>Filter {{j + 1}}</span>
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)">
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)"
|
||||
[disabled]="layer.commonFilterEnabled">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="clr-row" style="margin-top: 8px;">
|
||||
<div class="clr-col-sm-5">
|
||||
<select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select">
|
||||
<select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="layer.commonFilterEnabled">
|
||||
<option value="">Select Field</option>
|
||||
<option *ngFor="let column of getAvailableFields(layer.filters, j, layerColumnData[i] || [])" [value]="column">{{column}}</option>
|
||||
</select>
|
||||
@ -497,11 +527,13 @@
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
|
||||
class="clr-input" placeholder="Filter Value" />
|
||||
class="clr-input" placeholder="Filter Value"
|
||||
[disabled]="layer.commonFilterEnabled"/>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)">
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)"
|
||||
[disabled]="layer.commonFilterEnabled">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -159,8 +159,9 @@ export class EditnewdashComponent implements OnInit {
|
||||
drilldownFilters: [] as any[], // Add separate drilldown filters
|
||||
// Multi-layer drilldown configurations
|
||||
drilldownLayers: [] as any[],
|
||||
// Common filter property
|
||||
commonFilterEnabled: false
|
||||
// Common filter properties
|
||||
commonFilterEnabled: false,
|
||||
commonFilterEnabledDrilldown: false
|
||||
};
|
||||
|
||||
// Add sureconnect data property
|
||||
@ -537,6 +538,10 @@ export class EditnewdashComponent implements OnInit {
|
||||
if (item['commonFilterEnabled'] === undefined) {
|
||||
this.gadgetsEditdata['commonFilterEnabled'] = false;
|
||||
}
|
||||
// Initialize drilldown common filter property if not present
|
||||
if (item['commonFilterEnabledDrilldown'] === undefined) {
|
||||
this.gadgetsEditdata['commonFilterEnabledDrilldown'] = false;
|
||||
}
|
||||
this.getStores();
|
||||
|
||||
// Set default connection if none is set and we have connections
|
||||
@ -579,7 +584,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
this.gadgetsEditdata['drilldownLayers'] = [];
|
||||
} else {
|
||||
// Ensure each layer has proper structure (removed parameterKey, added parameter)
|
||||
this.gadgetsEditdata['drilldownLayers'].forEach(layer => {
|
||||
this.gadgetsEditdata['drilldownLayers'].forEach((layer, index) => {
|
||||
// Initialize parameter if not present
|
||||
if (layer['parameter'] === undefined) {
|
||||
layer['parameter'] = '';
|
||||
@ -588,6 +593,10 @@ export class EditnewdashComponent implements OnInit {
|
||||
if (layer['filters'] === undefined) {
|
||||
layer['filters'] = [];
|
||||
}
|
||||
// Initialize common filter property for layer if not present
|
||||
if (layer['commonFilterEnabled'] === undefined) {
|
||||
layer['commonFilterEnabled'] = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -824,6 +833,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
updatedItem.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters
|
||||
updatedItem.drilldownLayers = this.gadgetsEditdata.drilldownLayers;
|
||||
updatedItem.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property
|
||||
updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property
|
||||
|
||||
console.log('Updated item:', updatedItem);
|
||||
return updatedItem;
|
||||
@ -1158,13 +1168,21 @@ export class EditnewdashComponent implements OnInit {
|
||||
// Update the dashboardArray to reflect changes
|
||||
this.dashboardArray = this.dashboardArray.map(item => {
|
||||
if (item.commonFilterEnabled) {
|
||||
// Preserve the component reference
|
||||
const componentRef = item.component;
|
||||
|
||||
// Update the chart with common filter data
|
||||
return {
|
||||
const updatedItem = {
|
||||
...item,
|
||||
table: this.commonFilterData.apiUrl,
|
||||
connection: this.commonFilterData.connection,
|
||||
baseFilters: [...this.commonFilterData.filters]
|
||||
};
|
||||
|
||||
// Restore the component reference
|
||||
updatedItem.component = componentRef;
|
||||
|
||||
return updatedItem;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
@ -1172,13 +1190,21 @@ export class EditnewdashComponent implements OnInit {
|
||||
// Also update the dashboardCollection to persist changes
|
||||
this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
|
||||
if (item.commonFilterEnabled) {
|
||||
// Preserve the component reference
|
||||
const componentRef = item.component;
|
||||
|
||||
// Update the chart with common filter data
|
||||
return {
|
||||
const updatedItem = {
|
||||
...item,
|
||||
table: this.commonFilterData.apiUrl,
|
||||
connection: this.commonFilterData.connection,
|
||||
baseFilters: [...this.commonFilterData.filters]
|
||||
} as DashboardContentModel;
|
||||
|
||||
// Restore the component reference
|
||||
updatedItem.component = componentRef;
|
||||
|
||||
return updatedItem;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
@ -1196,4 +1222,29 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
// When disabling, the user can edit the filters normally
|
||||
}
|
||||
|
||||
// Add method to handle common filter toggle for base drilldown
|
||||
onCommonFilterToggleDrilldown() {
|
||||
console.log('Common filter drilldown toggled:', this.gadgetsEditdata.commonFilterEnabledDrilldown);
|
||||
|
||||
if (this.gadgetsEditdata.commonFilterEnabledDrilldown) {
|
||||
// When enabling common filter, save current values and apply common filter data
|
||||
this.gadgetsEditdata.drilldownFilters = [...this.commonFilterData.filters];
|
||||
}
|
||||
// When disabling, the user can edit the filters normally
|
||||
}
|
||||
|
||||
// Add method to handle common filter toggle for drilldown layers
|
||||
onCommonFilterToggleLayer(layerIndex: number) {
|
||||
const layer = this.gadgetsEditdata.drilldownLayers[layerIndex];
|
||||
if (layer) {
|
||||
console.log(`Common filter layer ${layerIndex} toggled:`, layer.commonFilterEnabled);
|
||||
|
||||
if (layer.commonFilterEnabled) {
|
||||
// When enabling common filter, save current values and apply common filter data
|
||||
layer.filters = [...this.commonFilterData.filters];
|
||||
}
|
||||
// When disabling, the user can edit the filters normally
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user