From dacf0c1e8b9a2dae6baf67712854cc587aeaa31b Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Tue, 5 Mar 2024 17:47:45 +0530
Subject: [PATCH] feat: sort, pagination, spinner and checkbox added to table
 component (#5)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
---
 src/components/smart/Table.vue | 309 ++++++++++++++++++++++++++++-----
 src/stories/Table.story.vue    | 185 ++++++++++++++++----
 2 files changed, 414 insertions(+), 80 deletions(-)

diff --git a/src/components/smart/Table.vue b/src/components/smart/Table.vue
index 966b7e7..19770a9 100644
--- a/src/components/smart/Table.vue
+++ b/src/components/smart/Table.vue
@@ -1,69 +1,288 @@
 <template>
-  <div class="overflow-auto border shadow-md rounded-md border-dividerDark">
-    <table class="w-full">
-      <thead>
-        <slot name="head">
+  <div class="flex flex-1 flex-col">
+    <div v-if="pagination" class="mb-3 flex items-center justify-end">
+      <HoppButtonSecondary
+        outline
+        filled
+        :icon="IconLeft"
+        :disabled="page === 1"
+        @click="changePage(PageDirection.Previous)"
+      />
+
+      <span class="flex h-full w-10 items-center justify-center">{{
+        page
+      }}</span>
+
+      <HoppButtonSecondary
+        outline
+        filled
+        :icon="IconRight"
+        :disabled="page === pagination.totalPages"
+        @click="changePage(PageDirection.Next)"
+      />
+    </div>
+
+    <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
+      <!-- An Extension Slot to extend the table functionality such as search   -->
+      <slot name="extension"></slot>
+
+      <table class="w-full table-fixed">
+        <thead>
           <tr
-            class="text-sm text-left border-b border-dividerDark bg-primaryLight text-secondary"
+            class="border-b border-dividerDark bg-primaryLight text-left text-sm text-secondary"
           >
-            <th v-for="th in headings" scope="col" class="px-6 py-3">
-              {{ th.label ?? th.key }}
+            <th v-if="selectedRows" class="w-24">
+              <input
+                ref="selectAllCheckbox"
+                type="checkbox"
+                :checked="areAllRowsSelected"
+                :disabled="loading"
+                class="flex h-full w-full items-center justify-center"
+                @click.stop="toggleAllRows"
+              />
             </th>
+            <slot name="head">
+              <th
+                v-for="th in headings"
+                :key="th.key"
+                scope="col"
+                class="px-6 py-3"
+              >
+                {{ th.label ?? th.key }}
+              </th>
+            </slot>
           </tr>
-        </slot>
-      </thead>
+        </thead>
 
-      <tbody class="divide-y divide-divider">
-        <!-- We are using slot props for future proofing so that in future, we can implement features like filtering -->
-        <slot name="body" :list="list">
-          <tr
-            v-for="(rowData, rowIndex) in list"
-            :key="rowIndex"
-            class="rounded-xl text-secondaryDark hover:cursor-pointer hover:bg-divider"
-            :class="{ 'divide-x divide-divider': showYBorder }"
-          >
-            <td
-              v-for="cellHeading in headings"
-              :key="cellHeading.key"
-              @click="!cellHeading.preventClick && onRowClicked(rowData)"
-              class="max-w-[10rem] py-1 pl-6"
-            >
-              <!-- Dynamic column slot -->
-              <slot :name="cellHeading.key" :item="rowData">
-                <!-- Generic implementation of the column -->
-                <div class="flex flex-col truncate">
-                  <span class="truncate">
-                    {{ rowData[cellHeading.key] ?? "-" }}
-                  </span>
+        <tbody class="divide-y divide-divider">
+          <tr v-if="loading">
+            <slot name="loading-state">
+              <td :colspan="columnSpan">
+                <div class="mx-auto my-3 h-5 w-5 text-center">
+                  <HoppSmartSpinner />
                 </div>
-              </slot>
-            </td>
+              </td>
+            </slot>
+          </tr>
+
+          <tr v-else-if="!list.length">
+            <slot name="empty-state">
+              <td :colspan="columnSpan" class="py-3 text-center">
+                <p>No data available</p>
+              </td>
+            </slot>
           </tr>
-        </slot>
-      </tbody>
-    </table>
+
+          <template v-else>
+            <tr
+              v-for="(rowData, rowIndex) in workingList"
+              :key="rowIndex"
+              class="rounded-xl text-secondaryDark hover:cursor-pointer hover:bg-divider"
+              :class="{ 'divide-x divide-divider': showYBorder }"
+              @click="onRowClicked(rowData)"
+            >
+              <td v-if="selectedRows">
+                <input
+                  type="checkbox"
+                  :checked="isRowSelected(rowData)"
+                  class="flex h-full w-full items-center justify-center"
+                  @click.stop="toggleRow(rowData)"
+                />
+              </td>
+              <slot name="body" :row="rowData">
+                <td
+                  v-for="cellHeading in headings"
+                  :key="cellHeading.key"
+                  class="px-4 py-2"
+                  @click="!cellHeading.preventClick && onRowClicked(rowData)"
+                >
+                  <!-- Dynamic column slot -->
+                  <slot :name="cellHeading.key" :item="rowData">
+                    <!-- Generic implementation of the column -->
+                    <div class="flex flex-col truncate">
+                      <span class="truncate">
+                        {{ rowData[cellHeading.key] ?? "-" }}
+                      </span>
+                    </div>
+                  </slot>
+                </td>
+              </slot>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
-<script lang="ts" setup generic="Item extends Record<string, unknown>">
+<script lang="ts" setup>
+import { useVModel } from "@vueuse/core"
+import { isEqual } from "lodash-es"
+import { computed, ref, watch } from "vue"
+
+import IconLeft from "~icons/lucide/arrow-left"
+import IconRight from "~icons/lucide/arrow-right"
+
+import { HoppSmartSpinner } from ".."
+import { HoppButtonSecondary } from "../button"
+
 export type CellHeading = {
   key: string
   label?: string
   preventClick?: boolean
 }
 
-defineProps<{
-  /** Whether to show the vertical border between columns */
-  showYBorder?: boolean
-  /**  The list of items to be displayed in the table */
-  list?: Item[]
-  /** The headings of the table */
-  headings?: CellHeading[]
-}>()
+export type Item = Record<string, unknown>
+
+const props = withDefaults(
+  defineProps<{
+    /** Whether to show the vertical border between columns */
+    showYBorder?: boolean
+    /**  The list of items to be displayed in the table */
+    list: Item[]
+    /** The headings of the table */
+    headings?: CellHeading[]
+
+    selectedRows?: Item[]
+    /** Whether to enable sorting */
+    sort?: {
+      /** The key to sort the list by */
+      key: string
+      direction: Direction
+    }
+
+    /** Whether to enable pagination */
+    pagination?: {
+      totalPages: number
+    }
+
+    /** Whether to show a loading spinner */
+    loading?: boolean
+  }>(),
+  {
+    showYBorder: false,
+    sort: undefined,
+    selectedRows: undefined,
+    loading: false,
+  },
+)
 
 const emit = defineEmits<{
   (event: "onRowClicked", item: Item): void
+  (event: "update:list", list: Item[]): void
+  (event: "update:selectedRows", selectedRows: Item[]): void
+  (event: "pageNumber", page: number): void
 }>()
 
+// Pagination functionality
+const page = ref(1)
+
+enum PageDirection {
+  Previous,
+  Next,
+}
+
+const changePage = (direction: PageDirection) => {
+  const isPrevious = direction === PageDirection.Previous
+
+  const isValidPreviousAction = isPrevious && page.value > 1
+  const isValidNextAction =
+    !isPrevious && page.value < props.pagination!.totalPages
+
+  if (isValidNextAction || isValidPreviousAction) {
+    page.value += isPrevious ? -1 : 1
+
+    emit("pageNumber", page.value)
+  }
+}
+
+// The working version of the list that is used to perform operations upon
+const workingList = useVModel(props, "list", emit)
+
+// Checkbox functionality
+const selectedRows = useVModel(props, "selectedRows", emit)
+
+watch(workingList.value, (updatedList) => {
+  if (props.selectedRows) {
+    updatedList = updatedList.map((item) => ({
+      ...item,
+      selected: false,
+    }))
+  }
+})
+
 const onRowClicked = (item: Item) => emit("onRowClicked", item)
+
+const isRowSelected = (item: Item) => {
+  const { selected, ...data } = item
+  return selectedRows.value?.some((row) => isEqual(row, data))
+}
+
+const toggleRow = (item: Item) => {
+  item.selected = !item.selected
+  const { selected, ...data } = item
+
+  const index = selectedRows.value?.findIndex((row) => isEqual(row, data)) ?? -1
+
+  if (item.selected && !isRowSelected(data)) {
+    selectedRows.value!.push(data)
+  } else if (index !== -1) {
+    selectedRows.value?.splice(index, 1)
+  }
+}
+
+const selectAllCheckbox = ref<HTMLInputElement | null>(null)
+
+const toggleAllRows = () => {
+  const isChecked = selectAllCheckbox.value?.checked
+  workingList.value.forEach((item) => {
+    item.selected = isChecked
+    const { selected, ...data } = item
+    if (isChecked) {
+      if (!isRowSelected(item)) {
+        selectedRows.value!.push(data)
+      }
+      return
+    }
+    const index =
+      selectedRows.value?.findIndex((row) => isEqual(row, data)) ?? -1
+    selectedRows.value!.splice(index, 1)
+  })
+}
+
+const areAllRowsSelected = computed(() => {
+  if (workingList.value.length === 0 || selectedRows.value?.length === 0)
+    return false
+  return workingList.value.every((item) => {
+    const { selected, ...data } = item
+    return selectedRows.value?.some((row) => isEqual(row, data))
+  })
+})
+
+// Sort List by key and direction which can set to ascending or descending
+export type Direction = "ascending" | "descending"
+
+const sortList = (key: string, direction: Direction) => {
+  workingList.value.sort((a, b) => {
+    const valueA = a[key] as string
+    const valueB = b[key] as string
+    return direction === "ascending"
+      ? valueA.localeCompare(valueB)
+      : valueB.localeCompare(valueA)
+  })
+}
+
+watch(
+  () => props.sort?.direction,
+  () => {
+    if (props.sort) {
+      sortList(props.sort.key, props.sort.direction)
+    }
+  },
+  { immediate: true },
+)
+
+const columnSpan = computed(
+  () => (props.headings?.length ?? 0) + (props.selectedRows ? 1 : 0),
+)
 </script>
diff --git a/src/stories/Table.story.vue b/src/stories/Table.story.vue
index 8fc8957..cc9721b 100644
--- a/src/stories/Table.story.vue
+++ b/src/stories/Table.story.vue
@@ -1,39 +1,85 @@
 <template>
   <Story title="Table">
     <Variant title="General">
-      <HoppSmartTable :list="list" :headings="headings" />
+      <HoppSmartTable
+        :headings="headings"
+        :loading="loading"
+        :list="finalList"
+        :selected-rows="selectedRows"
+        :pagination="{ totalPages: 2 }"
+        @page-number="handlePageChange"
+      >
+      </HoppSmartTable>
     </Variant>
+
+    <!-- Custom implementation of the Table -->
     <Variant title="Custom">
-      <HoppSmartTable>
+      <HoppSmartTable :loading="loading" :list="finalList">
         <template #head>
-          <tr
-            class="text-sm text-left border-b border-dividerDark bg-primaryLight text-secondary"
+          <th
+            v-for="heading in headings"
+            :key="heading.key"
+            scope="col"
+            class="px-6 py-3"
           >
-            <th
-              v-for="heading in headings"
-              :key="heading.key"
-              scope="col"
-              class="px-6 py-3"
-            >
-              {{ heading.label }}
-            </th>
-          </tr>
+            {{ heading.label }}
+          </th>
+        </template>
+
+        <template #loading-state>
+          <td :colspan="headings.length">
+            <div class="mx-auto my-3 h-5 w-5 text-center">
+              <HoppSmartSpinner />
+            </div>
+          </td>
         </template>
 
-        <template #body>
-          <tr
-            v-for="item in list"
-            :key="item.id"
-            class="rounded-xl text-secondaryDark hover:cursor-pointer hover:bg-divider"
+        <template #body="{ row }">
+          <td
+            v-for="cellHeading in headings"
+            :key="cellHeading.key"
+            class="max-w-[10rem] py-1 pl-6"
           >
-            <td
-              v-for="cellHeading in headings"
-              :key="cellHeading.key"
-              class="max-w-[10rem] py-1 pl-6"
-            >
-              {{ item[cellHeading.key] ?? "-" }}
-            </td>
-          </tr>
+            {{ row[cellHeading.key] ?? "-" }}
+          </td>
+        </template>
+
+        <template #empty-state>
+          <td :colspan="headings.length" class="py-3 text-center">
+            <p>No data available</p>
+          </td>
+        </template>
+      </HoppSmartTable>
+    </Variant>
+
+    <!-- Extending the Table functionality -->
+    <Variant title="Extension">
+      <HoppSmartTable
+        :headings="headings"
+        :loading="loading"
+        :list="extensionList"
+        :selected-rows="selectedRows"
+        :sort="{ key: 'name', direction: sortDirection }"
+        @page-number="handlePageChange"
+      >
+        <template #extension>
+          <div class="flex">
+            <div class="flex w-full items-center bg-primary">
+              <icon-lucide-search class="mx-3 text-xs" />
+              <HoppSmartInput
+                v-model="searchQuery"
+                styles="w-full bg-primary py-1"
+                input-styles="h-full border-none"
+                placeholder="Search.."
+              />
+            </div>
+            <HoppButtonPrimary
+              :icon="IconArrowUpDown"
+              label="Sort"
+              class="rounded-none"
+              @click="toggleSortDirection"
+            />
+          </div>
         </template>
       </HoppSmartTable>
     </Variant>
@@ -41,8 +87,19 @@
 </template>
 
 <script setup lang="ts">
-import { HoppSmartTable } from "../components/smart"
-import { CellHeading } from "~/components/smart/Table.vue"
+import { computed, onMounted, ref, Ref } from "vue"
+
+import { CellHeading, Direction } from "~/components/smart/Table.vue"
+import IconArrowUpDown from "~icons/lucide/arrow-up-down"
+import { HoppButtonPrimary, HoppSmartInput } from ".."
+import { HoppSmartSpinner, HoppSmartTable } from "../components/smart"
+
+type List = {
+  id: string
+  name: string
+  members: number
+  role: string
+}
 
 // Table Headings
 const headings: CellHeading[] = [
@@ -52,18 +109,76 @@ const headings: CellHeading[] = [
   { key: "role", label: "Role" },
 ]
 
-const list: Record<string, string | number>[] = [
+const loading = ref(false)
+
+const finalList = ref<List[]>([])
+const selectedRows = ref<List[]>([])
+
+const primaryList: List[] = [
+  {
+    id: "123456",
+    name: "Walter",
+    members: 12,
+    role: "Chemical Engineer",
+  },
   {
     id: "123455",
-    name: "Joel",
+    name: "Jesse",
     members: 10,
-    role: "Frontend Engineer",
+    role: "Lab Assistant",
+  },
+]
+
+const secondaryList: List[] = [
+  {
+    id: "123457",
+    name: "Gus",
+    members: 20,
+    role: "CEO",
   },
   {
-    id: "123456",
-    name: "Anwar",
-    members: 12,
-    role: "Frontend Engineer",
+    id: "123458",
+    name: "Mike",
+    members: 15,
+    role: "Security",
   },
 ]
+
+onMounted(async () => {
+  loading.value = true
+
+  // Simulate network call
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  finalList.value = primaryList
+  loading.value = false
+})
+
+const handlePageChange = (pageNumber: number) => {
+  if (pageNumber === 1) {
+    finalList.value = primaryList
+  } else {
+    finalList.value = secondaryList
+  }
+}
+
+const sortDirection: Ref<Direction> = ref("ascending")
+
+const toggleSortDirection = () => {
+  sortDirection.value =
+    sortDirection.value === "ascending" ? "descending" : "ascending"
+}
+
+const searchQuery = ref("")
+
+const extensionList = computed(() => {
+  return primaryList.filter((item) => {
+    return Object.values(item).some((value) =>
+      value
+        .toString()
+        .toLowerCase()
+        .includes((searchQuery.value as string).toLowerCase()),
+    )
+  })
+})
 </script>