feat: drag to rearrange columns also save it in crm list view settings

crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.py

@@ -1,9 +1,26 @@
 # Copyright (c) 2023, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
-
-# import frappe
+import json
+import frappe
 from frappe.model.document import Document
 
 
 class CRMListViewSettings(Document):
 	pass
+
+
+@frappe.whitelist()
+def update(doctype, columns, rows):
+	if not frappe.db.exists("CRM List View Settings", doctype):
+		# create new CRM List View Settings
+		doc = frappe.new_doc("CRM List View Settings")
+		doc.name = doctype
+		doc.columns = json.dumps(columns)
+		doc.rows = json.dumps(rows)
+		doc.insert()
+	else:
+		# update existing CRM List View Settings
+		doc = frappe.get_doc("CRM List View Settings", doctype)
+		doc.columns = json.dumps(columns)
+		doc.rows = json.dumps(rows)
+		doc.save()

frontend/src/components/Icons/SettingsIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.48069 2.93167L7.48066 2.93173C7.22113 3.4979 6.81542 3.9782 6.27003 4.29118C5.72492 4.60401 5.10392 4.71317 4.48225 4.65362L4.47831 4.65324C4.38554 4.6436 4.29136 4.65661 4.20417 4.69129C4.11752 4.72575 4.04086 4.78039 3.98066 4.8501C3.49267 5.42823 3.10928 6.08487 2.84733 6.79073C2.8166 6.876 2.80739 6.96674 2.82005 7.05518C2.83278 7.14407 2.86727 7.22846 2.9207 7.30108L2.92304 7.30425L2.92302 7.30426C3.28725 7.80753 3.50281 8.3954 3.50112 9.02032L3.50112 9.02058C3.49912 9.64243 3.28219 10.2276 2.9195 10.7294L2.87923 10.7905C2.79807 10.9301 2.77389 11.0964 2.8317 11.2526L2.83206 11.2536C3.09058 11.9565 3.46969 12.6094 3.95288 13.1838C4.01152 13.2522 4.08662 13.3057 4.1721 13.3394L3.98882 13.8046L4.1721 13.3394C4.25807 13.3733 4.35179 13.3859 4.44503 13.3758L4.45431 13.3747L4.46362 13.3741L4.64024 13.3615L4.64849 13.3609L4.6485 13.3609C5.20037 13.3306 5.7493 13.4566 6.23089 13.725L6.23468 13.7271L6.23467 13.7272C6.77958 14.0371 7.18389 14.516 7.44043 15.0816L7.44206 15.0852L7.44205 15.0852C7.47849 15.1672 7.53486 15.2395 7.60669 15.2955C7.67817 15.3512 7.76294 15.3892 7.85391 15.4056C8.60087 15.5332 9.36556 15.5315 10.1139 15.4003C10.2057 15.3833 10.2919 15.3444 10.3651 15.2872C10.4386 15.2297 10.4964 15.1557 10.5338 15.0722L10.5356 15.0682L10.5356 15.0683C10.7952 14.502 11.2015 14.0214 11.7462 13.7088C12.2912 13.3961 12.9124 13.288 13.5331 13.3463L13.5381 13.3468L13.5381 13.3468C13.6309 13.3564 13.725 13.3434 13.8121 13.3088L13.9969 13.7734L13.8121 13.3088C13.8988 13.2743 13.9754 13.2197 14.0356 13.15C14.524 12.5713 14.9076 11.9141 15.1696 11.2075L15.1697 11.2071C15.2363 11.028 15.1964 10.8383 15.0932 10.6957C14.7292 10.1927 14.5131 9.60571 14.5152 8.97941L14.5152 8.97906C14.5176 8.35901 14.7334 7.77374 15.0963 7.27232L15.1364 7.21067C15.2181 7.07086 15.2425 6.90403 15.1846 6.7474L15.1842 6.74645C14.9254 6.04291 14.5459 5.38941 14.0621 4.81462L14.062 4.81449C13.939 4.66831 13.7495 4.60609 13.5677 4.62461L13.5602 4.62538L13.5526 4.62591L13.376 4.63854L13.3685 4.63907L13.361 4.63938C12.81 4.66211 12.2647 4.54912 11.7813 4.27262C11.2354 3.96277 10.832 3.4832 10.5758 2.91842L10.5754 2.91743C10.5042 2.75965 10.3588 2.62823 10.1641 2.59472L7.48069 2.93167ZM7.48069 2.93167C7.5554 2.76862 7.70513 2.63444 7.9003 2.60005L7.48069 2.93167ZM7.90047 2.60002C8.64996 2.46846 9.41582 2.46669 10.1639 2.59468L7.90047 2.60002Z"
+      stroke="currentColor"
+    />
+    <circle cx="9.00781" cy="9" r="2.125" stroke="currentColor" />
+  </svg>
+</template>

frontend/src/components/ViewSettings.vue

@@ -0,0 +1,76 @@
+<template>
+  <NestedPopover>
+    <template #target>
+      <Button label="View Settings">
+        <template #prefix>
+          <SettingsIcon class="h-4" />
+        </template>
+      </Button>
+    </template>
+    <template #body>
+      <div
+        class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
+      >
+        <Draggable
+          :list="columns"
+          @end="onEnd"
+          item-key="key"
+          class="list-group"
+        >
+          <template #item="{ element }">
+            <div
+              class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-50"
+            >
+              <div class="flex items-center gap-2">
+                <DragVerticalIcon class="h-3.5" />
+                <div>{{ element.label }}</div>
+              </div>
+              <div class="flex cursor-pointer items-center gap-1">
+                <Button variant="ghost" class="!h-5 w-5 !p-1">
+                  <EditIcon class="h-3.5" />
+                </Button>
+                <Button variant="ghost" class="!h-5 w-5 !p-1">
+                  <FeatherIcon name="x" class="h-3.5" />
+                </Button>
+              </div>
+            </div>
+          </template>
+        </Draggable>
+      </div>
+    </template>
+  </NestedPopover>
+</template>
+
+<script setup>
+import SettingsIcon from '@/components/Icons/SettingsIcon.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import NestedPopover from '@/components/NestedPopover.vue'
+import Draggable from 'vuedraggable'
+import { computed, defineModel } from 'vue'
+import { FeatherIcon, call } from 'frappe-ui'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
+
+const list = defineModel()
+
+const columns = computed(() => list.value?.data?.columns)
+
+const rows = computed(() => list.value?.data?.rows)
+
+function onEnd() {
+  call(
+    'crm.fcrm.doctype.crm_list_view_settings.crm_list_view_settings.update',
+    {
+      doctype: props.doctype,
+      columns: columns.value,
+      rows: rows.value,
+    }
+  )
+}
+</script>

frontend/src/pages/Deals.vue

@@ -30,7 +30,7 @@
     <div class="flex items-center gap-2">
       <Filter doctype="CRM Deal" />
       <SortBy doctype="CRM Deal" />
-      <Button icon="more-horizontal" />
+      <ViewSettings doctype="CRM Deal" v-model="deals"/>
     </div>
   </div>
   <DealsListView v-if="deals.data" :rows="rows" :columns="deals.data.columns" />
@@ -59,6 +59,7 @@ import DealsListView from '@/components/ListViews/DealsListView.vue'
 import NewDeal from '@/components/NewDeal.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
+import ViewSettings from '@/components/ViewSettings.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { useOrderBy } from '@/composables/orderby'

frontend/src/pages/Leads.vue

@@ -29,7 +29,7 @@
     <div class="flex items-center gap-2">
       <Filter doctype="CRM Lead" />
       <SortBy doctype="CRM Lead" />
-      <Button icon="more-horizontal" />
+      <ViewSettings doctype="CRM Lead" v-model="leads"/>
     </div>
   </div>
   <LeadsListView
@@ -62,6 +62,7 @@ import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 import NewLead from '@/components/NewLead.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
+import ViewSettings from '@/components/ViewSettings.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { useOrderBy } from '@/composables/orderby'