refactor(sample): query-builder formatter example simplified

Author: ivanvpetrov

src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html

@@ -11,7 +11,7 @@
                         let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
                 @if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
                     <igx-select [placeholder]="'Select region'" [(ngModel)]="searchValue.value">
-                        <igx-select-item *ngFor="let reg of regionOptions" [value]="reg.value">{{ reg.text }}</igx-select-item>
+                        <igx-select-item *ngFor="let reg of regionOptions" [value]="reg">{{ reg.text }}</igx-select-item>
                     </igx-select>
                 } 
                 @else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
@@ -21,12 +21,7 @@
                         </igx-radio>
                     </igx-radio-group>
                 }
-                @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 {  
+                @else {  
                     <ng-container *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
                 }
             </ng-template>

src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts

@@ -26,27 +26,6 @@ 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 },
@@ -65,8 +44,8 @@ export class QueryBuilderTemplateSampleComponent implements OnInit {
             { field: "ShipName", dataType: "string" },
             { field: "ShipCity", dataType: "string" },
             { field: "ShipPostalCode", 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: "ShipCountry", dataType: "string" },
+            { field: "Region", dataType: "string", formatter: (value: any, rowData: any) => rowData === 'equals' || rowData === 'doesNotEqual' ? `${value.value}` : value },
             { field: "OrderStatus", dataType: "number" }
         ];
 
@@ -82,23 +61,16 @@ export class QueryBuilderTemplateSampleComponent implements OnInit {
             fieldName: 'Region',
             condition: IgxStringFilteringOperand.instance().condition('equals'),
             conditionName: 'equals',
-            searchVal: 'CNA'
+            searchVal: this.regionOptions[0]
         });
         tree.filteringOperands.push({
             fieldName: 'OrderStatus',
             condition: IgxNumberFilteringOperand.instance().condition('equals'),
             conditionName: 'equals',
             searchVal: 1
         });
-        tree.filteringOperands.push({
-            fieldName: 'ShipCountry',
-            condition: IgxStringFilteringOperand.instance().condition('equals'),
-            conditionName: 'equals',
-            searchVal: this.countries[3].data
-        });
 
         this.expressionTree = tree;
-        this.shipViaFormatterData = [{ id: 0, field: 'sea' }, { id: 1, field: 'air' }, { id: 2, field: 'land' }]
     }
 
     public printExpressionTree(tree: IExpressionTree) {