From 0ba169c16164421fe9cbaab4323f53a90cd5052b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 19 Feb 2024 18:11:55 +0530
Subject: [PATCH 1/3] fix: removed ColumnItem and added back to ColumnSettings

---
 frontend/src/components/ColumnItem.vue     | 51 ----------------------
 frontend/src/components/ColumnSettings.vue | 33 +++++++++++---
 2 files changed, 26 insertions(+), 58 deletions(-)
 delete mode 100644 frontend/src/components/ColumnItem.vue

diff --git a/frontend/src/components/ColumnItem.vue b/frontend/src/components/ColumnItem.vue
deleted file mode 100644
index b8089d3f..00000000
--- a/frontend/src/components/ColumnItem.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div
-    class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
-  >
-    <div class="flex items-center gap-2">
-      <DragIcon class="h-3.5" />
-      <div>{{ column.label }}</div>
-    </div>
-    <div class="flex cursor-pointer items-center gap-1">
-      <Button
-        variant="ghost"
-        class="!h-5 w-5 !p-1"
-        @click="emit('edit', column)"
-      >
-        <EditIcon class="h-3.5" />
-      </Button>
-      <Button
-        variant="ghost"
-        class="!h-5 w-5 !p-1"
-        @click="emit('remove', column)"
-      >
-        <FeatherIcon name="x" class="h-3.5" />
-      </Button>
-    </div>
-  </div>
-</template>
-<script setup>
-import EditIcon from '@/components/Icons/EditIcon.vue'
-import DragIcon from '@/components/Icons/DragIcon.vue'
-import { watchDebounced } from '@vueuse/core'
-
-const props = defineProps({
-  column: {
-    type: Object,
-    required: true,
-  },
-})
-
-const emit = defineEmits(['edit', 'remove', 'update'])
-
-watchDebounced(
-  () => props.column.width,
-  (val, old_val) => {
-    val = val.replace(/[^\d.]/g, '')
-    old_val = old_val.replace(/[^\d.]/g, '')
-    if (Math.abs(val - old_val) > 1) return
-    emit('update')
-  },
-  { debounce: 1000 }
-)
-</script>
diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index 890be9ef..9e619af8 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -19,12 +19,30 @@
             class="list-group"
           >
             <template #item="{ element }">
-              <ColumnItem
-                :column="element"
-                @edit="editColumn"
-                @remove="removeColumn"
-                @update="apply"
-              />
+              <div
+                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
+              >
+                <div class="flex items-center gap-2">
+                  <DragIcon class="h-3.5" />
+                  <div>{{ element.label }}</div>
+                </div>
+                <div class="flex cursor-pointer items-center gap-1">
+                  <Button
+                    variant="ghost"
+                    class="!h-5 w-5 !p-1"
+                    @click="editColumn(element)"
+                  >
+                    <EditIcon class="h-3.5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    class="!h-5 w-5 !p-1"
+                    @click="removeColumn(element)"
+                  >
+                    <FeatherIcon name="x" class="h-3.5" />
+                  </Button>
+                </div>
+              </div>
             </template>
           </Draggable>
           <div class="mt-1.5 flex flex-col gap-1 border-t pt-1.5">
@@ -117,7 +135,8 @@
 
 <script setup>
 import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
-import ColumnItem from '@/components/ColumnItem.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import DragIcon from '@/components/Icons/DragIcon.vue'
 import ReloadIcon from '@/components/Icons/ReloadIcon.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'

From 2e62ee167f7483ea72b31cb3bcb895cfc4c1dbd7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 19 Feb 2024 18:13:30 +0530
Subject: [PATCH 2/3] fix: when resize is triggered by ListHeader then apply
 changes

---
 .../components/ListViews/DealsListView.vue    |  4 ++--
 frontend/src/components/ViewControls.vue      | 19 ++++++++++++++++++-
 frontend/src/pages/Deals.vue                  |  3 +++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 77570cc7..8b2d926f 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -10,7 +10,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -164,7 +164,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount'])
+const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 0e67408c..41e8333e 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -113,6 +113,7 @@ const { isManager } = usersStore()
 
 const list = defineModel()
 const loadMore = defineModel('loadMore')
+const resizeColumn = defineModel('resizeColumn')
 const updatedPageCount = defineModel('updatedPageCount')
 
 const route = useRoute()
@@ -151,6 +152,11 @@ watch(loadMore, (value) => {
   updatePageLength(value, true)
 })
 
+watch(resizeColumn, (value) => {
+  if (!value) return
+  updateColumns()
+})
+
 watch(updatedPageCount, (value) => {
   if (!value) return
   updatePageLength(value)
@@ -330,6 +336,14 @@ function updateSort(order_by) {
 }
 
 function updateColumns(obj) {
+  if (!obj) {
+    obj = {
+      columns: list.value.data.columns,
+      rows: list.value.data.rows,
+      isDefault: false,
+    }
+  }
+
   if (!defaultParams.value) {
     defaultParams.value = getParams()
   }
@@ -363,7 +377,10 @@ function create_or_update_default_view() {
     {
       view: view.value,
     }
-  ).then(() => reloadView())
+  ).then(() => {
+    reloadView()
+    viewUpdated.value = false
+  })
 }
 
 function updatePageLength(value, loadMore = false) {
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index cc6f25f5..d0d90a99 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="deals"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Deal"
   />
@@ -27,6 +28,7 @@
       totalCount: deals.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
@@ -90,6 +92,7 @@ const router = useRouter()
 // deals data is loaded in the ViewControls component
 const deals = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 // Rows

From 38f8c8d5cd290b3fb15a2255b150efed8f22e69a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 19 Feb 2024 18:32:53 +0530
Subject: [PATCH 3/3] fix: fixed for all listview

---
 frappe-ui                                              |  2 +-
 frontend/src/components/ListViews/CallLogsListView.vue |  4 ++--
 frontend/src/components/ListViews/ContactsListView.vue |  9 +++++++--
 .../components/ListViews/EmailTemplatesListView.vue    |  3 ++-
 frontend/src/components/ListViews/LeadsListView.vue    |  4 ++--
 .../src/components/ListViews/OrganizationsListView.vue |  9 +++++++--
 frontend/src/components/ListViews/TasksListView.vue    | 10 ++++++++--
 frontend/src/pages/CallLogs.vue                        |  3 +++
 frontend/src/pages/Contacts.vue                        |  3 +++
 frontend/src/pages/EmailTemplates.vue                  |  3 +++
 frontend/src/pages/Leads.vue                           |  3 +++
 frontend/src/pages/Organizations.vue                   |  3 +++
 frontend/src/pages/Tasks.vue                           |  3 +++
 13 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 05e331df..388c8706 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 05e331df9e568a2f3f1d904230333baa1f7cc7be
+Subproject commit 388c8706d0f96d918651018ca58d85a56d2bf5cb
diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 33f0c3c2..60757240 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -12,7 +12,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -108,7 +108,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount'])
+const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
 
 const pageLengthCount = defineModel()
 
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index ea3c0781..57d5b9c2 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -13,7 +13,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -133,7 +133,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'reload',
+  'columnWidthUpdated',
+])
 
 const pageLengthCount = defineModel()
 
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 77ab123b..6a988060 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -9,7 +9,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -129,6 +129,7 @@ const emit = defineEmits([
   'updatePageCount',
   'showEmailTemplate',
   'reload',
+  'columnWidthUpdated',
 ])
 
 const pageLengthCount = defineModel()
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 1773365a..d6dc29c9 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -10,7 +10,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -173,7 +173,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount'])
+const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index c0beabd6..d8e89442 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -12,7 +12,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -118,7 +118,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'reload',
+  'columnWidthUpdated',
+])
 
 const pageLengthCount = defineModel()
 
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 2e74a13d..c94ccd41 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -9,7 +9,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -147,7 +147,13 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'showTask', 'reload'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'showTask',
+  'reload',
+  'columnWidthUpdated',
+])
 
 const pageLengthCount = defineModel()
 
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 7a188d81..a739a307 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -7,6 +7,7 @@
   <ViewControls
     v-model="callLogs"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Call Log"
   />
@@ -21,6 +22,7 @@
       totalCount: callLogs.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="callLogs.reload()"
   />
@@ -61,6 +63,7 @@ const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
 // callLogs data is loaded in the ViewControls component
 const callLogs = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 const rows = computed(() => {
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 54d40484..26201c9a 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="contacts"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="Contact"
   />
@@ -26,6 +27,7 @@
       totalCount: contacts.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="contacts.reload()"
   />
@@ -85,6 +87,7 @@ const breadcrumbs = computed(() => {
 // contacts data is loaded in the ViewControls component
 const contacts = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 const rows = computed(() => {
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 75b7c148..019b517f 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="emailTemplates"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="Email Template"
   />
@@ -26,6 +27,7 @@
       totalCount: emailTemplates.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showEmailTemplate="showEmailTemplate"
     @reload="emailTemplates.reload()"
@@ -65,6 +67,7 @@ const breadcrumbs = [
 // emailTemplates data is loaded in the ViewControls component
 const emailTemplates = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 const rows = computed(() => {
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 887ef884..024fab16 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="leads"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Lead"
     :filters="{ converted: 0 }"
@@ -28,6 +29,7 @@
       totalCount: leads.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
@@ -85,6 +87,7 @@ const router = useRouter()
 // leads data is loaded in the ViewControls component
 const leads = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 // Rows
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index d05f89a7..4bcaf443 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -16,6 +16,7 @@
   <ViewControls
     v-model="organizations"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Organization"
   />
@@ -30,6 +31,7 @@
       totalCount: organizations.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="organizations.reload()"
   />
@@ -91,6 +93,7 @@ const breadcrumbs = computed(() => {
 // organizations data is loaded in the ViewControls component
 const organizations = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 const rows = computed(() => {
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 70b54ca0..bc3a601a 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="tasks"
     v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Task"
   />
@@ -26,6 +27,7 @@
       totalCount: tasks.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showTask="showTask"
     @reload="tasks.reload()"
@@ -59,6 +61,7 @@ const { getUser } = usersStore()
 // tasks data is loaded in the ViewControls component
 const tasks = ref({})
 const loadMore = ref(1)
+const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 
 const rows = computed(() => {