filter
This commit is contained in:
parent
82425d5377
commit
e6779e8f34
@ -335,8 +335,8 @@
|
||||
</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"
|
||||
<div class="clr-col-sm-4">
|
||||
<select [(ngModel)]="filter.field" (ngModelChange)="onBaseFilterFieldChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabled">
|
||||
<option value="">Select Field</option>
|
||||
<!-- Base API filters should always use columnData, not drilldownColumnData -->
|
||||
@ -345,7 +345,26 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<div class="clr-col-sm-3">
|
||||
<select [(ngModel)]="filter.type" (ngModelChange)="onBaseFilterTypeChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabled">
|
||||
<option value="text">Text</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
<option value="multiselect">Multi-Select</option>
|
||||
<option value="date-range">Date Range</option>
|
||||
<option value="toggle">Toggle</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
|
||||
<input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Option1,Option2,Option3" [disabled]="gadgetsEditdata.commonFilterEnabled" />
|
||||
<div class="clr-subtext" *ngIf="filter.availableValues">
|
||||
Available: {{ filter.availableValues }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabled" />
|
||||
</div>
|
||||
@ -476,8 +495,8 @@
|
||||
</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"
|
||||
<div class="clr-col-sm-4">
|
||||
<select [(ngModel)]="filter.field" (ngModelChange)="onDrilldownFilterFieldChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<option value="">Select Field</option>
|
||||
<option
|
||||
@ -486,7 +505,26 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<div class="clr-col-sm-3">
|
||||
<select [(ngModel)]="filter.type" (ngModelChange)="onDrilldownFilterTypeChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<option value="text">Text</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
<option value="multiselect">Multi-Select</option>
|
||||
<option value="date-range">Date Range</option>
|
||||
<option value="toggle">Toggle</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
|
||||
<input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Option1,Option2,Option3" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
|
||||
<div class="clr-subtext" *ngIf="filter.availableValues">
|
||||
Available: {{ filter.availableValues }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
|
||||
</div>
|
||||
@ -629,8 +667,8 @@
|
||||
</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"
|
||||
<div class="clr-col-sm-4">
|
||||
<select [(ngModel)]="filter.field" (ngModelChange)="onLayerFilterFieldChange(i, j, $event)" [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] || [])"
|
||||
@ -638,9 +676,28 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
|
||||
class="clr-input" placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
|
||||
<div class="clr-col-sm-3">
|
||||
<select [(ngModel)]="filter.type" (ngModelChange)="onLayerFilterTypeChange(i, j, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
|
||||
[disabled]="layer.commonFilterEnabled">
|
||||
<option value="text">Text</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
<option value="multiselect">Multi-Select</option>
|
||||
<option value="date-range">Date Range</option>
|
||||
<option value="toggle">Toggle</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
|
||||
<input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Option1,Option2,Option3" [disabled]="layer.commonFilterEnabled" />
|
||||
<div class="clr-subtext" *ngIf="filter.availableValues">
|
||||
Available: {{ filter.availableValues }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
|
||||
@ -597,6 +597,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
|
||||
modelid: number;
|
||||
// Update the editGadget method to initialize filter properties
|
||||
editGadget(item) {
|
||||
this.modeledit = true;
|
||||
this.modelid = item.chartid;
|
||||
@ -639,6 +640,65 @@ export class EditnewdashComponent implements OnInit {
|
||||
this.filterOptionsString = '';
|
||||
}
|
||||
|
||||
// Initialize base filters with type and options if not present
|
||||
if (item['baseFilters'] === undefined) {
|
||||
this.gadgetsEditdata['baseFilters'] = [];
|
||||
} else {
|
||||
// Ensure each base filter has type and options properties
|
||||
this.gadgetsEditdata['baseFilters'] = this.gadgetsEditdata['baseFilters'].map(filter => ({
|
||||
field: filter.field || '',
|
||||
value: filter.value || '',
|
||||
type: filter.type || 'text',
|
||||
options: filter.options || '',
|
||||
availableValues: filter.availableValues || ''
|
||||
}));
|
||||
}
|
||||
|
||||
// Initialize drilldown filters with type and options if not present
|
||||
if (item['drilldownFilters'] === undefined) {
|
||||
this.gadgetsEditdata['drilldownFilters'] = [];
|
||||
} else {
|
||||
// Ensure each drilldown filter has type and options properties
|
||||
this.gadgetsEditdata['drilldownFilters'] = this.gadgetsEditdata['drilldownFilters'].map(filter => ({
|
||||
field: filter.field || '',
|
||||
value: filter.value || '',
|
||||
type: filter.type || 'text',
|
||||
options: filter.options || '',
|
||||
availableValues: filter.availableValues || ''
|
||||
}));
|
||||
}
|
||||
|
||||
// Initialize drilldown layers with proper filter structure if not present
|
||||
if (item['drilldownLayers'] === undefined) {
|
||||
this.gadgetsEditdata['drilldownLayers'] = [];
|
||||
} else {
|
||||
// Ensure each layer has proper filter structure
|
||||
this.gadgetsEditdata['drilldownLayers'] = this.gadgetsEditdata['drilldownLayers'].map(layer => {
|
||||
// Initialize parameter if not present
|
||||
if (layer['parameter'] === undefined) {
|
||||
layer['parameter'] = '';
|
||||
}
|
||||
// Initialize filters if not present
|
||||
if (layer['filters'] === undefined) {
|
||||
layer['filters'] = [];
|
||||
} else {
|
||||
// Ensure each layer filter has type and options properties
|
||||
layer['filters'] = layer['filters'].map(filter => ({
|
||||
field: filter.field || '',
|
||||
value: filter.value || '',
|
||||
type: filter.type || 'text',
|
||||
options: filter.options || '',
|
||||
availableValues: filter.availableValues || ''
|
||||
}));
|
||||
}
|
||||
// Initialize common filter property for layer if not present
|
||||
if (layer['commonFilterEnabled'] === undefined) {
|
||||
layer['commonFilterEnabled'] = false;
|
||||
}
|
||||
return layer;
|
||||
});
|
||||
}
|
||||
|
||||
this.getStores();
|
||||
|
||||
// Set default connection if none is set and we have connections
|
||||
@ -666,37 +726,6 @@ export class EditnewdashComponent implements OnInit {
|
||||
this.gadgetsEditdata['drilldownParameter'] = '';
|
||||
}
|
||||
|
||||
// Initialize base filters if not present
|
||||
if (item['baseFilters'] === undefined) {
|
||||
this.gadgetsEditdata['baseFilters'] = [];
|
||||
}
|
||||
|
||||
// Initialize drilldown filters if not present
|
||||
if (item['drilldownFilters'] === undefined) {
|
||||
this.gadgetsEditdata['drilldownFilters'] = [];
|
||||
}
|
||||
|
||||
// Initialize drilldown layers if not present
|
||||
if (item['drilldownLayers'] === undefined) {
|
||||
this.gadgetsEditdata['drilldownLayers'] = [];
|
||||
} else {
|
||||
// Ensure each layer has proper structure (removed parameterKey, added parameter)
|
||||
this.gadgetsEditdata['drilldownLayers'].forEach((layer, index) => {
|
||||
// Initialize parameter if not present
|
||||
if (layer['parameter'] === undefined) {
|
||||
layer['parameter'] = '';
|
||||
}
|
||||
// Initialize filters if not present
|
||||
if (layer['filters'] === undefined) {
|
||||
layer['filters'] = [];
|
||||
}
|
||||
// Initialize common filter property for layer if not present
|
||||
if (layer['commonFilterEnabled'] === undefined) {
|
||||
layer['commonFilterEnabled'] = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reset drilldown column data
|
||||
this.drilldownColumnData = [];
|
||||
|
||||
@ -784,6 +813,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
// }
|
||||
}
|
||||
|
||||
// Update the onSubmit method to properly save filter data
|
||||
onSubmit(id) {
|
||||
console.log(id);
|
||||
if (!isNullArray(this.selectedyAxis)) {
|
||||
@ -978,8 +1008,8 @@ export class EditnewdashComponent implements OnInit {
|
||||
drilldownXAxis: item['drilldownXAxis'],
|
||||
drilldownYAxis: item['drilldownYAxis'],
|
||||
drilldownParameter: item['drilldownParameter'], // Add drilldown parameter
|
||||
baseFilters: item['baseFilters'] || [], // Add base filters
|
||||
drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters
|
||||
baseFilters: item['baseFilters'] || [], // Add base filters with type information
|
||||
drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters with type information
|
||||
// Multi-layer drilldown configurations
|
||||
drilldownLayers: item['drilldownLayers'] || []
|
||||
};
|
||||
@ -994,6 +1024,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
return chartInputs;
|
||||
}
|
||||
|
||||
// Update the applyChanges method to properly save filter data
|
||||
applyChanges(id) {
|
||||
console.log('Apply changes for chart ID:', id);
|
||||
|
||||
@ -1293,46 +1324,239 @@ export class EditnewdashComponent implements OnInit {
|
||||
// We're now using removeBaseFilter and removeLayerFilter methods instead
|
||||
}
|
||||
|
||||
// Add method to add a base filter
|
||||
// Add method to handle base filter field change
|
||||
onBaseFilterFieldChange(index: number, field: string) {
|
||||
const filter = this.gadgetsEditdata.baseFilters[index];
|
||||
if (filter) {
|
||||
filter.field = field;
|
||||
// If field changes, reset value and options
|
||||
filter.value = '';
|
||||
filter.options = '';
|
||||
filter.availableValues = '';
|
||||
|
||||
// If we have a field and table URL, load available values
|
||||
if (field && this.gadgetsEditdata.table) {
|
||||
this.loadFilterValuesForField(
|
||||
this.gadgetsEditdata.table,
|
||||
this.gadgetsEditdata.connection,
|
||||
field,
|
||||
index,
|
||||
'base'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to handle base filter type change
|
||||
onBaseFilterTypeChange(index: number, type: string) {
|
||||
const filter = this.gadgetsEditdata.baseFilters[index];
|
||||
if (filter) {
|
||||
filter.type = type;
|
||||
// If type changes to dropdown/multiselect and we have a field, load available values
|
||||
if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.gadgetsEditdata.table) {
|
||||
this.loadFilterValuesForField(
|
||||
this.gadgetsEditdata.table,
|
||||
this.gadgetsEditdata.connection,
|
||||
filter.field,
|
||||
index,
|
||||
'base'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to handle drilldown filter field change
|
||||
onDrilldownFilterFieldChange(index: number, field: string) {
|
||||
const filter = this.gadgetsEditdata.drilldownFilters[index];
|
||||
if (filter) {
|
||||
filter.field = field;
|
||||
// If field changes, reset value and options
|
||||
filter.value = '';
|
||||
filter.options = '';
|
||||
filter.availableValues = '';
|
||||
|
||||
// If we have a field and drilldown API URL, load available values
|
||||
if (field && this.gadgetsEditdata.drilldownApiUrl) {
|
||||
this.loadFilterValuesForField(
|
||||
this.gadgetsEditdata.drilldownApiUrl,
|
||||
this.gadgetsEditdata.connection,
|
||||
field,
|
||||
index,
|
||||
'drilldown'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to handle drilldown filter type change
|
||||
onDrilldownFilterTypeChange(index: number, type: string) {
|
||||
const filter = this.gadgetsEditdata.drilldownFilters[index];
|
||||
if (filter) {
|
||||
filter.type = type;
|
||||
// If type changes to dropdown/multiselect and we have a field, load available values
|
||||
if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.gadgetsEditdata.drilldownApiUrl) {
|
||||
this.loadFilterValuesForField(
|
||||
this.gadgetsEditdata.drilldownApiUrl,
|
||||
this.gadgetsEditdata.connection,
|
||||
filter.field,
|
||||
index,
|
||||
'drilldown'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to handle layer filter field change
|
||||
onLayerFilterFieldChange(layerIndex: number, filterIndex: number, field: string) {
|
||||
const layer = this.gadgetsEditdata.drilldownLayers[layerIndex];
|
||||
if (layer && layer.filters) {
|
||||
const filter = layer.filters[filterIndex];
|
||||
if (filter) {
|
||||
filter.field = field;
|
||||
// If field changes, reset value and options
|
||||
filter.value = '';
|
||||
filter.options = '';
|
||||
filter.availableValues = '';
|
||||
|
||||
// If we have a field and layer API URL, load available values
|
||||
if (field && layer.apiUrl) {
|
||||
this.loadFilterValuesForField(
|
||||
layer.apiUrl,
|
||||
this.gadgetsEditdata.connection,
|
||||
field,
|
||||
filterIndex,
|
||||
'layer',
|
||||
layerIndex
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to handle layer filter type change
|
||||
onLayerFilterTypeChange(layerIndex: number, filterIndex: number, type: string) {
|
||||
const layer = this.gadgetsEditdata.drilldownLayers[layerIndex];
|
||||
if (layer && layer.filters) {
|
||||
const filter = layer.filters[filterIndex];
|
||||
if (filter) {
|
||||
filter.type = type;
|
||||
// If type changes to dropdown/multiselect and we have a field, load available values
|
||||
if ((type === 'dropdown' || type === 'multiselect') && filter.field && layer.apiUrl) {
|
||||
this.loadFilterValuesForField(
|
||||
layer.apiUrl,
|
||||
this.gadgetsEditdata.connection,
|
||||
filter.field,
|
||||
filterIndex,
|
||||
'layer',
|
||||
layerIndex
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to load filter values for a specific field
|
||||
loadFilterValuesForField(
|
||||
apiUrl: string,
|
||||
connectionId: string | undefined,
|
||||
field: string,
|
||||
filterIndex: number,
|
||||
filterType: 'base' | 'drilldown' | 'layer',
|
||||
layerIndex?: number
|
||||
) {
|
||||
if (apiUrl && field) {
|
||||
const connectionIdNum = connectionId ? parseInt(connectionId, 10) : undefined;
|
||||
this.alertService.getValuesFromUrl(apiUrl, connectionIdNum, field).subscribe(
|
||||
(values: string[]) => {
|
||||
// Update the filter with available values
|
||||
if (filterType === 'base') {
|
||||
const filter = this.gadgetsEditdata.baseFilters[filterIndex];
|
||||
if (filter) {
|
||||
filter.availableValues = values.join(', ');
|
||||
// For dropdown/multiselect types, also update the options
|
||||
if (filter.type === 'dropdown' || filter.type === 'multiselect') {
|
||||
filter.options = filter.availableValues;
|
||||
}
|
||||
}
|
||||
} else if (filterType === 'drilldown') {
|
||||
const filter = this.gadgetsEditdata.drilldownFilters[filterIndex];
|
||||
if (filter) {
|
||||
filter.availableValues = values.join(', ');
|
||||
// For dropdown/multiselect types, also update the options
|
||||
if (filter.type === 'dropdown' || filter.type === 'multiselect') {
|
||||
filter.options = filter.availableValues;
|
||||
}
|
||||
}
|
||||
} else if (filterType === 'layer' && layerIndex !== undefined) {
|
||||
const layer = this.gadgetsEditdata.drilldownLayers[layerIndex];
|
||||
if (layer && layer.filters) {
|
||||
const filter = layer.filters[filterIndex];
|
||||
if (filter) {
|
||||
filter.availableValues = values.join(', ');
|
||||
// For dropdown/multiselect types, also update the options
|
||||
if (filter.type === 'dropdown' || filter.type === 'multiselect') {
|
||||
filter.options = filter.availableValues;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error loading available values for field:', field, error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to add a base filter with default properties
|
||||
addBaseFilter() {
|
||||
const newFilter = {
|
||||
field: '',
|
||||
value: ''
|
||||
value: '',
|
||||
type: 'text',
|
||||
options: '',
|
||||
availableValues: ''
|
||||
};
|
||||
this.gadgetsEditdata.baseFilters.push(newFilter);
|
||||
}
|
||||
|
||||
// Add method to add a drilldown filter with default properties
|
||||
addDrilldownFilter() {
|
||||
const newFilter = {
|
||||
field: '',
|
||||
value: '',
|
||||
type: 'text',
|
||||
options: '',
|
||||
availableValues: ''
|
||||
};
|
||||
this.gadgetsEditdata.drilldownFilters.push(newFilter);
|
||||
}
|
||||
|
||||
// Add method to add a layer filter with default properties
|
||||
addLayerFilter(layerIndex: number) {
|
||||
const newFilter = {
|
||||
field: '',
|
||||
value: '',
|
||||
type: 'text',
|
||||
options: '',
|
||||
availableValues: ''
|
||||
};
|
||||
if (!this.gadgetsEditdata.drilldownLayers[layerIndex].filters) {
|
||||
this.gadgetsEditdata.drilldownLayers[layerIndex].filters = [];
|
||||
}
|
||||
this.gadgetsEditdata.drilldownLayers[layerIndex].filters.push(newFilter);
|
||||
}
|
||||
|
||||
// Add method to remove a base filter
|
||||
removeBaseFilter(index: number) {
|
||||
this.gadgetsEditdata.baseFilters.splice(index, 1);
|
||||
}
|
||||
|
||||
// Add method to add a drilldown filter
|
||||
addDrilldownFilter() {
|
||||
const newFilter = {
|
||||
field: '',
|
||||
value: ''
|
||||
};
|
||||
this.gadgetsEditdata.drilldownFilters.push(newFilter);
|
||||
}
|
||||
|
||||
// Add method to remove a drilldown filter
|
||||
removeDrilldownFilter(index: number) {
|
||||
this.gadgetsEditdata.drilldownFilters.splice(index, 1);
|
||||
}
|
||||
|
||||
// Add method to add a layer filter
|
||||
addLayerFilter(layerIndex: number) {
|
||||
const newFilter = {
|
||||
field: '',
|
||||
value: ''
|
||||
};
|
||||
if (!this.gadgetsEditdata.drilldownLayers[layerIndex].filters) {
|
||||
this.gadgetsEditdata.drilldownLayers[layerIndex].filters = [];
|
||||
}
|
||||
this.gadgetsEditdata.drilldownLayers[layerIndex].filters.push(newFilter);
|
||||
}
|
||||
|
||||
// Add method to remove a layer filter
|
||||
removeLayerFilter(layerIndex: number, filterIndex: number) {
|
||||
this.gadgetsEditdata.drilldownLayers[layerIndex].filters.splice(filterIndex, 1);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user