From ed47d873159c5ea7ff75510df16b3f9967c11991 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 31 May 2024 18:12:26 +0530
Subject: [PATCH] fix: implemented list group view in lead & deal

---
 frappe-ui                                     |   2 +-
 .../components/ListViews/DealsListView.vue    | 234 ++++++++--------
 .../components/ListViews/LeadsListView.vue    | 254 +++++++++---------
 .../src/components/ListViews/ListRows.vue     |  64 +++++
 frontend/src/pages/Deals.vue                  |  31 ++-
 frontend/src/pages/Leads.vue                  |  30 ++-
 6 files changed, 359 insertions(+), 256 deletions(-)
 create mode 100644 frontend/src/components/ListViews/ListRows.vue

diff --git a/frappe-ui b/frappe-ui
index 1394a12b..90c75aff 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 1394a12b6de105649c8ca5beeead62a38ef1b18e
+Subproject commit 90c75affe85b2a1abfce68d61c0c5043f093a8a0
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 3fd04a00..31a2d41d 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -29,18 +29,74 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
-      <ListRow
-        class="mx-5"
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <div v-if="column.key === '_assign'" class="flex items-center">
-          <MultipleAvatar
-            :avatars="item"
-            size="sm"
+    <ListRows :rows="rows" v-slot="{ idx, column, item }">
+      <div v-if="column.key === '_assign'" class="flex items-center">
+        <MultipleAvatar
+          :avatars="item"
+          size="sm"
+          @click="
+            (event) =>
+              emit('applyFilter', {
+                event,
+                idx,
+                column,
+                item,
+                firstColumn: columns[0],
+              })
+          "
+        />
+      </div>
+      <ListRowItem v-else :item="item">
+        <template #prefix>
+          <div v-if="column.key === 'status'">
+            <IndicatorIcon :class="item.color" />
+          </div>
+          <div v-else-if="column.key === 'organization'">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.logo"
+              :label="item.label"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'deal_owner'">
+            <Avatar
+              v-if="item.full_name"
+              class="flex items-center"
+              :image="item.user_image"
+              :label="item.full_name"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'mobile_no'">
+            <PhoneIcon class="h-4 w-4" />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
+              "
+            >
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="
+              [
+                'modified',
+                'creation',
+                'first_response_time',
+                'first_responded_on',
+                'response_by',
+              ].includes(column.key)
+            "
+            class="truncate text-base"
             @click="
               (event) =>
                 emit('applyFilter', {
@@ -51,60 +107,21 @@
                   firstColumn: columns[0],
                 })
             "
-          />
-        </div>
-        <ListRowItem v-else :item="item">
-          <template #prefix>
-            <div v-if="column.key === 'status'">
-              <IndicatorIcon :class="item.color" />
-            </div>
-            <div v-else-if="column.key === 'organization'">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.logo"
-                :label="item.label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'deal_owner'">
-              <Avatar
-                v-if="item.full_name"
-                class="flex items-center"
-                :image="item.user_image"
-                :label="item.full_name"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'mobile_no'">
-              <PhoneIcon class="h-4 w-4" />
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-          </template>
-          <template #default="{ label }">
-            <div
-              v-if="
-                [
-                  'modified',
-                  'creation',
-                  'first_response_time',
-                  'first_responded_on',
-                  'response_by',
-                ].includes(column.key)
-              "
-              class="truncate text-base"
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div
+            v-else-if="column.key === 'sla_status'"
+            class="truncate text-base"
+          >
+            <Badge
+              v-if="item.value"
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.value"
               @click="
                 (event) =>
                   emit('applyFilter', {
@@ -115,60 +132,34 @@
                     firstColumn: columns[0],
                   })
               "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
-            </div>
-            <div
-              v-else-if="column.key === 'sla_status'"
-              class="truncate text-base"
-            >
-              <Badge
-                v-if="item.value"
-                :variant="'subtle'"
-                :theme="item.color"
-                size="md"
-                :label="item.value"
-                @click="
-                  (event) =>
-                    emit('applyFilter', {
-                      event,
-                      idx,
-                      column,
-                      item,
-                      firstColumn: columns[0],
-                    })
-                "
-              />
-            </div>
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-gray-900"
-              />
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
-              "
-            >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+            />
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -199,13 +190,12 @@ import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListRowItem,
   ListSelectBanner,
   ListFooter,
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 4b701274..3c3e23e7 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -29,18 +29,71 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
-      <ListRow
-        class="mx-5"
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <div v-if="column.key === '_assign'" class="flex items-center">
-          <MultipleAvatar
-            :avatars="item"
-            size="sm"
+    <ListRows :rows="rows" v-slot="{ idx, column, item }">
+      <div v-if="column.key === '_assign'" class="flex items-center">
+        <MultipleAvatar
+          :avatars="item"
+          size="sm"
+          @click="
+            (event) =>
+              emit('applyFilter', {
+                event,
+                idx,
+                column,
+                item,
+                firstColumn: columns[0],
+              })
+          "
+        />
+      </div>
+      <ListRowItem v-else :item="item">
+        <template #prefix>
+          <div v-if="column.key === 'status'">
+            <IndicatorIcon :class="item.color" />
+          </div>
+          <div v-else-if="column.key === 'lead_name'">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.image"
+              :label="item.image_label"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'organization'">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.logo"
+              :label="item.label"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'lead_owner'">
+            <Avatar
+              v-if="item.full_name"
+              class="flex items-center"
+              :image="item.user_image"
+              :label="item.full_name"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'mobile_no'">
+            <PhoneIcon class="h-4 w-4" />
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="
+              [
+                'modified',
+                'creation',
+                'first_response_time',
+                'first_responded_on',
+                'response_by',
+              ].includes(column.key)
+            "
+            class="truncate text-base"
             @click="
               (event) =>
                 emit('applyFilter', {
@@ -51,56 +104,37 @@
                   firstColumn: columns[0],
                 })
             "
-          />
-        </div>
-        <ListRowItem v-else :item="item">
-          <template #prefix>
-            <div v-if="column.key === 'status'">
-              <IndicatorIcon :class="item.color" />
-            </div>
-            <div v-else-if="column.key === 'lead_name'">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.image"
-                :label="item.image_label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'organization'">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.logo"
-                :label="item.label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'lead_owner'">
-              <Avatar
-                v-if="item.full_name"
-                class="flex items-center"
-                :image="item.user_image"
-                :label="item.full_name"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'mobile_no'">
-              <PhoneIcon class="h-4 w-4" />
-            </div>
-          </template>
-          <template #default="{ label }">
-            <div
-              v-if="
-                [
-                  'modified',
-                  'creation',
-                  'first_response_time',
-                  'first_responded_on',
-                  'response_by',
-                ].includes(column.key)
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () =>
+                  emit('likeDoc', {
+                    name: row.name,
+                    liked: isLiked(item),
+                  })
               "
-              class="truncate text-base"
+            >
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else-if="column.key === 'sla_status'"
+            class="truncate text-base"
+          >
+            <Badge
+              v-if="item.value"
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.value"
               @click="
                 (event) =>
                   emit('applyFilter', {
@@ -111,73 +145,34 @@
                     firstColumn: columns[0],
                   })
               "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-            <div
-              v-else-if="column.key === 'sla_status'"
-              class="truncate text-base"
-            >
-              <Badge
-                v-if="item.value"
-                :variant="'subtle'"
-                :theme="item.color"
-                size="md"
-                :label="item.value"
-                @click="
-                  (event) =>
-                    emit('applyFilter', {
-                      event,
-                      idx,
-                      column,
-                      item,
-                      firstColumn: columns[0],
-                    })
-                "
-              />
-            </div>
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-gray-900"
-              />
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
-              "
-            >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+            />
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -208,13 +203,12 @@ import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListSelectBanner,
   ListRowItem,
   ListFooter,
diff --git a/frontend/src/components/ListViews/ListRows.vue b/frontend/src/components/ListViews/ListRows.vue
new file mode 100644
index 00000000..a8fa6125
--- /dev/null
+++ b/frontend/src/components/ListViews/ListRows.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="mx-5 mt-2 h-full overflow-y-auto" v-if="showGroupedRows">
+    <div v-for="group in reactivieRows" :key="group.group">
+      <ListGroupHeader :group="group">
+        <div
+          class="my-2 flex items-center gap-2 text-base font-medium text-gray-800"
+        >
+          <div>{{ __('Status') }} -</div>
+          <div class="flex items-center gap-1">
+            <IndicatorIcon :class="group.color" />
+            <div>{{ group.group }}</div>
+          </div>
+        </div>
+      </ListGroupHeader>
+      <ListGroupRows :group="group" id="list-rows">
+        <ListRow
+          v-for="row in group.rows"
+          :key="row.name"
+          v-slot="{ idx, column, item }"
+          :row="row"
+        >
+          <slot v-bind="{ idx, column, item }" />
+        </ListRow>
+      </ListGroupRows>
+    </div>
+  </div>
+  <ListRows class="mx-5" v-else id="list-rows">
+    <ListRow
+      v-for="row in reactivieRows"
+      :key="row.name"
+      v-slot="{ idx, column, item }"
+      :row="row"
+    >
+      <slot v-bind="{ idx, column, item }" />
+    </ListRow>
+  </ListRows>
+</template>
+
+<script setup>
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import { ListRows, ListRow, ListGroupHeader, ListGroupRows } from 'frappe-ui'
+
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+})
+
+const reactivieRows = ref(props.rows)
+
+watch(
+  () => props.rows,
+  (val) => (reactivieRows.value = val)
+)
+
+let showGroupedRows = computed(() => {
+  return props.rows.every(
+    (row) => row.group && row.rows && Array.isArray(row.rows)
+  )
+})
+</script>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index c059fbc5..1b1881a6 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -77,6 +77,7 @@ import {
   formatTime,
 } from '@/utils'
 import { Breadcrumbs } from 'frappe-ui'
+import { useRoute } from 'vue-router'
 import { ref, computed } from 'vue'
 
 const breadcrumbs = [{ label: __('Deals'), route: { name: 'Deals' } }]
@@ -85,6 +86,8 @@ const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
 
+const route = useRoute()
+
 const dealsListView = ref(null)
 const showDealModal = ref(false)
 
@@ -98,7 +101,7 @@ const viewControls = ref(null)
 // Rows
 const rows = computed(() => {
   if (!deals.value?.data?.data) return []
-  return deals.value.data.data.map((deal) => {
+  let listRows = deals.value.data.data.map((deal) => {
     let _rows = {}
     deals.value.data.rows.forEach((row) => {
       _rows[row] = deal[row]
@@ -174,5 +177,31 @@ const rows = computed(() => {
     })
     return _rows
   })
+
+  if (route.params.viewType === 'group_by') {
+    return getGroupedByRows(listRows)
+  }
+  return listRows
 })
+
+function getGroupedByRows(listRows) {
+  let groupedRows = []
+
+  listRows.forEach((row) => {
+    if (!groupedRows.some((group) => group.group === row.status.label)) {
+      groupedRows.push({
+        group: row.status.label,
+        color: getDealStatus(row.status.label)?.iconColorClass,
+        collapsed: false,
+        rows: [],
+      })
+    }
+    groupedRows.filter((group) => {
+      if (group.group === row.status.label) {
+        group.rows.push(row)
+      }
+    })
+  })
+  return groupedRows || listRows
+}
 </script>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 4a62ef35..47d9a617 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -78,7 +78,7 @@ import {
   createToast,
 } from '@/utils'
 import { createResource, Breadcrumbs } from 'frappe-ui'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { ref, computed, reactive } from 'vue'
 
 const breadcrumbs = [{ label: __('Leads'), route: { name: 'Leads' } }]
@@ -88,6 +88,7 @@ const { getOrganization } = organizationsStore()
 const { getLeadStatus } = statusesStore()
 
 const router = useRouter()
+const route = useRoute()
 
 const leadsListView = ref(null)
 const showLeadModal = ref(false)
@@ -102,7 +103,7 @@ const viewControls = ref(null)
 // Rows
 const rows = computed(() => {
   if (!leads.value?.data?.data) return []
-  return leads.value?.data.data.map((lead) => {
+  let listRows = leads.value?.data.data.map((lead) => {
     let _rows = {}
     leads.value?.data.rows.forEach((row) => {
       _rows[row] = lead[row]
@@ -182,8 +183,33 @@ const rows = computed(() => {
     })
     return _rows
   })
+  if (route.params.viewType === 'group_by') {
+    return getGroupedByRows(listRows)
+  }
+  return listRows
 })
 
+function getGroupedByRows(listRows) {
+  let groupedRows = []
+
+  listRows.forEach((row) => {
+    if (!groupedRows.some((group) => group.group === row.status.label)) {
+      groupedRows.push({
+        group: row.status.label,
+        color: getLeadStatus(row.status.label)?.iconColorClass,
+        collapsed: false,
+        rows: [],
+      })
+    }
+    groupedRows.filter((group) => {
+      if (group.group === row.status.label) {
+        group.rows.push(row)
+      }
+    })
+  })
+  return groupedRows || listRows
+}
+
 let newLead = reactive({
   salutation: '',
   first_name: '',