fix(client-vue): Fix boolean operator in filter without using builder…

…Props (#4782) Co-authored-by: Aylin Haskioglu <aylin.haskioglu@valiton.com>
cube-js · Jun 21, 2022 · 904171e · 904171e
1 parent 0fa2995
commit 904171e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/packages/cubejs-client-vue/src/QueryBuilder.js b/packages/cubejs-client-vue/src/QueryBuilder.js
@@ -468,6 +468,8 @@ export default {
           ...m,
           member: memberName && this.meta.resolveMember(memberName, memberTypes),
           operators: memberName && this.meta.filterOperatorsForMember(memberName, memberTypes),
+          and: resolveMembers(this.meta, m.and),
+          or: resolveMembers(this.meta, m.or),
           index,
         };
       });

diff --git a/packages/cubejs-client-vue/tests/unit/QueryBuilder.spec.js b/packages/cubejs-client-vue/tests/unit/QueryBuilder.spec.js
@@ -502,6 +502,63 @@ describe('QueryBuilder.vue', () => {
       expect(wrapper.vm.validatedQuery.filters[0].or[2].and[1].values).toContain('that');
     });
 
+    it('filters with boolean logical operators without explicit set', async () => {
+      const cube = createCubejsApi();
+      jest
+          .spyOn(cube, 'request')
+          .mockImplementation(fetchMock(load))
+          .mockImplementationOnce(fetchMock(meta));
+
+      const filter = {
+        or: [
+          {
+            dimension: 'Orders.status',
+            operator: 'equals',
+            values: ['this'],
+          },
+          {
+            dimension: 'Orders.status',
+            operator: 'equals',
+            values: ['that'],
+          },
+          {
+            and: [
+              {
+                dimension: 'Orders.status',
+                operator: 'equals',
+                values: ['this'],
+              },
+              {
+                dimension: 'Orders.status',
+                operator: 'equals',
+                values: ['that'],
+              },
+            ],
+          },
+        ],
+      };
+
+      const wrapper = mount(QueryBuilder, {
+        propsData: {
+          cubejsApi: cube,
+          query: {
+            filters: [filter],
+          },
+        },
+      });
+
+      await flushPromises();
+
+      expect(wrapper.vm.filters[0].or.length).toBe(3);
+      expect(wrapper.vm.validatedQuery.filters.length).toBe(1);
+      expect(wrapper.vm.validatedQuery.filters[0].or[0].member).toBe('Orders.status');
+      expect(wrapper.vm.validatedQuery.filters[0].or[0].values).toContain('this');
+      expect(wrapper.vm.validatedQuery.filters[0].or[1].values).toContain('that');
+      expect(wrapper.vm.validatedQuery.filters[0].or[2].and[0].member).toBe('Orders.status');
+      expect(wrapper.vm.validatedQuery.filters[0].or[2].and[0].values).toContain('this');
+      expect(wrapper.vm.validatedQuery.filters[0].or[2].and[1].values).toContain('that');
+    });
+
     it.each([
       [
         {