feat(nc-gui): add dateFormat to comparisonOpList & comparisonSubOpList

packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue

@@ -107,12 +107,16 @@ const isFilterDraft = (filter: Filter, col: ColumnType) => {
 
   if (
     filter.comparison_op &&
-    comparisonSubOpList(filter.comparison_op).find((compOp) => compOp.value === filter.comparison_sub_op)?.ignoreVal
+    comparisonSubOpList(filter.comparison_op, col?.meta?.date_format).find((compOp) => compOp.value === filter.comparison_sub_op)
+      ?.ignoreVal
   ) {
     return false
   }
 
-  if (comparisonOpList(col.uidt as UITypes).find((compOp) => compOp.value === filter.comparison_op)?.ignoreVal) {
+  if (
+    comparisonOpList(col.uidt as UITypes, col?.meta?.date_format).find((compOp) => compOp.value === filter.comparison_op)
+      ?.ignoreVal
+  ) {
     return false
   }
 
@@ -145,7 +149,7 @@ const filterUpdateCondition = (filter: FilterType, i: number) => {
     // hence remove the previous value
     filter.value = null
     if (
-      !comparisonSubOpList(filter.comparison_op!)
+      !comparisonSubOpList(filter.comparison_op!, col?.meta?.date_format)
         .map((op) => op.value)
         .includes(filter.comparison_sub_op!)
     ) {
@@ -224,8 +228,9 @@ const selectFilterField = (filter: Filter, index: number) => {
   // since the existing one may not be supported for the new field
   // e.g. `eq` operator is not supported in checkbox field
   // hence, get the first option of the supported operators of the new field
-  filter.comparison_op = comparisonOpList(col.uidt as UITypes).find((compOp) => isComparisonOpAllowed(filter, compOp))
+  filter.comparison_op = comparisonOpList(col.uidt as UITypes, col?.meta?.date_format).find((compOp) =>
-    ?.value as FilterType['comparison_op']
+    isComparisonOpAllowed(filter, compOp),
+  )?.value as FilterType['comparison_op']
 
   if ([UITypes.Date, UITypes.DateTime].includes(col.uidt as UITypes) && !['blank', 'notblank'].includes(filter.comparison_op!)) {
     if (filter.comparison_op === 'isWithin') {
@@ -297,12 +302,16 @@ const addFilterGroup = async () => {
 }
 
 const showFilterInput = (filter: Filter) => {
+  const col = getColumn(filter)
   if (!filter.comparison_op) return false
 
   if (filter.comparison_sub_op) {
-    return !comparisonSubOpList(filter.comparison_op).find((op) => op.value === filter.comparison_sub_op)?.ignoreVal
+    return !comparisonSubOpList(filter.comparison_op, getColumn(filter)?.meta?.date_format).find(
+      (op) => op.value === filter.comparison_sub_op,
+    )?.ignoreVal
   } else {
-    return !comparisonOpList(getColumn(filter)?.uidt as UITypes).find((op) => op.value === filter.comparison_op)?.ignoreVal
+    return !comparisonOpList(col?.uidt as UITypes, col?.meta?.date_format).find((op) => op.value === filter.comparison_op)
+      ?.ignoreVal
   }
 }
 
@@ -427,7 +436,10 @@ onBeforeUnmount(() => {
               dropdown-class-name="nc-dropdown-filter-comp-op"
               @change="filterUpdateCondition(filter, i)"
             >
-              <template v-for="compOp of comparisonOpList(getColumn(filter)?.uidt)" :key="compOp.value">
+              <template
+                v-for="compOp of comparisonOpList(getColumn(filter)?.uidt, getColumn(filter)?.meta?.date_format)"
+                :key="compOp.value"
+              >
                 <a-select-option v-if="isComparisonOpAllowed(filter, compOp)" :value="compOp.value">
                   {{ compOp.text }}
                 </a-select-option>
@@ -450,7 +462,10 @@ onBeforeUnmount(() => {
               dropdown-class-name="nc-dropdown-filter-comp-sub-op"
               @change="filterUpdateCondition(filter, i)"
             >
-              <template v-for="compSubOp of comparisonSubOpList(filter.comparison_op)" :key="compSubOp.value">
+              <template
+                v-for="compSubOp of comparisonSubOpList(filter.comparison_op, getColumn(filter)?.meta?.date_format)"
+                :key="compSubOp.value"
+              >
                 <a-select-option v-if="isComparisonSubOpAllowed(filter, compSubOp)" :value="compSubOp.value">
                   {{ compSubOp.text }}
                 </a-select-option>

packages/nc-gui/utils/filterUtils.ts

@@ -1,4 +1,4 @@
-import { UITypes, isNumericCol, numericUITypes } from 'nocodb-sdk'
+import { UITypes, isDateMonthFormat, isNumericCol, numericUITypes } from 'nocodb-sdk'
 
 const getEqText = (fieldUiType: UITypes) => {
   if (isNumericCol(fieldUiType) || fieldUiType === UITypes.Time) {
@@ -70,13 +70,16 @@ const getLteText = (fieldUiType: UITypes) => {
 
 export const comparisonOpList = (
   fieldUiType: UITypes,
+  dateFormat?: string,
 ): {
   text: string
   value: string
   ignoreVal: boolean
   includedTypes?: UITypes[]
   excludedTypes?: UITypes[]
-}[] => [
+}[] => {
+  const isDateMonth = dateFormat && isDateMonthFormat(dateFormat)
+  return [
     {
       text: 'is checked',
       value: 'checked',
@@ -255,7 +258,7 @@ export const comparisonOpList = (
       text: 'is within',
       value: 'isWithin',
       ignoreVal: true,
-    includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'is blank',
@@ -270,10 +273,12 @@ export const comparisonOpList = (
       excludedTypes: [UITypes.Checkbox, UITypes.Links, UITypes.Rollup],
     },
   ]
+}
 
 export const comparisonSubOpList = (
   // TODO: type
   comparison_op: string,
+  dateFormat?: string,
 ): {
   text: string
   value: string
@@ -281,6 +286,8 @@ export const comparisonSubOpList = (
   includedTypes?: UITypes[]
   excludedTypes?: UITypes[]
 }[] => {
+  const isDateMonth = dateFormat && isDateMonthFormat(dateFormat)
+
   if (comparison_op === 'isWithin') {
     return [
       {
@@ -338,31 +345,31 @@ export const comparisonSubOpList = (
       text: 'today',
       value: 'today',
       ignoreVal: true,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'tomorrow',
       value: 'tomorrow',
       ignoreVal: true,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'yesterday',
       value: 'yesterday',
       ignoreVal: true,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'one week ago',
       value: 'oneWeekAgo',
       ignoreVal: true,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'one week from now',
       value: 'oneWeekFromNow',
       ignoreVal: true,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'one month ago',
@@ -380,16 +387,16 @@ export const comparisonSubOpList = (
       text: 'number of days ago',
       value: 'daysAgo',
       ignoreVal: false,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
       text: 'number of days from now',
       value: 'daysFromNow',
       ignoreVal: false,
-      includedTypes: [UITypes.Date, UITypes.DateTime],
+      includedTypes: [...(isDateMonth ? [] : [UITypes.Date, UITypes.DateTime])],
     },
     {
-      text: 'exact date',
+      text: isDateMonth ? 'exact month' : 'exact date',
       value: 'exactDate',
       ignoreVal: false,
       includedTypes: [UITypes.Date, UITypes.DateTime],