Update editnewdash.component.html

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

@@ -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%">&nbsp;<span><button class="btn btn-icon btn-primary"
+                [(ngModel)]="gadgetsEditdata.table" style="width:90%">&nbsp;<span><button
-                style="margin: 0px;" (click)="callApi(gadgetsEditdata.table)">
+                  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;" 
+            <button class="btn btn-sm btn-primary" (click)="addBaseFilter()"
-                  [disabled]="gadgetsEditdata.commonFilterEnabled">
+              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}" 
+                  <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                       class="clr-input" placeholder="Filter Value" 
+                    placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabled" />
-                       [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}">&nbsp;
+                [(ngModel)]="gadgetsEditdata.drilldownApiUrl" style="width:90%"
+                [ngModelOptions]="{standalone: true}">&nbsp;
               <span>
-              <button class="btn btn-icon btn-primary" style="margin: 0px;" 
+                <button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshBaseDrilldownColumns()"
-                (click)="refreshBaseDrilldownColumns()" [disabled]="!gadgetsEditdata.drilldownApiUrl">
+                  [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/&lt;country&gt;</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/&lt;country&gt;</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" 
+                  <input type="checkbox" id="commonFilterToggleDrilldown"
-                       (change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
+                    [(ngModel)]="gadgetsEditdata.commonFilterEnabledDrilldown"
+                    (change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}"
+                    class="clr-checkbox" />
                   <label for="commonFilterToggleDrilldown" class="clr-control-label">Use Common Filter</label>
                 </div>
               </div>
             </div>
 
             <!-- Add Drilldown Filter Button -->
-          <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" style="margin-top: 10px; margin-bottom: 10px;" 
+            <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()"
-                  [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
+              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}" 
+                  <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                       class="clr-input" placeholder="Filter Value" 
+                    placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
-                       [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"
+                  <input type="text" [id]="'layerApiUrl' + i" class="clr-input" [(ngModel)]="layer.apiUrl"
-                  [(ngModel)]="layer.apiUrl" style="width:90%" [ngModelOptions]="{standalone: true}">&nbsp;
+                    style="width:90%" [ngModelOptions]="{standalone: true}">&nbsp;
                   <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/&lt;state&gt;</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/&lt;state&gt;</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" 
+                      <input type="checkbox" [id]="'commonFilterToggleLayer' + i"
-                           (change)="onCommonFilterToggleLayer(i)" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
+                        [(ngModel)]="layer.commonFilterEnabled" (change)="onCommonFilterToggleLayer(i)"
+                        [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
                       <label [for]="'commonFilterToggleLayer' + i" class="clr-control-label">Use Common Filter</label>
                     </div>
                   </div>
                 </div>
 
                 <!-- Add Layer Filter Button -->
-              <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" style="margin-top: 10px; margin-bottom: 10px;" 
+                <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)"
-                      [disabled]="layer.commonFilterEnabled">
+                  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" 
+                        class="clr-input" placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
-                           [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%">&nbsp;
             <span>
-              <button class="btn btn-icon btn-primary" style="margin: 0px;" 
+              <button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshCommonFilterColumns()"
-                (click)="refreshCommonFilterColumns()" [disabled]="!commonFilterData.apiUrl">
+                [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}" 
+                <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                       class="clr-input" placeholder="Filter Value" />
+                  placeholder="Filter Value" />
               </div>
 
               <div class="clr-col-sm-2">