feat: render, update and save group by field value on change of group by field

crm/fcrm/doctype/crm_view_settings/crm_view_settings.py

@@ -35,6 +35,7 @@ def create(view):
 	doc.load_default_columns = view.load_default_columns or False
 	doc.filters = json.dumps(view.filters)
 	doc.order_by = view.order_by
+	doc.group_by_field = view.group_by_field
 	doc.columns = json.dumps(view.columns)
 	doc.rows = json.dumps(view.rows)
 	doc.insert()
@@ -60,6 +61,7 @@ def update(view):
 	doc.load_default_columns = view.load_default_columns or False
 	doc.filters = json.dumps(filters)
 	doc.order_by = view.order_by
+	doc.group_by_field = view.group_by_field
 	doc.columns = json.dumps(columns)
 	doc.rows = json.dumps(rows)
 	doc.save()
@@ -139,6 +141,7 @@ def create_or_update_default_view(view):
 		doc.load_default_columns = view.load_default_columns or False
 		doc.filters = json.dumps(filters)
 		doc.order_by = view.order_by
+		doc.group_by_field = view.group_by_field
 		doc.columns = json.dumps(columns)
 		doc.rows = json.dumps(rows)
 		doc.save()
@@ -154,6 +157,7 @@ def create_or_update_default_view(view):
 		doc.load_default_columns = view.load_default_columns or False
 		doc.filters = json.dumps(filters)
 		doc.order_by = view.order_by
+		doc.group_by_field = view.group_by_field
 		doc.columns = json.dumps(columns)
 		doc.rows = json.dumps(rows)
 		doc.is_default = True

frontend/src/components/GroupBy.vue

@@ -1,7 +1,14 @@
 <template>
-  <Dropdown :options="options">
-    <template #default="{ open }">
-      <Button :label="hideLabel ? __('Status') : __('Group By: Status')">
+  <Autocomplete :options="options" value="" @change="(e) => setGroupBy(e)">
+    <template #target="{ togglePopover }">
+      <Button
+        :label="
+          hideLabel
+            ? groupByValue?.label
+            : __('Group By: ') + groupByValue?.label
+        "
+        @click="togglePopover()"
+      >
         <template #prefix>
           <DetailsIcon />
         </template>
@@ -13,12 +20,13 @@
         </template>
       </Button>
     </template>
-  </Dropdown>
+  </Autocomplete>
 </template>
 <script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import DetailsIcon from '@/components/icons/DetailsIcon.vue'
-import { Dropdown } from 'frappe-ui'
-import { ref } from 'vue'
+import { createResource } from 'frappe-ui'
+import { ref, computed, onMounted, nextTick } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -31,14 +39,39 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['update'])
+
 const list = defineModel()
 
-const selected = ref('Status')
+const groupByValue = ref({
+  label: 'Owner',
+  value: 'owner',
+})
 
-const options = ref([
-  { label: 'Status', value: 'status' },
-  { label: 'Source', value: 'source' },
-  { label: 'Owner', value: 'owner' },
-  { label: 'Created At', value: 'created_at' },
-])
+const groupByOptions = createResource({
+  url: 'crm.api.doc.get_group_by_fields',
+  cache: ['groupByOptions', props.doctype],
+  params: {
+    doctype: props.doctype,
+  },
+})
+
+onMounted(() => {
+  if (groupByOptions.data?.length) return
+  groupByOptions.fetch()
+})
+
+function setGroupBy(data) {
+  groupByValue.value = data
+  nextTick(() => emit('update', data.value))
+}
+
+const options = computed(() => {
+  if (!groupByOptions.data) return []
+  if (!list.value?.data?.group_by_field) return groupByOptions.data
+  groupByValue.value = list.value.data.group_by_field
+  return groupByOptions.data.filter(
+    (option) => option !== groupByValue.value.value
+  )
+})
 </script>

frontend/src/components/ViewControls.vue

@@ -415,6 +415,7 @@ function getParams() {
       icon: _view.icon,
       filters: _view.filters,
       order_by: _view.order_by,
+      group_by_field: _view.group_by_field,
       columns: _view.columns,
       rows: _view.rows,
       route_name: _view.route_name,
@@ -430,6 +431,7 @@ function getParams() {
       icon: '',
       filters: {},
       order_by: 'modified desc',
+      group_by_field: 'owner',
       columns: '',
       rows: '',
       route_name: route.name,
@@ -676,6 +678,21 @@ function updateSort(order_by) {
   }
 }
 
+function updateGroupBy(group_by_field) {
+  viewUpdated.value = true
+  if (!defaultParams.value) {
+    defaultParams.value = getParams()
+  }
+  list.value.params = defaultParams.value
+  list.value.params.view.group_by_field = group_by_field
+  view.value.group_by_field = group_by_field
+  list.value.reload()
+
+  if (!route.query.view) {
+    create_or_update_default_view()
+  }
+}
+
 function updateColumns(obj) {
   if (!obj) {
     obj = {
@@ -727,6 +744,7 @@ function create_or_update_default_view() {
       name: view.value.name,
       filters: defaultParams.value.filters,
       order_by: defaultParams.value.order_by,
+      group_by_field: defaultParams.value.view.group_by_field,
       columns: defaultParams.value.columns,
       rows: defaultParams.value.rows,
       route_name: route.name,
@@ -891,6 +909,7 @@ function saveView() {
     name: view.value.name,
     filters: defaultParams.value.filters,
     order_by: defaultParams.value.order_by,
+    group_by_field: defaultParams.value.view.group_by_field,
     columns: defaultParams.value.columns,
     rows: defaultParams.value.rows,
     route_name: route.name,