Update editnewdash.component.html
This commit is contained in:
parent
2995328ec1
commit
82425d5377
@ -90,11 +90,106 @@
|
||||
</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 -->
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="connection">Connection</label>
|
||||
<select id="connection" formControlName="connection" [(ngModel)]="gadgetsEditdata.connection" class="clr-select">
|
||||
<select id="connection" formControlName="connection" [(ngModel)]="gadgetsEditdata.connection"
|
||||
class="clr-select">
|
||||
<option value="">Select Connection</option>
|
||||
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
|
||||
{{conn.connection_name || conn.id}}
|
||||
@ -149,8 +244,8 @@
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="table">Api Url</label>
|
||||
<div><input type="urk" id="table" formControlName="table" class="clr-input"
|
||||
[(ngModel)]="gadgetsEditdata.table" style="width:90%"> <span><button class="btn btn-icon btn-primary"
|
||||
style="margin: 0px;" (click)="callApi(gadgetsEditdata.table)">
|
||||
[(ngModel)]="gadgetsEditdata.table" style="width:90%"> <span><button
|
||||
class="btn btn-icon btn-primary" style="margin: 0px;" (click)="callApi(gadgetsEditdata.table)">
|
||||
<clr-icon shape="redo"></clr-icon> </button></span></div>
|
||||
<!-- <select id="table" formControlName="table" [(ngModel)]="gadgetsEditdata.table" (change)="tablename($event.target.value)">
|
||||
<option value="null">choose Table</option>
|
||||
@ -223,8 +318,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Add Base Filter Button -->
|
||||
<button class="btn btn-sm btn-primary" (click)="addBaseFilter()" style="margin-top: 10px; margin-bottom: 10px;"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabled">
|
||||
<button class="btn btn-sm btn-primary" (click)="addBaseFilter()"
|
||||
style="margin-top: 10px; margin-bottom: 10px;" [disabled]="gadgetsEditdata.commonFilterEnabled">
|
||||
<clr-icon shape="plus"></clr-icon> Add Filter
|
||||
</button>
|
||||
|
||||
@ -245,14 +340,14 @@
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabled">
|
||||
<option value="">Select Field</option>
|
||||
<!-- Base API filters should always use columnData, not drilldownColumnData -->
|
||||
<option *ngFor="let column of getAvailableFields(gadgetsEditdata.baseFilters, i, columnData)" [value]="column">{{column}}</option>
|
||||
<option *ngFor="let column of getAvailableFields(gadgetsEditdata.baseFilters, i, columnData)"
|
||||
[value]="column">{{column}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
|
||||
class="clr-input" placeholder="Filter Value"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabled"/>
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabled" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
@ -288,22 +383,25 @@
|
||||
<label for="drilldownApiUrl">Base Drilldown API URL</label>
|
||||
<div>
|
||||
<input type="text" id="drilldownApiUrl" formControlName="drilldownApiUrl" class="clr-input"
|
||||
[(ngModel)]="gadgetsEditdata.drilldownApiUrl" style="width:90%" [ngModelOptions]="{standalone: true}">
|
||||
[(ngModel)]="gadgetsEditdata.drilldownApiUrl" style="width:90%"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
<span>
|
||||
<button class="btn btn-icon btn-primary" style="margin: 0px;"
|
||||
(click)="refreshBaseDrilldownColumns()" [disabled]="!gadgetsEditdata.drilldownApiUrl">
|
||||
<button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshBaseDrilldownColumns()"
|
||||
[disabled]="!gadgetsEditdata.drilldownApiUrl">
|
||||
<clr-icon shape="redo"></clr-icon>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="clr-subtext">Enter the API URL for base drilldown data. Use angle brackets for parameters, e.g., http://api.example.com/data/<country></div>
|
||||
<div class="clr-subtext">Enter the API URL for base drilldown data. Use angle brackets for parameters, e.g.,
|
||||
http://api.example.com/data/<country></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="drilldownXAxis">Base Drilldown X-Axis</label>
|
||||
<select id="drilldownXAxis" formControlName="drilldownXAxis" [(ngModel)]="gadgetsEditdata.drilldownXAxis" [ngModelOptions]="{standalone: true}">
|
||||
<select id="drilldownXAxis" formControlName="drilldownXAxis" [(ngModel)]="gadgetsEditdata.drilldownXAxis"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
<option value="">Select X-Axis Column</option>
|
||||
<option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
|
||||
</select>
|
||||
@ -317,7 +415,8 @@
|
||||
gadgetsEditdata?.fieldName !== 'To Do Chart'">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="drilldownYAxis">Base Drilldown Y-Axis</label>
|
||||
<select id="drilldownYAxis" formControlName="drilldownYAxis" [(ngModel)]="gadgetsEditdata.drilldownYAxis" [ngModelOptions]="{standalone: true}">
|
||||
<select id="drilldownYAxis" formControlName="drilldownYAxis" [(ngModel)]="gadgetsEditdata.drilldownYAxis"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
<option value="">Select Y-Axis Column</option>
|
||||
<option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
|
||||
</select>
|
||||
@ -329,11 +428,14 @@
|
||||
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="drilldownParameter">Base Drilldown Parameter</label>
|
||||
<select id="drilldownParameter" [(ngModel)]="gadgetsEditdata.drilldownParameter" [ngModelOptions]="{standalone: true}">
|
||||
<select id="drilldownParameter" [(ngModel)]="gadgetsEditdata.drilldownParameter"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
<option value="">Select Parameter Column</option>
|
||||
<option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
|
||||
</select>
|
||||
<div class="clr-subtext">Select the column to use as parameter for URL template replacement in base drilldown</div>
|
||||
<div class="clr-subtext">Select the column to use as parameter for URL template replacement in base
|
||||
drilldown
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -347,16 +449,18 @@
|
||||
<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" />
|
||||
<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;"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
|
||||
<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>
|
||||
|
||||
@ -376,14 +480,15 @@
|
||||
<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>
|
||||
<option
|
||||
*ngFor="let column of getAvailableFields(gadgetsEditdata.drilldownFilters, i, drilldownColumnData)"
|
||||
[value]="column">{{column}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
|
||||
class="clr-input" placeholder="Filter Value"
|
||||
[disabled]="gadgetsEditdata.commonFilterEnabledDrilldown"/>
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
@ -400,7 +505,8 @@
|
||||
|
||||
|
||||
<!-- Multi-Layer Drilldown Configurations -->
|
||||
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
|
||||
<div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled"
|
||||
style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
|
||||
<div class="clr-col-sm-12">
|
||||
<h4>Multi-Layer Drilldown Configurations</h4>
|
||||
<button class="btn btn-sm btn-primary" (click)="addDrilldownLayer()">
|
||||
@ -412,7 +518,8 @@
|
||||
|
||||
<!-- Dynamic Drilldown Layers -->
|
||||
<div class="clr-row" *ngFor="let layer of gadgetsEditdata.drilldownLayers; let i = index">
|
||||
<div class="clr-col-sm-12" style="margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
|
||||
<div class="clr-col-sm-12"
|
||||
style="margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<h5>Drilldown Layer {{i + 1}}</h5>
|
||||
<button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownLayer(i)">
|
||||
@ -423,7 +530,8 @@
|
||||
<div class="clr-form-control">
|
||||
<div class="clr-control-container">
|
||||
<div class="clr-checkbox-wrapper">
|
||||
<input type="checkbox" [id]="'layerEnabled' + i" [(ngModel)]="layer.enabled" class="clr-checkbox" [ngModelOptions]="{standalone: true}" />
|
||||
<input type="checkbox" [id]="'layerEnabled' + i" [(ngModel)]="layer.enabled" class="clr-checkbox"
|
||||
[ngModelOptions]="{standalone: true}" />
|
||||
<label [for]="'layerEnabled' + i" class="clr-control-label">Enable Layer {{i + 1}} Drilldown</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -433,8 +541,8 @@
|
||||
<div class="clr-col-sm-12">
|
||||
<label [for]="'layerApiUrl' + i">Layer {{i + 1}} API URL</label>
|
||||
<div>
|
||||
<input type="text" [id]="'layerApiUrl' + i" class="clr-input"
|
||||
[(ngModel)]="layer.apiUrl" style="width:90%" [ngModelOptions]="{standalone: true}">
|
||||
<input type="text" [id]="'layerApiUrl' + i" class="clr-input" [(ngModel)]="layer.apiUrl"
|
||||
style="width:90%" [ngModelOptions]="{standalone: true}">
|
||||
<span>
|
||||
<button class="btn btn-icon btn-primary" style="margin: 0px;"
|
||||
(click)="refreshDrilldownLayerColumns(i)" [disabled]="!layer.apiUrl">
|
||||
@ -442,7 +550,8 @@
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<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/<state></div>
|
||||
<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/<state></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -478,7 +587,9 @@
|
||||
<option value="">Select Parameter Column</option>
|
||||
<option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
|
||||
</select>
|
||||
<div class="clr-subtext">Select the column to use as parameter for URL template replacement in layer {{i + 1}} drilldown</div>
|
||||
<div class="clr-subtext">Select the column to use as parameter for URL template replacement in layer {{i
|
||||
+
|
||||
1}} drilldown</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -492,16 +603,17 @@
|
||||
<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" />
|
||||
<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;"
|
||||
[disabled]="layer.commonFilterEnabled">
|
||||
<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>
|
||||
|
||||
@ -521,14 +633,14 @@
|
||||
<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>
|
||||
<option *ngFor="let column of getAvailableFields(layer.filters, j, layerColumnData[i] || [])"
|
||||
[value]="column">{{column}}</option>
|
||||
</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"/>
|
||||
class="clr-input" placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
@ -551,92 +663,6 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Compact Filter Configuration (shown only for Compact Filter components) -->
|
||||
<div class="clr-row" *ngIf="gadgetsEditdata?.fieldName === 'Compact Filter'" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
|
||||
<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="modal-footer">
|
||||
@ -657,7 +683,8 @@
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="commonFilterConnection">Connection</label>
|
||||
<select id="commonFilterConnection" formControlName="connection" [(ngModel)]="commonFilterData.connection" class="clr-select">
|
||||
<select id="commonFilterConnection" formControlName="connection" [(ngModel)]="commonFilterData.connection"
|
||||
class="clr-select">
|
||||
<option value="">Select Connection</option>
|
||||
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
|
||||
{{conn.connection_name || conn.id}}
|
||||
@ -673,8 +700,8 @@
|
||||
<input type="text" id="commonFilterApiUrl" formControlName="apiUrl" class="clr-input"
|
||||
[(ngModel)]="commonFilterData.apiUrl" style="width:90%">
|
||||
<span>
|
||||
<button class="btn btn-icon btn-primary" style="margin: 0px;"
|
||||
(click)="refreshCommonFilterColumns()" [disabled]="!commonFilterData.apiUrl">
|
||||
<button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshCommonFilterColumns()"
|
||||
[disabled]="!commonFilterData.apiUrl">
|
||||
<clr-icon shape="redo"></clr-icon>
|
||||
</button>
|
||||
</span>
|
||||
@ -688,7 +715,8 @@
|
||||
<h5>Common Filters</h5>
|
||||
|
||||
<!-- Add Common Filter Button -->
|
||||
<button class="btn btn-sm btn-primary" (click)="addCommonFilter()" style="margin-top: 10px; margin-bottom: 10px;">
|
||||
<button class="btn btn-sm btn-primary" (click)="addCommonFilter()"
|
||||
style="margin-top: 10px; margin-bottom: 10px;">
|
||||
<clr-icon shape="plus"></clr-icon> Add Filter
|
||||
</button>
|
||||
|
||||
@ -711,8 +739,8 @@
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-5">
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
|
||||
class="clr-input" placeholder="Filter Value" />
|
||||
<input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
|
||||
placeholder="Filter Value" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-2">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user