refactor(sample): query-builder formatter example

IgniteUI · Feb 14, 2025 · 3b017a4 · 3b017a4
1 parent 0a5b41b
commit 3b017a4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/.../query-builder/query-builder-template-sample/query-builder-template-sample.component.html b/.../query-builder/query-builder-template-sample/query-builder-template-sample.component.html
@@ -21,9 +21,10 @@
                         </igx-radio>
                     </igx-radio-group>
                 }
-                @else if (selectedField?.field === 'ShipVia' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
-                    <igx-combo class="combo" [data]="shipViaFormatterData" [(ngModel)]="searchValue.value" [displayKey]="'field'">
-                    </igx-combo>
+                @else if (selectedField?.field === 'ShipCountry' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
+                    <igx-select [placeholder]="'Select Country'" [(ngModel)]="searchValue.value">
+                        <igx-select-item *ngFor="let c of countries" [value]="c.data">{{ c.text }}</igx-select-item>
+                    </igx-select>
                 }
                  @else {  
                     <ng-container *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>

diff --git a/...ns/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts b/...ns/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts
@@ -26,6 +26,27 @@ export class QueryBuilderTemplateSampleComponent implements OnInit {
         { text: 'Southern Africa', value: 'SAF' },
         { text: 'Northern Australia', value: 'NAU' }];
 
+    public countries = [
+        { text: "United States", data: { iso: "US", code: "+1" } },
+        { text: "Canada", data: { iso: "CA", code: "+1" } },
+        { text: "Mexico", data: { iso: "MX", code: "+52" } },
+        { text: "Brazil", data: { iso: "BR", code: "+55" } },
+        { text: "Argentina", data: { iso: "AR", code: "+54" } },
+        { text: "Colombia", data: { iso: "CO", code: "+57" } },
+        { text: "Germany", data: { iso: "DE", code: "+49" } },
+        { text: "United Kingdom", data: { iso: "GB", code: "+44" } },
+        { text: "France", data: { iso: "FR", code: "+33" } },
+        { text: "Nigeria", data: { iso: "NG", code: "+234" } },
+        { text: "Egypt", data: { iso: "EG", code: "+20" } },
+        { text: "South Africa", data: { iso: "ZA", code: "+27" } },
+        { text: "China", data: { iso: "CN", code: "+86" } },
+        { text: "India", data: { iso: "IN", code: "+91" } },
+        { text: "Japan", data: { iso: "JP", code: "+81" } },
+        { text: "Australia", data: { iso: "AU", code: "+61" } },
+        { text: "New Zealand", data: { iso: "NZ", code: "+64" } },
+        { text: "Papua New Guinea", data: { iso: "PG", code: "+675" } }
+    ];
+
     public statusOptions = [
         { text: 'New', value: 1 },
         { text: 'Shipped', value: 2 },
@@ -39,12 +60,12 @@ export class QueryBuilderTemplateSampleComponent implements OnInit {
             { field: "OrderDate", dataType: "date" },
             { field: "RequiredDate", dataType: "date" },
             { field: "ShippedDate", dataType: "date" },
-            { field: "ShipVia", dataType: "number", formatter: (value: any, rowData: any) => rowData === 'equals'|| rowData === 'doesNotEqual'? `${Array.from(value).map((v: { id: any; }) => v.id)}` : value },
+            { field: "ShipVia", dataType: "number" },
             { field: "Freight", dataType: "number" },
             { field: "ShipName", dataType: "string" },
             { field: "ShipCity", dataType: "string" },
             { field: "ShipPostalCode", dataType: "string" },
-            { field: "ShipCountry", dataType: "string" },
+            { field: "ShipCountry", dataType: "string", formatter: (value: any, rowData: any) => rowData === 'equals' || rowData === 'doesNotEqual' ? `${value.iso} (${value.code})` : value },
             { field: "Region", dataType: "string" },
             { field: "OrderStatus", dataType: "number" }
         ];
@@ -70,10 +91,10 @@ export class QueryBuilderTemplateSampleComponent implements OnInit {
             searchVal: 1
         });
         tree.filteringOperands.push({
-            fieldName: 'ShipVia',
-            condition: IgxNumberFilteringOperand.instance().condition('equals'),
+            fieldName: 'ShipCountry',
+            condition: IgxStringFilteringOperand.instance().condition('equals'),
             conditionName: 'equals',
-            searchVal: [{ id: 0, field: 'sea' },  { id: 2, field: 'land' }]
+            searchVal: this.countries[3].data
         });
 
         this.expressionTree = tree;