From dde10175e40dd116e95c7b620086c321ef3db89a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 30 May 2024 12:51:46 +0530
Subject: [PATCH] fix: added Group By View in view list

---
 frontend/src/components/ViewControls.vue | 41 ++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 9d613b96..1a33112f 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -69,7 +69,16 @@
           <Button :label="__(currentView.label)">
             <template #prefix>
               <div v-if="isEmoji(currentView.icon)">{{ currentView.icon }}</div>
-              <FeatherIcon v-else :name="currentView.icon" class="h-4" />
+              <FeatherIcon
+                v-else-if="typeof currentView.icon == 'string'"
+                :name="currentView.icon"
+                class="h-4"
+              />
+              <component
+                v-else
+                :is="currentView.icon"
+                class="h-4"
+              />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -250,6 +259,7 @@
 import DatePicker from '@/components/Controls/DatePicker.vue'
 import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
 import Link from '@/components/Controls/Link.vue'
+import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import RefreshIcon from '@/components/Icons/RefreshIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DuplicateIcon from '@/components/Icons/DuplicateIcon.vue'
@@ -305,11 +315,28 @@ const defaultParams = ref('')
 const viewUpdated = ref(false)
 const showViewModal = ref(false)
 
+function getViewType() {
+  let type = route.params.viewType || 'list'
+  let types = {
+    group_by: {
+      label: __('Group By View'),
+      icon: h(DetailsIcon, { class: 'size-4' }),
+    },
+    list: {
+      label: __('List View'),
+      icon: 'list',
+    },
+  }
+
+  return types[type]
+}
+
 const currentView = computed(() => {
   let _view = getView(route.query.view)
   return {
-    label: _view?.label || props.options?.defaultViewName || 'List View',
-    icon: _view?.icon || 'list',
+    label:
+      _view?.label || props.options?.defaultViewName || getViewType().label,
+    icon: _view?.icon || getViewType().icon,
   }
 })
 
@@ -458,6 +485,14 @@ const defaultViews = [
       router.push({ name: route.name })
     },
   },
+  {
+    label: __(props.options?.defaultViewName) || __('Group By View'),
+    icon: h(DetailsIcon, { class: 'size-4' }),
+    onClick() {
+      viewUpdated.value = false
+      router.push({ name: route.name, params: { viewType: 'group_by' } })
+    },
+  },
 ]
 
 function getIcon(icon) {