From 53ebfc3ebb9a274ab40fe87b4d16cafc595fdb23 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 25 Jul 2023 21:31:07 +0530
Subject: [PATCH] fix: selected rows count on floating island

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

diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 433416a7..8f19c6d2 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="header" class="flex justify-between items-center px-5 py-4">
     <div class="left flex space-x-2">
-      <h1 class="font-semibold text-xl">{{ title }}</h1>
+      <h1 class="font-semibold text-xl">{{ title }}s</h1>
     </div>
     <div class="right flex space-x-2">
       <Button variant="solid" label="Create">
@@ -107,6 +107,46 @@
           </div>
         </div>
       </div>
+      <transition
+        enter-active-class="duration-300 ease-out"
+        enter-from-class="transform opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="transform opacity-0"
+      >
+        <div
+          v-if="selections.size"
+          class="fixed inset-x-0 bottom-6 mx-auto w-max text-base"
+        >
+          <div
+            class="w-[596px] flex items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
+          >
+            <div
+              class="flex flex-1 items-center space-x-3 border-r border-gray-300 text-gray-900"
+            >
+              <Checkbox
+                :modelValue="true"
+                :disabled="true"
+                class="[&>input]:text-gray-900"
+              />
+              <div>{{ selectedText }}</div>
+            </div>
+            <div class="flex items-center space-x-1">
+              <Button
+                class="text-gray-700"
+                :disabled="allRowsSelected"
+                :class="allRowsSelected ? 'cursor-not-allowed' : ''"
+                variant="ghost"
+                @click="toggleAllRows(true)"
+              >
+                Select all
+              </Button>
+              <Button icon="x" variant="ghost" @click="toggleAllRows(false)" />
+            </div>
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -195,6 +235,10 @@ function getValue(value) {
 }
 
 let selections = reactive(new Set())
+let selectedText = computed(() => {
+  let title = selections.size === 1 ? props.title : `${props.title}s`
+  return `${selections.size} ${title} selected`
+})
 
 const allRowsSelected = computed(() => {
   if (!props.rows.length) return false
@@ -207,8 +251,8 @@ function toggleRow(row) {
   }
 }
 
-function toggleAllRows() {
-  if (allRowsSelected.value) {
+function toggleAllRows(select) {
+  if (!select || allRowsSelected.value) {
     selections.clear()
     return
   }
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index d45ae7fe..b0fdf138 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -7,7 +7,7 @@ import ListView from '../components/ListView.vue'
 import { computed } from 'vue'
 import { createListResource } from 'frappe-ui'
 
-const title = 'Contacts'
+const title = 'Contact'
 
 const contacts = createListResource({
   type: 'list',
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 836896e6..fb3246ca 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -8,7 +8,7 @@ import { computed } from 'vue'
 import { createListResource } from 'frappe-ui'
 import { usersStore } from '../stores/users'
 
-const title = 'Leads'
+const title = 'Lead'
 const { getUser } = usersStore()
 
 const leads = createListResource({