fix: added kanban settings modal and also change column_field and apply changes

crm/api/doc.py

@@ -571,4 +571,22 @@ def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
 				"mandatory": field.reqd,
 			})
 
-	return _fields
+	return _fields
+
+@frappe.whitelist()
+def get_kanban_fields(doctype):
+	allowed_fieldtypes = ["Link", "Select"]
+	fields = frappe.get_meta(doctype).fields
+	fields = [field for field in fields if field.fieldtype in allowed_fieldtypes]
+	fields = [
+		{
+			"label": _(field.label),
+			"name": field.fieldname,
+			"type": field.fieldtype,
+			"options": field.options,
+		}
+		for field in fields
+		if field.label and field.fieldname
+	]
+
+	return fields

frontend/src/components/Kanban/KanbanSettings.vue

@@ -0,0 +1,85 @@
+<template>
+  <Button
+    :label="__('Kanban Settings')"
+    @click="showDialog = true"
+    v-bind="$attrs"
+  >
+    <template #prefix>
+      <KanbanIcon class="h-4" />
+    </template>
+  </Button>
+  <Dialog v-model="showDialog" :options="{ title: __('Kanban Settings') }">
+    <template #body-content>
+      <div class="text-base text-gray-800 mb-2">Column Field</div>
+      <Autocomplete
+        v-if="fields.data"
+        value=""
+        :options="fields.data"
+        @change="(f) => (column_field = f)"
+      >
+        <template #target="{ togglePopover }">
+          <Button
+            class="w-full !justify-start"
+            variant="subtle"
+            @click="togglePopover()"
+            :label="column_field.label"
+          />
+        </template>
+      </Autocomplete>
+    </template>
+    <template #actions>
+      <Button
+        class="w-full"
+        variant="solid"
+        @click="apply"
+        :label="__('Apply')"
+      />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import KanbanIcon from '@/components/Icons/KanbanIcon.vue'
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import { Dialog, createResource } from 'frappe-ui'
+import { ref, computed, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update'])
+
+const list = defineModel()
+const showDialog = ref(false)
+
+const column_field = computed({
+  get: () => {
+    let fieldname = list.value?.params?.column_field
+    if (!fieldname) return ''
+    return fields.data.find((field) => field.name === fieldname)
+  },
+  set: (val) => {
+    list.value.params.column_field = val.name
+  },
+})
+
+const fields = createResource({
+  url: 'crm.api.doc.get_kanban_fields',
+  params: { doctype: props.doctype },
+  cache: ['kanban_fields', props.doctype],
+  auto: true,
+  onSuccess: (data) => {
+    // data
+  },
+})
+
+function apply() {
+  nextTick(() => {
+    showDialog.value = false
+    emit('update', column_field.value)
+  })
+}
+</script>

frontend/src/components/ViewControls.vue

@@ -65,8 +65,14 @@
             @update="updateSort"
             :hideLabel="isMobileView"
           />
+          <KanbanSettings
+            v-if="route.params.viewType === 'kanban'"
+            v-model="list"
+            :doctype="doctype"
+            @update="updateKanbanSettings"
+          />
           <ColumnSettings
-            v-if="!options.hideColumnsButton"
+            v-else-if="!options.hideColumnsButton"
             v-model="list"
             :doctype="doctype"
             :hideLabel="isMobileView"
@@ -156,8 +162,14 @@
           @update="updateFilter"
         />
         <SortBy v-model="list" :doctype="doctype" @update="updateSort" />
+        <KanbanSettings
+          v-if="route.params.viewType === 'kanban'"
+          v-model="list"
+          :doctype="doctype"
+          @update="updateKanbanSettings"
+        />
         <ColumnSettings
-          v-if="!options.hideColumnsButton"
+          v-else-if="!options.hideColumnsButton"
           v-model="list"
           :doctype="doctype"
           @update="(isDefault) => updateColumns(isDefault)"
@@ -262,6 +274,7 @@ import Filter from '@/components/Filter.vue'
 import GroupBy from '@/components/GroupBy.vue'
 import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import ColumnSettings from '@/components/ColumnSettings.vue'
+import KanbanSettings from '@/components/Kanban/KanbanSettings.vue'
 import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'
 import { usersStore } from '@/stores/users'
@@ -700,6 +713,23 @@ function updateColumns(obj) {
   }
 }
 
+function updateKanbanSettings(column_field) {
+  viewUpdated.value = true
+  if (!defaultParams.value) {
+    defaultParams.value = getParams()
+  }
+  list.value.params = defaultParams.value
+  list.value.params.view.column_field = column_field.name
+  list.value.params.view.columns = ''
+  view.value.column_field = column_field.name
+  view.value.columns = ''
+  list.value.reload()
+
+  if (!route.query.view) {
+    create_or_update_default_view()
+  }
+}
+
 function create_or_update_default_view() {
   if (route.query.view) return
   view.value.doctype = props.doctype