From 91cfdb1c2b4b70f30aa610436caaa8bb90b9b5ba Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Mon, 7 Oct 2024 18:35:49 +0800
Subject: [PATCH] Improve detection of no item rows in Table component (#421)

* Improve detection of no item rows in Table component

* Update how columnsCount are managed in TableColumn component
---
 src/components/Table/Table.stories.js | 42 +++++++++++++++++++++++++++
 src/components/Table/TableBody.vue    | 18 ++++++++----
 src/components/Table/TableColumn.vue  | 10 +++++--
 src/components/Table/TableRow.vue     | 18 +++++++++++-
 4 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js
index acb3219b3..6a2c12f43 100644
--- a/src/components/Table/Table.stories.js
+++ b/src/components/Table/Table.stories.js
@@ -282,3 +282,45 @@ export const WithTitleAndDescription = {
 
 	args: {},
 };
+
+export const WithNoItems = {
+	render: (args) => ({
+		components: {
+			PkpTable,
+			TableHeader,
+			TableBody,
+			TableRow,
+			TableColumn,
+			TableCell,
+			PkpButton,
+		},
+		setup() {
+			return {args};
+		},
+		template: `
+			<PkpTable>
+				<template #label>
+					No Items
+				</template>
+				<template #description>
+					There's a total of <strong>0</strong> items(s).
+				</template>
+				<TableHeader>
+					<TableColumn>ID</TableColumn>
+					<TableColumn>Title</TableColumn>
+					<TableColumn>Views</TableColumn>
+					<TableColumn>Downloads</TableColumn>
+					<TableColumn>Total</TableColumn>
+					<TableColumn>Action</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<template #no-content>
+						This is a custom no-content slot. No items available.
+					</template>
+				</TableBody>
+			</PkpTable>
+		`,
+	}),
+
+	args: {},
+};
diff --git a/src/components/Table/TableBody.vue b/src/components/Table/TableBody.vue
index 52040ad5f..18a5d77da 100644
--- a/src/components/Table/TableBody.vue
+++ b/src/components/Table/TableBody.vue
@@ -1,7 +1,7 @@
 <template>
 	<tbody class="">
 		<slot></slot>
-		<tr v-if="noContent">
+		<tr v-if="!rowCount">
 			<td
 				:colspan="tableContext.columnsCount.value"
 				class="border-x border-b border-light p-5 text-base-normal"
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import {useSlots, computed, inject} from 'vue';
+import {useSlots, computed, inject, provide, ref} from 'vue';
 import {useLocalize} from '@/composables/useLocalize';
 
 const props = defineProps({
@@ -25,12 +25,18 @@ const slots = useSlots();
 const {t} = useLocalize();
 
 const tableContext = inject('tableContext');
+const rowCount = ref(0);
 
-const noContent = computed(() => {
-	const defaultSlot = slots.default ? slots.default() : [];
+const registerRow = () => {
+	rowCount.value++;
+};
 
-	return !defaultSlot?.[0]?.children?.length && !defaultSlot?.[0]?.type?.render;
-});
+const unregisterRow = () => {
+	rowCount.value--;
+};
+
+provide('registerRow', registerRow);
+provide('unregisterRow', unregisterRow);
 
 const emptyText = computed(() => {
 	return props.emptyText || t('grid.noItems');
diff --git a/src/components/Table/TableColumn.vue b/src/components/Table/TableColumn.vue
index c508305f0..25cbff750 100644
--- a/src/components/Table/TableColumn.vue
+++ b/src/components/Table/TableColumn.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import {defineProps, inject} from 'vue';
+import {defineProps, inject, onMounted, onUnmounted} from 'vue';
 import Icon from '@/components/Icon/Icon.vue';
 
 const props = defineProps({
@@ -32,5 +32,11 @@ const props = defineProps({
 
 const tableContext = inject('tableContext');
 
-tableContext.columnsCount.value++;
+onMounted(() => {
+	tableContext.columnsCount.value++;
+});
+
+onUnmounted(() => {
+	tableContext.columnsCount.value--;
+});
 </script>
diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue
index 85aeaa151..052c14352 100644
--- a/src/components/Table/TableRow.vue
+++ b/src/components/Table/TableRow.vue
@@ -4,4 +4,20 @@
 	</tr>
 </template>
 
-<script setup></script>
+<script setup>
+import {inject, onMounted, onUnmounted} from 'vue';
+
+// Inject the register and unregister functions from TableBody
+const registerRow = inject('registerRow', null);
+const unregisterRow = inject('unregisterRow', null);
+
+// Register the row when the component is mounted
+onMounted(() => {
+	if (registerRow) registerRow();
+});
+
+// Unregister the row when the component is unmounted
+onUnmounted(() => {
+	if (unregisterRow) unregisterRow();
+});
+</script>