add tanstack table, add clients table

package-lock.json

@@ -10,6 +10,7 @@
                 "@heroicons/vue": "^2.1.1",
                 "@rushstack/eslint-patch": "^1.7.0",
                 "@tailwindcss/container-queries": "^0.1.1",
+                "@tanstack/vue-table": "^8.20.5",
                 "@vue/eslint-config-prettier": "^9.0.0",
                 "@vue/eslint-config-typescript": "^13.0.0",
                 "@vueuse/core": "^10.11.0",
@@ -1663,6 +1664,19 @@
                 "tailwindcss": ">=3.0.0 || insiders"
             }
         },
+        "node_modules/@tanstack/table-core": {
+            "version": "8.20.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
+            "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@tanstack/virtual-core": {
             "version": "3.9.0",
             "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.9.0.tgz",
@@ -1673,6 +1687,25 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
+        "node_modules/@tanstack/vue-table": {
+            "version": "8.20.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.20.5.tgz",
+            "integrity": "sha512-2xixT3BEgSDw+jOSqPt6ylO/eutDI107t2WdFMVYIZZ45UmTHLySqNriNs0+dMaKR56K5z3t+97P6VuVnI2L+Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/table-core": "8.20.5"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2"
+            }
+        },
         "node_modules/@tanstack/vue-virtual": {
             "version": "3.9.0",
             "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.9.0.tgz",

package.json

@@ -38,6 +38,7 @@
         "@heroicons/vue": "^2.1.1",
         "@rushstack/eslint-patch": "^1.7.0",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@tanstack/vue-table": "^8.20.5",
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vueuse/core": "^10.11.0",

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -7,23 +7,28 @@ import {
 import type { Client } from '@/packages/api/src';
 import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
 import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
+import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
+import { ref } from 'vue';
 
 const emit = defineEmits<{
     delete: [];
-    edit: [];
     archive: [];
 }>();
 const props = defineProps<{
     client: Client;
 }>();
+const showEditModal = ref(false);
 </script>
 
 <template>
+    <ClientEditModal
+        :client="client"
+        v-model:show="showEditModal"></ClientEditModal>
     <MoreOptionsDropdown :label="'Actions for Client ' + props.client.name">
         <div class="min-w-[150px]">
             <button
                 v-if="canUpdateClients()"
-                @click="emit('edit')"
+                @click="showEditModal = true"
                 :aria-label="'Edit Client ' + props.client.name"
                 data-testid="client_edit"
                 class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">

resources/js/Components/Common/Client/ClientTable.vue

@@ -1,18 +1,157 @@
 <script setup lang="ts">
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/24/solid';
-import { PlusIcon } from '@heroicons/vue/16/solid';
+import {
-import { type Component, ref } from 'vue';
+    ChevronUpDownIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    PlusIcon,
+} from '@heroicons/vue/16/solid';
+import { type Component, computed, h, ref, watchEffect } from 'vue';
 import { type Client } from '@/packages/api/src';
-import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
-import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
 import { canCreateClients } from '@/utils/permissions';
 
-defineProps<{
+const props = defineProps<{
     clients: Client[];
 }>();
 const createClient = ref(false);
+
+import {
+    FlexRender,
+    getCoreRowModel,
+    useVueTable,
+    createColumnHelper,
+    type SortingState,
+    getSortedRowModel,
+} from '@tanstack/vue-table';
+import { storeToRefs } from 'pinia';
+import { useProjectsStore } from '@/utils/useProjects';
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import TableHeading from '@/Components/Common/TableHeading.vue';
+import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
+import { useClientsStore } from '@/utils/useClients';
+import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
+import TableRow from '@/Components/TableRow.vue';
+import TableCell from '@/Components/TableCell.vue';
+
+const columnHelper = createColumnHelper<Client>();
+const { projects } = storeToRefs(useProjectsStore());
+
+const columns = computed(() => [
+    columnHelper.accessor((row) => row.name, {
+        id: 'name',
+        cell: (info) => info.getValue(),
+        header: () => 'Name',
+    }),
+    columnHelper.accessor((row) => row, {
+        id: 'projects',
+        sortingFn: (a, b) => {
+            return (
+                projects.value.filter(
+                    (projects) => projects.client_id === a.original.id
+                ).length -
+                projects.value.filter(
+                    (projects) => projects.client_id === b.original.id
+                ).length
+            );
+        },
+        cell: (info) =>
+            h('div', {
+                innerHTML:
+                    projects.value.filter(
+                        (projects) => projects.client_id === info.getValue().id
+                    ).length + ' Projects',
+            }),
+        header: () => 'Projects',
+    }),
+    columnHelper.accessor((row) => row, {
+        id: 'status',
+        enableSorting: false,
+        cell: (info) =>
+            h(
+                'div',
+                {
+                    class: 'flex space-x-1 items-center',
+                },
+                [
+                    h(CheckCircleIcon, {
+                        class: 'w-5',
+                    }),
+                    h('span', {
+                        innerHTML: info.getValue().is_archived
+                            ? 'Archived'
+                            : 'Active',
+                    }),
+                ]
+            ),
+        header: () => 'Status',
+    }),
+    columnHelper.display({
+        id: 'actions',
+        cell: (info) => {
+            const showEditModal = ref(false);
+            return h(
+                'div',
+                {
+                    class: 'flex space-x-1 items-center',
+                },
+                [
+                    h(ClientEditModal, {
+                        client: info.row.original,
+                        show: showEditModal.value,
+                    }),
+                    h(ClientMoreOptionsDropdown, {
+                        class: 'w-5',
+                        client: info.row.original,
+                        onEdit: () => (showEditModal.value = true),
+                        onArchive: () => {
+                            useClientsStore().updateClient(
+                                info.row.original.id,
+                                {
+                                    ...info.row.original,
+                                    is_archived: !info.row.original.is_archived,
+                                }
+                            );
+                        },
+                        onDelete: () => {
+                            useClientsStore().deleteClient(
+                                info.row.original.id
+                            );
+                        },
+                    }),
+                ]
+            );
+        },
+    }),
+]);
+
+const data = ref(props.clients);
+
+watchEffect(() => {
+    data.value = props.clients;
+});
+
+const table = useVueTable({
+    get data() {
+        return data.value;
+    },
+    onSortingChange: (updaterOrValue) => {
+        sorting.value =
+            typeof updaterOrValue === 'function'
+                ? updaterOrValue(sorting.value)
+                : updaterOrValue;
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+        get sorting() {
+            return sorting.value;
+        },
+    },
+    columns: columns.value,
+});
+const sorting = ref<SortingState>([]);
 </script>
 
 <template>
@@ -23,7 +162,43 @@ const createClient = ref(false);
                 data-testid="client_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 200px 80px">
-                <ClientTableHeading></ClientTableHeading>
+                <TableHeading>
+                    <TableCell
+                        v-for="header in table.getHeaderGroups()[0].headers"
+                        :key="header.id"
+                        :class="
+                            header.column.getCanSort()
+                                ? 'cursor-pointer select-none'
+                                : ''
+                        "
+                        @click="
+                            header.column.getToggleSortingHandler()?.($event)
+                        "
+                        :cell="header">
+                        <FlexRender
+                            v-if="!header.isPlaceholder"
+                            :render="header.column.columnDef.header"
+                            :props="header.getContext()" />
+                        <div class="px-1" v-if="header.column.getCanSort()">
+                            <ChevronUpDownIcon
+                                class="h-4 text-text-tertiary"
+                                v-if="
+                                    header.column.getIsSorted() === false
+                                "></ChevronUpDownIcon>
+                            <ChevronDownIcon
+                                class="h-4 text-accent-300"
+                                v-if="
+                                    header.column.getIsSorted() === 'desc'
+                                "></ChevronDownIcon>
+                            <ChevronUpIcon
+                                class="h-4 text-accent-300"
+                                v-if="
+                                    header.column.getIsSorted() === 'asc'
+                                "></ChevronUpIcon>
+                        </div>
+                    </TableCell>
+                </TableHeading>
+
                 <div
                     class="col-span-2 py-24 text-center"
                     v-if="clients.length === 0">
@@ -40,9 +215,16 @@ const createClient = ref(false);
                         >Create your First Client
                     </SecondaryButton>
                 </div>
-                <template v-for="client in clients" :key="client.id">
+                <TableRow v-for="row in table.getRowModel().rows" :key="row.id">
-                    <ClientTableRow :client="client"></ClientTableRow>
+                    <TableCell
-                </template>
+                        v-for="cell in row.getVisibleCells()"
+                        :key="cell.id"
+                        :cell="cell">
+                        <FlexRender
+                            :render="cell.column.columnDef.cell"
+                            :props="cell.getContext()" />
+                    </TableCell>
+                </TableRow>
             </div>
         </div>
     </div>

resources/js/Components/Common/Client/ClientTableRow.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import type { Client } from '@/packages/api/src';
-import { computed, ref } from 'vue';
-import { CheckCircleIcon } from '@heroicons/vue/20/solid';
-import { useClientsStore } from '@/utils/useClients';
-import { storeToRefs } from 'pinia';
-import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
-import { useProjectsStore } from '@/utils/useProjects';
-import TableRow from '@/Components/TableRow.vue';
-import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
-
-const { projects } = storeToRefs(useProjectsStore());
-
-const props = defineProps<{
-    client: Client;
-}>();
-
-function deleteClient() {
-    useClientsStore().deleteClient(props.client.id);
-}
-
-const projectCount = computed(() => {
-    return projects.value.filter(
-        (projects) => projects.client_id === props.client.id
-    ).length;
-});
-
-function archiveClient() {
-    useClientsStore().updateClient(props.client.id, {
-        ...props.client,
-        is_archived: !props.client.is_archived,
-    });
-}
-
-const showEditModal = ref(false);
-</script>
-
-<template>
-    <TableRow>
-        <ClientEditModal
-            :client="client"
-            v-model:show="showEditModal"></ClientEditModal>
-        <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
-            <span>
-                {{ client.name }}
-            </span>
-        </div>
-        <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
-            <span class="text-muted"> {{ projectCount }} Projects </span>
-        </div>
-        <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
-            <CheckCircleIcon class="w-5"></CheckCircleIcon>
-            <span>Active</span>
-        </div>
-        <div
-            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
-            <ClientMoreOptionsDropdown
-                :client="client"
-                @edit="showEditModal = true"
-                @archive="archiveClient"
-                @delete="deleteClient"></ClientMoreOptionsDropdown>
-        </div>
-    </TableRow>
-</template>
-
-<style scoped></style>

resources/js/Components/Common/TableHeading.vue

@@ -2,7 +2,7 @@
 
 <template>
     <div
-        class="contents [&>*]:border-row-separator text-xs sm:text-sm [&>*]:border-b [&>*]:border-t [&>*]:bg-row-heading-background">
+        class="contents [&>*]:border-row-separator text-xs sm:text-sm [&>*]:border-b [&>*]:py-1 [&>*]:border-t [&>*]:bg-row-heading-background">
         <slot></slot>
     </div>
 </template>

resources/js/Components/TableCell.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts" generic="T">
+import { twMerge } from 'tailwind-merge';
+import type { Cell, Header } from '@tanstack/vue-table';
+
+defineProps<{
+    cell: Cell<T, unknown> | Header<T, unknown>;
+}>();
+</script>
+
+<template>
+    <div
+        :class="
+            twMerge(
+                'whitespace-nowrap px-3 py-0.5 text-sm text-muted flex space-x-1 items-center font-medium',
+                cell.column.getIndex() === 0 &&
+                    'pl-4 sm:pl-6 lg:pl-8 3xl:pl-12',
+                cell.column.getIndex() ===
+                    cell.getContext().table.getAllColumns().length - 1 &&
+                    'pr-4 sm:pr-6 lg:pr-8 3xl:pr-12'
+            )
+        ">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped></style>