From aadcec389758e99a8a6c90d46c811b600c18d833 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 3 Aug 2023 21:41:53 +0530
Subject: [PATCH] fix: created ListRowItem component to render different type
 of row item using single component

---
 frontend/src/components/ListRowItem.vue | 15 +++++++
 frontend/src/components/ListView.vue    | 52 +++++++++++++------------
 2 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/ListRowItem.vue

diff --git a/frontend/src/components/ListRowItem.vue b/frontend/src/components/ListRowItem.vue
new file mode 100644
index 00000000..0aa7cf92
--- /dev/null
+++ b/frontend/src/components/ListRowItem.vue
@@ -0,0 +1,15 @@
+<template>
+  <slot name="prefix"></slot>
+  <slot v-if="$slots.default" />
+  <div v-else class="text-base text-gray-900 truncate">
+    {{ value }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  value: {
+    type: String,
+    default: null,
+  },
+})
+</script>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index e9e2c193..bf347b43 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -77,31 +77,32 @@
             class="flex items-center space-x-2.5"
             :class="[column.size, column.align]"
           >
-            <div v-if="column.type === 'avatar'">
-              <Avatar
-                v-if="getValue(row[column.key]).label"
-                class="flex items-center"
-                :image="getValue(row[column.key]).image"
-                :label="getValue(row[column.key]).image_label"
-                size="md"
-              />
-            </div>
-            <div v-else-if="column.type === 'logo'">
-              <Avatar
-                v-if="getValue(row[column.key]).label"
-                class="flex items-center"
-                :image="getValue(row[column.key]).logo"
-                :label="getValue(row[column.key]).image_label"
-                size="md"
-                shape="square"
-              />
-            </div>
-            <div v-else-if="column.type === 'indicator'">
-              <IndicatorIcon :class="getValue(row[column.key]).color" />
-            </div>
-            <div class="text-base text-gray-900 truncate">
-              {{ getValue(row[column.key]).label }}
-            </div>
+            <ListRowItem :value="getValue(row[column.key]).label">
+              <template #prefix>
+                <div v-if="column.type === 'indicator'">
+                  <IndicatorIcon :class="getValue(row[column.key]).color" />
+                </div>
+                <div v-else-if="column.type === 'avatar'">
+                  <Avatar
+                    v-if="getValue(row[column.key]).label"
+                    class="flex items-center"
+                    :image="getValue(row[column.key]).image"
+                    :label="getValue(row[column.key]).image_label"
+                    size="md"
+                  />
+                </div>
+                <div v-else-if="column.type === 'logo'">
+                  <Avatar
+                    v-if="getValue(row[column.key]).label"
+                    class="flex items-center"
+                    :image="getValue(row[column.key]).logo"
+                    :label="getValue(row[column.key]).image_label"
+                    size="md"
+                    shape="square"
+                  />
+                </div>
+              </template>
+            </ListRowItem>
           </div>
         </router-link>
       </div>
@@ -156,6 +157,7 @@ import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { reactive, ref, computed } from 'vue'
 import LayoutHeader from './LayoutHeader.vue'
 import Breadcrumbs from './Breadcrumbs.vue'
+import ListRowItem from './ListRowItem.vue'
 
 const props = defineProps({
   list: {