From 4aa0c1402f98a0ef427131819cd4a7baf0089026 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 29 Dec 2023 15:07:20 +0530
Subject: [PATCH 01/22] fix: renamed list view settings to view settings

---
 crm/api/doc.py                                   |  4 ++--
 .../__init__.py                                  |  0
 .../crm_view_settings.js}                        |  2 +-
 .../crm_view_settings.json}                      |  2 +-
 .../crm_view_settings.py}                        | 16 ++++++++--------
 .../test_crm_view_settings.py}                   |  2 +-
 frontend/src/components/ViewSettings.vue         |  4 ++--
 7 files changed, 15 insertions(+), 15 deletions(-)
 rename crm/fcrm/doctype/{crm_list_view_settings => crm_view_settings}/__init__.py (100%)
 rename crm/fcrm/doctype/{crm_list_view_settings/crm_list_view_settings.js => crm_view_settings/crm_view_settings.js} (76%)
 rename crm/fcrm/doctype/{crm_list_view_settings/crm_list_view_settings.json => crm_view_settings/crm_view_settings.json} (96%)
 rename crm/fcrm/doctype/{crm_list_view_settings/crm_list_view_settings.py => crm_view_settings/crm_view_settings.py} (68%)
 rename crm/fcrm/doctype/{crm_list_view_settings/test_crm_list_view_settings.py => crm_view_settings/test_crm_view_settings.py} (77%)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index d109f409..4f5d71c9 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -59,8 +59,8 @@ def get_list_data(doctype: str, filters: dict, order_by: str):
 
 	is_default = True
 
-	if frappe.db.exists("CRM List View Settings", doctype):
-		list_view_settings = frappe.get_doc("CRM List View Settings", doctype)
+	if frappe.db.exists("CRM View Settings", doctype):
+		list_view_settings = frappe.get_doc("CRM View Settings", doctype)
 		columns = frappe.parse_json(list_view_settings.columns)
 		rows = frappe.parse_json(list_view_settings.rows)
 		is_default = False
diff --git a/crm/fcrm/doctype/crm_list_view_settings/__init__.py b/crm/fcrm/doctype/crm_view_settings/__init__.py
similarity index 100%
rename from crm/fcrm/doctype/crm_list_view_settings/__init__.py
rename to crm/fcrm/doctype/crm_view_settings/__init__.py
diff --git a/crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.js b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.js
similarity index 76%
rename from crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.js
rename to crm/fcrm/doctype/crm_view_settings/crm_view_settings.js
index 87850935..df838f2f 100644
--- a/crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.js
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.js
@@ -1,7 +1,7 @@
 // Copyright (c) 2023, Frappe Technologies Pvt. Ltd. and contributors
 // For license information, please see license.txt
 
-// frappe.ui.form.on("CRM List View Settings", {
+// frappe.ui.form.on("CRM View Settings", {
 // 	refresh(frm) {
 
 // 	},
diff --git a/crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.json b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
similarity index 96%
rename from crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.json
rename to crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
index 5806c815..a262dfa8 100644
--- a/crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.json
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
@@ -33,7 +33,7 @@
  "modified": "2023-11-28 00:17:42.675332",
  "modified_by": "Administrator",
  "module": "FCRM",
- "name": "CRM List View Settings",
+ "name": "CRM View Settings",
  "naming_rule": "Set by user",
  "owner": "Administrator",
  "permissions": [
diff --git a/crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.py b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
similarity index 68%
rename from crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.py
rename to crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
index 66770ce8..4b4faefb 100644
--- a/crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.py
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
@@ -5,7 +5,7 @@ import frappe
 from frappe.model.document import Document, get_controller
 
 
-class CRMListViewSettings(Document):
+class CRMViewSettings(Document):
 	pass
 
 
@@ -18,16 +18,16 @@ def update(doctype, columns, rows):
 
 	rows = remove_duplicates(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")
+	if not frappe.db.exists("CRM View Settings", doctype):
+		# create new CRM View Settings
+		doc = frappe.new_doc("CRM 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)
+		# update existing CRM View Settings
+		doc = frappe.get_doc("CRM View Settings", doctype)
 		doc.columns = json.dumps(columns)
 		doc.rows = json.dumps(rows)
 		doc.save()
@@ -46,5 +46,5 @@ def sync_default_list_rows(doctype):
 
 @frappe.whitelist()
 def reset_to_default(doctype):
-	if frappe.db.exists("CRM List View Settings", doctype):
-		frappe.delete_doc("CRM List View Settings", doctype)
\ No newline at end of file
+	if frappe.db.exists("CRM View Settings", doctype):
+		frappe.delete_doc("CRM View Settings", doctype)
\ No newline at end of file
diff --git a/crm/fcrm/doctype/crm_list_view_settings/test_crm_list_view_settings.py b/crm/fcrm/doctype/crm_view_settings/test_crm_view_settings.py
similarity index 77%
rename from crm/fcrm/doctype/crm_list_view_settings/test_crm_list_view_settings.py
rename to crm/fcrm/doctype/crm_view_settings/test_crm_view_settings.py
index d99027bc..cd6df2d7 100644
--- a/crm/fcrm/doctype/crm_list_view_settings/test_crm_list_view_settings.py
+++ b/crm/fcrm/doctype/crm_view_settings/test_crm_view_settings.py
@@ -5,5 +5,5 @@
 from frappe.tests.utils import FrappeTestCase
 
 
-class TestCRMListViewSettings(FrappeTestCase):
+class TestCRMViewSettings(FrappeTestCase):
 	pass
diff --git a/frontend/src/components/ViewSettings.vue b/frontend/src/components/ViewSettings.vue
index f6189b96..2177e41f 100644
--- a/frontend/src/components/ViewSettings.vue
+++ b/frontend/src/components/ViewSettings.vue
@@ -228,7 +228,7 @@ function cancelUpdate() {
 async function updateColumnDetails() {
   is_default.value = false
   await call(
-    'crm.fcrm.doctype.crm_list_view_settings.crm_list_view_settings.update',
+    'crm.fcrm.doctype.crm_view_settings.crm_view_settings.update',
     {
       doctype: props.doctype,
       columns: columns.value,
@@ -239,7 +239,7 @@ async function updateColumnDetails() {
 
 async function resetToDefault() {
   await call(
-    'crm.fcrm.doctype.crm_list_view_settings.crm_list_view_settings.reset_to_default',
+    'crm.fcrm.doctype.crm_view_settings.crm_view_settings.reset_to_default',
     {
       doctype: props.doctype,
     }

From e850928e57c5a7f87568eb2f6c53433602ef73ef Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 14:35:37 +0530
Subject: [PATCH 02/22] fix: allow setting non filterable fields

---
 crm/api/doc.py                        | 6 ++++++
 crm/fcrm/doctype/crm_lead/crm_lead.py | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 4f5d71c9..f1fef5cc 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -30,6 +30,11 @@ def get_filterable_fields(doctype: str):
 		"Text",
 	]
 
+	c = get_controller(doctype)
+	restricted_fields = []
+	if hasattr(c, "get_non_filterable_fields"):
+		restricted_fields = c.get_non_filterable_fields()
+
 	from_doc_fields = (
 		frappe.qb.from_(DocField)
 		.select(
@@ -42,6 +47,7 @@ def get_filterable_fields(doctype: str):
 		.where(DocField.parent == doctype)
 		.where(DocField.hidden == False)
 		.where(Criterion.any([DocField.fieldtype == i for i in allowed_fieldtypes]))
+		.where(Criterion.all([DocField.fieldname != i for i in restricted_fields]))
 		.run(as_dict=True)
 	)
 	res = []
diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.py b/crm/fcrm/doctype/crm_lead/crm_lead.py
index 94f9c824..d21fdaa6 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.py
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.py
@@ -196,6 +196,10 @@ class CRMLead(Document):
 			{ "label": 'Mobile no', "value": 'mobile_no' },
 		]
 
+	@staticmethod
+	def get_non_filterable_fields():
+		return ["converted"]
+
 	@staticmethod
 	def default_list_data():
 		columns = [

From 0b791516a5fbb6d52fa91f63ae452a83b5b6de22 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 14:47:33 +0530
Subject: [PATCH 03/22] fix: added filters & order by fields along with default
 columns checkbox

---
 .../crm_view_settings/crm_view_settings.json  | 68 +++++++++++++++++--
 1 file changed, 63 insertions(+), 5 deletions(-)

diff --git a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
index a262dfa8..8b7ae5f0 100644
--- a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
@@ -1,14 +1,22 @@
 {
  "actions": [],
- "allow_rename": 1,
- "autoname": "prompt",
+ "autoname": "autoincrement",
  "creation": "2023-11-27 16:29:10.993403",
  "doctype": "DocType",
  "engine": "InnoDB",
  "field_order": [
+  "label",
   "user",
+  "column_break_zacm",
+  "dt",
+  "columns_tab",
+  "default_columns",
   "columns",
-  "rows"
+  "rows",
+  "filters_tab",
+  "filters",
+  "order_by_tab",
+  "order_by"
  ],
  "fields": [
   {
@@ -26,15 +34,65 @@
    "fieldname": "rows",
    "fieldtype": "Code",
    "label": "Rows"
+  },
+  {
+   "fieldname": "filters",
+   "fieldtype": "Code",
+   "label": "Filters"
+  },
+  {
+   "fieldname": "columns_tab",
+   "fieldtype": "Tab Break",
+   "label": "Columns"
+  },
+  {
+   "fieldname": "filters_tab",
+   "fieldtype": "Tab Break",
+   "label": "Filters"
+  },
+  {
+   "fieldname": "label",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
+   "label": "Label"
+  },
+  {
+   "fieldname": "column_break_zacm",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "dt",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
+   "label": "DocType",
+   "options": "DocType"
+  },
+  {
+   "fieldname": "order_by_tab",
+   "fieldtype": "Tab Break",
+   "label": "Order By"
+  },
+  {
+   "fieldname": "order_by",
+   "fieldtype": "Code",
+   "label": "Order By"
+  },
+  {
+   "default": "0",
+   "fieldname": "default_columns",
+   "fieldtype": "Check",
+   "label": "Default Columns"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-28 00:17:42.675332",
+ "modified": "2023-12-30 19:28:02.541487",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM View Settings",
- "naming_rule": "Set by user",
+ "naming_rule": "Autoincrement",
  "owner": "Administrator",
  "permissions": [
   {

From 95f16759dd3158be6dac6131fddd30e10a481c96 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 14:50:25 +0530
Subject: [PATCH 04/22] fix: added api's to create, update & delete CRM View
 Settings

---
 .../crm_view_settings/crm_view_settings.py    | 74 ++++++++++++++-----
 1 file changed, 54 insertions(+), 20 deletions(-)

diff --git a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
index 4b4faefb..416ee2ef 100644
--- a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
@@ -8,29 +8,68 @@ from frappe.model.document import Document, get_controller
 class CRMViewSettings(Document):
 	pass
 
+@frappe.whitelist()
+def create(view, duplicate=False):
+	view = frappe._dict(view)
+
+	if duplicate:
+		view.filters = json.loads(view.filters)
+		view.columns = json.loads(view.columns)
+		view.rows = json.loads(view.rows)
+
+	doc = frappe.new_doc("CRM View Settings")
+	doc.name = view.label
+	doc.label = view.label
+	doc.dt = view.doctype
+	doc.user = frappe.session.user
+	doc.filters = json.dumps(view.filters)
+	doc.order_by = view.order_by
+	doc.default_columns = view.default_columns or False
+
+	if not view.columns:
+		view.columns = []
+	if not view.rows:
+		view.rows = []
+
+	default_rows = sync_default_list_rows(view.doctype)
+
+	if default_rows:
+		view.rows = view.rows + default_rows
+
+	view.rows = remove_duplicates(view.rows)
+
+	doc.columns = json.dumps(view.columns)
+	doc.rows = json.dumps(view.rows)
+	doc.insert()
+	return doc
 
 @frappe.whitelist()
-def update(doctype, columns, rows):
-	default_rows = sync_default_list_rows(doctype)
+def update(view):
+	view = frappe._dict(view)
+	default_rows = sync_default_list_rows(view.doctype)
+	columns = view.columns or []
+	filters = view.filters
+	rows = view.rows or []
+	default_columns = view.default_columns or False
 
 	if default_rows:
 		rows = rows + default_rows
 
 	rows = remove_duplicates(rows)
 
-	if not frappe.db.exists("CRM View Settings", doctype):
-		# create new CRM View Settings
-		doc = frappe.new_doc("CRM View Settings")
-		doc.name = doctype
-		doc.columns = json.dumps(columns)
-		doc.rows = json.dumps(rows)
-		doc.insert()
-	else:
-		# update existing CRM View Settings
-		doc = frappe.get_doc("CRM View Settings", doctype)
-		doc.columns = json.dumps(columns)
-		doc.rows = json.dumps(rows)
-		doc.save()
+	doc = frappe.get_doc("CRM View Settings", view.name)
+	doc.default_columns = default_columns
+	doc.filters = json.dumps(filters)
+	doc.order_by = view.order_by
+	doc.columns = json.dumps(columns)
+	doc.rows = json.dumps(rows)
+	doc.save()
+	return doc
+
+@frappe.whitelist()
+def delete(name):
+	if frappe.db.exists("CRM View Settings", name):
+		frappe.delete_doc("CRM View Settings", name)
 
 def remove_duplicates(l):
 	return list(dict.fromkeys(l))
@@ -43,8 +82,3 @@ def sync_default_list_rows(doctype):
 		rows = list.default_list_data().get("rows")
 
 	return rows
-
-@frappe.whitelist()
-def reset_to_default(doctype):
-	if frappe.db.exists("CRM View Settings", doctype):
-		frappe.delete_doc("CRM View Settings", doctype)
\ No newline at end of file

From 01beb61f0c6fb050d616457fc7c288e0306f3939 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 14:51:43 +0530
Subject: [PATCH 05/22] fix: added CRM View Settings store

---
 frontend/src/stores/views.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/src/stores/views.js

diff --git a/frontend/src/stores/views.js b/frontend/src/stores/views.js
new file mode 100644
index 00000000..64039643
--- /dev/null
+++ b/frontend/src/stores/views.js
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { createListResource } from 'frappe-ui'
+import { reactive } from 'vue'
+
+export const viewsStore = defineStore('crm-views', () => {
+  let viewsByName = reactive({})
+
+  const views = createListResource({
+    doctype: 'CRM View Settings',
+    fields: ['*'],
+    cache: 'crm-views',
+    initialData: [],
+    auto: true,
+    transform(views) {
+      for (let view of views) {
+        viewsByName[view.name] = view
+      }
+      return views
+    },
+  })
+
+  function getView(view) {
+    if (!view) return null
+    if (!viewsByName[view]) {
+      views.reload()
+    }
+    return viewsByName[view]
+  }
+
+  return {
+    views,
+    getView,
+  }
+})

From 50830e6138e697677d25399e98d8172348087509 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 14:52:19 +0530
Subject: [PATCH 06/22] fix: reload link options when doctype changes

---
 frontend/src/components/Controls/Link.vue | 24 ++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index d351db3c..5eef3930 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -88,17 +88,17 @@ watchDebounced(
     val = val || ''
     if (text.value === val) return
     text.value = val
-    options.update({
-      params: {
-        txt: val,
-        doctype: props.doctype,
-      },
-    })
-    options.reload()
+    reload(val)
   },
   { debounce: 300, immediate: true }
 )
 
+watchDebounced(
+  () => props.doctype,
+  () => reload(''),
+  { debounce: 300, immediate: true }
+)
+
 const options = createResource({
   url: 'frappe.desk.search.search_link',
   cache: [props.doctype, text.value],
@@ -117,6 +117,16 @@ const options = createResource({
   },
 })
 
+function reload(val) {
+  options.update({
+    params: {
+      txt: val,
+      doctype: props.doctype,
+    },
+  })
+  options.reload()
+}
+
 const labelClasses = computed(() => {
   return [
     {

From 2bc062c809fc9842d640b29f9e0549d866bb1680 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 17:38:09 +0530
Subject: [PATCH 07/22] fix: created ViewModal to create new or update existing
 CRM View Settings

---
 frontend/src/components/Modals/ViewModal.vue | 101 +++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 frontend/src/components/Modals/ViewModal.vue

diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
new file mode 100644
index 00000000..c7ec2046
--- /dev/null
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -0,0 +1,101 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      title: editMode
+        ? 'Edit View'
+        : duplicateMode
+        ? 'Duplicate View'
+        : 'Create View',
+      actions: [
+        {
+          label: editMode ? 'Save Changes' : duplicateMode ? 'Duplicate' : 'Create',
+          variant: 'solid',
+          onClick: () => (editMode ? update() : create()),
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <FormControl
+        variant="outline"
+        size="md"
+        type="text"
+        label="View Name"
+        placeholder="View Name"
+        v-model="view.label"
+      />
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { Dialog, FormControl, call } from 'frappe-ui'
+import { ref, watch, defineModel, nextTick } from 'vue'
+
+const show = defineModel()
+const editMode = ref(false)
+const duplicateMode = ref(false)
+const _view = ref({
+  name: '',
+  label: '',
+  filters: {},
+  order_by: 'modified desc',
+  columns: '',
+  rows: '',
+})
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+  view: {
+    type: Object,
+    default: () => {},
+  },
+  options: {
+    type: Object,
+    default: {
+      afterCreate: () => {},
+      afterUpdate: () => {},
+    },
+  },
+})
+
+async function create() {
+  props.view.doctype = props.doctype
+  let v = await call(
+    'crm.fcrm.doctype.crm_view_settings.crm_view_settings.create',
+    {
+      view: props.view,
+      duplicate: duplicateMode.value,
+    }
+  )
+  show.value = false
+  props.options.afterCreate?.(v, props.view)
+}
+
+async function update() {
+  props.view.doctype = props.doctype
+  await call('crm.fcrm.doctype.crm_view_settings.crm_view_settings.update', {
+    view: props.view,
+  })
+  show.value = false
+  props.options.afterUpdate?.(props.view)
+}
+
+watch(show, (value) => {
+  if (!value) return
+  editMode.value = false
+  duplicateMode.value = false
+  nextTick(() => {
+    _view.value = { ...props.view }
+    if (_view.value.name) {
+      editMode.value = true
+    } else if (_view.value.label) {
+      duplicateMode.value = true
+    }
+  })
+})
+</script>

From 5b05a4e5190058a14d44d4c3f91dc4c59a8838ad Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 17:47:46 +0530
Subject: [PATCH 08/22] fix: removed old filter logic through route query and
 added new way to apply filter

in new way we can save filters along with sort & columns in View Settings
---
 frontend/src/components/Filter.vue | 190 +++++++++++++++++++++++------
 frontend/src/composables/filter.js | 104 ----------------
 2 files changed, 156 insertions(+), 138 deletions(-)
 delete mode 100644 frontend/src/composables/filter.js

diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index b333a312..7456fbcb 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -3,27 +3,27 @@
     <template #target>
       <Button label="Filter">
         <template #prefix><FilterIcon class="h-4" /></template>
-        <template v-if="storage.size" #suffix>
+        <template v-if="filters?.size" #suffix>
           <div
-            class="flex justify-center items-center w-5 h-5 text-2xs font-medium pt-[1px] bg-gray-900 text-white rounded"
+            class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
           >
-            {{ storage.size }}
+            {{ filters.size }}
           </div>
         </template>
       </Button>
     </template>
     <template #body="{ close }">
-      <div class="rounded-lg border border-gray-100 bg-white shadow-xl my-2">
-        <div class="p-2 min-w-[400px]">
+      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+        <div class="min-w-[400px] p-2">
           <div
-            v-if="storage.size"
-            v-for="(f, i) in storage"
+            v-if="filters?.size"
+            v-for="(f, i) in filters"
             :key="i"
             id="filter-list"
-            class="flex items-center justify-between gap-2 mb-3"
+            class="mb-3 flex items-center justify-between gap-2"
           >
             <div class="flex items-center gap-2">
-              <div class="text-gray-600 text-base pl-2 w-13 text-end">
+              <div class="w-13 pl-2 text-end text-base text-gray-600">
                 {{ i == 0 ? 'Where' : 'And' }}
               </div>
               <div id="fieldname" class="!min-w-[140px]">
@@ -37,7 +37,8 @@
               <div id="operator">
                 <FormControl
                   type="select"
-                  v-model="f.operator"
+                  :value="f.operator"
+                  @change="(e) => updateOperator(e, f)"
                   :options="getOperators(f.field.fieldtype)"
                   placeholder="Operator"
                 />
@@ -45,15 +46,17 @@
               <div id="value" class="!min-w-[140px]">
                 <SearchComplete
                   v-if="typeLink.includes(f.field.fieldtype)"
-                  :doctype="f.field.options"
+                  class="form-control"
                   :value="f.value"
-                  @change="(v) => (f.value = v.value)"
+                  :doctype="f.field.options"
+                  @change="(v) => updateValue(v, f)"
                   placeholder="Value"
                 />
                 <component
                   v-else
                   :is="getValSelect(f.field.fieldtype, f.field.options)"
-                  v-model="f.value"
+                  :value="f.value"
+                  @change="(e) => updateValue(e.target.value, f)"
                   placeholder="Value"
                 />
               </div>
@@ -62,7 +65,7 @@
           </div>
           <div
             v-else
-            class="text-gray-600 flex items-center text-sm px-3 h-7 mb-3"
+            class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
           >
             Empty - Choose a field to filter by
           </div>
@@ -87,7 +90,7 @@
               </template>
             </Autocomplete>
             <Button
-              v-if="storage.size"
+              v-if="filters?.size"
               class="!text-gray-600"
               variant="ghost"
               label="Clear all Filter"
@@ -103,15 +106,19 @@
 import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import SearchComplete from '@/components/SearchComplete.vue'
-import { useDebounceFn } from '@vueuse/core'
-import { useFilter } from '@/composables/filter'
 import {
   FeatherIcon,
   Autocomplete,
   FormControl,
   createResource,
 } from 'frappe-ui'
-import { h, watch } from 'vue'
+import { h, defineModel, computed } from 'vue'
+
+const typeCheck = ['Check']
+const typeLink = ['Link']
+const typeNumber = ['Float', 'Int']
+const typeSelect = ['Select']
+const typeString = ['Data', 'Long Text', 'Small Text', 'Text Editor', 'Text']
 
 const props = defineProps({
   doctype: {
@@ -120,6 +127,10 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['update'])
+
+const list = defineModel()
+
 const filterableFields = createResource({
   url: 'crm.api.doc.get_filterable_fields',
   auto: true,
@@ -139,18 +150,49 @@ const filterableFields = createResource({
   },
 })
 
-const { apply, storage } = useFilter(() => filterableFields.data)
-const typeCheck = ['Check']
-const typeLink = ['Link']
-const typeNumber = ['Float', 'Int']
-const typeSelect = ['Select']
-const typeString = ['Data', 'Long Text', 'Small Text', 'Text Editor', 'Text']
+const filters = computed(() => {
+  if (!list.value?.data) return new Set()
+  let allFilters = list.value?.params?.filters
+  if (!allFilters || !filterableFields.data) return new Set()
+  // remove default filters
+  if (list.value.data._defaultFilters) {
+    allFilters = removeCommonFilters(list.value.data._defaultFilters, allFilters)
+  }
+  return convertFilters(filterableFields.data, allFilters)
+})
 
-watch(
-  storage,
-  useDebounceFn(() => apply(), 300),
-  { deep: true }
-)
+function removeCommonFilters(commonFilters, allFilters) {
+  for (const key in commonFilters) {
+    if (commonFilters.hasOwnProperty(key) && allFilters.hasOwnProperty(key)) {
+      if (commonFilters[key] === allFilters[key]) {
+        delete allFilters[key];
+      }
+    }
+  }
+  return allFilters;
+}
+
+function convertFilters(data, allFilters) {
+  let f = []
+  for (let [key, value] of Object.entries(allFilters)) {
+    let field = data.find((f) => f.fieldname === key)
+    if (typeof value !== 'object') {
+      value = ['=', value]
+      if (field.fieldtype === 'Check') {
+        value = ['equals', value[1] ? 'Yes' : 'No']
+      }
+    }
+    if (field) {
+      f.push({
+        field,
+        fieldname: key,
+        operator: oppositeOperatorMap[value[0]],
+        value: value[1],
+      })
+    }
+  }
+  return new Set(f)
+}
 
 function getOperators(fieldtype) {
   let options = []
@@ -231,7 +273,7 @@ function getSelectOptions(options) {
 }
 
 function setfilter(data) {
-  storage.value.add({
+  filters.value.add({
     field: {
       label: data.label,
       fieldname: data.value,
@@ -242,11 +284,12 @@ function setfilter(data) {
     operator: getDefaultOperator(data.fieldtype),
     value: getDefaultValue(data),
   })
+  apply()
 }
 
 function updateFilter(data, index) {
-  storage.value.delete(Array.from(storage.value)[index])
-  storage.value.add({
+  filters.value.delete(Array.from(filters.value)[index])
+  filters.value.add({
     fieldname: data.value,
     operator: getDefaultOperator(data.fieldtype),
     value: getDefaultValue(data),
@@ -257,14 +300,93 @@ function updateFilter(data, index) {
       options: data.options,
     },
   })
+  apply()
 }
 
 function removeFilter(index) {
-  storage.value.delete(Array.from(storage.value)[index])
+  filters.value.delete(Array.from(filters.value)[index])
+  apply()
 }
 
 function clearfilter(close) {
-  storage.value.clear()
+  filters.value.clear()
+  apply()
   close()
 }
+
+function updateValue(value, filter) {
+  filter.value = value
+  apply()
+}
+
+function updateOperator(event, filter) {
+  filter.operator = event.target.value
+  apply()
+}
+
+function apply() {
+  let _filters = []
+  filters.value.forEach((f) => {
+    _filters.push({
+      fieldname: f.fieldname,
+      operator: f.operator,
+      value: f.value,
+    })
+  })
+  emit('update', parseFilters(_filters))
+}
+
+function parseFilters(filters) {
+  const l__ = Array.from(filters)
+  const obj = l__.map(transformIn).reduce((p, c) => {
+    if (['equals', '='].includes(c.operator)) {
+      p[c.fieldname] =
+        c.value == 'Yes' ? true : c.value == 'No' ? false : c.value
+    } else {
+      p[c.fieldname] = [operatorMap[c.operator.toLowerCase()], c.value]
+    }
+    return p
+  }, {})
+  const merged = { ...obj }
+  return merged
+}
+
+function transformIn(f) {
+  if (f.fieldname === '_assign') {
+    f.operator = f.operator === 'is' ? 'like' : 'not like'
+  }
+  if (f.operator.includes('like') && !f.value.includes('%')) {
+    f.value = `%${f.value}%`
+  }
+  return f
+}
+
+const operatorMap = {
+  is: '=',
+  'is not': '!=',
+  equals: '=',
+  'not equals': '!=',
+  yes: true,
+  no: false,
+  like: 'LIKE',
+  'not like': 'NOT LIKE',
+  '>': '>',
+  '<': '<',
+  '>=': '>=',
+  '<=': '<=',
+}
+
+const oppositeOperatorMap = {
+  '=': 'is',
+  equals: 'equals',
+  '!=': 'is not',
+  true: 'yes',
+  false: 'no',
+  LIKE: 'like',
+  'NOT LIKE': 'not like',
+  '>': '>',
+  '<': '<',
+  '>=': '>=',
+  '<=': '<=',
+}
 </script>
diff --git a/frontend/src/composables/filter.js b/frontend/src/composables/filter.js
deleted file mode 100644
index ab3daeb8..00000000
--- a/frontend/src/composables/filter.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { ref, watchEffect } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { toValue } from '@vueuse/core'
-import { usersStore } from '@/stores/users'
-
-const operatorMap = {
-  is: '=',
-  'is not': '!=',
-  equals: '=',
-  'not equals': '!=',
-  yes: true,
-  no: false,
-  like: 'LIKE',
-  'not like': 'NOT LIKE',
-  '>': '>',
-  '<': '<',
-  '>=': '>=',
-  '<=': '<=',
-}
-
-export function useFilter(fields) {
-  const route = useRoute()
-  const router = useRouter()
-  const { getUser } = usersStore()
-  const storage = ref(new Set())
-
-  watchEffect(() => {
-    const f__ = toValue(fields)
-    if (fields && !f__) return
-    storage.value = new Set()
-    const q = route.query.q || ''
-    q.split(' ')
-      .map((f) => {
-        const [fieldname, operator, value] = f
-          .split(':')
-          .map(decodeURIComponent)
-        const field = (f__ || []).find((f) => f.fieldname === fieldname)
-        return {
-          field,
-          fieldname,
-          operator,
-          value,
-        }
-      })
-      .filter((f) => !f__ || (f__ && f.field))
-      .filter((f) => operatorMap[f.operator])
-      .forEach((f) => storage.value.add(f))
-  })
-
-  function getArgs(old) {
-    old = old || {}
-    const l__ = Array.from(storage.value)
-    const obj = l__.map(transformIn).reduce((p, c) => {
-      p[c.fieldname] = [operatorMap[c.operator.toLowerCase()], c.value]
-      return p
-    }, {})
-    const merged = { ...old, ...obj }
-    return merged
-  }
-
-  function apply(r) {
-    r = r || route
-    const l__ = Array.from(storage.value)
-    const q = l__
-      .map(transformOut)
-      .map((f) =>
-        [f.fieldname, f.operator.toLowerCase(), f.value]
-          .map(encodeURIComponent)
-          .join(':')
-      )
-      .join(' ')
-    if (!q && !r.query.q) {
-      router.push({ ...r, query: { ...r.query } })
-    } else {
-      router.push({ ...r, query: { ...r.query, q } })
-    }
-  }
-
-  /**
-   * Used to set fields internally. These will not reflect in URL.
-   * Can be used for APIs
-   */
-  function transformIn(f) {
-    if (f.fieldname === '_assign') {
-      f.operator = f.operator === 'is' ? 'like' : 'not like'
-    }
-    if (f.operator.includes('like') && !f.value.includes('%')) {
-      f.value = `%${f.value}%`
-    }
-    return f
-  }
-
-  /**
-   * Used to set fields in URL query
-   */
-  function transformOut(f) {
-    if (f.value === '@me') {
-      f.value = getUser()
-    }
-    return f
-  }
-
-  return { apply, getArgs, storage }
-}

From fc4c144abe4ce506819c3586006f54bcf44bc7a9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 17:48:16 +0530
Subject: [PATCH 09/22] fix: removed SearchComplete component and replaced it
 with Link component

---
 frontend/src/components/Filter.vue         |  4 +-
 frontend/src/components/SearchComplete.vue | 85 ----------------------
 2 files changed, 2 insertions(+), 87 deletions(-)
 delete mode 100644 frontend/src/components/SearchComplete.vue

diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index 7456fbcb..53583242 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -44,7 +44,7 @@
                 />
               </div>
               <div id="value" class="!min-w-[140px]">
-                <SearchComplete
+                <Link
                   v-if="typeLink.includes(f.field.fieldtype)"
                   class="form-control"
                   :value="f.value"
@@ -105,7 +105,7 @@
 <script setup>
 import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
-import SearchComplete from '@/components/SearchComplete.vue'
+import Link from '@/components/Controls/Link.vue'
 import {
   FeatherIcon,
   Autocomplete,
diff --git a/frontend/src/components/SearchComplete.vue b/frontend/src/components/SearchComplete.vue
deleted file mode 100644
index 57bd32e8..00000000
--- a/frontend/src/components/SearchComplete.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <Autocomplete
-    placeholder="Select an option"
-    :options="options"
-    :value="selection"
-    @update:query="(q) => onUpdateQuery(q)"
-    @change="(v) => (selection = v)"
-  />
-</template>
-
-<script setup>
-import { Autocomplete, createListResource } from 'frappe-ui'
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  doctype: {
-    type: String,
-    required: true,
-  },
-  searchField: {
-    type: String,
-    required: false,
-    default: 'name',
-  },
-  labelField: {
-    type: String,
-    required: false,
-    default: 'name',
-  },
-  valueField: {
-    type: String,
-    required: false,
-    default: 'name',
-  },
-  pageLength: {
-    type: Number,
-    required: false,
-    default: 10,
-  },
-})
-
-watch(
-  () => props.doctype,
-  (value) => {
-    r.doctype = value
-    r.reload()
-  }
-)
-
-const r = createListResource({
-  doctype: props.doctype,
-  pageLength: props.pageLength,
-  cache: ['link_doctype', props.doctype],
-  auto: true,
-  fields: [props.labelField, props.searchField, props.valueField],
-  onSuccess: () => {
-    selection.value = props.value
-      ? options.value.find((o) => o.value === props.value)
-      : null
-  },
-})
-const options = computed(
-  () =>
-    r.data?.map((result) => ({
-      label: result[props.labelField],
-      value: result[props.valueField],
-    })) || []
-)
-const selection = ref(null)
-
-function onUpdateQuery(query) {
-  r.update({
-    filters: {
-      [props.searchField]: ['like', `%${query}%`],
-    },
-  })
-
-  r.reload()
-}
-</script>

From ffe942d80fc568a68d4996fdd0af6e868d387736 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 17:50:46 +0530
Subject: [PATCH 10/22] fix: removed old sort logic similar to filter and added
 new way to sort and save

---
 frontend/src/components/SortBy.vue  | 135 +++++++++++++++-------------
 frontend/src/composables/orderby.js |  23 -----
 2 files changed, 74 insertions(+), 84 deletions(-)
 delete mode 100644 frontend/src/composables/orderby.js

diff --git a/frontend/src/components/SortBy.vue b/frontend/src/components/SortBy.vue
index cf44b430..7655c258 100644
--- a/frontend/src/components/SortBy.vue
+++ b/frontend/src/components/SortBy.vue
@@ -3,29 +3,29 @@
     <template #target>
       <Button label="Sort" ref="sortButtonRef">
         <template #prefix><SortIcon class="h-4" /></template>
-        <template v-if="sortValues.length" #suffix>
+        <template v-if="sortValues?.size" #suffix>
           <div
-            class="flex justify-center items-center w-5 h-5 text-2xs font-medium pt-[1px] bg-gray-900 text-white rounded"
+            class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
           >
-            {{ sortValues.length }}
+            {{ sortValues.size }}
           </div>
         </template>
       </Button>
     </template>
     <template #body="{ close }">
-      <div class="rounded-lg border border-gray-100 bg-white shadow-xl my-2">
-        <div class="p-2 min-w-[352px]">
+      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+        <div class="min-w-[352px] p-2">
           <div
-            v-if="sortValues.length"
+            v-if="sortValues?.size"
             id="sort-list"
-            class="flex flex-col gap-2 mb-3"
+            class="mb-3 flex flex-col gap-2"
           >
             <div
               v-for="(sort, i) in sortValues"
               :key="sort.fieldname"
               class="flex items-center gap-2"
             >
-              <div class="flex items-center justify-center h-7 w-7 handle">
+              <div class="handle flex h-7 w-7 items-center justify-center">
                 <DragIcon class="h-4 w-4 cursor-grab text-gray-600" />
               </div>
               <Autocomplete
@@ -38,11 +38,17 @@
               <FormControl
                 class="!w-32"
                 type="select"
-                v-model="sort.direction"
+                :value="sort.direction"
                 :options="[
                   { label: 'Ascending', value: 'asc' },
                   { label: 'Descending', value: 'desc' },
                 ]"
+                @change="
+                  (e) => {
+                    sort.direction = e.target.value
+                    apply()
+                  }
+                "
                 placeholder="Sort by"
               />
               <Button variant="ghost" icon="x" @click="removeSort(i)" />
@@ -50,7 +56,7 @@
           </div>
           <div
             v-else
-            class="text-gray-600 flex items-center text-sm px-3 h-7 mb-3"
+            class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
           >
             Empty - Choose a field to sort by
           </div>
@@ -75,7 +81,7 @@
               </template>
             </Autocomplete>
             <Button
-              v-if="sortValues.length"
+              v-if="sortValues?.size"
               class="!text-gray-600"
               variant="ghost"
               label="Clear Sort"
@@ -93,7 +99,6 @@ import NestedPopover from '@/components/NestedPopover.vue'
 import SortIcon from '@/components/Icons/SortIcon.vue'
 import DragIcon from '@/components/Icons/DragIcon.vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
-import { useOrderBy } from '@/composables/orderby'
 import {
   FeatherIcon,
   Button,
@@ -101,7 +106,7 @@ import {
   FormControl,
   createResource,
 } from 'frappe-ui'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -110,10 +115,10 @@ const props = defineProps({
   },
 })
 
-const { get: getOrderBy, set: setOrderBy } = useOrderBy()
+const emit = defineEmits(['update'])
+const list = defineModel()
 
 const sortButtonRef = ref(null)
-const sortValues = ref(initialOrderBy())
 
 const sortOptions = createResource({
   url: 'crm.api.doc.sort_options',
@@ -123,75 +128,83 @@ const sortOptions = createResource({
   },
 })
 
+const sortValues = computed({
+  get: () => {
+    if (!list.value?.data) return new Set()
+    let allSortValues = list.value?.params?.order_by
+    if (!allSortValues || !sortOptions.data) return new Set()
+    if (allSortValues.trim() === 'modified desc') return new Set()
+    allSortValues = allSortValues.split(', ').map((sortValue) => {
+      const [fieldname, direction] = sortValue.split(' ')
+      return { fieldname, direction }
+    })
+    return new Set(allSortValues)
+  },
+  set: (value) => {
+    list.value.params.order_by = convertToString(value)
+  },
+})
+
 const options = computed(() => {
   if (!sortOptions.data) return []
-  const selectedOptions = sortValues.value.map((sort) => sort.fieldname)
+  if (!sortValues.value.size) return sortOptions.data
+  const selectedOptions = [...sortValues.value].map((sort) => sort.fieldname)
+  restartSort()
   return sortOptions.data.filter((option) => {
     return !selectedOptions.includes(option.value)
   })
 })
 
-function initialOrderBy() {
-  const orderBy = getOrderBy()
-  if (!orderBy) return []
-  const sortOptions = orderBy.split(', ')
-  return sortOptions.map((sortOption) => {
-    const [fieldname, direction] = sortOption.split(' ')
-    return { fieldname, direction }
-  })
-}
-
 const sortSortable = useSortable('#sort-list', sortValues, {
   handle: '.handle',
   animation: 200,
+  onEnd: () => apply(),
 })
 
-watch(
-  () => sortValues.value,
-  (value) => {
-    const updatedSort = value
-      .map((sort) => {
-        const option = sortOptions.data.find((o) => o.value === sort.fieldname)
-        return `${option.value} ${sort.direction}`
-      })
-      .join(', ')
-    setOrderBy(updatedSort)
-  },
-  {
-    deep: true,
-  }
-)
-
-watch(
-  () => getOrderBy(),
-  (value) => {
-    if (!value) {
-      sortValues.value = []
-    }
-  }
-)
-
 function setSort(data) {
-  sortValues.value = [
-    ...sortValues.value,
-    { fieldname: data.value, direction: 'asc' },
-  ]
-  sortSortable.start()
+  sortValues.value.add({ fieldname: data.value, direction: 'asc' })
+  restartSort()
+  apply()
 }
 
 function updateSort(data, index) {
-  sortValues.value[index] = {
+  let oldSort = Array.from(sortValues.value)[index]
+  sortValues.value.delete(oldSort)
+  sortValues.value.add({
     fieldname: data.value,
-    direction: sortValues.value[index].direction,
-  }
+    direction: oldSort.direction,
+  })
+  apply()
 }
 
 function removeSort(index) {
-  sortValues.value.splice(index, 1)
+  sortValues.value.delete(Array.from(sortValues.value)[index])
+  apply()
 }
 
 function clearSort(close) {
-  sortValues.value = []
+  sortValues.value.clear()
+  apply()
   close()
 }
+
+function apply() {
+  nextTick(() => {
+    emit('update', convertToString(sortValues.value))
+  })
+}
+
+function convertToString(values) {
+  let _sortValues = ''
+  values.forEach((f) => {
+    _sortValues += `${f.fieldname} ${f.direction}, `
+  })
+  _sortValues = _sortValues.slice(0, -2)
+  return _sortValues
+}
+
+function restartSort() {
+  sortSortable.stop()
+  sortSortable.start()
+}
 </script>
diff --git a/frontend/src/composables/orderby.js b/frontend/src/composables/orderby.js
deleted file mode 100644
index dc0fb420..00000000
--- a/frontend/src/composables/orderby.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useRoute, useRouter } from 'vue-router'
-
-export function useOrderBy() {
-  const route = useRoute()
-  const router = useRouter()
-
-  function get() {
-    const q = route.query.sort ?? ''
-    const d = decodeURIComponent(q)
-    return d
-  }
-
-  function set(sort, r) {
-    r = r || route
-    const q = encodeURIComponent(sort)
-    router.push({ ...r, query: { ...r.query, sort: q } })
-  }
-
-  return {
-    get,
-    set,
-  }
-}

From 25e92fed45e9a39b13ff04d5335cffb8d699000d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 17:52:23 +0530
Subject: [PATCH 11/22] fix: removed auto save logic from view settings
 component and added functionality to save it in View Settings along with
 filters & sort

---
 frontend/src/components/ViewSettings.vue | 91 +++++++++++++++++-------
 1 file changed, 64 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/ViewSettings.vue b/frontend/src/components/ViewSettings.vue
index 2177e41f..1bf20424 100644
--- a/frontend/src/components/ViewSettings.vue
+++ b/frontend/src/components/ViewSettings.vue
@@ -7,14 +7,14 @@
         </template>
       </Button>
     </template>
-    <template #body>
+    <template #body="{ close }">
       <div
         class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
       >
         <div v-if="!edit">
           <Draggable
             :list="columns"
-            @end="updateColumnDetails"
+            @end="apply"
             item-key="key"
             class="list-group"
           >
@@ -64,11 +64,22 @@
                 </Button>
               </template>
             </Autocomplete>
+            <Button
+              v-if="columnsUpdated"
+              class="w-full !justify-start !text-gray-600"
+              variant="ghost"
+              @click="reset(close)"
+              label="Reset Changes"
+            >
+              <template #prefix>
+                <ReloadIcon class="h-4" />
+              </template>
+            </Button>
             <Button
               v-if="!is_default"
               class="w-full !justify-start !text-gray-600"
               variant="ghost"
-              @click="resetToDefault"
+              @click="resetToDefault(close)"
               label="Reset to Default"
             >
               <template #prefix>
@@ -131,7 +142,8 @@ import NestedPopover from '@/components/NestedPopover.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import Draggable from 'vuedraggable'
 import { computed, defineModel, ref } from 'vue'
-import { FeatherIcon, FormControl, call } from 'frappe-ui'
+import { FeatherIcon, FormControl } from 'frappe-ui'
+import { watchOnce } from '@vueuse/core'
 
 const props = defineProps({
   doctype: {
@@ -140,6 +152,15 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['update'])
+const columnsUpdated = ref(false)
+
+const oldValues = ref({
+  columns: [],
+  rows: [],
+  isDefault: false,
+})
+
 const list = defineModel()
 const edit = ref(false)
 const column = ref({
@@ -179,7 +200,7 @@ const fields = computed(() => {
   })
 })
 
-async function addColumn(c) {
+function addColumn(c) {
   let _column = {
     label: c.label,
     type: c.type,
@@ -188,8 +209,7 @@ async function addColumn(c) {
   }
   columns.value.push(_column)
   rows.value.push(c.value)
-  await updateColumnDetails()
-  list.value.reload()
+  apply(true)
 }
 
 function removeColumn(c) {
@@ -197,7 +217,7 @@ function removeColumn(c) {
   if (c.key !== 'name') {
     rows.value = rows.value.filter((row) => row !== c.key)
   }
-  updateColumnDetails()
+  apply()
 }
 
 function editColumn(c) {
@@ -215,7 +235,7 @@ function updateColumn(c) {
   if (columns.value[index].old) {
     delete columns.value[index].old
   }
-  updateColumnDetails()
+  apply()
 }
 
 function cancelUpdate() {
@@ -225,25 +245,42 @@ function cancelUpdate() {
   delete column.value.old
 }
 
-async function updateColumnDetails() {
-  is_default.value = false
-  await call(
-    'crm.fcrm.doctype.crm_view_settings.crm_view_settings.update',
-    {
-      doctype: props.doctype,
-      columns: columns.value,
-      rows: rows.value,
-    }
-  )
+function reset(close) {
+  apply(true, false, true)
+  close()
 }
 
-async function resetToDefault() {
-  await call(
-    'crm.fcrm.doctype.crm_view_settings.crm_view_settings.reset_to_default',
-    {
-      doctype: props.doctype,
-    }
-  )
-  list.value.reload()
+function resetToDefault(close) {
+  apply(true, true)
+  close()
 }
+
+function apply(reload = false, isDefault = false, reset = false) {
+  is_default.value = isDefault
+  columnsUpdated.value = true
+  let obj = {
+    columns: reset ? oldValues.value.columns : columns.value,
+    rows: reset ? oldValues.value.rows : rows.value,
+    isDefault: reset ? oldValues.value.isDefault : isDefault,
+    reload,
+    reset,
+  }
+  emit('update', obj)
+
+  if (reload) {
+    setTimeout(() => {
+      is_default.value = reset ? oldValues.value.isDefault : isDefault
+      columnsUpdated.value = !reset
+    }, 100)
+  }
+}
+
+watchOnce(
+  () => list.value.data,
+  (val) => {
+    oldValues.value.columns = JSON.parse(JSON.stringify(val.columns))
+    oldValues.value.rows = JSON.parse(JSON.stringify(val.rows))
+    oldValues.value.isDefault = val.is_default
+  }
+)
 </script>

From 86603126840ef7e61a83fbde5c2e267ec7e6e679 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 17:53:49 +0530
Subject: [PATCH 12/22] fix: get views data along with doc data also handle
 loading of columns based on custom view

---
 crm/api/doc.py | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index f1fef5cc..dd427a59 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -56,21 +56,31 @@ def get_filterable_fields(doctype: str):
 
 
 @frappe.whitelist()
-def get_list_data(doctype: str, filters: dict, order_by: str):
-	columns = [
-		{"label": "Name", "type": "Data", "key": "name", "width": "16rem"},
-		{"label": "Last Modified", "type": "Datetime", "key": "modified", "width": "8rem"},
-	]
-	rows = ["name"]
-
+def get_list_data(doctype: str, filters: dict, order_by: str, columns=None , rows=None, custom_view_name=None):
+	custom_view = False
+	filters = frappe._dict(filters)
 	is_default = True
+	if columns or rows:
+		custom_view = True
+		is_default = False
+		columns = frappe.parse_json(columns)
+		rows = frappe.parse_json(rows)
 
-	if frappe.db.exists("CRM View Settings", doctype):
+	if not columns:
+		columns = [
+			{"label": "Name", "type": "Data", "key": "name", "width": "16rem"},
+			{"label": "Last Modified", "type": "Datetime", "key": "modified", "width": "8rem"},
+		]
+
+	if not rows:
+		rows = ["name"]
+
+	if not custom_view and frappe.db.exists("CRM View Settings", doctype):
 		list_view_settings = frappe.get_doc("CRM View Settings", doctype)
 		columns = frappe.parse_json(list_view_settings.columns)
 		rows = frappe.parse_json(list_view_settings.rows)
 		is_default = False
-	else:
+	elif not custom_view or is_default:
 		list = get_controller(doctype)
 
 		if hasattr(list, "default_list_data"):
@@ -123,14 +133,22 @@ def get_list_data(doctype: str, filters: dict, order_by: str):
 		if field not in fields:
 			fields.append(field)
 
+	if not is_default and custom_view_name:
+		is_default = frappe.db.get_value("CRM View Settings", custom_view_name, "default_columns")
+
 	return {
 		"data": data,
 		"columns": columns,
 		"rows": rows,
 		"fields": fields,
 		"is_default": is_default,
+		"views": get_views(doctype),
 	}
 
+def get_views(doctype):
+	views = frappe.get_all("CRM View Settings", fields=["*"], filters={"dt": doctype})
+	return views
+
 
 def get_doctype_fields(doctype):
 	not_allowed_fieldtypes = [

From b590985b569791ec101c5a63534e3d0eae30df0f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 22:24:02 +0530
Subject: [PATCH 13/22] fix: removed old filters & sort by logic from all list
 view

---
 frontend/src/pages/CallLogs.vue      | 33 ++++-----------------------
 frontend/src/pages/Contacts.vue      | 31 +++----------------------
 frontend/src/pages/Deals.vue         | 31 +++----------------------
 frontend/src/pages/Leads.vue         | 34 +++-------------------------
 frontend/src/pages/Organizations.vue | 31 +++----------------------
 5 files changed, 16 insertions(+), 144 deletions(-)

diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index ec7f1454..f0b92fca 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -43,22 +43,17 @@ import {
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
-import { useOrderBy } from '@/composables/orderby'
-import { useFilter } from '@/composables/filter'
-import { useDebounceFn } from '@vueuse/core'
-import { createResource, Breadcrumbs, FeatherIcon } from 'frappe-ui'
-import { computed, watch } from 'vue'
+import { createResource, Breadcrumbs } from 'frappe-ui'
+import { computed } from 'vue'
 
 const { getUser } = usersStore()
 const { getContact } = contactsStore()
-const { get: getOrderBy } = useOrderBy()
-const { getArgs, storage } = useFilter()
 
 const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
 
 function getParams() {
-  const filters = getArgs() || {}
-  const order_by = getOrderBy() || 'creation desc'
+  const filters = {}
+  const order_by = 'creation desc'
 
   return {
     doctype: 'CRM Call Log',
@@ -73,26 +68,6 @@ const callLogs = createResource({
   auto: true,
 })
 
-watch(
-  () => getOrderBy(),
-  (value, old_value) => {
-    if (!value && !old_value) return
-    callLogs.params = getParams()
-    callLogs.reload()
-  },
-  { immediate: true }
-)
-
-watch(
-  storage,
-  useDebounceFn((value, old_value) => {
-    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    callLogs.params = getParams()
-    callLogs.reload()
-  }, 300),
-  { deep: true }
-)
-
 const rows = computed(() => {
   if (!callLogs.data?.data) return []
   return callLogs.data.data.map((callLog) => {
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 79d7fcbb..6f6d317f 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -62,16 +62,11 @@ import Filter from '@/components/Filter.vue'
 import ViewSettings from '@/components/ViewSettings.vue'
 import { FeatherIcon, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
 import { organizationsStore } from '@/stores/organizations.js'
-import { useOrderBy } from '@/composables/orderby'
-import { useFilter } from '@/composables/filter'
 import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
-import { useDebounceFn } from '@vueuse/core'
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 const { getOrganization } = organizationsStore()
-const { get: getOrderBy } = useOrderBy()
-const { getArgs, storage } = useFilter()
 const route = useRoute()
 
 const showContactModal = ref(false)
@@ -101,8 +96,8 @@ const currentView = ref({
 })
 
 function getParams() {
-  const filters = getArgs() || {}
-  const order_by = getOrderBy() || 'modified desc'
+  const filters = {}
+  const order_by = 'modified desc'
 
   return {
     doctype: 'Contact',
@@ -117,26 +112,6 @@ const contacts = createResource({
   auto: true,
 })
 
-watch(
-  () => getOrderBy(),
-  (value, old_value) => {
-    if (!value && !old_value) return
-    contacts.params = getParams()
-    contacts.reload()
-  },
-  { immediate: true }
-)
-
-watch(
-  storage,
-  useDebounceFn((value, old_value) => {
-    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    contacts.params = getParams()
-    contacts.reload()
-  }, 300),
-  { deep: true }
-)
-
 const rows = computed(() => {
   if (!contacts.data?.data) return []
   return contacts.data.data.map((contact) => {
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index c84b9af7..f7bf6f29 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -79,9 +79,6 @@ import ViewSettings from '@/components/ViewSettings.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
-import { useOrderBy } from '@/composables/orderby'
-import { useFilter } from '@/composables/filter'
-import { useDebounceFn } from '@vueuse/core'
 import {
   dateFormat,
   dateTooltipFormat,
@@ -98,15 +95,13 @@ import {
   Breadcrumbs,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { ref, computed, reactive, watch } from 'vue'
+import { ref, computed, reactive } from 'vue'
 
 const breadcrumbs = [{ label: 'Deals', route: { name: 'Deals' } }]
 
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
-const { get: getOrderBy } = useOrderBy()
-const { getArgs, storage } = useFilter()
 
 const currentView = ref({
   label: 'List',
@@ -114,8 +109,8 @@ const currentView = ref({
 })
 
 function getParams() {
-  const filters = getArgs() || {}
-  const order_by = getOrderBy() || 'modified desc'
+  const filters = {}
+  const order_by = 'modified desc'
 
   return {
     doctype: 'CRM Deal',
@@ -130,26 +125,6 @@ const deals = createResource({
   auto: true,
 })
 
-watch(
-  () => getOrderBy(),
-  (value, old_value) => {
-    if (!value && !old_value) return
-    deals.params = getParams()
-    deals.reload()
-  },
-  { immediate: true }
-)
-
-watch(
-  storage,
-  useDebounceFn((value, old_value) => {
-    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    deals.params = getParams()
-    deals.reload()
-  }, 300),
-  { deep: true }
-)
-
 const rows = computed(() => {
   if (!deals.data?.data) return []
   return deals.data.data.map((deal) => {
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 2b13adec..9ed64939 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -78,9 +78,6 @@ import ViewSettings from '@/components/ViewSettings.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
-import { useOrderBy } from '@/composables/orderby'
-import { useFilter } from '@/composables/filter'
-import { useDebounceFn } from '@vueuse/core'
 import { dateFormat, dateTooltipFormat, timeAgo, formatTime } from '@/utils'
 import {
   FeatherIcon,
@@ -91,15 +88,13 @@ import {
   Breadcrumbs,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { ref, computed, reactive, watch } from 'vue'
+import { ref, computed, reactive } from 'vue'
 
 const breadcrumbs = [{ label: 'Leads', route: { name: 'Leads' } }]
 
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getLeadStatus } = statusesStore()
-const { get: getOrderBy } = useOrderBy()
-const { getArgs, storage } = useFilter()
 
 const currentView = ref({
   label: 'List',
@@ -107,12 +102,9 @@ const currentView = ref({
 })
 
 function getParams() {
-  const filters = {
-    converted: 0,
-    ...(getArgs() || {}),
-  }
+  const filters = { converted: 0 }
 
-  const order_by = getOrderBy() || 'modified desc'
+  const order_by = 'modified desc'
 
   return {
     doctype: 'CRM Lead',
@@ -127,26 +119,6 @@ const leads = createResource({
   auto: true,
 })
 
-watch(
-  () => getOrderBy(),
-  (value, old_value) => {
-    if (!value && !old_value) return
-    leads.params = getParams()
-    leads.reload()
-  },
-  { immediate: true }
-)
-
-watch(
-  storage,
-  useDebounceFn((value, old_value) => {
-    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    leads.params = getParams()
-    leads.reload()
-  }, 300),
-  { deep: true }
-)
-
 const rows = computed(() => {
   if (!leads.data?.data) return []
   return leads.data.data.map((lead) => {
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 09ac6b2f..2fe5a1c5 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -63,9 +63,6 @@ import OrganizationsListView from '@/components/ListViews/OrganizationsListView.
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
 import ViewSettings from '@/components/ViewSettings.vue'
-import { useOrderBy } from '@/composables/orderby'
-import { useFilter } from '@/composables/filter'
-import { useDebounceFn } from '@vueuse/core'
 import { FeatherIcon, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
 import {
   dateFormat,
@@ -73,12 +70,10 @@ import {
   timeAgo,
   formatNumberIntoCurrency,
 } from '@/utils'
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const { get: getOrderBy } = useOrderBy()
-const { getArgs, storage } = useFilter()
 
 const showOrganizationModal = ref(false)
 
@@ -107,8 +102,8 @@ const currentView = ref({
 })
 
 function getParams() {
-  const filters = getArgs() || {}
-  const order_by = getOrderBy() || 'modified desc'
+  const filters = {}
+  const order_by = 'modified desc'
 
   return {
     doctype: 'CRM Organization',
@@ -123,26 +118,6 @@ const organizations = createResource({
   auto: true,
 })
 
-watch(
-  () => getOrderBy(),
-  (value, old_value) => {
-    if (!value && !old_value) return
-    organizations.params = getParams()
-    organizations.reload()
-  },
-  { immediate: true }
-)
-
-watch(
-  storage,
-  useDebounceFn((value, old_value) => {
-    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    organizations.params = getParams()
-    organizations.reload()
-  }, 300),
-  { deep: true }
-)
-
 const rows = computed(() => {
   if (!organizations.data?.data) return []
   return organizations.data.data.map((organization) => {

From 414369ebc7077f1598d345a40a4adbbb90539fc4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 22:27:24 +0530
Subject: [PATCH 14/22] fix: only load logged in users created views

---
 crm/api/doc.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index dd427a59..eb963a63 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -146,7 +146,11 @@ def get_list_data(doctype: str, filters: dict, order_by: str, columns=None , row
 	}
 
 def get_views(doctype):
-	views = frappe.get_all("CRM View Settings", fields=["*"], filters={"dt": doctype})
+	views = frappe.get_all(
+		"CRM View Settings",
+		fields=["*"],
+		filters={"dt": doctype, "user": frappe.session.user}
+	)
 	return views
 
 

From 62fc0bc729c64b6406ec6f0a30c4b44f0fbf7d53 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:18:17 +0530
Subject: [PATCH 15/22] fix: created ViewControls component which handles all
 view(filters,sort,columns) releated code

---
 frontend/src/components/ViewControls.vue | 353 +++++++++++++++++++++++
 1 file changed, 353 insertions(+)
 create mode 100644 frontend/src/components/ViewControls.vue

diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
new file mode 100644
index 00000000..f203feee
--- /dev/null
+++ b/frontend/src/components/ViewControls.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="flex items-center justify-between px-5 pb-4 pt-3">
+    <div class="flex items-center gap-2">
+      <Dropdown :options="viewsDropdownOptions">
+        <template #default="{ open }">
+          <Button :label="currentView.label">
+            <template #prefix>
+              <FeatherIcon :name="currentView.icon" class="h-4" />
+            </template>
+            <template #suffix>
+              <FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4 text-gray-600"
+              />
+            </template>
+          </Button>
+        </template>
+      </Dropdown>
+    </div>
+    <div class="flex items-center gap-2">
+      <div v-if="viewUpdated" class="flex items-center gap-2 border-r pr-2">
+        <Button label="Cancel" @click="cancelChanges" />
+        <Button label="Save Changes" @click="saveView" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Filter v-model="list" :doctype="doctype" @update="updateFilter" />
+        <SortBy v-model="list" :doctype="doctype" @update="updateSort" />
+        <ViewSettings
+          v-model="list"
+          :doctype="doctype"
+          @update="(isDefault) => updateColumns(isDefault)"
+        />
+        <Dropdown :options="viewActions">
+          <template #default>
+            <Button>
+              <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+            </Button>
+          </template>
+        </Dropdown>
+      </div>
+    </div>
+  </div>
+  <ViewModal
+    :doctype="doctype"
+    :view="view"
+    :options="{
+      afterCreate: (v) => {
+        viewUpdated = false
+        router.push({ name: route.name, query: { view: v.name } })
+      },
+      afterUpdate: () => (viewUpdated = false),
+    }"
+    v-model="showViewModal"
+  />
+</template>
+<script setup>
+import ViewModal from '@/components/Modals/ViewModal.vue'
+import SortBy from '@/components/SortBy.vue'
+import Filter from '@/components/Filter.vue'
+import ViewSettings from '@/components/ViewSettings.vue'
+import { globalStore } from '@/stores/global'
+import { viewsStore } from '@/stores/views'
+import { useDebounceFn } from '@vueuse/core'
+import { createResource, FeatherIcon, Dropdown, call } from 'frappe-ui'
+import { computed, ref, defineModel, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+  filters: {
+    type: Object,
+    default: {},
+  },
+})
+
+const { $dialog } = globalStore()
+const { getView } = viewsStore()
+
+const list = defineModel()
+
+const route = useRoute()
+const router = useRouter()
+
+const defaultParams = ref('')
+
+const viewUpdated = ref(false)
+const showViewModal = ref(false)
+
+const currentView = ref({
+  label: 'List View',
+  icon: 'list',
+})
+
+const view = ref({
+  name: '',
+  label: '',
+  filters: props.filters,
+  order_by: 'modified desc',
+  columns: '',
+  rows: '',
+  default_columns: false,
+})
+
+function getParams() {
+  let _view = getView(route.query.view)
+  const filters = (_view?.filters && JSON.parse(_view.filters)) || props.filters
+  const order_by = _view?.order_by || 'modified desc'
+  const columns = _view?.columns || ''
+  const rows = _view?.rows || ''
+
+  if (_view) {
+    view.value = {
+      name: _view.name,
+      label: _view.label,
+      filters: _view.filters,
+      order_by: _view.order_by,
+      columns: _view.columns,
+      rows: _view.rows,
+      default_columns: _view.row,
+    }
+  } else {
+    view.value = {
+      name: '',
+      label: '',
+      filters: props.filters,
+      order_by: 'modified desc',
+      columns: '',
+      rows: '',
+      default_columns: true,
+    }
+  }
+
+  return {
+    doctype: props.doctype,
+    filters: filters,
+    order_by: order_by,
+    columns: columns,
+    rows: rows,
+    custom_view_name: _view?.name || '',
+  }
+}
+
+list.value = createResource({
+  url: 'crm.api.doc.get_list_data',
+  params: getParams(),
+  onSuccess(data) {
+    setupViews(data.views)
+    setupDefaults(data)
+  },
+})
+
+onMounted(() => {
+  useDebounceFn(() => reload(), 100)()
+})
+
+function reload() {
+  list.value.params = getParams()
+  list.value.reload()
+}
+
+const viewsDropdownOptions = ref([])
+
+const defaultViews = [
+  {
+    label: 'List View',
+    icon: 'list',
+    onClick() {
+      viewUpdated.value = false
+      router.push({ name: route.name })
+    },
+  },
+]
+
+function setupViews(views) {
+  viewsDropdownOptions.value = [
+    {
+      group: 'Default Views',
+      hideLabel: true,
+      items: defaultViews,
+    },
+  ]
+
+  views?.forEach((view) => {
+    view.icon = view.icon || 'list'
+    view.filters = JSON.parse(view.filters)
+    view.onClick = () => {
+      viewUpdated.value = false
+      router.push({ ...route, query: { view: view.name } })
+    }
+  })
+
+  if (views.length) {
+    viewsDropdownOptions.value.push({
+      group: 'Saved Views',
+      items: views,
+    })
+  }
+}
+
+function setupDefaults(data) {
+  let cv = getView(route.query.view)
+  currentView.value = {
+    label: cv?.label || 'List View',
+    icon: cv?.icon || 'list',
+  }
+
+  defaultParams.value = {
+    doctype: props.doctype,
+    filters: list.value.params.filters,
+    order_by: list.value.params.order_by,
+    columns: data.columns,
+    rows: data.rows,
+    custom_view_name: cv?.name || '',
+  }
+
+  data._defaultFilters = props.filters
+}
+
+function updateFilter(filters) {
+  viewUpdated.value = true
+  if (!defaultParams.value) {
+    defaultParams.value = getParams()
+  }
+  list.value.params = defaultParams.value
+  list.value.params.filters = filters
+  list.value.reload()
+}
+
+function updateSort(order_by) {
+  viewUpdated.value = true
+  if (!defaultParams.value) {
+    defaultParams.value = getParams()
+  }
+  list.value.params = defaultParams.value
+  list.value.params.order_by = order_by
+  list.value.reload()
+}
+
+function updateColumns(obj) {
+  defaultParams.value.columns = obj.isDefault ? '' : obj.columns
+  defaultParams.value.rows = obj.isDefault ? '' : obj.rows
+  view.value.default_columns = obj.isDefault
+
+  if (obj.reset) {
+    defaultParams.value.columns = getParams().columns
+    defaultParams.value.rows = getParams().rows
+  }
+
+  if (obj.reload) {
+    list.value.params = defaultParams.value
+    list.value.reload()
+  }
+  viewUpdated.value = true
+}
+
+// View Actions
+const viewActions = computed(() => {
+  let o = [
+    {
+      group: 'Default Views',
+      hideLabel: true,
+      items: [
+        {
+          label: 'Duplicate View',
+          icon: 'copy',
+          onClick: () => {
+            view.value.name = ''
+            view.value.label = view.value.label + ' New'
+            showViewModal.value = true
+          },
+        },
+      ],
+    },
+  ]
+
+  if (route.query.view) {
+    o.push({
+      group: 'Delete View',
+      hideLabel: true,
+      items: [
+        {
+          label: 'Delete',
+          icon: 'trash-2',
+          onClick: () =>
+            $dialog({
+              title: 'Delete View',
+              message: 'Are you sure you want to delete this view?',
+              variant: 'danger',
+              actions: [
+                {
+                  label: 'Delete',
+                  variant: 'solid',
+                  theme: 'red',
+                  onClick: (close) => {
+                    close()
+                    call(
+                      'crm.fcrm.doctype.crm_view_settings.crm_view_settings.delete',
+                      {
+                        name: route.query.view,
+                      }
+                    ).then(() => {
+                      router.push({ name: route.name })
+                    })
+                  },
+                },
+              ],
+            }),
+        },
+      ],
+    })
+  }
+  return o
+})
+
+function cancelChanges() {
+  reload()
+  viewUpdated.value = false
+}
+
+function saveView() {
+  view.value = {
+    label: view.value.label,
+    name: view.value.name,
+    filters: defaultParams.value.filters,
+    order_by: defaultParams.value.order_by,
+    columns: defaultParams.value.columns,
+    rows: defaultParams.value.rows,
+    default_columns: view.value.default_columns,
+  }
+  showViewModal.value = true
+}
+
+// Watchers
+watch(
+  () => getView(route.query.view),
+  (value, old_value) => {
+    if (JSON.stringify(value) === JSON.stringify(old_value)) return
+    reload()
+  },
+  { deep: true }
+)
+
+watch(
+  () => route,
+  (value, old_value) => {
+    if (value === old_value) return
+    reload()
+  }
+)
+</script>

From cde193195d6704cd4ac0085910b5f97b9fe96a1e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:18:55 +0530
Subject: [PATCH 16/22] fix: implemented ViewControls for Leads

---
 frontend/src/pages/Leads.vue | 110 +++++------------------------------
 1 file changed, 14 insertions(+), 96 deletions(-)

diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 9ed64939..2d7f3141 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -9,29 +9,11 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <Dropdown :options="viewsDropdownOptions">
-        <template #default="{ open }">
-          <Button :label="currentView.label">
-            <template #prefix
-              ><FeatherIcon :name="currentView.icon" class="h-4"
-            /></template>
-            <template #suffix
-              ><FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
-            /></template>
-          </Button>
-        </template>
-      </Dropdown>
-    </div>
-    <div class="flex items-center gap-2">
-      <Filter doctype="CRM Lead" />
-      <SortBy doctype="CRM Lead" />
-      <ViewSettings doctype="CRM Lead" v-model="leads" />
-    </div>
-  </div>
+  <ViewControls
+    v-model="leads"
+    doctype="CRM Lead"
+    :filters="{ converted: 0 }"
+  />
   <LeadsListView
     v-if="leads.data && rows.length"
     :rows="rows"
@@ -72,9 +54,7 @@ import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 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 ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
@@ -83,7 +63,6 @@ import {
   FeatherIcon,
   Dialog,
   Button,
-  Dropdown,
   createResource,
   Breadcrumbs,
 } from 'frappe-ui'
@@ -96,34 +75,17 @@ const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getLeadStatus } = statusesStore()
 
-const currentView = ref({
-  label: 'List',
-  icon: 'list',
-})
+const router = useRouter()
 
-function getParams() {
-  const filters = { converted: 0 }
-
-  const order_by = 'modified desc'
-
-  return {
-    doctype: 'CRM Lead',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const leads = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
+// leads data is loaded in the ViewControls component
+const leads = ref({})
 
+// Rows
 const rows = computed(() => {
-  if (!leads.data?.data) return []
-  return leads.data.data.map((lead) => {
+  if (!leads.value?.data?.data) return []
+  return leads.value?.data.data.map((lead) => {
     let _rows = {}
-    leads.data.rows.forEach((row) => {
+    leads.value?.data.rows.forEach((row) => {
       _rows[row] = lead[row]
 
       if (row == 'lead_name') {
@@ -200,49 +162,7 @@ const rows = computed(() => {
   })
 })
 
-const viewsDropdownOptions = [
-  {
-    label: 'List',
-    icon: 'list',
-    onClick() {
-      currentView.value = {
-        label: 'List',
-        icon: 'list',
-      }
-    },
-  },
-  {
-    label: 'Table',
-    icon: 'grid',
-    onClick() {
-      currentView.value = {
-        label: 'Table',
-        icon: 'grid',
-      }
-    },
-  },
-  {
-    label: 'Calender',
-    icon: 'calendar',
-    onClick() {
-      currentView.value = {
-        label: 'Calender',
-        icon: 'calendar',
-      }
-    },
-  },
-  {
-    label: 'Board',
-    icon: 'columns',
-    onClick() {
-      currentView.value = {
-        label: 'Board',
-        icon: 'columns',
-      }
-    },
-  },
-]
-
+// New Lead
 const showNewDialog = ref(false)
 
 let newLead = reactive({
@@ -269,8 +189,6 @@ const createLead = createResource({
   },
 })
 
-const router = useRouter()
-
 function createNewLead(close) {
   createLead
     .submit(newLead, {

From a63058da08b405c7869c8143bdf8a11a9cade14a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:19:08 +0530
Subject: [PATCH 17/22] fix: implemented ViewControls for Deals

---
 frontend/src/pages/Deals.vue | 106 ++++-------------------------------
 1 file changed, 10 insertions(+), 96 deletions(-)

diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index f7bf6f29..33e7e2e7 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -9,30 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <Dropdown :options="viewsDropdownOptions">
-        <template #default="{ open }">
-          <Button :label="currentView.label">
-            <template #prefix>
-              <FeatherIcon :name="currentView.icon" class="h-4" />
-            </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
-              />
-            </template>
-          </Button>
-        </template>
-      </Dropdown>
-    </div>
-    <div class="flex items-center gap-2">
-      <Filter doctype="CRM Deal" />
-      <SortBy doctype="CRM Deal" />
-      <ViewSettings doctype="CRM Deal" v-model="deals" />
-    </div>
-  </div>
+  <ViewControls v-model="deals" doctype="CRM Deal" />
   <DealsListView
     v-if="deals.data && rows.length"
     :rows="rows"
@@ -73,9 +50,7 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 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 ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
@@ -90,7 +65,6 @@ import {
   FeatherIcon,
   Dialog,
   Button,
-  Dropdown,
   createResource,
   Breadcrumbs,
 } from 'frappe-ui'
@@ -103,33 +77,17 @@ const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
 
-const currentView = ref({
-  label: 'List',
-  icon: 'list',
-})
+const router = useRouter()
 
-function getParams() {
-  const filters = {}
-  const order_by = 'modified desc'
-
-  return {
-    doctype: 'CRM Deal',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const deals = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
+// deals data is loaded in the ViewControls component
+const deals = ref({})
 
+// Rows
 const rows = computed(() => {
-  if (!deals.data?.data) return []
-  return deals.data.data.map((deal) => {
+  if (!deals.value?.data?.data) return []
+  return deals.value.data.data.map((deal) => {
     let _rows = {}
-    deals.data.rows.forEach((row) => {
+    deals.value.data.rows.forEach((row) => {
       _rows[row] = deal[row]
 
       let org = getOrganization(deal.organization)
@@ -204,49 +162,7 @@ const rows = computed(() => {
   })
 })
 
-const viewsDropdownOptions = [
-  {
-    label: 'List',
-    icon: 'list',
-    onClick() {
-      currentView.value = {
-        label: 'List',
-        icon: 'list',
-      }
-    },
-  },
-  {
-    label: 'Table',
-    icon: 'grid',
-    onClick() {
-      currentView.value = {
-        label: 'Table',
-        icon: 'grid',
-      }
-    },
-  },
-  {
-    label: 'Calender',
-    icon: 'calendar',
-    onClick() {
-      currentView.value = {
-        label: 'Calender',
-        icon: 'calendar',
-      }
-    },
-  },
-  {
-    label: 'Board',
-    icon: 'columns',
-    onClick() {
-      currentView.value = {
-        label: 'Board',
-        icon: 'columns',
-      }
-    },
-  },
-]
-
+// New Deal
 const showNewDialog = ref(false)
 
 let newDeal = reactive({
@@ -269,8 +185,6 @@ const createDeal = createResource({
   },
 })
 
-const router = useRouter()
-
 function createNewDeal(close) {
   createDeal
     .submit(newDeal, {

From d947e8aec0ba5f1d53cc7d604b09e7615d20def2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:19:21 +0530
Subject: [PATCH 18/22] chore: minor fix

---
 frontend/src/components/ViewSettings.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/ViewSettings.vue b/frontend/src/components/ViewSettings.vue
index 1bf20424..abc54514 100644
--- a/frontend/src/components/ViewSettings.vue
+++ b/frontend/src/components/ViewSettings.vue
@@ -278,6 +278,7 @@ function apply(reload = false, isDefault = false, reset = false) {
 watchOnce(
   () => list.value.data,
   (val) => {
+    if (!val) return
     oldValues.value.columns = JSON.parse(JSON.stringify(val.columns))
     oldValues.value.rows = JSON.parse(JSON.stringify(val.rows))
     oldValues.value.isDefault = val.is_default

From 452f1c312a381ee6789d084f97e26fdb98be505a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:23:00 +0530
Subject: [PATCH 19/22] fix: implemented ViewControls for Contacts

---
 frontend/src/pages/Contacts.vue | 109 ++++----------------------------
 1 file changed, 12 insertions(+), 97 deletions(-)

diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 6f6d317f..e931b13d 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -9,36 +9,16 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <Dropdown :options="viewsDropdownOptions">
-        <template #default="{ open }">
-          <Button :label="currentView.label">
-            <template #prefix>
-              <FeatherIcon :name="currentView.icon" class="h-4" />
-            </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
-              />
-            </template>
-          </Button>
-        </template>
-      </Dropdown>
-    </div>
-    <div class="flex items-center gap-2">
-      <Filter doctype="Contact" />
-      <SortBy doctype="Contact" />
-      <ViewSettings doctype="Contact" v-model="contacts" />
-    </div>
-  </div>
+  <ViewControls v-model="contacts" doctype="Contact" />
   <ContactsListView
     v-if="contacts.data && rows.length"
     :rows="rows"
     :columns="contacts.data.columns"
   />
-  <div v-else-if="contacts.data" class="flex h-full items-center justify-center">
+  <div
+    v-else-if="contacts.data"
+    class="flex h-full items-center justify-center"
+  >
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
     >
@@ -57,10 +37,8 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
-import SortBy from '@/components/SortBy.vue'
-import Filter from '@/components/Filter.vue'
-import ViewSettings from '@/components/ViewSettings.vue'
-import { FeatherIcon, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
+import ViewControls from '@/components/ViewControls.vue'
+import { FeatherIcon, Breadcrumbs } from 'frappe-ui'
 import { organizationsStore } from '@/stores/organizations.js'
 import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
@@ -72,7 +50,7 @@ const route = useRoute()
 const showContactModal = ref(false)
 
 const currentContact = computed(() => {
-  return contacts.data?.data?.find(
+  return contacts.value?.data?.data?.find(
     (contact) => contact.name === route.params.contactId
   )
 })
@@ -90,33 +68,13 @@ const breadcrumbs = computed(() => {
   return items
 })
 
-const currentView = ref({
-  label: 'List',
-  icon: 'list',
-})
-
-function getParams() {
-  const filters = {}
-  const order_by = 'modified desc'
-
-  return {
-    doctype: 'Contact',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const contacts = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
+const contacts = ref({})
 
 const rows = computed(() => {
-  if (!contacts.data?.data) return []
-  return contacts.data.data.map((contact) => {
+  if (!contacts.value?.data?.data) return []
+  return contacts.value?.data.data.map((contact) => {
     let _rows = {}
-    contacts.data.rows.forEach((row) => {
+    contacts.value?.data.rows.forEach((row) => {
       _rows[row] = contact[row]
 
       if (row == 'full_name') {
@@ -140,47 +98,4 @@ const rows = computed(() => {
     return _rows
   })
 })
-
-const viewsDropdownOptions = [
-  {
-    label: 'List',
-    icon: 'list',
-    onClick() {
-      currentView.value = {
-        label: 'List',
-        icon: 'list',
-      }
-    },
-  },
-  {
-    label: 'Table',
-    icon: 'grid',
-    onClick() {
-      currentView.value = {
-        label: 'Table',
-        icon: 'grid',
-      }
-    },
-  },
-  {
-    label: 'Calender',
-    icon: 'calendar',
-    onClick() {
-      currentView.value = {
-        label: 'Calender',
-        icon: 'calendar',
-      }
-    },
-  },
-  {
-    label: 'Board',
-    icon: 'columns',
-    onClick() {
-      currentView.value = {
-        label: 'Board',
-        icon: 'columns',
-      }
-    },
-  },
-]
 </script>

From 4dd53f81994f801f3fff95c30b0d74575a20daa7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:26:02 +0530
Subject: [PATCH 20/22] fix: implemented ViewControls for Organizations

---
 frontend/src/pages/Organizations.vue | 109 +++------------------------
 1 file changed, 12 insertions(+), 97 deletions(-)

diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 2fe5a1c5..cc545a37 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -13,36 +13,16 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <Dropdown :options="viewsDropdownOptions">
-        <template #default="{ open }">
-          <Button :label="currentView.label">
-            <template #prefix>
-              <FeatherIcon :name="currentView.icon" class="h-4" />
-            </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
-              />
-            </template>
-          </Button>
-        </template>
-      </Dropdown>
-    </div>
-    <div class="flex items-center gap-2">
-      <Filter doctype="CRM Organization" />
-      <SortBy doctype="CRM Organization" />
-      <ViewSettings doctype="CRM Organization" v-model="organizations" />
-    </div>
-  </div>
+  <ViewControls v-model="organizations" doctype="CRM Organization" />
   <OrganizationsListView
     v-if="organizations.data && rows.length"
     :rows="rows"
     :columns="organizations.data.columns"
   />
-  <div v-else-if="organizations.data" class="flex h-full items-center justify-center">
+  <div
+    v-else-if="organizations.data"
+    class="flex h-full items-center justify-center"
+  >
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
     >
@@ -60,10 +40,8 @@ import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
-import SortBy from '@/components/SortBy.vue'
-import Filter from '@/components/Filter.vue'
-import ViewSettings from '@/components/ViewSettings.vue'
-import { FeatherIcon, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
+import ViewControls from '@/components/ViewControls.vue'
+import { FeatherIcon, Breadcrumbs } from 'frappe-ui'
 import {
   dateFormat,
   dateTooltipFormat,
@@ -78,7 +56,7 @@ const route = useRoute()
 const showOrganizationModal = ref(false)
 
 const currentOrganization = computed(() => {
-  return organizations.data?.data?.find(
+  return organizations.value?.data?.data?.find(
     (organization) => organization.name === route.params.organizationId
   )
 })
@@ -96,33 +74,13 @@ const breadcrumbs = computed(() => {
   return items
 })
 
-const currentView = ref({
-  label: 'List',
-  icon: 'list',
-})
-
-function getParams() {
-  const filters = {}
-  const order_by = 'modified desc'
-
-  return {
-    doctype: 'CRM Organization',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const organizations = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
+const organizations = ref({})
 
 const rows = computed(() => {
-  if (!organizations.data?.data) return []
-  return organizations.data.data.map((organization) => {
+  if (!organizations.value?.data?.data) return []
+  return organizations.value?.data.data.map((organization) => {
     let _rows = {}
-    organizations.data.rows.forEach((row) => {
+    organizations.value?.data.rows.forEach((row) => {
       _rows[row] = organization[row]
 
       if (row === 'organization_name') {
@@ -145,49 +103,6 @@ const rows = computed(() => {
   })
 })
 
-const viewsDropdownOptions = [
-  {
-    label: 'List',
-    icon: 'list',
-    onClick() {
-      currentView.value = {
-        label: 'List',
-        icon: 'list',
-      }
-    },
-  },
-  {
-    label: 'Table',
-    icon: 'grid',
-    onClick() {
-      currentView.value = {
-        label: 'Table',
-        icon: 'grid',
-      }
-    },
-  },
-  {
-    label: 'Calender',
-    icon: 'calendar',
-    onClick() {
-      currentView.value = {
-        label: 'Calender',
-        icon: 'calendar',
-      }
-    },
-  },
-  {
-    label: 'Board',
-    icon: 'columns',
-    onClick() {
-      currentView.value = {
-        label: 'Board',
-        icon: 'columns',
-      }
-    },
-  },
-]
-
 function website(url) {
   return url && url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
 }

From 1e3e898a9794375b19559476b87d04a3a2772362 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 31 Dec 2023 23:29:00 +0530
Subject: [PATCH 21/22] fix: implemented ViewControls for Call Logs

---
 frontend/src/pages/CallLogs.vue | 46 +++++++++------------------------
 1 file changed, 12 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index f0b92fca..a86ccda6 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -4,21 +4,16 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <SortBy doctype="CRM Call Log" />
-      <Filter doctype="CRM Call Log" />
-    </div>
-    <div class="flex items-center gap-2">
-      <ViewSettings doctype="CRM Call Log" v-model="callLogs" />
-    </div>
-  </div>
+  <ViewControls v-model="callLogs" doctype="CRM Call Log" />
   <CallLogsListView
     v-if="callLogs.data && rows.length"
     :rows="rows"
     :columns="callLogs.data.columns"
   />
-  <div v-else-if="callLogs.data" class="flex h-full items-center justify-center">
+  <div
+    v-else-if="callLogs.data"
+    class="flex h-full items-center justify-center"
+  >
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
     >
@@ -31,9 +26,7 @@
 <script setup>
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import SortBy from '@/components/SortBy.vue'
-import Filter from '@/components/Filter.vue'
-import ViewSettings from '@/components/ViewSettings.vue'
+import ViewControls from '@/components/ViewControls.vue'
 import CallLogsListView from '@/components/ListViews/CallLogsListView.vue'
 import {
   secondsToDuration,
@@ -43,36 +36,21 @@ import {
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
-import { createResource, Breadcrumbs } from 'frappe-ui'
-import { computed } from 'vue'
+import { Breadcrumbs } from 'frappe-ui'
+import { computed, ref } from 'vue'
 
 const { getUser } = usersStore()
 const { getContact } = contactsStore()
 
 const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
 
-function getParams() {
-  const filters = {}
-  const order_by = 'creation desc'
-
-  return {
-    doctype: 'CRM Call Log',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const callLogs = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
+const callLogs = ref({})
 
 const rows = computed(() => {
-  if (!callLogs.data?.data) return []
-  return callLogs.data.data.map((callLog) => {
+  if (!callLogs.value?.data?.data) return []
+  return callLogs.value?.data.data.map((callLog) => {
     let _rows = {}
-    callLogs.data.rows.forEach((row) => {
+    callLogs.value?.data.rows.forEach((row) => {
       _rows[row] = callLog[row]
 
       let incoming = callLog.type === 'Incoming'

From cf619a658efcc7d71f6259c8366f261955173eb1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 1 Jan 2024 00:00:04 +0530
Subject: [PATCH 22/22] fix: allow updating view label

---
 .../doctype/crm_view_settings/crm_view_settings.py  |  1 +
 frontend/src/components/ViewControls.vue            | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
index 416ee2ef..dbb218f6 100644
--- a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
@@ -58,6 +58,7 @@ def update(view):
 	rows = remove_duplicates(rows)
 
 	doc = frappe.get_doc("CRM View Settings", view.name)
+	doc.label = view.label
 	doc.default_columns = default_columns
 	doc.filters = json.dumps(filters)
 	doc.order_by = view.order_by
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index f203feee..6f25d2b7 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -20,7 +20,10 @@
     <div class="flex items-center gap-2">
       <div v-if="viewUpdated" class="flex items-center gap-2 border-r pr-2">
         <Button label="Cancel" @click="cancelChanges" />
-        <Button label="Save Changes" @click="saveView" />
+        <Button
+          :label="view?.name ? 'Save Changes' : 'Create View'"
+          @click="saveView"
+        />
       </div>
       <div class="flex items-center gap-2">
         <Filter v-model="list" :doctype="doctype" @update="updateFilter" />
@@ -48,7 +51,13 @@
         viewUpdated = false
         router.push({ name: route.name, query: { view: v.name } })
       },
-      afterUpdate: () => (viewUpdated = false),
+      afterUpdate: (v) => {
+        viewUpdated = false
+        currentView = {
+          label: v.label,
+          icon: v.icon || 'list',
+        }
+      },
     }"
     v-model="showViewModal"
   />