Can cancel previous search

Ecodev · Mar 9, 2023 · 32a2415 · 32a2415
1 parent c980928
commit 32a2415
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 11 deletions.
diff --git a/projects/natural/src/lib/modules/select/select/select.component.spec.ts b/projects/natural/src/lib/modules/select/select/select.component.spec.ts
@@ -76,7 +76,7 @@ describe('NaturalSelectComponent', () => {
             data.fixture.detectChanges();
         });
 
-        testSelectAndSelectHierarchicCommonBehavior(data);
+        testSelectComponent(data);
     });
 
     describe('with formControl', () => {
@@ -87,6 +87,95 @@ describe('NaturalSelectComponent', () => {
             data.fixture.detectChanges();
         });
 
-        testSelectAndSelectHierarchicCommonBehavior(data);
+        testSelectComponent(data);
     });
 });
+
+function testSelectComponent(data: TestFixture<NaturalSelectComponent<ItemService>>): void {
+    testSelectAndSelectHierarchicCommonBehavior(data);
+
+    it('search variables are correct', () => {
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{custom: null}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can search with default `custom.search`
+        data.selectComponent.search('foo');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{custom: {search: {value: 'foo'}}}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can cancel previous search
+        data.selectComponent.search('');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{custom: null}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can search on specified field `name` and will default to `like` operator
+        data.selectComponent.searchField = 'name';
+        data.selectComponent.search('foo');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{name: {like: {value: '%foo%'}}}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can cancel previous search
+        data.selectComponent.search('');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{name: null}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can search on default field `custom` with specified `like` operator
+        data.selectComponent.searchField = 'custom';
+        data.selectComponent.searchOperator = 'like';
+        data.selectComponent.search('foo');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{custom: {like: {value: '%foo%'}}}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can cancel previous search
+        data.selectComponent.search('');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{custom: null}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+
+        // Can search on specific `myField.myOperator`
+        data.selectComponent.searchField = 'myField';
+        data.selectComponent.searchOperator = 'myOperator';
+        data.selectComponent.search('foo');
+        expect(data.selectComponent.getVariablesForDebug()).toEqual({
+            filter: {groups: [{conditions: [{myField: {myOperator: {value: 'foo'}}}]}]},
+            pagination: {
+                pageIndex: 0,
+                pageSize: 10,
+            },
+        });
+    });
+}
diff --git a/projects/natural/src/lib/modules/select/select/select.component.ts b/projects/natural/src/lib/modules/select/select/select.component.ts
@@ -108,7 +108,7 @@ export class NaturalSelectComponent<
     public items: null | Observable<readonly any[]> = null;
 
     /**
-     * Whether a we are searching something
+     * Whether we are searching something
      */
     public loading = false;
 
@@ -247,12 +247,8 @@ export class NaturalSelectComponent<
     }
 
     private getSearchFilter(term: string | null): QueryVariables {
-        if (!term) {
-            return {};
-        }
-
         const searchOperator = this.searchOperator ?? (this.searchField === 'custom' ? 'search' : 'like');
-        if (searchOperator === 'like') {
+        if (term && searchOperator === 'like') {
             term = '%' + term + '%';
         }
 
@@ -262,14 +258,20 @@ export class NaturalSelectComponent<
                     {
                         conditions: [
                             {
-                                [this.searchField]: {
-                                    [searchOperator]: {value: term},
-                                },
+                                [this.searchField]: term
+                                    ? {
+                                          [searchOperator]: {value: term},
+                                      }
+                                    : null,
                             },
                         ],
                     },
                 ],
             },
         };
     }
+
+    public getVariablesForDebug(): Readonly<QueryVariables> | undefined {
+        return this.variablesManager.variables.value;
+    }
 }