From 6008273118eeeeef559179b41e6c31ef3bfe8b19 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 8 Oct 2024 11:38:21 +0000
Subject: [PATCH 1/5] fix(test): enable form conditional field test cases in
 oss

---
 tests/playwright/tests/db/views/viewForm.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index 57ffe57a2b..c7ef227c52 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -1436,7 +1436,7 @@ test.describe('Form view: field validation', () => {
 });
 
 test.describe('Form view: conditional fields', () => {
-  if (enableQuickRun() || !isEE()) test.skip();
+  if (enableQuickRun()) test.skip();
 
   let dashboard: DashboardPage;
   let form: FormPage;

From 640cea9b7d6675c328b3cc60377c08f336470ad5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 8 Oct 2024 11:38:21 +0000
Subject: [PATCH 2/5] fix(nc-gui): enable conditional fields in oss frontend
 changes

---
 .../smartsheet/form/field-config-error.vue    |  38 +-
 .../form/field-settings/visibility.vue        | 124 +++++-
 .../nc-gui/composables/useFormViewStore.ts    |  45 +-
 packages/nc-gui/lib/form.ts                   | 421 +++++++++++++++++-
 4 files changed, 602 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/form/field-config-error.vue b/packages/nc-gui/components/smartsheet/form/field-config-error.vue
index cea98ebc8c..b4dcc896d6 100644
--- a/packages/nc-gui/components/smartsheet/form/field-config-error.vue
+++ b/packages/nc-gui/components/smartsheet/form/field-config-error.vue
@@ -5,7 +5,41 @@ interface Props {
   column: ColumnType
   mode: 'preview' | 'list'
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const { column, mode } = toRefs(props)
+
+const visibilityError = computed(() => {
+  return parseProp(column.value?.meta)?.visibility?.errors || {}
+})
+
+const firstErrorMsg = computed(() => {
+  const visibilityErr = Object.values(visibilityError.value ?? [])
+  if (visibilityErr.length) {
+    return visibilityErr[0]
+  }
+})
 </script>
 
-<template><div></div></template>
+<template>
+  <template v-if="mode === 'preview'">
+    <div v-if="Object.keys(visibilityError ?? {}).length" class="flex mt-2">
+      <NcTooltip :disabled="!firstErrorMsg" class="flex cursor-pointer" placement="bottom">
+        <template #title>
+          <div class="flex flex-col">
+            {{ firstErrorMsg }}
+          </div>
+        </template>
+        <div
+          class="nc-field-config-error validation-error text-[#CB3F36] bg-[#FFF2F1] rounded-lg inline-flex items-center gap-2 px-2 py-1"
+        >
+          <GeneralIcon icon="alertTriangle" />
+          <div class="flex">Configuration error</div>
+        </div>
+      </NcTooltip>
+    </div>
+  </template>
+  <template v-else>
+    <GeneralIcon v-if="Object.keys(visibilityError ?? {}).length" icon="alertTriangle" class="ml-1 flex-none !text-red-500" />
+  </template>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue b/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue
index 41d0bd451a..c162f83e93 100644
--- a/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue
+++ b/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue
@@ -1,7 +1,46 @@
 <script lang="ts" setup>
-const { activeField } = useFormViewStoreOrThrow()
+import type { ColumnType } from 'nocodb-sdk'
+
+const { visibleColumns, activeField, allViewFilters, localColumnsMapByFkColumnId } = useFormViewStoreOrThrow()
 
 const isOpen = ref<boolean>(false)
+
+const allFilters = ref({})
+
+provide(AllFiltersInj, allFilters)
+
+const visibilityError = computed(() => {
+  return parseProp(activeField.value?.meta)?.visibility?.errors || {}
+})
+
+const hasvisibilityError = computed(() => Object.keys(visibilityError.value).length)
+
+const visibilityFilters = computed(() => {
+  if (!allViewFilters.value[activeField.value?.fk_column_id]) {
+    allViewFilters.value[activeField.value!.fk_column_id] = []
+  }
+
+  return allViewFilters.value[activeField.value!.fk_column_id]
+})
+
+const isFirstField = computed(() => {
+  return !!(visibleColumns.value.length && visibleColumns.value[0].id === activeField.value?.id)
+})
+
+const filterOption = (column: ColumnType) => {
+  // hide active field from filter option
+  const isNotActiveField = column.id !== activeField.value!.fk_column_id
+
+  // show only form view visible columns and order is less than active field
+  const orderIsLessThanActiveField =
+    column.id && localColumnsMapByFkColumnId.value[column.id]
+      ? (localColumnsMapByFkColumnId.value[column.id].order ?? Infinity) < (activeField.value?.order ?? Infinity)
+      : false
+
+  const isVisible = localColumnsMapByFkColumnId.value[column.id]?.show
+
+  return isNotActiveField && orderIsLessThanActiveField && isVisible
+}
 </script>
 
 <template>
@@ -11,28 +50,79 @@ const isOpen = ref<boolean>(false)
         <div class="text-gray-800 font-medium">{{ $t('labels.showOnConditions') }}</div>
 
         <div class="flex flex-col">
-          <NcTooltip placement="left">
-            <template #title>
-              <div class="text-center">
-                {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+          <NcDropdown
+            v-if="visibilityFilters"
+            v-model:visible="isOpen"
+            placement="bottomLeft"
+            :disabled="isFirstField && !visibilityFilters.length && !isOpen"
+            overlay-class-name="nc-form-field-visibility-dropdown"
+          >
+            <NcTooltip placement="left" :disabled="!isFirstField">
+              <template #title> Cannot add conditions to the first field in a form. </template>
+              <div
+                class="nc-form-field-visibility-btn border-1 rounded-lg py-1 px-3 flex items-center justify-between gap-2 !min-w-[170px] transition-all cursor-pointer select-none text-sm"
+                :class="{
+                  '!border-brand-500 shadow-selected': isOpen,
+                  'border-gray-200': !isOpen,
+                  'bg-[#F0F3FF]': visibilityFilters.length,
+                  'opacity-70 cursor-default nc-disabled': isFirstField && !visibilityFilters.length,
+                }"
+                data-testid="nc-form-field-visibility-btn"
+              >
+                <div
+                  class="nc-form-field-visibility-conditions-count flex-1"
+                  :class="{
+                    'text-brand-500 ': visibilityFilters.length,
+                  }"
+                >
+                  {{
+                    visibilityFilters.length
+                      ? `${visibilityFilters.length} condition${visibilityFilters.length !== 1 ? 's' : ''}`
+                      : 'No conditions'
+                  }}
+                </div>
+
+                <GeneralIcon v-if="hasvisibilityError" icon="alertTriangle" class="flex-none !text-red-500" />
+
+                <GeneralIcon
+                  icon="settings"
+                  class="flex-none w-4 h-4"
+                  :class="{
+                    'text-brand-500 ': visibilityFilters.length,
+                  }"
+                />
+              </div>
+            </NcTooltip>
+
+            <template #overlay>
+              <div
+                class="nc-form-field-visibility-dropdown-container"
+                :class="{
+                  'py-2': !visibilityFilters.length,
+                }"
+              >
+                <SmartsheetToolbarColumnFilter
+                  ref="fieldVisibilityRef"
+                  v-model="visibilityFilters"
+                  class="w-full"
+                  :auto-save="true"
+                  data-testid="nc-filter-menu"
+                  :show-loading="false"
+                  :parent-col-id="activeField.fk_column_id"
+                  :filter-option="filterOption"
+                  :visibility-error="visibilityError"
+                  :disable-add-new-filter="isFirstField"
+                />
               </div>
             </template>
-            <div
-              class="nc-form-field-visibility-btn border-1 rounded-lg py-1 px-3 flex items-center justify-between gap-2 !min-w-[170px] transition-all select-none text-sm opacity-50 cursor-not-allowed"
-              :class="{
-                '!border-brand-500': isOpen,
-                'border-gray-200': !isOpen,
-              }"
-            >
-              <div class="nc-form-field-visibility-conditions-count flex-1">No conditions</div>
-
-              <GeneralIcon icon="settings" class="flex-none w-4 h-4" />
-            </div>
-          </NcTooltip>
+          </NcDropdown>
         </div>
       </div>
       <div>
         <div class="text-sm text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
+        <div v-if="hasvisibilityError" class="mt-2 visibility-condition-input-error text-red-500">
+          Error conditions will not be used for determining field visibility.
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/composables/useFormViewStore.ts b/packages/nc-gui/composables/useFormViewStore.ts
index b6cf015577..09bbf9c92e 100644
--- a/packages/nc-gui/composables/useFormViewStore.ts
+++ b/packages/nc-gui/composables/useFormViewStore.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { RuleObject } from 'ant-design-vue/es/form'
-import type { ColumnType, FilterType, FormType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, FormType, TableType, Validation, ViewType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isLinksOrLTAR } from 'nocodb-sdk'
 import type { ValidateInfo } from 'ant-design-vue/es/form/useForm'
 
@@ -18,6 +18,10 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
 
     const { t } = useI18n()
 
+    const { isMysql } = useBase()
+
+    const { getMeta } = useMetas()
+
     const formResetHook = createEventHook<void>()
 
     const allViewFilters = ref<Record<string, FilterType[]>>({})
@@ -36,6 +40,17 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
       }, {} as Record<string, ColumnType & Record<string, any>>)
     })
 
+    const fieldVisibilityValidator = computed(() => {
+      return new FormFilters({
+        nestedGroupedFilters: allViewFilters.value,
+        formViewColumns: localColumns.value,
+        formViewColumnsMapByFkColumnId: localColumnsMapByFkColumnId.value,
+        formState: formState.value,
+        isMysql,
+        getMeta,
+      })
+    })
+
     const visibleColumns = computed(() =>
       localColumns.value.filter((f) => f.show).sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity)),
     )
@@ -71,7 +86,7 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
           {
             validator: (_rule: RuleObject, value: any) => {
               return new Promise((resolve, reject) => {
-                if (isRequired(column, column.required)) {
+                if (isRequired(column, column.required) && column.visible) {
                   if (typeof value === 'string') {
                     value = value.trim()
                   }
@@ -88,6 +103,14 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
               })
             },
           },
+          {
+            validator: (_rule: RuleObject) => {
+              return new Promise((resolve) => {
+                checkFieldVisibility()
+                return resolve()
+              })
+            },
+          },
         ]
 
         const additionalRules = extractFieldValidator(parseProp(column.meta).validators ?? [], column)
@@ -179,9 +202,23 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
       return required || (columnObj && columnObj.rqd && !columnObj.cdf)
     }
 
-    const loadAllviewFilters = async () => {}
+    const loadAllviewFilters = async () => {
+      if (!viewMeta.value?.id) return
+
+      const formViewFilters = (await $api.dbTableFilter.read(viewMeta.value.id, { includeAllFilters: true })).list || []
+
+      if (!formViewFilters.length) return
+
+      const formFilter = new FormFilters({ data: formViewFilters })
 
-    function checkFieldVisibility() {}
+      const allFilters = formFilter.getNestedGroupedFilters()
+
+      allViewFilters.value = { ...allFilters }
+    }
+
+    async function checkFieldVisibility() {
+      await fieldVisibilityValidator.value.validateVisibility()
+    }
 
     return {
       onReset: formResetHook.on,
diff --git a/packages/nc-gui/lib/form.ts b/packages/nc-gui/lib/form.ts
index f1022b74d1..fe3fd2819a 100644
--- a/packages/nc-gui/lib/form.ts
+++ b/packages/nc-gui/lib/form.ts
@@ -1,5 +1,6 @@
 import type { ColumnType } from 'ant-design-vue/lib/table'
-import { type FilterType } from 'nocodb-sdk'
+import dayjs from 'dayjs'
+import { type FilterType, type LinkToAnotherRecordType, type TableType, UITypes, isDateMonthFormat } from 'nocodb-sdk'
 
 type FormViewColumn = ColumnType & Record<string, any>
 
@@ -11,7 +12,9 @@ export class FormFilters {
   formViewColumnsMapByFkColumnId: Record<string, FormViewColumn>
   formState: Record<string, any>
   value: any
+  isSharedForm: boolean
   isMysql?: (sourceId?: string) => boolean
+  getMeta?: (tableIdOrTitle: string) => Promise<TableType | null>
 
   constructor({
     data = [],
@@ -20,6 +23,8 @@ export class FormFilters {
     formViewColumnsMapByFkColumnId = {},
     formState = {},
     isMysql = undefined,
+    isSharedForm = false,
+    getMeta = undefined,
   }: {
     data?: FilterType[]
     nestedGroupedFilters?: Record<string, FilterType[]>
@@ -27,6 +32,8 @@ export class FormFilters {
     formViewColumnsMapByFkColumnId?: Record<string, FormViewColumn>
     formState?: Record<string, any>
     isMysql?: (sourceId?: string) => boolean
+    isSharedForm?: boolean
+    getMeta?: (tableIdOrTitle: string) => Promise<TableType | null>
   } = {}) {
     this.allViewFilters = data
     this.groupedFilters = {}
@@ -34,14 +41,422 @@ export class FormFilters {
     this.formViewColumns = formViewColumns
     this.formViewColumnsMapByFkColumnId = formViewColumnsMapByFkColumnId
     this.formState = formState
+    this.isSharedForm = isSharedForm
     this.isMysql = isMysql
+    this.getMeta = getMeta
   }
 
   setFilters(filters: FilterType[]) {
     this.allViewFilters = filters
   }
 
-  getNestedGroupedFilters() {}
+  getRootFilters(parentColId: string) {
+    return (this.groupedFilters[parentColId] || [])
+      .filter((f) => !f.fk_parent_id)
+      .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+  }
+
+  getParentFilters(parentColId: string, parentId: string) {
+    return (this.groupedFilters[parentColId] || [])
+      .filter((f) => f.fk_parent_id === parentId)
+      .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+  }
+
+  getAllChildFilters(filters: FilterType[], parentColId: string): any {
+    return filters.map((filter) => {
+      if (filter.id && filter.is_group) {
+        const childFilters = this.getParentFilters(parentColId, filter.id)
+        filter.children = this.getAllChildFilters(childFilters, parentColId)
+      }
+
+      return filter
+    })
+  }
+
+  loadFilters() {
+    for (const parentColId in this.groupedFilters) {
+      const rootFilters = this.getRootFilters(parentColId)
+
+      this.nestedGroupedFilters[parentColId] = this.getAllChildFilters(rootFilters, parentColId)
+    }
+    return this.nestedGroupedFilters
+  }
+
+  // Method to group filters by fk_parent_column_id
+  getNestedGroupedFilters() {
+    const groupedFiltes = this.allViewFilters.reduce((acc, filter) => {
+      const groupingKey = filter.fk_parent_column_id || 'ungrouped'
+
+      if (!acc[groupingKey]) {
+        acc[groupingKey] = []
+      }
+
+      acc[groupingKey].push(filter)
+
+      return acc
+    }, {} as typeof this.groupedFilters)
+
+    this.groupedFilters = groupedFiltes
+
+    const nestedGroupedFilters = this.loadFilters()
+
+    return nestedGroupedFilters
+  }
+
+  toString(value: any) {
+    return `${value || ''}`
+  }
+
+  isFieldAboveParentColumn(column: FormViewColumn, parentColumn: FormViewColumn) {
+    return column.order < parentColumn.order
+  }
+
+  async getOoOrBtColVal(column: FormViewColumn) {
+    const fk_related_model_id = (column?.colOptions as LinkToAnotherRecordType)?.fk_related_model_id
+
+    if (!fk_related_model_id || typeof this.getMeta !== 'function') return null
+
+    const relatedTableMeta = await this.getMeta(fk_related_model_id)
+
+    if (!relatedTableMeta || !Array.isArray(relatedTableMeta?.columns)) return null
+
+    const displayValTitle = (relatedTableMeta.columns.find((c) => c.pv) || relatedTableMeta.columns?.[0])?.title || ''
+
+    if (
+      !displayValTitle ||
+      !this.formState[column.title] ||
+      !ncIsObject(this.formState[column.title]) ||
+      this.formState[column.title][displayValTitle] === undefined
+    ) {
+      return null
+    }
+
+    return this.formState[column.title][displayValTitle]
+  }
+
+  async validateCondition(
+    filters: FilterType[] = [],
+    parentCol: FormViewColumn,
+    errors: Record<string, string>,
+  ): Promise<boolean | undefined> {
+    if (!filters.length) {
+      return true
+    }
+
+    let isValid
+
+    for (const filter of filters) {
+      let res
+
+      if (filter.is_group) {
+        res = await this.validateCondition(filter.children, parentCol, errors)
+      } else {
+        if (!filter.fk_column_id || !this.formViewColumnsMapByFkColumnId[filter.fk_column_id]) {
+          res = false
+        }
+
+        const column = this.formViewColumnsMapByFkColumnId[filter.fk_column_id]
+        // If the filter condition col is below parent column then this will be invalid condition so return false
+        if (!this.isFieldAboveParentColumn(column, parentCol)) {
+          errors[column.fk_column_id] = `Condition references a field (${column.title}) that comes later in the form.`
+          res = true
+        }
+
+        if (!column.show) {
+          errors[column.fk_column_id] = `Condition references a field (${column.title}) that was removed from the form.`
+
+          res = true
+        }
+
+        if (!column?.visible) {
+          res = false
+        }
+
+        const field = column.title
+
+        let val = this.formState[field]
+
+        if (res === undefined) {
+          if (
+            [UITypes.Date, UITypes.DateTime, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(column.uidt) &&
+            !['empty', 'blank', 'notempty', 'notblank'].includes(filter.comparison_op)
+          ) {
+            const dateFormat = this.isMysql?.(column.source_id) ? '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 = !!this.formState[field]
+                break
+              case 'number':
+                val = isNaN(parseFloat(this.formState[field])) ? this.formState[field] : +this.formState[field]
+                break
+            }
+
+            switch (column.uidt) {
+              case UITypes.Links:
+                if (isMm(column) || isHm(column)) {
+                  val = (this.formState[field] ?? []).length
+                }
+                break
+              case UITypes.LinkToAnotherRecord:
+                if (isOo(column) || isBt(column)) {
+                  val = await this.getOoOrBtColVal(column)
+                }
+                break
+            }
+
+            switch (filter.comparison_op) {
+              case 'eq':
+                // eslint-disable-next-line eqeqeq
+                res = val == filter.value
+                break
+              case 'neq':
+                // eslint-disable-next-line eqeqeq
+                res = val != filter.value
+                break
+              case 'like':
+                res = this.toString(val).toLowerCase()?.indexOf(filter.value?.toLowerCase()) > -1
+                break
+              case 'nlike':
+                res = this.toString(val).toLowerCase()?.indexOf(filter.value?.toLowerCase()) === -1
+                break
+              case 'empty':
+              case 'blank':
+                res = val === '' || val === null || val === undefined
+                break
+              case 'notempty':
+              case 'notblank':
+                res = !(val === '' || val === null || val === undefined)
+                break
+              case 'checked':
+                res = !!val
+                break
+              case 'notchecked':
+                res = !val
+                break
+              case 'null':
+                res = res = val === null
+                break
+              case 'notnull':
+                res = val !== null
+                break
+              case 'allof':
+                res = (
+                  this.toString(filter.value)
+                    .split(',')
+                    .map((item) => item.trim()) ?? []
+                ).every((item) => (this.toString(val).split(',') ?? []).includes(item))
+                break
+              case 'anyof':
+                res = (
+                  this.toString(filter.value)
+                    .split(',')
+                    .map((item) => item.trim()) ?? []
+                ).some((item) => (this.toString(val).split(',') ?? []).includes(item))
+                break
+              case 'nallof':
+                res = !(
+                  this.toString(filter.value)
+                    .split(',')
+                    .map((item) => item.trim()) ?? []
+                ).every((item) => (this.toString(val).split(',') ?? []).includes(item))
+                break
+              case 'nanyof':
+                res = !(
+                  this.toString(filter.value)
+                    .split(',')
+                    .map((item) => item.trim()) ?? []
+                ).some((item) => (this.toString(val).split(',') ?? []).includes(item))
+                break
+              case 'lt':
+                res = parseFloat(val) < +filter.value
+                break
+              case 'lte':
+              case 'le':
+                res = parseFloat(val) <= +filter.value
+                break
+              case 'gt':
+                res = parseFloat(val) > +filter.value
+                break
+              case 'gte':
+              case 'ge':
+                res = parseFloat(val) >= +filter.value
+                break
+            }
+          }
+        }
+      }
+
+      switch (filter.logical_op) {
+        case 'or':
+          isValid = isValid || !!res
+          break
+        case 'not':
+          isValid = isValid && !res
+          break
+        case 'and':
+        default:
+          isValid = (isValid ?? true) && res
+          break
+      }
+    }
+    return isValid
+  }
+
+  async validateVisibility() {
+    const res: Record<string, boolean> = {}
+
+    for (const column of this.formViewColumns) {
+      const columnFilters = this.nestedGroupedFilters[column.fk_column_id] ?? []
+
+      const errors: Record<string, string> = {}
+
+      const isValid = await this.validateCondition(columnFilters, column, errors)
+
+      if (this.isSharedForm) {
+        if (!column.meta?.preFilledHiddenField) {
+          column.show = !!isValid
+          column.visible = !!isValid
+        }
+      } else {
+        column.visible = !!isValid
+
+        column.meta = {
+          ...parseProp(column.meta),
+          visibility: {
+            errors,
+          },
+        }
+      }
+    }
+
+    return res
+  }
 
-  validateVisibility() {}
+  validateErrors() {}
 }

From d243268a59a64f6eacb9025e7fff5b38eef86aca Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 8 Oct 2024 11:38:21 +0000
Subject: [PATCH 3/5] fix(nc-gui): conditional fields oss backend changes

---
 packages/nocodb/src/models/Filter.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/models/Filter.ts b/packages/nocodb/src/models/Filter.ts
index 05d7d49d65..3902d775a3 100644
--- a/packages/nocodb/src/models/Filter.ts
+++ b/packages/nocodb/src/models/Filter.ts
@@ -171,9 +171,14 @@ export default class Filter implements FilterType {
     filter: Partial<FilterType>,
     ncMeta = Noco.ncMeta,
   ) {
-    if (!(id && (filter.fk_view_id || filter.fk_hook_id))) {
+    if (
+      !(
+        id &&
+        (filter.fk_view_id || filter.fk_hook_id || filter.fk_parent_column_id)
+      )
+    ) {
       throw new Error(
-        `Mandatory fields missing in FILTER_EXP cache population : id(${id}), fk_view_id(${filter.fk_view_id}), fk_hook_id(${filter.fk_hook_id})`,
+        `Mandatory fields missing in FILTER_EXP cache population : id(${id}), fk_view_id(${filter.fk_view_id}), fk_hook_id(${filter.fk_hook_id}), fk_parent_column_id(${filter.fk_parent_column_id})`,
       );
     }
     const key = `${CacheScope.FILTER_EXP}:${id}`;

From 02a546b22bebee51d1d4bdf206870b94c4f0c2e5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 8 Oct 2024 11:38:22 +0000
Subject: [PATCH 4/5] fix(nc-gui): ai review changes

---
 .../smartsheet/form/field-settings/visibility.vue |  8 ++++----
 packages/nc-gui/composables/useFormViewStore.ts   | 15 +++++++++------
 packages/nc-gui/lib/form.ts                       | 12 ++++++------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue b/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue
index c162f83e93..b6e295224e 100644
--- a/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue
+++ b/packages/nc-gui/components/smartsheet/form/field-settings/visibility.vue
@@ -16,11 +16,11 @@ const visibilityError = computed(() => {
 const hasvisibilityError = computed(() => Object.keys(visibilityError.value).length)
 
 const visibilityFilters = computed(() => {
-  if (!allViewFilters.value[activeField.value?.fk_column_id]) {
-    allViewFilters.value[activeField.value!.fk_column_id] = []
+  if (activeField.value?.fk_column_id && !allViewFilters.value[activeField.value.fk_column_id]) {
+    allViewFilters.value[activeField.value.fk_column_id] = []
   }
 
-  return allViewFilters.value[activeField.value!.fk_column_id]
+  return allViewFilters.value[`${activeField.value?.fk_column_id}`]
 })
 
 const isFirstField = computed(() => {
@@ -29,7 +29,7 @@ const isFirstField = computed(() => {
 
 const filterOption = (column: ColumnType) => {
   // hide active field from filter option
-  const isNotActiveField = column.id !== activeField.value!.fk_column_id
+  const isNotActiveField = column.id !== activeField.value?.fk_column_id
 
   // show only form view visible columns and order is less than active field
   const orderIsLessThanActiveField =
diff --git a/packages/nc-gui/composables/useFormViewStore.ts b/packages/nc-gui/composables/useFormViewStore.ts
index 09bbf9c92e..81848c77f0 100644
--- a/packages/nc-gui/composables/useFormViewStore.ts
+++ b/packages/nc-gui/composables/useFormViewStore.ts
@@ -204,16 +204,19 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
 
     const loadAllviewFilters = async () => {
       if (!viewMeta.value?.id) return
+      try {
+        const formViewFilters = (await $api.dbTableFilter.read(viewMeta.value.id, { includeAllFilters: true })).list || []
 
-      const formViewFilters = (await $api.dbTableFilter.read(viewMeta.value.id, { includeAllFilters: true })).list || []
-
-      if (!formViewFilters.length) return
+        if (!formViewFilters.length) return
 
-      const formFilter = new FormFilters({ data: formViewFilters })
+        const formFilter = new FormFilters({ data: formViewFilters })
 
-      const allFilters = formFilter.getNestedGroupedFilters()
+        const allFilters = formFilter.getNestedGroupedFilters()
 
-      allViewFilters.value = { ...allFilters }
+        allViewFilters.value = { ...allFilters }
+      } catch (e: any) {
+        console.error('Error loading view filters:', e)
+      }
     }
 
     async function checkFieldVisibility() {
diff --git a/packages/nc-gui/lib/form.ts b/packages/nc-gui/lib/form.ts
index fe3fd2819a..ebce1cf72c 100644
--- a/packages/nc-gui/lib/form.ts
+++ b/packages/nc-gui/lib/form.ts
@@ -84,7 +84,7 @@ export class FormFilters {
 
   // Method to group filters by fk_parent_column_id
   getNestedGroupedFilters() {
-    const groupedFiltes = this.allViewFilters.reduce((acc, filter) => {
+    const groupedFilters = this.allViewFilters.reduce((acc, filter) => {
       const groupingKey = filter.fk_parent_column_id || 'ungrouped'
 
       if (!acc[groupingKey]) {
@@ -96,7 +96,7 @@ export class FormFilters {
       return acc
     }, {} as typeof this.groupedFilters)
 
-    this.groupedFilters = groupedFiltes
+    this.groupedFilters = groupedFilters
 
     const nestedGroupedFilters = this.loadFilters()
 
@@ -313,7 +313,7 @@ export class FormFilters {
                 val = !!this.formState[field]
                 break
               case 'number':
-                val = isNaN(parseFloat(this.formState[field])) ? this.formState[field] : +this.formState[field]
+                val = Number.isNaN(parseFloat(this.formState[field])) ? this.formState[field] : +this.formState[field]
                 break
             }
 
@@ -340,10 +340,10 @@ export class FormFilters {
                 res = val != filter.value
                 break
               case 'like':
-                res = this.toString(val).toLowerCase()?.indexOf(filter.value?.toLowerCase()) > -1
+                res = this.toString(val).toLowerCase()?.includes(filter.value?.toLowerCase())
                 break
               case 'nlike':
-                res = this.toString(val).toLowerCase()?.indexOf(filter.value?.toLowerCase()) === -1
+                res = !this.toString(val).toLowerCase()?.includes(filter.value?.toLowerCase())
                 break
               case 'empty':
               case 'blank':
@@ -360,7 +360,7 @@ export class FormFilters {
                 res = !val
                 break
               case 'null':
-                res = res = val === null
+                res = val === null
                 break
               case 'notnull':
                 res = val !== null

From fac2e205a2fa0fec3723a36e42ad2133165cac81 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 8 Oct 2024 11:38:22 +0000
Subject: [PATCH 5/5] chore(nc-gui): lint

---
 packages/nc-gui/components/cell/Currency.vue    | 1 +
 packages/nc-gui/components/cell/Decimal.vue     | 1 +
 packages/nc-gui/components/cell/Duration.vue    | 1 +
 packages/nc-gui/components/cell/Email.vue       | 1 +
 packages/nc-gui/components/cell/Float.vue       | 1 +
 packages/nc-gui/components/cell/Integer.vue     | 1 +
 packages/nc-gui/components/cell/Percent.vue     | 1 +
 packages/nc-gui/components/cell/PhoneNumber.vue | 1 +
 packages/nc-gui/components/cell/Text.vue        | 1 +
 packages/nc-gui/components/cell/TextArea.vue    | 1 +
 packages/nc-gui/components/cell/Url.vue         | 1 +
 packages/nc-gui/composables/useFormViewStore.ts | 2 +-
 12 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 615e8e9ffb..c3b1320058 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -101,6 +101,7 @@ onMounted(() => {
       {{ currencyMeta.currency_code }}
     </span>
   </div>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="(!readOnly && editEnabled) || (isForm && !isEditColumn && editEnabled)"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 3ad720541d..975d6d1268 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -98,6 +98,7 @@ watch(isExpandedFormOpen, () => {
 </script>
 
 <template>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="!readOnly && editEnabled"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index c4875a39aa..7c8f6bea83 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -76,6 +76,7 @@ const focus: VNodeRef = (el) =>
 
 <template>
   <div class="duration-cell-wrapper">
+    <!-- eslint-disable vue/use-v-on-exact -->
     <input
       v-if="!readOnly && editEnabled"
       :ref="focus"
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index b859699fb8..3f9a9f6253 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -76,6 +76,7 @@ watch(
 </script>
 
 <template>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="!readOnly && editEnabled"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index d8507f05f7..aefce56da9 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -46,6 +46,7 @@ const focus: VNodeRef = (el) =>
 </script>
 
 <template>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="editEnabled"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index a4232fa128..e8af978d3c 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -93,6 +93,7 @@ function onKeyDown(e: any) {
 </script>
 
 <template>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="!readOnly && editEnabled"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 797211a09e..443190dcbe 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -139,6 +139,7 @@ const onTabPress = (e: KeyboardEvent) => {
     @mouseleave="onMouseleave"
     @focus="onWrapperFocus"
   >
+    <!-- eslint-disable vue/use-v-on-exact -->
     <input
       v-if="!readOnly && editEnabled && (isExpandedFormOpen ? expandedEditEnabled || !percentMeta.is_progress : true)"
       :ref="focus"
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 83c2c7a5ca..5c7d5e7dde 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -60,6 +60,7 @@ watch(
 </script>
 
 <template>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="!readOnly && editEnabled"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 3d8bfbf5c1..e42d058fcb 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -30,6 +30,7 @@ const focus: VNodeRef = (el) =>
 </script>
 
 <template>
+  <!-- eslint-disable vue/use-v-on-exact -->
   <input
     v-if="!readOnly && editEnabled"
     :ref="focus"
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index a856b3aaa9..19b2c0c19e 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -242,6 +242,7 @@ watch(inputWrapperRef, () => {
       >
         <LazyCellRichText v-model:value="vModel" sync-value-change read-only />
       </div>
+      <!-- eslint-disable vue/use-v-on-exact -->
       <textarea
         v-else-if="(editEnabled && !isVisible) || isForm"
         :ref="focus"
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index e860ed5a3d..030b1dca50 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -81,6 +81,7 @@ watch(
 
 <template>
   <div class="flex flex-row items-center justify-between w-full h-full">
+    <!-- eslint-disable vue/use-v-on-exact -->
     <input
       v-if="!readOnly && editEnabled"
       :ref="focus"
diff --git a/packages/nc-gui/composables/useFormViewStore.ts b/packages/nc-gui/composables/useFormViewStore.ts
index 81848c77f0..6a65e1234b 100644
--- a/packages/nc-gui/composables/useFormViewStore.ts
+++ b/packages/nc-gui/composables/useFormViewStore.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { RuleObject } from 'ant-design-vue/es/form'
-import type { ColumnType, FilterType, FormType, TableType, Validation, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, FormType, TableType, ViewType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isLinksOrLTAR } from 'nocodb-sdk'
 import type { ValidateInfo } from 'ant-design-vue/es/form/useForm'