risadmin_prod/authsec_angular_clarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: risadmin_prod:build4
Branches Tags
risadmin_prod:main risadmin_prod:build9.4 risadmin_prod:build8.1 risadmin_prod:main1.2 risadmin_prod:build9.3 risadmin_prod:build9.2 risadmin_prod:build9.1 risadmin_prod:build9 risadmin_prod:build8 risadmin_prod:build7 risadmin_prod:build6 risadmin_prod:build5 risadmin_prod:build4 risadmin_prod:build3 risadmin_prod:build2
..
compare: risadmin_prod:build3
Branches Tags
risadmin_prod:main risadmin_prod:build9.4 risadmin_prod:build8.1 risadmin_prod:main1.2 risadmin_prod:build9.3 risadmin_prod:build9.2 risadmin_prod:build9.1 risadmin_prod:build9 risadmin_prod:build8 risadmin_prod:build7 risadmin_prod:build6 risadmin_prod:build5 risadmin_prod:build4 risadmin_prod:build3 risadmin_prod:build2

5 Commits
build4 ... build3

Author SHA1 Message Date
Gaurav Kumar
43df9ad37c filter 2025-10-27 17:37:25 +05:30
Gaurav Kumar
8dbeedba89 filter 2025-10-27 17:04:36 +05:30
Gaurav Kumar
f654b233f6 runner 2025-10-27 16:38:38 +05:30
Gaurav Kumar
123c4698a4 filter 2025-10-27 11:49:13 +05:30
Gaurav Kumar
35e3f411a8 filter 2025-10-27 10:59:35 +05:30
9 changed files with 546 additions and 968 deletions
Expand all files Collapse all files

16
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
View File

@@ -79,16 +79,12 @@
<!-- Multi-Select Filter --> <!-- Multi-Select Filter -->
<div class="filter-control" *ngIf="filterType === 'multiselect'"> <div class="filter-control" *ngIf="filterType === 'multiselect'">
<div class="compact-multiselect-checkboxes" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;"> <select [(ngModel)]="filterValue"
<div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;"> (ngModelChange)="onFilterValueChange($event)"
<input type="checkbox" multiple
[id]="'multiselect-' + option" class="clr-select compact-multiselect">
[value]="option" <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
[checked]="isOptionSelected(option)" </select>
(change)="onMultiselectOptionChange($event, option)">
<label [for]="'multiselect-' + option" class="clr-control-label">{{ option }}</label>
</div>
</div>
</div> </div>
<!-- Date Range Filter --> <!-- Date Range Filter -->

44
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
View File

@@ -331,48 +331,4 @@ export class CompactFilterComponent implements OnInit, OnChanges {
this.loadAvailableValues(this.configFilterKey); this.loadAvailableValues(this.configFilterKey);
} }
} }
// Add method to check if an option is selected for checkboxes
isOptionSelected(option: string): boolean {
if (!this.filterValue) {
return false;
}
// Ensure filterValue is an array for multiselect
if (!Array.isArray(this.filterValue)) {
this.filterValue = [];
return false;
}
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
if (!this.filterValue) {
this.filterValue = [];
}
// Ensure filterValue is an array
if (!Array.isArray(this.filterValue)) {
this.filterValue = [];
}
if (event.target.checked) {
// Add option if not already in array
if (!this.filterValue.includes(option)) {
this.filterValue.push(option);
}
} else {
// Remove option from array
const index = this.filterValue.indexOf(option);
if (index > -1) {
this.filterValue.splice(index, 1);
}
}
// Emit the change event
this.onFilterValueChange(this.filterValue);
}
} }

207
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
View File

@@ -90,106 +90,11 @@
</div> </div>
</div> </div>
<!-- Compact Filter Configuration (shown only for Compact Filter components) -->
<div class="clr-row" *ngIf="gadgetsEditdata?.fieldName === 'Compact Filter'">
<div class="clr-col-sm-12">
<h4>Compact Filter Configuration</h4>
<div class="clr-row">
<div class="clr-col-sm-12">
<label for="compactFilterConnection">Connection</label>
<select id="compactFilterConnection" class="clr-select" [(ngModel)]="gadgetsEditdata.connection"
(ngModelChange)="onCompactFilterConnectionChange($event)" [ngModelOptions]="{standalone: true}">
<option value="">Select Connection</option>
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
{{conn.connection_name || conn.id}}
</option>
</select>
<div class="clr-subtext">Select a connection for this compact filter</div>
</div>
</div>
<div class="clr-row" style="margin-top: 10px;">
<div class="clr-col-sm-12">
<label for="compactFilterApiUrl">API URL</label>
<div>
<input type="text" id="compactFilterApiUrl" class="clr-input" [(ngModel)]="gadgetsEditdata.table"
(ngModelChange)="onCompactFilterApiUrlChange($event)" [ngModelOptions]="{standalone: true}"
placeholder="Enter API URL">
<span>
<button class="btn btn-icon btn-primary" style="margin: 0px;"
(click)="loadAvailableKeys(gadgetsEditdata.table, gadgetsEditdata.connection)"
[disabled]="!gadgetsEditdata.table">
<clr-icon shape="redo"></clr-icon>
</button>
</span>
</div>
<div class="clr-subtext">Enter the API URL to fetch data for this filter</div>
</div>
</div>
<div class="clr-row" style="margin-top: 10px;">
<div class="clr-col-sm-12">
<label for="filterKey">Filter Key</label>
<select id="filterKey" class="clr-select" [(ngModel)]="gadgetsEditdata.filterKey"
(ngModelChange)="onFilterKeyChange($event)" [ngModelOptions]="{standalone: true}">
<option value="">Select Filter Key</option>
<option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
</select>
<div class="clr-subtext">Select the field name to filter on</div>
</div>
</div>
<div class="clr-row" style="margin-top: 10px;">
<div class="clr-col-sm-12">
<label for="filterType">Filter Type</label>
<select id="filterType" class="clr-select" [(ngModel)]="gadgetsEditdata.filterType"
(ngModelChange)="onFilterTypeChange($event)" [ngModelOptions]="{standalone: true}">
<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 class="clr-subtext">Select the type of filter control to display</div>
</div>
</div>
<div class="clr-row" style="margin-top: 10px;">
<div class="clr-col-sm-12">
<label for="filterLabel">Filter Label (Optional)</label>
<input type="text" id="filterLabel" class="clr-input" [(ngModel)]="gadgetsEditdata.filterLabel"
[ngModelOptions]="{standalone: true}" placeholder="Enter filter label">
<div class="clr-subtext">Label to display for this filter in the UI (if not provided, filter key will be
used)</div>
</div>
</div>
<div class="clr-row" style="margin-top: 10px;"
*ngIf="gadgetsEditdata.filterType === 'dropdown' || gadgetsEditdata.filterType === 'multiselect'">
<div class="clr-col-sm-12">
<label for="filterOptions">Filter Options (comma separated)</label>
<input type="text" id="filterOptions" class="clr-input" [(ngModel)]="filterOptionsString"
[ngModelOptions]="{standalone: true}" placeholder="Option1,Option2,Option3">
<div class="clr-subtext">Comma-separated list of options for dropdown/multiselect filters</div>
<div class="clr-subtext" *ngIf="gadgetsEditdata.filterKey">
<strong>Available values for "{{ gadgetsEditdata.filterKey }}":</strong> {{ filterOptionsString }}
</div>
</div>
</div>
</div>
</div>
<div class="clr-row" *ngIf="gadgetsEditdata?.fieldName !== 'Compact Filter'"
style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
<!-- Add Connection Selection Field --> <!-- Add Connection Selection Field -->
<div class="clr-row"> <div class="clr-row">
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label for="connection">Connection</label> <label for="connection">Connection</label>
<select id="connection" formControlName="connection" [(ngModel)]="gadgetsEditdata.connection" <select id="connection" formControlName="connection" [(ngModel)]="gadgetsEditdata.connection" class="clr-select">
class="clr-select">
<option value="">Select Connection</option> <option value="">Select Connection</option>
<option *ngFor="let conn of sureconnectData" [value]="conn.id"> <option *ngFor="let conn of sureconnectData" [value]="conn.id">
{{conn.connection_name || conn.id}} {{conn.connection_name || conn.id}}
@@ -244,8 +149,8 @@
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label for="table">Api Url</label> <label for="table">Api Url</label>
<div><input type="urk" id="table" formControlName="table" class="clr-input" <div><input type="urk" id="table" formControlName="table" class="clr-input"
[(ngModel)]="gadgetsEditdata.table" style="width:90%">&nbsp;<span><button [(ngModel)]="gadgetsEditdata.table" style="width:90%">&nbsp;<span><button class="btn btn-icon btn-primary"
class="btn btn-icon btn-primary" style="margin: 0px;" (click)="callApi(gadgetsEditdata.table)"> style="margin: 0px;" (click)="callApi(gadgetsEditdata.table)">
<clr-icon shape="redo"></clr-icon> </button></span></div> <clr-icon shape="redo"></clr-icon> </button></span></div>
<!-- <select id="table" formControlName="table" [(ngModel)]="gadgetsEditdata.table" (change)="tablename($event.target.value)"> <!-- <select id="table" formControlName="table" [(ngModel)]="gadgetsEditdata.table" (change)="tablename($event.target.value)">
<option value="null">choose Table</option> <option value="null">choose Table</option>
@@ -318,8 +223,8 @@
</div> </div>
<!-- Add Base Filter Button --> <!-- Add Base Filter Button -->
<button class="btn btn-sm btn-primary" (click)="addBaseFilter()" <button class="btn btn-sm btn-primary" (click)="addBaseFilter()" style="margin-top: 10px; margin-bottom: 10px;"
style="margin-top: 10px; margin-bottom: 10px;" [disabled]="gadgetsEditdata.commonFilterEnabled"> [disabled]="gadgetsEditdata.commonFilterEnabled">
<clr-icon shape="plus"></clr-icon> Add Filter <clr-icon shape="plus"></clr-icon> Add Filter
</button> </button>
@@ -340,14 +245,14 @@
[disabled]="gadgetsEditdata.commonFilterEnabled"> [disabled]="gadgetsEditdata.commonFilterEnabled">
<option value="">Select Field</option> <option value="">Select Field</option>
<!-- Base API filters should always use columnData, not drilldownColumnData --> <!-- Base API filters should always use columnData, not drilldownColumnData -->
<option *ngFor="let column of getAvailableFields(gadgetsEditdata.baseFilters, i, columnData)" <option *ngFor="let column of getAvailableFields(gadgetsEditdata.baseFilters, i, columnData)" [value]="column">{{column}}</option>
[value]="column">{{column}}</option>
</select> </select>
</div> </div>
<div class="clr-col-sm-5"> <div class="clr-col-sm-5">
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input" <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabled" /> class="clr-input" placeholder="Filter Value"
[disabled]="gadgetsEditdata.commonFilterEnabled"/>
</div> </div>
<div class="clr-col-sm-2"> <div class="clr-col-sm-2">
@@ -383,25 +288,22 @@
<label for="drilldownApiUrl">Base Drilldown API URL</label> <label for="drilldownApiUrl">Base Drilldown API URL</label>
<div> <div>
<input type="text" id="drilldownApiUrl" formControlName="drilldownApiUrl" class="clr-input" <input type="text" id="drilldownApiUrl" formControlName="drilldownApiUrl" class="clr-input"
[(ngModel)]="gadgetsEditdata.drilldownApiUrl" style="width:90%" [(ngModel)]="gadgetsEditdata.drilldownApiUrl" style="width:90%" [ngModelOptions]="{standalone: true}">&nbsp;
[ngModelOptions]="{standalone: true}">&nbsp;
<span> <span>
<button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshBaseDrilldownColumns()" <button class="btn btn-icon btn-primary" style="margin: 0px;"
[disabled]="!gadgetsEditdata.drilldownApiUrl"> (click)="refreshBaseDrilldownColumns()" [disabled]="!gadgetsEditdata.drilldownApiUrl">
<clr-icon shape="redo"></clr-icon> <clr-icon shape="redo"></clr-icon>
</button> </button>
</span> </span>
</div> </div>
<div class="clr-subtext">Enter the API URL for base drilldown data. Use angle brackets for parameters, e.g., <div class="clr-subtext">Enter the API URL for base drilldown data. Use angle brackets for parameters, e.g., http://api.example.com/data/&lt;country&gt;</div>
http://api.example.com/data/&lt;country&gt;</div>
</div> </div>
</div> </div>
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled"> <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label for="drilldownXAxis">Base Drilldown X-Axis</label> <label for="drilldownXAxis">Base Drilldown X-Axis</label>
<select id="drilldownXAxis" formControlName="drilldownXAxis" [(ngModel)]="gadgetsEditdata.drilldownXAxis" <select id="drilldownXAxis" formControlName="drilldownXAxis" [(ngModel)]="gadgetsEditdata.drilldownXAxis" [ngModelOptions]="{standalone: true}">
[ngModelOptions]="{standalone: true}">
<option value="">Select X-Axis Column</option> <option value="">Select X-Axis Column</option>
<option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option> <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
</select> </select>
@@ -415,8 +317,7 @@
gadgetsEditdata?.fieldName !== 'To Do Chart'"> gadgetsEditdata?.fieldName !== 'To Do Chart'">
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label for="drilldownYAxis">Base Drilldown Y-Axis</label> <label for="drilldownYAxis">Base Drilldown Y-Axis</label>
<select id="drilldownYAxis" formControlName="drilldownYAxis" [(ngModel)]="gadgetsEditdata.drilldownYAxis" <select id="drilldownYAxis" formControlName="drilldownYAxis" [(ngModel)]="gadgetsEditdata.drilldownYAxis" [ngModelOptions]="{standalone: true}">
[ngModelOptions]="{standalone: true}">
<option value="">Select Y-Axis Column</option> <option value="">Select Y-Axis Column</option>
<option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option> <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
</select> </select>
@@ -428,14 +329,11 @@
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled"> <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label for="drilldownParameter">Base Drilldown Parameter</label> <label for="drilldownParameter">Base Drilldown Parameter</label>
<select id="drilldownParameter" [(ngModel)]="gadgetsEditdata.drilldownParameter" <select id="drilldownParameter" [(ngModel)]="gadgetsEditdata.drilldownParameter" [ngModelOptions]="{standalone: true}">
[ngModelOptions]="{standalone: true}">
<option value="">Select Parameter Column</option> <option value="">Select Parameter Column</option>
<option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option> <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
</select> </select>
<div class="clr-subtext">Select the column to use as parameter for URL template replacement in base <div class="clr-subtext">Select the column to use as parameter for URL template replacement in base drilldown</div>
drilldown
</div>
</div> </div>
</div> </div>
@@ -449,18 +347,16 @@
<div class="clr-form-control" style="margin-top: 10px;"> <div class="clr-form-control" style="margin-top: 10px;">
<div class="clr-control-container"> <div class="clr-control-container">
<div class="clr-checkbox-wrapper"> <div class="clr-checkbox-wrapper">
<input type="checkbox" id="commonFilterToggleDrilldown" <input type="checkbox" id="commonFilterToggleDrilldown" [(ngModel)]="gadgetsEditdata.commonFilterEnabledDrilldown"
[(ngModel)]="gadgetsEditdata.commonFilterEnabledDrilldown" (change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
(change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}"
class="clr-checkbox" />
<label for="commonFilterToggleDrilldown" class="clr-control-label">Use Common Filter</label> <label for="commonFilterToggleDrilldown" class="clr-control-label">Use Common Filter</label>
</div> </div>
</div> </div>
</div> </div>
<!-- Add Drilldown Filter Button --> <!-- Add Drilldown Filter Button -->
<button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" style="margin-top: 10px; margin-bottom: 10px;"
style="margin-top: 10px; margin-bottom: 10px;" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown"> [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
<clr-icon shape="plus"></clr-icon> Add Filter <clr-icon shape="plus"></clr-icon> Add Filter
</button> </button>
@@ -480,15 +376,14 @@
<select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select" <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown"> [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
<option value="">Select Field</option> <option value="">Select Field</option>
<option <option *ngFor="let column of getAvailableFields(gadgetsEditdata.drilldownFilters, i, drilldownColumnData)" [value]="column">{{column}}</option>
*ngFor="let column of getAvailableFields(gadgetsEditdata.drilldownFilters, i, drilldownColumnData)"
[value]="column">{{column}}</option>
</select> </select>
</div> </div>
<div class="clr-col-sm-5"> <div class="clr-col-sm-5">
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input" <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" /> class="clr-input" placeholder="Filter Value"
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown"/>
</div> </div>
<div class="clr-col-sm-2"> <div class="clr-col-sm-2">
@@ -505,8 +400,7 @@
<!-- Multi-Layer Drilldown Configurations --> <!-- Multi-Layer Drilldown Configurations -->
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled" <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<h4>Multi-Layer Drilldown Configurations</h4> <h4>Multi-Layer Drilldown Configurations</h4>
<button class="btn btn-sm btn-primary" (click)="addDrilldownLayer()"> <button class="btn btn-sm btn-primary" (click)="addDrilldownLayer()">
@@ -518,8 +412,7 @@
<!-- Dynamic Drilldown Layers --> <!-- Dynamic Drilldown Layers -->
<div class="clr-row" *ngFor="let layer of gadgetsEditdata.drilldownLayers; let i = index"> <div class="clr-row" *ngFor="let layer of gadgetsEditdata.drilldownLayers; let i = index">
<div class="clr-col-sm-12" <div class="clr-col-sm-12" style="margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
style="margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
<div style="display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; justify-content: space-between; align-items: center;">
<h5>Drilldown Layer {{i + 1}}</h5> <h5>Drilldown Layer {{i + 1}}</h5>
<button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownLayer(i)"> <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownLayer(i)">
@@ -530,8 +423,7 @@
<div class="clr-form-control"> <div class="clr-form-control">
<div class="clr-control-container"> <div class="clr-control-container">
<div class="clr-checkbox-wrapper"> <div class="clr-checkbox-wrapper">
<input type="checkbox" [id]="'layerEnabled' + i" [(ngModel)]="layer.enabled" class="clr-checkbox" <input type="checkbox" [id]="'layerEnabled' + i" [(ngModel)]="layer.enabled" class="clr-checkbox" [ngModelOptions]="{standalone: true}" />
[ngModelOptions]="{standalone: true}" />
<label [for]="'layerEnabled' + i" class="clr-control-label">Enable Layer {{i + 1}} Drilldown</label> <label [for]="'layerEnabled' + i" class="clr-control-label">Enable Layer {{i + 1}} Drilldown</label>
</div> </div>
</div> </div>
@@ -541,8 +433,8 @@
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label [for]="'layerApiUrl' + i">Layer {{i + 1}} API URL</label> <label [for]="'layerApiUrl' + i">Layer {{i + 1}} API URL</label>
<div> <div>
<input type="text" [id]="'layerApiUrl' + i" class="clr-input" [(ngModel)]="layer.apiUrl" <input type="text" [id]="'layerApiUrl' + i" class="clr-input"
style="width:90%" [ngModelOptions]="{standalone: true}">&nbsp; [(ngModel)]="layer.apiUrl" style="width:90%" [ngModelOptions]="{standalone: true}">&nbsp;
<span> <span>
<button class="btn btn-icon btn-primary" style="margin: 0px;" <button class="btn btn-icon btn-primary" style="margin: 0px;"
(click)="refreshDrilldownLayerColumns(i)" [disabled]="!layer.apiUrl"> (click)="refreshDrilldownLayerColumns(i)" [disabled]="!layer.apiUrl">
@@ -550,8 +442,7 @@
</button> </button>
</span> </span>
</div> </div>
<div class="clr-subtext">Enter the API URL for layer {{i + 1}} drilldown data. Use angle brackets for <div class="clr-subtext">Enter the API URL for layer {{i + 1}} drilldown data. Use angle brackets for parameters, e.g., http://api.example.com/data/&lt;state&gt;</div>
parameters, e.g., http://api.example.com/data/&lt;state&gt;</div>
</div> </div>
</div> </div>
@@ -587,9 +478,7 @@
<option value="">Select Parameter Column</option> <option value="">Select Parameter Column</option>
<option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option> <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
</select> </select>
<div class="clr-subtext">Select the column to use as parameter for URL template replacement in layer {{i <div class="clr-subtext">Select the column to use as parameter for URL template replacement in layer {{i + 1}} drilldown</div>
+
1}} drilldown</div>
</div> </div>
</div> </div>
@@ -603,17 +492,16 @@
<div class="clr-form-control" style="margin-top: 10px;"> <div class="clr-form-control" style="margin-top: 10px;">
<div class="clr-control-container"> <div class="clr-control-container">
<div class="clr-checkbox-wrapper"> <div class="clr-checkbox-wrapper">
<input type="checkbox" [id]="'commonFilterToggleLayer' + i" <input type="checkbox" [id]="'commonFilterToggleLayer' + i" [(ngModel)]="layer.commonFilterEnabled"
[(ngModel)]="layer.commonFilterEnabled" (change)="onCommonFilterToggleLayer(i)" (change)="onCommonFilterToggleLayer(i)" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
[ngModelOptions]="{standalone: true}" class="clr-checkbox" />
<label [for]="'commonFilterToggleLayer' + i" class="clr-control-label">Use Common Filter</label> <label [for]="'commonFilterToggleLayer' + i" class="clr-control-label">Use Common Filter</label>
</div> </div>
</div> </div>
</div> </div>
<!-- Add Layer Filter Button --> <!-- Add Layer Filter Button -->
<button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" style="margin-top: 10px; margin-bottom: 10px;"
style="margin-top: 10px; margin-bottom: 10px;" [disabled]="layer.commonFilterEnabled"> [disabled]="layer.commonFilterEnabled">
<clr-icon shape="plus"></clr-icon> Add Filter <clr-icon shape="plus"></clr-icon> Add Filter
</button> </button>
@@ -633,14 +521,14 @@
<select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select" <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
[disabled]="layer.commonFilterEnabled"> [disabled]="layer.commonFilterEnabled">
<option value="">Select Field</option> <option value="">Select Field</option>
<option *ngFor="let column of getAvailableFields(layer.filters, j, layerColumnData[i] || [])" <option *ngFor="let column of getAvailableFields(layer.filters, j, layerColumnData[i] || [])" [value]="column">{{column}}</option>
[value]="column">{{column}}</option>
</select> </select>
</div> </div>
<div class="clr-col-sm-5"> <div class="clr-col-sm-5">
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
class="clr-input" placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" /> class="clr-input" placeholder="Filter Value"
[disabled]="layer.commonFilterEnabled"/>
</div> </div>
<div class="clr-col-sm-2"> <div class="clr-col-sm-2">
@@ -662,9 +550,6 @@
<input id="chartparameter" type="text" formControlName="chartparameter" class="clr-input" [(ngModel)]="gadgetsEditdata.chartparameter"> <input id="chartparameter" type="text" formControlName="chartparameter" class="clr-input" [(ngModel)]="gadgetsEditdata.chartparameter">
</div> </div>
</div> --> </div> -->
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="modeledit = false">Cancel</button> <button type="button" class="btn btn-outline" (click)="modeledit = false">Cancel</button>
<button type="button" class="btn btn-primary" (click)="applyChanges(modelid)">Apply</button> <button type="button" class="btn btn-primary" (click)="applyChanges(modelid)">Apply</button>
@@ -683,8 +568,7 @@
<div class="clr-row"> <div class="clr-row">
<div class="clr-col-sm-12"> <div class="clr-col-sm-12">
<label for="commonFilterConnection">Connection</label> <label for="commonFilterConnection">Connection</label>
<select id="commonFilterConnection" formControlName="connection" [(ngModel)]="commonFilterData.connection" <select id="commonFilterConnection" formControlName="connection" [(ngModel)]="commonFilterData.connection" class="clr-select">
class="clr-select">
<option value="">Select Connection</option> <option value="">Select Connection</option>
<option *ngFor="let conn of sureconnectData" [value]="conn.id"> <option *ngFor="let conn of sureconnectData" [value]="conn.id">
{{conn.connection_name || conn.id}} {{conn.connection_name || conn.id}}
@@ -700,8 +584,8 @@
<input type="text" id="commonFilterApiUrl" formControlName="apiUrl" class="clr-input" <input type="text" id="commonFilterApiUrl" formControlName="apiUrl" class="clr-input"
[(ngModel)]="commonFilterData.apiUrl" style="width:90%">&nbsp; [(ngModel)]="commonFilterData.apiUrl" style="width:90%">&nbsp;
<span> <span>
<button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshCommonFilterColumns()" <button class="btn btn-icon btn-primary" style="margin: 0px;"
[disabled]="!commonFilterData.apiUrl"> (click)="refreshCommonFilterColumns()" [disabled]="!commonFilterData.apiUrl">
<clr-icon shape="redo"></clr-icon> <clr-icon shape="redo"></clr-icon>
</button> </button>
</span> </span>
@@ -715,8 +599,7 @@
<h5>Common Filters</h5> <h5>Common Filters</h5>
<!-- Add Common Filter Button --> <!-- Add Common Filter Button -->
<button class="btn btn-sm btn-primary" (click)="addCommonFilter()" <button class="btn btn-sm btn-primary" (click)="addCommonFilter()" style="margin-top: 10px; margin-bottom: 10px;">
style="margin-top: 10px; margin-bottom: 10px;">
<clr-icon shape="plus"></clr-icon> Add Filter <clr-icon shape="plus"></clr-icon> Add Filter
</button> </button>
@@ -739,8 +622,8 @@
</div> </div>
<div class="clr-col-sm-5"> <div class="clr-col-sm-5">
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input" <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
placeholder="Filter Value" /> class="clr-input" placeholder="Filter Value" />
</div> </div>
<div class="clr-col-sm-2"> <div class="clr-col-sm-2">

135
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
View File

@@ -48,12 +48,6 @@ export class EditnewdashComponent implements OnInit {
public entryForm: FormGroup; public entryForm: FormGroup;
public commonFilterForm: FormGroup; // Add common filter form public commonFilterForm: FormGroup; // Add common filter form
// Add filterOptionsString property for compact filter
filterOptionsString: string = '';
// Add availableKeys property for compact filter
availableKeys: string[] = [];
WidgetsMock: WidgetModel[] = [ WidgetsMock: WidgetModel[] = [
{ {
name: 'Common Filter', name: 'Common Filter',
@@ -366,16 +360,6 @@ export class EditnewdashComponent implements OnInit {
dashboard.component = component.componentInstance; dashboard.component = component.componentInstance;
} }
}); });
// Ensure compact filter configuration properties are properly initialized
if (dashboard.component === 'Compact Filter' || dashboard.name === 'Compact Filter') {
// Make sure all compact filter properties exist
if (dashboard.filterKey === undefined) dashboard.filterKey = '';
if (dashboard.filterType === undefined) dashboard.filterType = 'text';
if (dashboard.filterLabel === undefined) dashboard.filterLabel = '';
if (dashboard.filterOptions === undefined) dashboard.filterOptions = [];
// table and connection properties should already exist for all components
}
}); });
} }
@@ -390,16 +374,6 @@ export class EditnewdashComponent implements OnInit {
dashboard.component = component.name; dashboard.component = component.name;
} }
}); });
// Ensure compact filter configuration properties are preserved
if (dashboard.name === 'Compact Filter') {
// Make sure all compact filter properties exist
if (dashboard.filterKey === undefined) dashboard.filterKey = '';
if (dashboard.filterType === undefined) dashboard.filterType = 'text';
if (dashboard.filterLabel === undefined) dashboard.filterLabel = '';
if (dashboard.filterOptions === undefined) dashboard.filterOptions = [];
// table and connection properties should already exist for all components
}
}); });
} }
// Add method to get available fields for a filter dropdown (excluding already selected fields) // Add method to get available fields for a filter dropdown (excluding already selected fields)
@@ -627,18 +601,6 @@ export class EditnewdashComponent implements OnInit {
if (item['filterOptions'] === undefined) { if (item['filterOptions'] === undefined) {
this.gadgetsEditdata['filterOptions'] = []; this.gadgetsEditdata['filterOptions'] = [];
} }
// Initialize filterOptionsString for compact filter
if (item.name === 'Compact Filter') {
this.filterOptionsString = this.gadgetsEditdata['filterOptions'].join(', ');
// Load available keys when editing a compact filter
if (this.gadgetsEditdata['table']) {
this.loadAvailableKeys(this.gadgetsEditdata['table'], this.gadgetsEditdata['connection']);
}
} else {
this.filterOptionsString = '';
}
this.getStores(); this.getStores();
// Set default connection if none is set and we have connections // Set default connection if none is set and we have connections
@@ -737,9 +699,6 @@ export class EditnewdashComponent implements OnInit {
//https://www.w3schools.com/js/tryit.asp?filename=tryjson_stringify_function_tostring //https://www.w3schools.com/js/tryit.asp?filename=tryjson_stringify_function_tostring
// First serialize the dashboard collection to ensure component names are properly set
this.serialize(this.dashboardCollection.dashboard);
let cmp = this.dashboardCollection.dashboard.forEach(dashboard => { let cmp = this.dashboardCollection.dashboard.forEach(dashboard => {
this.componentCollection.forEach(component => { this.componentCollection.forEach(component => {
if (dashboard.name === component.name) { if (dashboard.name === component.name) {
@@ -760,6 +719,8 @@ export class EditnewdashComponent implements OnInit {
//console.log(merged); //console.log(merged);
console.log("temp data", typeof tmp); console.log("temp data", typeof tmp);
console.log(tmp); console.log(tmp);
let parsed = JSON.parse(tmp);
this.serialize(parsed.dashboard);
this.dashbord1_Line.model = tmp; this.dashbord1_Line.model = tmp;
// let obj = this.dashboardCollection; // let obj = this.dashboardCollection;
@@ -816,16 +777,11 @@ export class EditnewdashComponent implements OnInit {
xyz.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property xyz.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property
// For compact filter, preserve filter configuration properties // For compact filter, preserve filter configuration properties
if (item.name === 'Compact Filter') { if (item.component && item.component.name === 'CompactFilterComponent') {
xyz.filterKey = this.gadgetsEditdata.filterKey || ''; xyz.filterKey = this.gadgetsEditdata.filterKey || '';
xyz.filterType = this.gadgetsEditdata.filterType || 'text'; xyz.filterType = this.gadgetsEditdata.filterType || 'text';
xyz.filterLabel = this.gadgetsEditdata.filterLabel || ''; xyz.filterLabel = this.gadgetsEditdata.filterLabel || '';
// Convert filterOptionsString to array
if (this.gadgetsEditdata.fieldName === 'Compact Filter') {
xyz.filterOptions = this.filterOptionsString.split(',').map(opt => opt.trim()).filter(opt => opt);
} else {
xyz.filterOptions = this.gadgetsEditdata.filterOptions || []; xyz.filterOptions = this.gadgetsEditdata.filterOptions || [];
}
xyz.table = this.gadgetsEditdata.table || ''; xyz.table = this.gadgetsEditdata.table || '';
xyz.connection = this.gadgetsEditdata.connection || undefined; xyz.connection = this.gadgetsEditdata.connection || undefined;
} }
@@ -865,7 +821,7 @@ export class EditnewdashComponent implements OnInit {
*/ */
getChartInputs(item: any): any { getChartInputs(item: any): any {
// For CompactFilterComponent, pass only filter configuration properties // For CompactFilterComponent, pass only filter configuration properties
if (item.name === 'Compact Filter') { if (item.component && item.component.name === 'CompactFilterComponent') {
const filterInputs = { const filterInputs = {
filterKey: item['filterKey'] || '', filterKey: item['filterKey'] || '',
filterType: item['filterType'] || 'text', filterType: item['filterType'] || 'text',
@@ -1039,16 +995,11 @@ export class EditnewdashComponent implements OnInit {
updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property
// For compact filter, preserve filter configuration properties // For compact filter, preserve filter configuration properties
if (item.name === 'Compact Filter') { if (item.component && item.component.name === 'CompactFilterComponent') {
updatedItem.filterKey = this.gadgetsEditdata.filterKey || ''; updatedItem.filterKey = this.gadgetsEditdata.filterKey || '';
updatedItem.filterType = this.gadgetsEditdata.filterType || 'text'; updatedItem.filterType = this.gadgetsEditdata.filterType || 'text';
updatedItem.filterLabel = this.gadgetsEditdata.filterLabel || ''; updatedItem.filterLabel = this.gadgetsEditdata.filterLabel || '';
// Convert filterOptionsString to array
if (this.gadgetsEditdata.fieldName === 'Compact Filter') {
updatedItem.filterOptions = this.filterOptionsString.split(',').map(opt => opt.trim()).filter(opt => opt);
} else {
updatedItem.filterOptions = this.gadgetsEditdata.filterOptions || []; updatedItem.filterOptions = this.gadgetsEditdata.filterOptions || [];
}
updatedItem.table = this.gadgetsEditdata.table || ''; // API URL updatedItem.table = this.gadgetsEditdata.table || ''; // API URL
updatedItem.connection = this.gadgetsEditdata.connection || undefined; // Connection ID updatedItem.connection = this.gadgetsEditdata.connection || undefined; // Connection ID
@@ -1484,80 +1435,4 @@ export class EditnewdashComponent implements OnInit {
// This would require the chart component to have a public resize method // This would require the chart component to have a public resize method
} }
} }
// Add method to load available keys for compact filter
loadAvailableKeys(apiUrl: string, connectionId: string | undefined) {
if (apiUrl) {
const connectionIdNum = connectionId ? parseInt(connectionId, 10) : undefined;
this.alertService.getColumnfromurl(apiUrl, connectionIdNum).subscribe(
(keys: string[]) => {
this.availableKeys = keys;
},
(error) => {
console.error('Error loading available keys:', error);
this.availableKeys = [];
}
);
}
}
// Add method to load available values for a specific key
loadAvailableValues(key: string) {
if (key && this.gadgetsEditdata['table']) {
const connectionIdNum = this.gadgetsEditdata['connection'] ?
parseInt(this.gadgetsEditdata['connection'], 10) : undefined;
this.alertService.getValuesFromUrl(this.gadgetsEditdata['table'], connectionIdNum, key).subscribe(
(values: string[]) => {
// Update filter options string for dropdown/multiselect
if (this.gadgetsEditdata['filterType'] === 'dropdown' ||
this.gadgetsEditdata['filterType'] === 'multiselect') {
this.filterOptionsString = values.join(', ');
// Also update the gadgetsEditdata filterOptions array
this.gadgetsEditdata['filterOptions'] = values;
}
},
(error) => {
console.error('Error loading available values:', error);
}
);
}
}
// Add method to handle filter key change
onFilterKeyChange(key: string) {
this.gadgetsEditdata['filterKey'] = key;
// Load available values when filter key changes
if (key && (this.gadgetsEditdata['filterType'] === 'dropdown' ||
this.gadgetsEditdata['filterType'] === 'multiselect')) {
this.loadAvailableValues(key);
}
}
// Add method to handle filter type change
onFilterTypeChange(type: string) {
this.gadgetsEditdata['filterType'] = type;
// Load available values when filter type changes to dropdown or multiselect
if ((type === 'dropdown' || type === 'multiselect') && this.gadgetsEditdata['filterKey']) {
this.loadAvailableValues(this.gadgetsEditdata['filterKey']);
}
}
// Add method to handle API URL change for compact filter
onCompactFilterApiUrlChange(url: string) {
this.gadgetsEditdata['table'] = url;
// Load available keys when API URL changes
if (url) {
this.loadAvailableKeys(url, this.gadgetsEditdata['connection']);
}
}
// Add method to handle connection change for compact filter
onCompactFilterConnectionChange(connectionId: string) {
this.gadgetsEditdata['connection'] = connectionId;
// Reload available keys when connection changes
if (this.gadgetsEditdata['table']) {
this.loadAvailableKeys(this.gadgetsEditdata['table'], connectionId);
}
}
} }

23
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
View File

@@ -1,13 +1,11 @@
<!-- Display Mode - No configuration UI in runner -->
<div class="compact-filter"> <div class="compact-filter">
<div class="filter-header" (click)="toggleFilter()"> <div class="filter-header">
<span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span> <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
<span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span> <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
<span class="filter-type">({{ filterType }})</span> <span class="filter-type">({{ filterType }})</span>
<clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
<clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
</div> </div>
<div class="filter-content" *ngIf="isExpanded">
<!-- Text Filter --> <!-- Text Filter -->
<div class="filter-control" *ngIf="filterType === 'text'"> <div class="filter-control" *ngIf="filterType === 'text'">
<input type="text" <input type="text"
@@ -23,42 +21,36 @@
(ngModelChange)="onFilterValueChange($event)" (ngModelChange)="onFilterValueChange($event)"
class="clr-select compact-select"> class="clr-select compact-select">
<option value="">{{ filterLabel || filterKey }}</option> <option value="">{{ filterLabel || filterKey }}</option>
<option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option> <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
</select> </select>
</div> </div>
<!-- Multi-Select Filter --> <!-- Multi-Select Filter -->
<div class="filter-control" *ngIf="filterType === 'multiselect'"> <div class="filter-control" *ngIf="filterType === 'multiselect'">
<div class="multiselect-container">
<div class="checkbox-group"> <div class="checkbox-group">
<div *ngFor="let option of filterOptions; let i = index" class="checkbox-item"> <div *ngFor="let option of filterOptions" class="checkbox-item">
<input type="checkbox" <input type="checkbox"
[checked]="isOptionSelected(option)" [checked]="filterValue && filterValue.includes(option)"
(change)="onMultiSelectChange(option, $event)" (change)="onMultiSelectChange(option, $event)"
[id]="'checkbox-' + filterKey + '-' + i" [id]="'checkbox-' + option">
class="clr-checkbox"> <label [for]="'checkbox-' + option">{{ option }}</label>
<label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Date Range Filter --> <!-- Date Range Filter -->
<div class="filter-control date-range" *ngIf="filterType === 'date-range'"> <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
<div class="date-input-group">
<input type="date" <input type="date"
[(ngModel)]="filterValue.start" [(ngModel)]="filterValue.start"
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })" (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
placeholder="Start Date" placeholder="Start Date"
class="clr-input compact-date"> class="clr-input compact-date">
<span class="date-separator">to</span>
<input type="date" <input type="date"
[(ngModel)]="filterValue.end" [(ngModel)]="filterValue.end"
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })" (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
placeholder="End Date" placeholder="End Date"
class="clr-input compact-date"> class="clr-input compact-date">
</div> </div>
</div>
<!-- Toggle Filter --> <!-- Toggle Filter -->
<div class="filter-control toggle" *ngIf="filterType === 'toggle'"> <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
@@ -70,4 +62,3 @@
<label class="toggle-label">{{ filterLabel || filterKey }}</label> <label class="toggle-label">{{ filterLabel || filterKey }}</label>
</div> </div>
</div> </div>
</div>

151
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
View File

@@ -1,149 +1,74 @@
.compact-filter { .compact-filter {
display: block; padding: 10px;
min-width: 200px; border: 1px solid #ddd;
max-width: 300px;
margin: 8px;
padding: 0;
background: #ffffff;
border: 1px solid #d7d7d7;
border-radius: 4px; border-radius: 4px;
font-size: 14px; margin-bottom: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); background-color: #f8f8f8;
.filter-header { .filter-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 15px; margin-bottom: 10px;
cursor: pointer;
background: #f8f8f8;
border-bottom: 1px solid #eaeaea;
border-radius: 4px 4px 0 0;
&:hover {
background: #f0f0f0;
}
.filter-label, .filter-key { .filter-label, .filter-key {
font-weight: 500; font-weight: bold;
color: #333333;
flex-grow: 1;
} }
.filter-type { .filter-type {
font-size: 12px; font-size: 0.8em;
color: #666666; color: #666;
margin: 0 8px;
background: #eaeaea;
padding: 2px 8px;
border-radius: 12px;
}
.expand-icon {
width: 16px;
height: 16px;
color: #666666;
} }
} }
.filter-content {
padding: 15px;
.filter-control { .filter-control {
margin-bottom: 12px; margin-bottom: 10px;
&:last-child { .compact-input, .compact-select, .compact-date {
margin-bottom: 0; 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;
}
}
} }
&.date-range { &.date-range {
.date-input-group {
display: flex; display: flex;
align-items: center; gap: 10px;
gap: 8px;
.date-separator { .compact-date {
font-size: 14px; flex: 1;
color: #666666;
}
} }
} }
&.toggle { &.toggle {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px;
}
}
}
.compact-input, .clr-toggle {
.compact-select, margin-right: 10px;
.compact-date {
width: 100%;
padding: 8px 12px;
font-size: 14px;
border: 1px solid #d7d7d7;
border-radius: 4px;
background: #ffffff;
&:focus {
outline: none;
border-color: #0072ce;
box-shadow: 0 0 0 1px #0072ce;
}
}
.compact-select {
height: 36px;
}
.multiselect-container {
max-height: 200px;
overflow-y: auto;
border: 1px solid #d7d7d7;
border-radius: 4px;
padding: 10px;
background: #ffffff;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
.clr-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
}
.checkbox-label {
font-size: 14px;
margin: 0;
cursor: pointer;
color: #333333;
}
} }
.toggle-label { .toggle-label {
margin: 0; margin: 0;
font-size: 14px;
color: #333333;
}
.clr-toggle {
margin: 0;
} }
} }
}
// Host styling
:host {
display: block;
} }

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

@@ -20,24 +20,20 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
availableFilters: Filter[] = []; availableFilters: Filter[] = [];
availableKeys: string[] = []; availableKeys: string[] = [];
availableValues: string[] = []; availableValues: string[] = [];
isExpanded: boolean = false; // Add expansion state
constructor( constructor(
private filterService: FilterService private filterService: FilterService
) { ) { }
console.log('=== COMPACT FILTER RUNNER CONSTRUCTOR CALLED ===');
}
ngOnInit(): void { ngOnInit(): void {
console.log('=== COMPACT FILTER RUNNER DEBUG INFO ==='); console.log('CompactFilterRunnerComponent initialized with inputs:', {
console.log('Component initialized with inputs:'); filterKey: this.filterKey,
console.log('- filterKey:', this.filterKey); filterType: this.filterType,
console.log('- filterType:', this.filterType); filterOptions: this.filterOptions,
console.log('- filterOptions:', this.filterOptions); filterLabel: this.filterLabel,
console.log('- filterLabel:', this.filterLabel); apiUrl: this.apiUrl,
console.log('- apiUrl:', this.apiUrl); connection: this.connection
console.log('- connection:', this.connection); });
console.log('========================================');
// Register this filter with the filter service // Register this filter with the filter service
this.registerFilter(); this.registerFilter();
@@ -45,35 +41,24 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
// Subscribe to filter definitions to get available filters // Subscribe to filter definitions to get available filters
this.filterService.filters$.subscribe(filters => { this.filterService.filters$.subscribe(filters => {
this.availableFilters = filters; this.availableFilters = filters;
console.log('Available filters updated:', filters);
this.updateSelectedFilter(); this.updateSelectedFilter();
}); });
// Subscribe to filter state changes // Subscribe to filter state changes
this.filterService.filterState$.subscribe(state => { this.filterService.filterState$.subscribe(state => {
console.log('Filter state updated:', state);
if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) { if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
this.filterValue = state[this.selectedFilter.id]; this.filterValue = state[this.selectedFilter.id];
console.log('Filter value updated for', this.selectedFilter.id, ':', this.filterValue);
} }
}); });
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
console.log('=== COMPACT FILTER RUNNER CHANGES DEBUG ==='); console.log('CompactFilterRunnerComponent inputs changed:', changes);
console.log('Component inputs changed:', changes);
// If filterKey or filterType changes, re-register the filter // If filterKey or filterType changes, re-register the filter
if (changes.filterKey || changes.filterType || changes.filterOptions) { if (changes.filterKey || changes.filterType || changes.filterOptions) {
console.log('Re-registering filter due to input changes');
this.registerFilter(); this.registerFilter();
} }
console.log('==========================================');
}
// Toggle filter expansion
toggleFilter(): void {
this.isExpanded = !this.isExpanded;
} }
// Register this filter with the filter service // Register this filter with the filter service
@@ -83,7 +68,6 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
if (this.filterKey) { if (this.filterKey) {
// Get current filter values from the service // Get current filter values from the service
const currentFilterValues = this.filterService.getFilterValues(); const currentFilterValues = this.filterService.getFilterValues();
console.log('Current filter values from service:', currentFilterValues);
// Create a filter definition for this compact filter // Create a filter definition for this compact filter
const filterDef: Filter = { const filterDef: Filter = {
@@ -99,11 +83,9 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
// Get current filters // Get current filters
const currentFilters = this.filterService.getFilters(); const currentFilters = this.filterService.getFilters();
console.log('Current filters from service:', currentFilters);
// Check if this filter is already registered // Check if this filter is already registered
const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id); const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
console.log('Existing filter index:', existingFilterIndex);
if (existingFilterIndex >= 0) { if (existingFilterIndex >= 0) {
// Preserve the existing filter configuration // Preserve the existing filter configuration
@@ -148,20 +130,15 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
// Update the selected filter reference // Update the selected filter reference
this.selectedFilter = filterDef; this.selectedFilter = filterDef;
console.log('Selected filter set to:', this.selectedFilter); console.log('Selected filter set to:', this.selectedFilter);
} else {
console.log('No filterKey provided, skipping filter registration');
} }
} }
updateSelectedFilter(): void { updateSelectedFilter(): void {
console.log('Updating selected filter. Filter key:', this.filterKey, 'Available filters:', this.availableFilters);
if (this.filterKey && this.availableFilters.length > 0) { if (this.filterKey && this.availableFilters.length > 0) {
this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null; this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
console.log('Found selected filter:', this.selectedFilter);
if (this.selectedFilter) { if (this.selectedFilter) {
// Get current value for this filter from the service // Get current value for this filter from the service
const currentState = this.filterService.getFilterValues(); const currentState = this.filterService.getFilterValues();
console.log('Current state from service:', currentState);
const filterValue = currentState[this.selectedFilter.id]; const filterValue = currentState[this.selectedFilter.id];
if (filterValue !== undefined) { if (filterValue !== undefined) {
this.filterValue = filterValue; this.filterValue = filterValue;
@@ -226,20 +203,4 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
// Emit the change // Emit the change
this.onFilterValueChange(this.filterValue); this.onFilterValueChange(this.filterValue);
} }
// 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) {
return false;
}
// Ensure filterValue is an array for multiselect
if (!Array.isArray(this.filterValue)) {
this.filterValue = [];
return false;
}
return this.filterValue.includes(option);
}
} }

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

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

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

@@ -311,18 +311,12 @@ dashboard_name = "Dashtest";
// Compact Filter specific inputs // Compact Filter specific inputs
if (item.name === 'Compact Filter') { 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.filterKey !== undefined) inputs.filterKey = item.filterKey;
if (item.filterType !== undefined) inputs.filterType = item.filterType; if (item.filterType !== undefined) inputs.filterType = item.filterType;
if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel; if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel;
if (item.filterOptions !== undefined) inputs.filterOptions = item.filterOptions; 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.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; 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 // Grid View specific inputs