Merge pull request #75 from shariquerik/apply-listview-resize-column

fix: update column width on column resize by dragging and remove tooltip from listviews

frontend/src/components/ColumnItem.vue

@@ -0,0 +1,51 @@
+<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>

frontend/src/components/ColumnSettings.vue

@@ -19,30 +19,12 @@
             class="list-group"
           >
             <template #item="{ element }">
-              <div
+              <ColumnItem
-                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"
+                :column="element"
-              >
+                @edit="editColumn"
-                <div class="flex items-center gap-2">
+                @remove="removeColumn"
-                  <DragIcon class="h-3.5" />
+                @update="apply"
-                  <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">
@@ -135,8 +117,7 @@
 
 <script setup>
 import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
+import ColumnItem from '@/components/ColumnItem.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'

frontend/src/components/ListViews/CallLogsListView.vue

@@ -8,6 +8,7 @@
         params: { callLogId: row.name },
       }),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -35,12 +36,13 @@
               <FeatherIcon :name="item.icon" class="h-3 w-3" />
             </div>
           </template>
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="['modified', 'creation'].includes(column.key)"
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div v-else-if="column.key === 'status'" class="truncate text-base">
             <Badge
               :variant="'subtle'"
@@ -82,6 +84,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   ListFooter,
+  Tooltip,
 } from 'frappe-ui'
 import { watch } from 'vue'
 
@@ -98,6 +101,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/components/ListViews/ContactsListView.vue

@@ -9,6 +9,7 @@
         params: { contactId: row.name },
       }),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -45,12 +46,13 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="['modified', 'creation'].includes(column.key)"
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div v-else-if="column.type === 'Check'">
             <FormControl
               type="checkbox"
@@ -64,7 +66,11 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
+        <Button
+          variant="subtle"
+          label="Edit"
+          @click="editValues(selections, unselectAll)"
+        >
           <template #prefix>
             <EditIcon class="h-3 w-3" />
           </template>
@@ -103,6 +109,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   ListFooter,
+  Tooltip,
 } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
@@ -119,6 +126,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/components/ListViews/DealsListView.vue

@@ -6,6 +6,7 @@
     :options="{
       getRowRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -48,7 +49,8 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="
               [
                 'modified',
@@ -61,7 +63,7 @@
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div
             v-else-if="column.key === 'sla_status'"
             class="truncate text-base"
@@ -135,6 +137,7 @@ import {
   ListFooter,
   Dropdown,
   call,
+  Tooltip,
 } from 'frappe-ui'
 import { setupBulkActions, createToast } from '@/utils'
 import { globalStore } from '@/stores/global'
@@ -154,6 +157,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -5,6 +5,7 @@
     :options="{
       onRowClick: (row) => emit('showEmailTemplate', row.name),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -21,12 +22,13 @@
           <!-- <template #prefix>
 
           </template> -->
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="['modified', 'creation'].includes(column.key)"
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div v-else-if="column.key === 'status'" class="truncate text-base">
             <Badge
               :variant="'subtle'"
@@ -98,6 +100,7 @@ import {
   ListRowItem,
   ListFooter,
   call,
+  Tooltip,
 } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
@@ -114,6 +117,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/components/ListViews/LeadsListView.vue

@@ -6,6 +6,7 @@
     :options="{
       getRowRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -57,7 +58,8 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="
               [
                 'modified',
@@ -70,7 +72,7 @@
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div
             v-else-if="column.key === 'sla_status'"
             class="truncate text-base"
@@ -144,6 +146,7 @@ import {
   ListFooter,
   Dropdown,
   call,
+  Tooltip,
 } from 'frappe-ui'
 import { setupBulkActions, createToast } from '@/utils'
 import { globalStore } from '@/stores/global'
@@ -163,6 +166,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -8,6 +8,7 @@
         params: { organizationId: row.name },
       }),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -32,12 +33,13 @@
               />
             </div>
           </template>
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="['modified', 'creation'].includes(column.key)"
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div v-else-if="column.type === 'Check'">
             <FormControl
               type="checkbox"
@@ -51,7 +53,11 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
+        <Button
+          variant="subtle"
+          label="Edit"
+          @click="editValues(selections, unselectAll)"
+        >
           <template #prefix>
             <EditIcon class="h-3 w-3" />
           </template>
@@ -88,6 +94,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   ListFooter,
+  Tooltip,
 } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
@@ -104,6 +111,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/components/ListViews/TasksListView.vue

@@ -5,6 +5,7 @@
     :options="{
       onRowClick: (row) => emit('showTask', row.name),
       selectable: options.selectable,
+      showTooltip: options.showTooltip,
     }"
     row-key="name"
   >
@@ -47,12 +48,13 @@
               />
             </div>
           </template>
-          <div
+          <Tooltip
+            :text="item.label"
             v-if="['modified', 'creation'].includes(column.key)"
             class="truncate text-base"
           >
             {{ item.timeAgo }}
-          </div>
+          </Tooltip>
           <div v-else-if="column.type === 'Check'">
             <FormControl
               type="checkbox"
@@ -138,6 +140,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      showTooltip: true,
       totalCount: 0,
       rowCount: 0,
     }),

frontend/src/pages/CallLogs.vue

@@ -16,6 +16,7 @@
     :rows="rows"
     :columns="callLogs.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: callLogs.data.row_count,
       totalCount: callLogs.data.total_count,
     }"

frontend/src/pages/Contact.vue

@@ -175,7 +175,7 @@
           class="mt-4"
           :rows="rows"
           :columns="columns"
-          :options="{ selectable: false }"
+          :options="{ selectable: false, showTooltip: false }"
         />
         <div
           v-if="!rows.length"

frontend/src/pages/Contacts.vue

@@ -21,6 +21,7 @@
     :rows="rows"
     :columns="contacts.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: contacts.data.row_count,
       totalCount: contacts.data.total_count,
     }"

frontend/src/pages/Deals.vue

@@ -22,6 +22,7 @@
     :rows="rows"
     :columns="deals.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: deals.data.row_count,
       totalCount: deals.data.total_count,
     }"

frontend/src/pages/EmailTemplates.vue

@@ -21,6 +21,7 @@
     :rows="rows"
     :columns="emailTemplates.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: emailTemplates.data.row_count,
       totalCount: emailTemplates.data.total_count,
     }"

frontend/src/pages/Leads.vue

@@ -23,6 +23,7 @@
     :rows="rows"
     :columns="leads.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: leads.data.row_count,
       totalCount: leads.data.total_count,
     }"

frontend/src/pages/Organization.vue

@@ -184,14 +184,14 @@
           v-if="tab.label === 'Deals' && rows.length"
           :rows="rows"
           :columns="columns"
-          :options="{ selectable: false }"
+          :options="{ selectable: false, showTooltip: false }"
         />
         <ContactsListView
           class="mt-4"
           v-if="tab.label === 'Contacts' && rows.length"
           :rows="rows"
           :columns="columns"
-          :options="{ selectable: false }"
+          :options="{ selectable: false, showTooltip: false, }"
         />
         <div
           v-if="!rows.length"

frontend/src/pages/Organizations.vue

@@ -25,6 +25,7 @@
     :rows="rows"
     :columns="organizations.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: organizations.data.row_count,
       totalCount: organizations.data.total_count,
     }"

frontend/src/pages/Tasks.vue

@@ -21,6 +21,7 @@
     :rows="rows"
     :columns="tasks.data.columns"
     :options="{
+      showTooltip: false,
       rowCount: tasks.data.row_count,
       totalCount: tasks.data.total_count,
     }"