From a55a5466dd5e4ba5489523d7be3f121d84e7ae5a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 15 May 2024 11:18:18 +0000
Subject: [PATCH] fix: nested webhook filter related issues

---
 .../smartsheet/toolbar/ColumnFilter.vue       |  27 +-
 packages/nc-gui/composables/useViewFilters.ts |  26 +-
 packages/nocodb/src/helpers/webhookHelpers.ts | 438 +++++++++---------
 packages/nocodb/src/models/Filter.ts          |   4 +-
 4 files changed, 259 insertions(+), 236 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 155782497e..05d9fc3e62 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -12,6 +12,7 @@ interface Props {
   webHook?: boolean
   draftFilter?: Partial<FilterType>
 }
+
 const props = withDefaults(defineProps<Props>(), {
   nestedLevel: 0,
   autoSave: true,
@@ -21,13 +22,14 @@ const props = withDefaults(defineProps<Props>(), {
   webHook: false,
 })
 
-const emit = defineEmits(['update:filtersLength', 'update:draftFilter'])
+const emit = defineEmits(['update:filtersLength', 'update:draftFilter', 'update:modelValue'])
 
 const excludedFilterColUidt = [UITypes.QrCode, UITypes.Barcode]
 
 const draftFilter = useVModel(props, 'draftFilter', emit)
+const modelValue = useVModel(props, 'modelValue', emit)
 
-const { nestedLevel, parentId, autoSave, hookId, modelValue, showLoading, webHook } = toRefs(props)
+const { nestedLevel, parentId, autoSave, hookId, showLoading, webHook } = toRefs(props)
 
 const nested = computed(() => nestedLevel.value > 0)
 
@@ -66,7 +68,7 @@ const {
   types,
 } = useViewFilters(
   activeView,
-  parentId?.value,
+  parentId,
   computed(() => autoSave.value),
   () => reloadDataHook.trigger({ shouldShowLoading: showLoading.value, offset: 0 }),
   modelValue.value || nestedFilters.value,
@@ -204,8 +206,10 @@ const applyChanges = async (hookId?: string, nested = false, isConditionSupporte
 
   if (!localNestedFilters.value?.length) return
 
+  await nextTick()
+
   for (const nestedFilter of localNestedFilters.value) {
-    if (nestedFilter.parentId) {
+    if (nestedFilter.parentId?.value) {
       await nestedFilter.applyChanges(hookId, true)
     }
   }
@@ -250,7 +254,7 @@ const updateFilterValue = (value: string, filter: Filter, index: number) => {
 
 defineExpose({
   applyChanges,
-  parentId: parentId?.value,
+  parentId,
 })
 
 const scrollToBottom = () => {
@@ -373,6 +377,17 @@ const onLogicalOpUpdate = async (filter: Filter, index: number) => {
   }
   await saveOrUpdate(filter, index)
 }
+
+// watch for changes in filters and update the modelValue
+watch(
+  filters,
+  () => {
+    if (modelValue.value !== filters.value) modelValue.value = filters.value
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
@@ -436,7 +451,7 @@ const onLogicalOpUpdate = async (filter: Filter, index: number) => {
               </div>
               <div class="flex border-1 rounded-lg p-2 w-full" :class="nestedLevel % 2 !== 0 ? 'bg-white' : 'bg-gray-100'">
                 <LazySmartsheetToolbarColumnFilter
-                  v-if="filter.id || filter.children"
+                  v-if="filter.id || filter.children || !autoSave"
                   :key="filter.id ?? i"
                   ref="localNestedFilters"
                   v-model="filter.children"
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 8b8a1d6064..ebb628a6d8 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -12,7 +12,7 @@ import { UITypes, isSystemColumn } from 'nocodb-sdk'
 
 export function useViewFilters(
   view: Ref<ViewType | undefined>,
-  parentId?: string,
+  parentId: Ref<string | null>,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
   _currentFilters?: Filter[],
@@ -240,14 +240,14 @@ export function useViewFilters(
 
     try {
       if (isWebhook || hookId) {
-        if (parentId) {
-          filters.value = (await $api.dbTableFilter.childrenRead(parentId)).list as Filter[]
+        if (parentId.value) {
+          filters.value = (await $api.dbTableFilter.childrenRead(parentId.value)).list as Filter[]
         } else if (hookId) {
           filters.value = (await $api.dbTableWebhookFilter.read(hookId)).list as Filter[]
         }
       } else {
-        if (parentId) {
-          filters.value = (await $api.dbTableFilter.childrenRead(parentId)).list as Filter[]
+        if (parentId.value) {
+          filters.value = (await $api.dbTableFilter.childrenRead(parentId.value)).list as Filter[]
         } else {
           filters.value = (await $api.dbTableFilter.read(view.value!.id!)).list as Filter[]
           if (loadAllFilters) {
@@ -275,21 +275,25 @@ export function useViewFilters(
         } else if (filter.status === 'update') {
           await $api.dbTableFilter.update(filter.id as string, {
             ...filter,
-            fk_parent_id: parentId,
+            fk_parent_id: parentId.value,
           })
         } else if (filter.status === 'create') {
+          // extract children value if found to restore
+          const children = filters.value[+i]?.children
           if (hookId) {
             filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
               ...filter,
-              fk_parent_id: parentId,
+              fk_parent_id: parentId.value,
             })) as unknown as FilterType
           } else {
             filters.value[+i] = await $api.dbTableFilter.create(view?.value?.id as string, {
               ...filter,
-              fk_parent_id: parentId,
+              fk_parent_id: parentId.value,
             })
           }
 
+          if (children) filters.value[+i].children = children
+
           allFilters.value.push(filters.value[+i])
         }
       }
@@ -345,7 +349,7 @@ export function useViewFilters(
       } else if (filter.id && filter.status !== 'create') {
         await $api.dbTableFilter.update(filter.id, {
           ...filter,
-          fk_parent_id: parentId,
+          fk_parent_id: parentId.value,
         })
         $e('a:filter:update', {
           logical: filter.logical_op,
@@ -354,7 +358,7 @@ export function useViewFilters(
       } else {
         filters.value[i] = await $api.dbTableFilter.create(view.value.id!, {
           ...filter,
-          fk_parent_id: parentId,
+          fk_parent_id: parentId.value,
         })
 
         allFilters.value.push(filters.value[+i])
@@ -482,7 +486,7 @@ export function useViewFilters(
 
     const index = filters.value.length - 1
 
-    await saveOrUpdate(filters.value[index], index, true)
+    await saveOrUpdate(filters.value[index], index)
 
     lastFilters.value = clone(filters.value)
 
diff --git a/packages/nocodb/src/helpers/webhookHelpers.ts b/packages/nocodb/src/helpers/webhookHelpers.ts
index 59fa0d1fec..b540a11bb2 100644
--- a/packages/nocodb/src/helpers/webhookHelpers.ts
+++ b/packages/nocodb/src/helpers/webhookHelpers.ts
@@ -51,9 +51,6 @@ export async function validateCondition(
   for (const _filter of filters) {
     const filter = _filter instanceof Filter ? _filter : new Filter(_filter);
     let res;
-    const column = await filter.getColumn();
-    const field = column.title;
-    let val = data[field];
     if (filter.is_group) {
       res = await validateCondition(
         filter.children || (await filter.getChildren()),
@@ -62,239 +59,244 @@ export async function validateCondition(
           client,
         },
       );
-    } else if (
-      [
-        UITypes.Date,
-        UITypes.DateTime,
-        UITypes.CreatedTime,
-        UITypes.LastModifiedTime,
-      ].includes(column.uidt) &&
-      !['empty', 'blank', 'notempty', 'notblank'].includes(filter.comparison_op)
-    ) {
-      const dateFormat =
-        client === 'mysql2' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ';
-
-      let now = dayjs(new Date());
-      const dateFormatFromMeta = column?.meta?.date_format;
-      const dataVal: any = val;
-      let filterVal: any = filter.value;
-      if (dateFormatFromMeta && isDateMonthFormat(dateFormatFromMeta)) {
-        // reset to 1st
-        now = dayjs(now).date(1);
-        if (val) val = dayjs(val).date(1);
-      }
-      if (filterVal) res = dayjs(filterVal).isSame(dataVal, 'day');
-
-      // handle sub operation
-      switch (filter.comparison_sub_op) {
-        case 'today':
-          filterVal = now;
-          break;
-        case 'tomorrow':
-          filterVal = now.add(1, 'day');
-          break;
-        case 'yesterday':
-          filterVal = now.add(-1, 'day');
-          break;
-        case 'oneWeekAgo':
-          filterVal = now.add(-1, 'week');
-          break;
-        case 'oneWeekFromNow':
-          filterVal = now.add(1, 'week');
-          break;
-        case 'oneMonthAgo':
-          filterVal = now.add(-1, 'month');
-          break;
-        case 'oneMonthFromNow':
-          filterVal = now.add(1, 'month');
-          break;
-        case 'daysAgo':
-          if (!filterVal) return;
-          filterVal = now.add(-filterVal, 'day');
-          break;
-        case 'daysFromNow':
-          if (!filterVal) return;
-          filterVal = now.add(filterVal, 'day');
-          break;
-        case 'exactDate':
-          if (!filterVal) return;
-          break;
-        // sub-ops for `isWithin` comparison
-        case 'pastWeek':
-          filterVal = now.add(-1, 'week');
-          break;
-        case 'pastMonth':
-          filterVal = now.add(-1, 'month');
-          break;
-        case 'pastYear':
-          filterVal = now.add(-1, 'year');
-          break;
-        case 'nextWeek':
-          filterVal = now.add(1, 'week');
-          break;
-        case 'nextMonth':
-          filterVal = now.add(1, 'month');
-          break;
-        case 'nextYear':
-          filterVal = now.add(1, 'year');
-          break;
-        case 'pastNumberOfDays':
-          if (!filterVal) return;
-          filterVal = now.add(-filterVal, 'day');
-          break;
-        case 'nextNumberOfDays':
-          if (!filterVal) return;
-          filterVal = now.add(filterVal, 'day');
-          break;
-      }
+    } else {
+      const column = await filter.getColumn();
+      const field = column.title;
+      let val = data[field];
+      if (
+        [
+          UITypes.Date,
+          UITypes.DateTime,
+          UITypes.CreatedTime,
+          UITypes.LastModifiedTime,
+        ].includes(column.uidt) &&
+        !['empty', 'blank', 'notempty', 'notblank'].includes(filter.comparison_op)
+      ) {
+        const dateFormat =
+          client === 'mysql2' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ';
+
+        let now = dayjs(new Date());
+        const dateFormatFromMeta = column?.meta?.date_format;
+        const dataVal: any = val;
+        let filterVal: any = filter.value;
+        if (dateFormatFromMeta && isDateMonthFormat(dateFormatFromMeta)) {
+          // reset to 1st
+          now = dayjs(now).date(1);
+          if (val) val = dayjs(val).date(1);
+        }
+        if (filterVal) res = dayjs(filterVal).isSame(dataVal, 'day');
+
+        // handle sub operation
+        switch (filter.comparison_sub_op) {
+          case 'today':
+            filterVal = now;
+            break;
+          case 'tomorrow':
+            filterVal = now.add(1, 'day');
+            break;
+          case 'yesterday':
+            filterVal = now.add(-1, 'day');
+            break;
+          case 'oneWeekAgo':
+            filterVal = now.add(-1, 'week');
+            break;
+          case 'oneWeekFromNow':
+            filterVal = now.add(1, 'week');
+            break;
+          case 'oneMonthAgo':
+            filterVal = now.add(-1, 'month');
+            break;
+          case 'oneMonthFromNow':
+            filterVal = now.add(1, 'month');
+            break;
+          case 'daysAgo':
+            if (!filterVal) return;
+            filterVal = now.add(-filterVal, 'day');
+            break;
+          case 'daysFromNow':
+            if (!filterVal) return;
+            filterVal = now.add(filterVal, 'day');
+            break;
+          case 'exactDate':
+            if (!filterVal) return;
+            break;
+          // sub-ops for `isWithin` comparison
+          case 'pastWeek':
+            filterVal = now.add(-1, 'week');
+            break;
+          case 'pastMonth':
+            filterVal = now.add(-1, 'month');
+            break;
+          case 'pastYear':
+            filterVal = now.add(-1, 'year');
+            break;
+          case 'nextWeek':
+            filterVal = now.add(1, 'week');
+            break;
+          case 'nextMonth':
+            filterVal = now.add(1, 'month');
+            break;
+          case 'nextYear':
+            filterVal = now.add(1, 'year');
+            break;
+          case 'pastNumberOfDays':
+            if (!filterVal) return;
+            filterVal = now.add(-filterVal, 'day');
+            break;
+          case 'nextNumberOfDays':
+            if (!filterVal) return;
+            filterVal = now.add(filterVal, 'day');
+            break;
+        }
+
+        if (dataVal) {
+          switch (filter.comparison_op) {
+            case 'eq':
+              res = dayjs(dataVal).isSame(filterVal, 'day');
+              break;
+            case 'neq':
+              res = !dayjs(dataVal).isSame(filterVal, 'day');
+              break;
+            case 'gt':
+              res = dayjs(dataVal).isAfter(filterVal, 'day');
+              break;
+            case 'lt':
+              res = dayjs(dataVal).isBefore(filterVal, 'day');
+              break;
+            case 'lte':
+            case 'le':
+              res = dayjs(dataVal).isSameOrBefore(filterVal, 'day');
+              break;
+            case 'gte':
+            case 'ge':
+              res = dayjs(dataVal).isSameOrAfter(filterVal, 'day');
+              break;
+            case 'empty':
+            case 'blank':
+              res = dataVal === '' || dataVal === null || dataVal === undefined;
+              break;
+            case 'notempty':
+            case 'notblank':
+              res = !(
+                dataVal === '' ||
+                dataVal === null ||
+                dataVal === undefined
+              );
+              break;
+            case 'isWithin': {
+              let now = dayjs(new Date()).format(dateFormat).toString();
+              now = column.uidt === UITypes.Date ? now.substring(0, 10) : now;
+              switch (filter.comparison_sub_op) {
+                case 'pastWeek':
+                case 'pastMonth':
+                case 'pastYear':
+                case 'pastNumberOfDays':
+                  res = dayjs(dataVal).isBetween(filterVal, now, 'day');
+                  break;
+                case 'nextWeek':
+                case 'nextMonth':
+                case 'nextYear':
+                case 'nextNumberOfDays':
+                  res = dayjs(dataVal).isBetween(now, filterVal, 'day');
+                  break;
+              }
+            }
+          }
+        }
+      } else {
+        switch (typeof filter.value) {
+          case 'boolean':
+            val = !!data[field];
+            break;
+          case 'number':
+            val = +data[field];
+            break;
+        }
 
-      if (dataVal) {
         switch (filter.comparison_op) {
           case 'eq':
-            res = dayjs(dataVal).isSame(filterVal, 'day');
+            res = val == filter.value;
             break;
           case 'neq':
-            res = !dayjs(dataVal).isSame(filterVal, 'day');
+            res = val != filter.value;
             break;
-          case 'gt':
-            res = dayjs(dataVal).isAfter(filterVal, 'day');
+          case 'like':
+            res =
+              data[field]
+                ?.toString?.()
+                ?.toLowerCase()
+                ?.indexOf(filter.value?.toLowerCase()) > -1;
             break;
-          case 'lt':
-            res = dayjs(dataVal).isBefore(filterVal, 'day');
-            break;
-          case 'lte':
-          case 'le':
-            res = dayjs(dataVal).isSameOrBefore(filterVal, 'day');
-            break;
-          case 'gte':
-          case 'ge':
-            res = dayjs(dataVal).isSameOrAfter(filterVal, 'day');
+          case 'nlike':
+            res =
+              data[field]
+                ?.toString?.()
+                ?.toLowerCase()
+                ?.indexOf(filter.value?.toLowerCase()) === -1;
             break;
           case 'empty':
           case 'blank':
-            res = dataVal === '' || dataVal === null || dataVal === undefined;
+            res =
+              data[field] === '' ||
+              data[field] === null ||
+              data[field] === undefined;
             break;
           case 'notempty':
           case 'notblank':
             res = !(
-              dataVal === '' ||
-              dataVal === null ||
-              dataVal === undefined
+              data[field] === '' ||
+              data[field] === null ||
+              data[field] === undefined
             );
             break;
-          case 'isWithin': {
-            let now = dayjs(new Date()).format(dateFormat).toString();
-            now = column.uidt === UITypes.Date ? now.substring(0, 10) : now;
-            switch (filter.comparison_sub_op) {
-              case 'pastWeek':
-              case 'pastMonth':
-              case 'pastYear':
-              case 'pastNumberOfDays':
-                res = dayjs(dataVal).isBetween(filterVal, now, 'day');
-                break;
-              case 'nextWeek':
-              case 'nextMonth':
-              case 'nextYear':
-              case 'nextNumberOfDays':
-                res = dayjs(dataVal).isBetween(now, filterVal, 'day');
-                break;
-            }
-          }
+          case 'checked':
+            res = !!data[field];
+            break;
+          case 'notchecked':
+            res = !data[field];
+            break;
+          case 'null':
+            res = res = data[field] === null;
+            break;
+          case 'notnull':
+            res = data[field] !== null;
+            break;
+          case 'allof':
+            res = (
+              filter.value?.split(',').map((item) => item.trim()) ?? []
+            ).every((item) => (data[field]?.split(',') ?? []).includes(item));
+            break;
+          case 'anyof':
+            res = (
+              filter.value?.split(',').map((item) => item.trim()) ?? []
+            ).some((item) => (data[field]?.split(',') ?? []).includes(item));
+            break;
+          case 'nallof':
+            res = !(
+              filter.value?.split(',').map((item) => item.trim()) ?? []
+            ).every((item) => (data[field]?.split(',') ?? []).includes(item));
+            break;
+          case 'nanyof':
+            res = !(
+              filter.value?.split(',').map((item) => item.trim()) ?? []
+            ).some((item) => (data[field]?.split(',') ?? []).includes(item));
+            break;
+          case 'lt':
+            res = +data[field] < +filter.value;
+            break;
+          case 'lte':
+          case 'le':
+            res = +data[field] <= +filter.value;
+            break;
+          case 'gt':
+            res = +data[field] > +filter.value;
+            break;
+          case 'gte':
+          case 'ge':
+            res = +data[field] >= +filter.value;
+            break;
         }
       }
-    } else {
-      switch (typeof filter.value) {
-        case 'boolean':
-          val = !!data[field];
-          break;
-        case 'number':
-          val = +data[field];
-          break;
-      }
-
-      switch (filter.comparison_op) {
-        case 'eq':
-          res = val == filter.value;
-          break;
-        case 'neq':
-          res = val != filter.value;
-          break;
-        case 'like':
-          res =
-            data[field]
-              ?.toString?.()
-              ?.toLowerCase()
-              ?.indexOf(filter.value?.toLowerCase()) > -1;
-          break;
-        case 'nlike':
-          res =
-            data[field]
-              ?.toString?.()
-              ?.toLowerCase()
-              ?.indexOf(filter.value?.toLowerCase()) === -1;
-          break;
-        case 'empty':
-        case 'blank':
-          res =
-            data[field] === '' ||
-            data[field] === null ||
-            data[field] === undefined;
-          break;
-        case 'notempty':
-        case 'notblank':
-          res = !(
-            data[field] === '' ||
-            data[field] === null ||
-            data[field] === undefined
-          );
-          break;
-        case 'checked':
-          res = !!data[field];
-          break;
-        case 'notchecked':
-          res = !data[field];
-          break;
-        case 'null':
-          res = res = data[field] === null;
-          break;
-        case 'notnull':
-          res = data[field] !== null;
-          break;
-        case 'allof':
-          res = (
-            filter.value?.split(',').map((item) => item.trim()) ?? []
-          ).every((item) => (data[field]?.split(',') ?? []).includes(item));
-          break;
-        case 'anyof':
-          res = (
-            filter.value?.split(',').map((item) => item.trim()) ?? []
-          ).some((item) => (data[field]?.split(',') ?? []).includes(item));
-          break;
-        case 'nallof':
-          res = !(
-            filter.value?.split(',').map((item) => item.trim()) ?? []
-          ).every((item) => (data[field]?.split(',') ?? []).includes(item));
-          break;
-        case 'nanyof':
-          res = !(
-            filter.value?.split(',').map((item) => item.trim()) ?? []
-          ).some((item) => (data[field]?.split(',') ?? []).includes(item));
-          break;
-        case 'lt':
-          res = +data[field] < +filter.value;
-          break;
-        case 'lte':
-        case 'le':
-          res = +data[field] <= +filter.value;
-          break;
-        case 'gt':
-          res = +data[field] > +filter.value;
-          break;
-        case 'gte':
-        case 'ge':
-          res = +data[field] >= +filter.value;
-          break;
-      }
     }
 
     switch (filter.logical_op) {
diff --git a/packages/nocodb/src/models/Filter.ts b/packages/nocodb/src/models/Filter.ts
index c0b0ee763b..bf4b5861ee 100644
--- a/packages/nocodb/src/models/Filter.ts
+++ b/packages/nocodb/src/models/Filter.ts
@@ -515,7 +515,9 @@ export default class Filter implements FilterType {
       });
       await NocoCache.setList(CacheScope.FILTER_EXP, [hookId], filterObjs);
     }
-    return filterObjs?.map((f) => this.castType(f));
+    return filterObjs
+      ?.filter((f) => !f.fk_parent_id)
+      ?.map((f) => this.castType(f));
   }
 
   static async parentFilterList(