From 458b068748bb38fc500c13793a0f6f5dfb49afaf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 18 May 2024 13:05:10 +0530
Subject: [PATCH 01/10] refactor: maded fadedscrollablediv better

---
 .../src/components/FadedScrollableDiv.vue     | 66 ++++++++++++++++---
 frontend/src/components/ViewControls.vue      | 13 ++--
 2 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/FadedScrollableDiv.vue b/frontend/src/components/FadedScrollableDiv.vue
index f54e8f38b..7881b28e0 100644
--- a/frontend/src/components/FadedScrollableDiv.vue
+++ b/frontend/src/components/FadedScrollableDiv.vue
@@ -1,29 +1,75 @@
 <template>
-  <div ref="scrollableDiv" class="scrr" :style="`maskImage: ${maskStyle}`">
+  <div
+    ref="scrollableDiv"
+    :style="`maskImage: ${maskStyle}`"
+    @scroll="updateMaskStyle"
+  >
     <slot></slot>
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps({
-  maskHeight: {
+  maskLength: {
     type: Number,
-    default: 20,
+    default: 30,
+  },
+  orientation: {
+    type: String,
+    default: 'vertical',
   },
 })
 
 const scrollableDiv = ref(null)
 const maskStyle = ref('none')
+const side = computed(() =>
+  props.orientation == 'horizontal' ? 'right' : 'bottom'
+)
+
+function updateMaskStyle() {
+  if (!scrollableDiv.value) return
+
+  let scrollWidth = scrollableDiv.value.scrollWidth
+  let clientWidth = scrollableDiv.value.clientWidth
+  let scrollHeight = scrollableDiv.value.scrollHeight
+  let clientHeight = scrollableDiv.value.clientHeight
+  let scrollTop = scrollableDiv.value.scrollTop
+  let scrollLeft = scrollableDiv.value.scrollLeft
+
+  maskStyle.value = 'none'
+
+  // faded on both sides
+  if (
+    (side.value == 'right' && scrollWidth > clientWidth) ||
+    (side.value == 'bottom' && scrollHeight > clientHeight)
+  ) {
+    maskStyle.value = `linear-gradient(to ${side.value}, transparent, black ${props.maskLength}px, black calc(100% - ${props.maskLength}px), transparent);`
+  }
+
+  // faded on left or top
+  if (
+    (side.value == 'right' && scrollLeft - 20 > clientWidth) ||
+    (side.value == 'bottom' && scrollTop + clientHeight >= scrollHeight)
+  ) {
+    maskStyle.value = `linear-gradient(to ${side.value}, transparent, black ${props.maskLength}px, black 100%, transparent);`
+  }
+
+  // faded on right or bottom
+  if (
+    (side.value == 'right' && scrollLeft == 0) ||
+    (side.value == 'bottom' && scrollTop == 0)
+  ) {
+    maskStyle.value = `linear-gradient(to ${side.value}, black calc(100% - ${props.maskLength}px), transparent 100%);`
+  }
 
-function setMaskStyle() {
-  // show mask only if div is scrollable
-  if (scrollableDiv.value.scrollHeight > scrollableDiv.value.clientHeight) {
-    maskStyle.value = `linear-gradient(to bottom, black calc(100% - ${props.maskHeight}px), transparent 100%);`
-  } else {
+  if (
+    (side.value == 'right' && clientWidth == scrollWidth) ||
+    (side.value == 'bottom' && clientHeight == scrollHeight)
+  ) {
     maskStyle.value = 'none'
   }
 }
 
-onMounted(() => setMaskStyle())
+onMounted(() => setTimeout(() => updateMaskStyle(), 300))
 </script>
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index b5fddc8d9..4ff04e1bd 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -23,15 +23,9 @@
       </Dropdown>
     </div>
     <div class="-mr-2 h-[70%] border-l" />
-    <div
+    <FadedScrollableDiv
       class="flex flex-1 items-center overflow-x-auto px-1"
-      style="
-        mask-image: linear-gradient(
-          to right,
-          black calc(100% - 20px),
-          transparent 100%
-        );
-      "
+      orientation="horizontal"
     >
       <div
         v-for="filter in quickFilterList"
@@ -78,7 +72,7 @@
           @change.stop="applyQuickFilter(filter, $event.target.value)"
         />
       </div>
-    </div>
+    </FadedScrollableDiv>
     <div class="-ml-2 h-[70%] border-l" />
     <div class="flex items-center gap-2">
       <div
@@ -200,6 +194,7 @@ import UnpinIcon from '@/components/Icons/UnpinIcon.vue'
 import ViewModal from '@/components/Modals/ViewModal.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
+import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import ColumnSettings from '@/components/ColumnSettings.vue'
 import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'

From 51c5af1f64f64e2a2ac69934426b742a5f0f4b37 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 18:05:52 +0530
Subject: [PATCH 02/10] feat: Added icon field in View Settings

---
 crm/fcrm/doctype/crm_view_settings/crm_view_settings.json | 8 +++++++-
 crm/fcrm/doctype/crm_view_settings/crm_view_settings.py   | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

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 e0ac969df..3da7ac696 100644
--- a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.json
@@ -6,6 +6,7 @@
  "engine": "InnoDB",
  "field_order": [
   "label",
+  "icon",
   "user",
   "is_default",
   "column_break_zacm",
@@ -111,11 +112,16 @@
    "fieldname": "is_default",
    "fieldtype": "Check",
    "label": "Is Default"
+  },
+  {
+   "fieldname": "icon",
+   "fieldtype": "Data",
+   "label": "Icon"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-02-03 18:38:09.412745",
+ "modified": "2024-05-20 17:24:18.662389",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM View Settings",
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 f77922504..c560b94e3 100644
--- a/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
+++ b/crm/fcrm/doctype/crm_view_settings/crm_view_settings.py
@@ -27,6 +27,7 @@ def create(view):
 	doc = frappe.new_doc("CRM View Settings")
 	doc.name = view.label
 	doc.label = view.label
+	doc.icon = view.icon
 	doc.dt = view.doctype
 	doc.user = frappe.session.user
 	doc.route_name = view.route_name or ""
@@ -52,6 +53,7 @@ def update(view):
 
 	doc = frappe.get_doc("CRM View Settings", view.name)
 	doc.label = view.label
+	doc.icon = view.icon
 	doc.route_name = view.route_name or ""
 	doc.load_default_columns = view.load_default_columns or False
 	doc.filters = json.dumps(filters)

From fa93cacd9e6834151aa4b0b7b9d5422c090328b2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 18:06:21 +0530
Subject: [PATCH 03/10] fix: if emoji is not set set random emoji

---
 frontend/src/components/IconPicker.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index c1249d250..29fee1b71 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -66,7 +66,7 @@
 <script setup>
 import { gemoji } from 'gemoji'
 import { Popover } from 'frappe-ui'
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const search = ref('')
 const emoji = defineModel()
@@ -109,5 +109,9 @@ function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)
 }
 
+onMounted(() => {
+  if (!emoji.value) setRandom()
+})
+
 defineExpose({ setRandom })
 </script>

From 79fc7572bc6d3cec0d6249c4d88cd9aec23c2b7e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 18:07:01 +0530
Subject: [PATCH 04/10] fix: allow adding/editing icon from view modal

---
 frontend/src/components/Modals/ViewModal.vue | 36 +++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
index 0f3ac1262..6067baa56 100644
--- a/frontend/src/components/Modals/ViewModal.vue
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -21,20 +21,37 @@
     }"
   >
     <template #body-content>
-      <FormControl
-        variant="outline"
-        size="md"
-        type="text"
-        :label="__('View Name')"
-        :placeholder="__('My Open Deals')"
-        v-model="view.label"
-      />
+      <div class="mb-1.5 block text-base text-gray-600">
+        {{ __('View Name') }}
+      </div>
+      <div class="flex gap-2">
+        <IconPicker v-model="view.icon" v-slot="{ isOpen, togglePopover }">
+          <Button
+            variant="outline"
+            size="md"
+            class="flex size-8 text-2xl leading-none"
+            :class="isOpen ? 'bg-gray-200' : 'hover:bg-gray-100'"
+            @click="togglePopover"
+          >
+            {{ view.icon }}
+          </Button>
+        </IconPicker>
+        <TextInput
+          class="flex-1"
+          variant="outline"
+          size="md"
+          type="text"
+          :placeholder="__('My Open Deals')"
+          v-model="view.label"
+        />
+      </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
-import { call } from 'frappe-ui'
+import IconPicker from '@/components/IconPicker.vue'
+import { call, TextInput } from 'frappe-ui'
 import { ref, watch, nextTick } from 'vue'
 
 const props = defineProps({
@@ -60,6 +77,7 @@ const duplicateMode = ref(false)
 const _view = ref({
   name: '',
   label: '',
+  icon: '',
   filters: {},
   order_by: 'modified desc',
   columns: '',

From 838e2085cffb28cf0a48af83462ab903cd0041c6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 18:07:30 +0530
Subject: [PATCH 05/10] fix: show view icon in dropdown

---
 frontend/src/components/ViewControls.vue | 28 +++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 4ff04e1bd..b199f69d5 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -5,7 +5,8 @@
         <template #default="{ open }">
           <Button :label="__(currentView.label)">
             <template #prefix>
-              <FeatherIcon :name="currentView.icon" class="h-4" />
+              <div v-if="isEmoji(currentView.icon)">{{ currentView.icon }}</div>
+              <FeatherIcon v-else :name="currentView.icon" class="h-4" />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -203,6 +204,7 @@ import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
 import { computed, ref, onMounted, watch, h } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useDebounceFn } from '@vueuse/core'
+import { gemoji } from 'gemoji'
 
 const props = defineProps({
   doctype: {
@@ -247,9 +249,15 @@ const currentView = computed(() => {
   }
 })
 
+function isEmoji(str) {
+  const emojiList = gemoji.map((emoji) => emoji.emoji)
+  return emojiList.includes(str)
+}
+
 const view = ref({
   name: '',
   label: '',
+  icon: '',
   filters: {},
   order_by: 'modified desc',
   columns: '',
@@ -288,6 +296,7 @@ function getParams() {
     view.value = {
       name: _view.name,
       label: _view.label,
+      icon: _view.icon,
       filters: _view.filters,
       order_by: _view.order_by,
       columns: _view.columns,
@@ -301,6 +310,7 @@ function getParams() {
     view.value = {
       name: '',
       label: '',
+      icon: '',
       filters: {},
       order_by: 'modified desc',
       columns: '',
@@ -391,6 +401,14 @@ const defaultViews = [
   },
 ]
 
+function getIcon(icon) {
+  if (isEmoji(icon)) {
+    return h('div', icon)
+  } else {
+    return icon || 'list'
+  }
+}
+
 const viewsDropdownOptions = computed(() => {
   let _views = [
     {
@@ -403,7 +421,7 @@ const viewsDropdownOptions = computed(() => {
   if (list.value?.data?.views) {
     list.value.data.views.forEach((view) => {
       view.label = __(view.label)
-      view.icon = view.icon || 'list'
+      view.icon = getIcon(view.icon)
       view.filters =
         typeof view.filters == 'string'
           ? JSON.parse(view.filters)
@@ -610,9 +628,9 @@ const viewActions = computed(() => {
 
   if (route.query.view && (!view.value.public || isManager())) {
     actions[0].items.push({
-      label: __('Rename'),
+      label: __('Edit'),
       icon: () => h(EditIcon, { class: 'h-4 w-4' }),
-      onClick: () => renameView(),
+      onClick: () => editView(),
     })
 
     if (!view.value.public) {
@@ -671,7 +689,7 @@ function duplicateView() {
   showViewModal.value = true
 }
 
-function renameView() {
+function editView() {
   view.value.name = route.query.view
   view.value.label = __(getView(route.query.view).label)
   showViewModal.value = true

From 115400a1eef4253f812d0ae2d20ae4768c02b6e4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 18:11:06 +0530
Subject: [PATCH 06/10] fix: show view icon in sidebar

---
 frontend/src/components/Layouts/AppSidebar.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 890a53fd0..04392c196 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -115,7 +115,7 @@ import { viewsStore } from '@/stores/views'
 import { notificationsStore } from '@/stores/notifications'
 import { FeatherIcon } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
@@ -196,7 +196,7 @@ function parseView(views) {
   return views.map((view) => {
     return {
       label: view.label,
-      icon: getIcon(view.route_name),
+      icon: getIcon(view.route_name, view.icon),
       to: {
         name: view.route_name,
         query: { view: view.name },
@@ -205,7 +205,9 @@ function parseView(views) {
   })
 }
 
-function getIcon(routeName) {
+function getIcon(routeName, icon) {
+  if (icon) return h('div', icon)
+
   switch (routeName) {
     case 'Leads':
       return LeadsIcon

From e6995380439a0c61473505f0fcaeb278ab25e688 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 18:38:00 +0530
Subject: [PATCH 07/10] style: app sidebar icon style fix

---
 frontend/src/components/Layouts/AppSidebar.vue | 2 +-
 frontend/src/components/SidebarLink.vue        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 04392c196..dde14d02b 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -206,7 +206,7 @@ function parseView(views) {
 }
 
 function getIcon(routeName, icon) {
-  if (icon) return h('div', icon)
+  if (icon) return h('div', { class: 'size-auto' }, icon)
 
   switch (routeName) {
     case 'Leads':
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index 41632915f..0904b977e 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -11,13 +11,13 @@
       <div class="flex items-center truncate">
         <Tooltip :text="label" placement="right" :disabled="!isCollapsed">
           <slot name="icon">
-            <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
+            <span class="grid flex-shrink-0 place-items-center">
               <FeatherIcon
                 v-if="typeof icon == 'string'"
                 :name="icon"
-                class="h-4.5 w-4.5 text-gray-700"
+                class="size-4.5 text-gray-700"
               />
-              <component v-else :is="icon" class="h-4.5 w-4.5 text-gray-700" />
+              <component v-else :is="icon" class="size-4.5 text-gray-700" />
             </span>
           </slot>
         </Tooltip>

From f0b6988076a3585eccb61c207755398b22f87e1e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 19:46:05 +0530
Subject: [PATCH 08/10] fix: close only if exist

---
 frontend/src/components/Filter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index 2f83f4341..077e3d0bc 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -18,7 +18,7 @@
         <Button
           class="rounded-l-none border-l"
           icon="x"
-          @click.stop="clearfilter"
+          @click.stop="clearfilter(false)"
         />
       </Tooltip>
     </template>
@@ -423,7 +423,7 @@ function removeFilter(index) {
 function clearfilter(close) {
   filters.value.clear()
   apply()
-  close()
+  close && close()
 }
 
 function updateValue(value, filter) {

From f3e02974b9f2bda75dfcd43082c3ca861ff27159 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 19:47:10 +0530
Subject: [PATCH 09/10] chore: moved isEmoji function in utils

---
 frontend/src/components/ViewControls.vue | 7 +------
 frontend/src/utils/index.js              | 6 ++++++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index b199f69d5..f4365d808 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -200,11 +200,11 @@ import ColumnSettings from '@/components/ColumnSettings.vue'
 import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'
 import { usersStore } from '@/stores/users'
+import { isEmoji } from '@/utils'
 import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
 import { computed, ref, onMounted, watch, h } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useDebounceFn } from '@vueuse/core'
-import { gemoji } from 'gemoji'
 
 const props = defineProps({
   doctype: {
@@ -249,11 +249,6 @@ const currentView = computed(() => {
   }
 })
 
-function isEmoji(str) {
-  const emojiList = gemoji.map((emoji) => emoji.emoji)
-  return emojiList.includes(str)
-}
-
 const view = ref({
   name: '',
   label: '',
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 5ba49e78d..0c3f389e7 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -2,6 +2,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import { useDateFormat, useTimeAgo } from '@vueuse/core'
 import { usersStore } from '@/stores/users'
+import { gemoji } from 'gemoji'
 import { toast } from 'frappe-ui'
 import { h } from 'vue'
 
@@ -169,3 +170,8 @@ export function copyToClipboard(text) {
     })
   }
 }
+
+export function isEmoji(str) {
+  const emojiList = gemoji.map((emoji) => emoji.emoji)
+  return emojiList.includes(str)
+}

From bb49f92c635f0bd5086ba83ffc68e14079be5d31 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 19:47:59 +0530
Subject: [PATCH 10/10] fix: send viewObj to modal only if needed

---
 frontend/src/components/Modals/ViewModal.vue |  8 +++-----
 frontend/src/components/ViewControls.vue     | 15 ++++++++++++---
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
index 6067baa56..5ac333c09 100644
--- a/frontend/src/components/Modals/ViewModal.vue
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -25,16 +25,14 @@
         {{ __('View Name') }}
       </div>
       <div class="flex gap-2">
-        <IconPicker v-model="view.icon" v-slot="{ isOpen, togglePopover }">
+        <IconPicker v-model="view.icon" v-slot="{ togglePopover }">
           <Button
             variant="outline"
             size="md"
             class="flex size-8 text-2xl leading-none"
-            :class="isOpen ? 'bg-gray-200' : 'hover:bg-gray-100'"
+            :label="view.icon"
             @click="togglePopover"
-          >
-            {{ view.icon }}
-          </Button>
+          />
         </IconPicker>
         <TextInput
           class="flex-1"
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index f4365d808..d6be9b5cd 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -127,6 +127,8 @@
     </div>
   </div>
   <ViewModal
+    v-model="showViewModal"
+    v-model:view="viewModalObj"
     :doctype="doctype"
     :options="{
       afterCreate: async (v) => {
@@ -139,8 +141,6 @@
         reloadView()
       },
     }"
-    v-model:view="view"
-    v-model="showViewModal"
   />
   <Dialog
     v-model="showExportDialog"
@@ -574,6 +574,7 @@ function create_or_update_default_view() {
     reloadView()
     view.value = {
       label: view.value.label,
+      icon: view.value.icon,
       name: view.value.name,
       filters: defaultParams.value.filters,
       order_by: defaultParams.value.order_by,
@@ -677,16 +678,22 @@ const viewActions = computed(() => {
   return actions
 })
 
+const viewModalObj = ref({})
+
 function duplicateView() {
   let label = __(getView(route.query.view)?.label) || __('List View')
   view.value.name = ''
   view.value.label = label + __(' (New)')
+  viewModalObj.value = view.value
   showViewModal.value = true
 }
 
 function editView() {
+  let cView = getView(route.query.view)
   view.value.name = route.query.view
-  view.value.label = __(getView(route.query.view).label)
+  view.value.label = __(cView?.label) || __('List View')
+  view.value.icon = cView?.icon || ''
+  viewModalObj.value = view.value
   showViewModal.value = true
 }
 
@@ -728,6 +735,7 @@ function cancelChanges() {
 function saveView() {
   view.value = {
     label: view.value.label,
+    icon: view.value.icon,
     name: view.value.name,
     filters: defaultParams.value.filters,
     order_by: defaultParams.value.order_by,
@@ -736,6 +744,7 @@ function saveView() {
     route_name: route.name,
     load_default_columns: view.value.load_default_columns,
   }
+  viewModalObj.value = view.value
   showViewModal.value = true
 }