From a8bdb2f550640f732356424da52bc75439c4adae Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 25 Jul 2023 19:59:58 +0530
Subject: [PATCH] fix: added select row, select all row functionality in
 listview

---
 frontend/src/components/ListView.vue | 50 ++++++++++++++++++++++++----
 frontend/src/pages/Contacts.vue      |  3 +-
 frontend/src/pages/Leads.vue         |  3 +-
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index e98e886b..433416a7 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -43,7 +43,11 @@
         id="list-header"
         class="flex space-x-4 items-center px-5 py-2 border-b"
       >
-        <Checkbox class="[&>input]:duration-300 [&>input]:cursor-pointer" />
+        <Checkbox
+          class="[&>input]:duration-300 [&>input]:cursor-pointer"
+          :modelValue="allRowsSelected"
+          @click="toggleAllRows"
+        />
         <div
           v-for="column in columns"
           :key="column"
@@ -56,10 +60,19 @@
       <div id="list-rows" class="h-full overflow-y-auto">
         <div
           v-for="row in rows"
-          :key="row"
-          class="flex space-x-4 items-center mx-2 px-3 py-2 border-b"
+          :key="row[rowKey]"
+          class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-200 ease-in-out"
+          :class="
+            selections.has(row[rowKey])
+              ? 'bg-gray-100 hover:bg-gray-200'
+              : 'hover:bg-gray-50'
+          "
         >
-          <Checkbox class="[&>input]:duration-300 [&>input]:cursor-pointer" />
+          <Checkbox
+            :modelValue="selections.has(row[rowKey])"
+            @click="toggleRow(row[rowKey])"
+            class="[&>input]:duration-300 [&>input]:cursor-pointer"
+          />
           <div
             v-for="column in columns"
             :key="column.key"
@@ -102,7 +115,7 @@ import { FeatherIcon, Dropdown, Checkbox, Avatar } from 'frappe-ui'
 import SortIcon from './Icons/SortIcon.vue'
 import FilterIcon from './Icons/FilterIcon.vue'
 import IndicatorIcon from './Icons/IndicatorIcon.vue'
-import { ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 
 const props = defineProps({
   title: {
@@ -117,6 +130,10 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  rowKey: {
+    type: String,
+    required: true,
+  },
 })
 
 const currentView = ref({
@@ -174,8 +191,27 @@ function getValue(value) {
     value.image_label = value.image_label || value.label
     return value
   }
-  return {
-    label: value,
+  return { label: value }
+}
+
+let selections = reactive(new Set())
+
+const allRowsSelected = computed(() => {
+  if (!props.rows.length) return false
+  return selections.size === props.rows.length
+})
+
+function toggleRow(row) {
+  if (!selections.delete(row)) {
+    selections.add(row)
   }
 }
+
+function toggleAllRows() {
+  if (allRowsSelected.value) {
+    selections.clear()
+    return
+  }
+  props.rows.forEach((row) => selections.add(row[props.rowKey]))
+}
 </script>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index f9ec6676..d45ae7fe 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -1,5 +1,5 @@
 <template>
-  <ListView :title="title" :columns="columns" :rows="rows" />
+  <ListView :title="title" :columns="columns" :rows="rows" row-key="name" />
 </template>
 
 <script setup>
@@ -44,6 +44,7 @@ const columns = [
 const rows = computed(() => {
   return contacts.data?.map((contact) => {
     return {
+      name: contact.name,
       full_name: {
         label: contact.full_name,
         image_label: contact.full_name,
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index db7e8ea5..836896e6 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -1,5 +1,5 @@
 <template>
-  <ListView :title="title" :columns="columns" :rows="rows" />
+  <ListView :title="title" :columns="columns" :rows="rows" row-key="name" />
 </template>
 
 <script setup>
@@ -76,6 +76,7 @@ const columns = [
 const rows = computed(() => {
   return leads.data?.map((lead) => {
     return {
+      name: lead.name,
       lead_name: {
         label: lead.lead_name,
         image: lead.image,