fix(nc-gui): add validations for field context group by

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -54,6 +54,8 @@ const showDeleteColumnModal = ref(false)
 
 const { gridViewCols } = useViewColumnsOrThrow()
 
+const { fieldsToGroupBy, groupByLimit } = useViewGroupBy(view)
+
 const setAsDisplayValue = async () => {
   try {
     const currentDisplayValue = meta?.value?.columns?.find((f) => f.pv)
@@ -298,8 +300,13 @@ const isDuplicateAllowed = computed(() => {
   return column?.value && !column.value.system
 })
 
-const isGroupedByThisField = computed(() => {
-  return !!gridViewCols.value[column?.value?.id]?.group_by
+const isGroupedByThisField = computed(() => !!gridViewCols.value[column?.value?.id]?.group_by)
+
+const isGroupBySupported = computed(() => !!(fieldsToGroupBy.value || []).find((f) => f.id === column?.value?.id))
+
+const isGroupByLimitExceeded = computed(() => {
+  const groupBy = Object.values(gridViewCols.value).filter((c) => c.group_by)
+  return !(fieldsToGroupBy.value.length && fieldsToGroupBy.value.length > groupBy.length && groupBy.length < groupByLimit)
 })
 
 const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
@@ -381,24 +388,34 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
           <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)">
             <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
               <component :is="iconMap.filter" class="text-gray-700" />
-              <!-- Group by this field -->
+              <!-- Filter by this field -->
               Filter by this field
             </div>
           </NcMenuItem>
 
-          <NcMenuItem
-            @click="
-              filterOrGroupByThisField(
-                isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
-              )
-            "
-          >
-            <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
-              <component :is="iconMap.group" class="text-gray-700" />
-              <!-- Group by this field -->
-              {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
-            </div>
-          </NcMenuItem>
+          <NcTooltip :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField">
+            <template #title>{{
+              !isGroupBySupported
+                ? "This field type doesn't support grouping"
+                : isGroupByLimitExceeded
+                ? 'Group by limit exceeded'
+                : 'ds'
+            }}</template>
+            <NcMenuItem
+              :disabled="(!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
+              @click="
+                filterOrGroupByThisField(
+                  isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
+                )
+              "
+            >
+              <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
+                <component :is="iconMap.group" class="text-gray-700" />
+                <!-- Group by this field -->
+                {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
+              </div>
+            </NcMenuItem>
+          </NcTooltip>
 
           <a-divider class="!my-0" />
         </template>
@@ -457,7 +474,10 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
   }
 }
 
-:deep(.ant-dropdown-menu-item) {
+:deep(.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled)) {
   @apply !hover:text-black text-gray-700;
 }
+:deep(.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled .nc-icon) {
+  @apply text-current;
+}
 </style>

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

@@ -22,7 +22,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { gridViewCols, updateGridViewColumn, metaColumnById, showSystemFields } = useViewColumnsOrThrow()
 
-const { fieldsToGroupBy } = useViewGroupBy(view)
+const { fieldsToGroupBy, groupByLimit } = useViewGroupBy(view)
 
 const { $e } = useNuxtApp()
 
@@ -254,7 +254,7 @@ eventBus.on(async (event, column) => {
           </template>
         </div>
         <NcDropdown
-          v-if="availableColumns.length && fieldsToGroupBy.length > _groupBy.length && _groupBy.length < 3"
+          v-if="availableColumns.length && fieldsToGroupBy.length > _groupBy.length && _groupBy.length < groupByLimit"
           v-model:visible="showCreateGroupBy"
           :trigger="['click']"
           overlay-class-name="nc-toolbar-dropdown"

packages/nc-gui/composables/useViewGroupBy.ts

@@ -9,6 +9,8 @@ import type { Group, GroupNestedIn, Row } from '#imports'
 const excludedGroupingUidt = [UITypes.Attachment, UITypes.QrCode, UITypes.Barcode]
 
 export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: ComputedRef<string | undefined>) => {
+  const groupByLimit: number = 3
+
   const { api } = useApi()
 
   const { appInfo } = useGlobal()
@@ -533,6 +535,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     groupBy,
     isGroupBy,
     fieldsToGroupBy,
+    groupByLimit,
     loadGroups,
     loadGroupData,
     loadGroupPage,