add datatable support across all index pages

- still have yet to test what blog index products

package.json

@@ -27,7 +27,7 @@
         "@alpinejs/intersect": "^3.13.7",
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
-        "@sethsharp/ui": "1.0.0-alpha.2.0.47",
+        "@sethsharp/ui": "1.0.0-alpha.2.0.48",
         "@tiptap/extension-bubble-menu": "^2.2.1",
         "@tiptap/extension-code-block-lowlight": "^2.2.4",
         "@tiptap/extension-document": "^2.2.1",

resources/js/Pages/Dashboard/Blogs/Index.vue

@@ -1,9 +1,16 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { router, Link } from '@inertiajs/vue3'
-import { SecondaryButton, PrimaryButton, Text } from '@sethsharp/ui'
+import { SecondaryButton, PrimaryButton, Text, Datatable, Dropdown } from '@sethsharp/ui'
 import Blog from '@/Components/Cards/Blog.vue'
 import IndexBlogsLayout from '@/Layouts/IndexBlogsLayout.vue'
+import {
+    ArrowLeftStartOnRectangleIcon,
+    EyeIcon,
+    PencilSquareIcon,
+    TrashIcon,
+} from '@heroicons/vue/16/solid/index.js'
+import { getBlogCoverImage } from '@/Helpers/helpers.js'
 
 const props = defineProps({
     blogs: Object,
@@ -28,6 +35,54 @@ const visitSearch = () => {
     )
 }
 
+const dataTableConfig = computed(() => ({
+    headers: [
+        {
+            value: 'cover',
+            name: 'Cover',
+        },
+        {
+            value: 'title',
+            name: 'Title',
+        },
+        {
+            value: 'meta_description',
+            name: 'Meta Description',
+        },
+        {
+            value: 'created_at',
+            name: 'Created At',
+        },
+        {
+            value: 'updated_at',
+            name: 'Updated At',
+        },
+        {
+            value: 'deleted_at',
+            name: 'Deleted At',
+        },
+    ],
+    rows: props.allCollections,
+}))
+
+const deleteBlog = (blog) => {
+    router.delete(route('dashboard.blogs.delete', blog), {
+        onBefore: () => confirm('Are you sure you want to delete this blog?'),
+    })
+}
+
+const restoreBlog = (blog) => {
+    router.put(
+        route('dashboard.blogs.restore'),
+        {
+            blog_id: blog,
+        },
+        {
+            onBefore: () => confirm('Are you sure you want to restore this blog?'),
+        }
+    )
+}
+
 watch(search, (newSearch) => {
     if (!newSearch) {
         visitSearch()
@@ -53,6 +108,76 @@ onMounted(() => {
             <Blog v-for="blog in blogs.data" :blog="blog" />
         </div>
 
+        <Datatable v-bind="dataTableConfig">
+            <template #cell_cover="{ item }">
+                <div class="sm:w-1/2 p-4">
+                    <img
+                        :src="getBlogCoverImage(item.cover)"
+                        alt="Blog cover image"
+                        class="rounded-lg h-full object-cover object-left max-h-64 mx-auto aspect-square"
+                    />
+                </div>
+            </template>
+
+            <template #cell_deleted_at="{ item }">
+                <div v-if="item">
+                    {{ item }}
+                </div>
+            </template>
+
+            <template #row-actions="{ item }">
+                <Dropdown>
+                    <template #trigger>
+                        <SecondaryButton> Actions </SecondaryButton>
+                    </template>
+
+                    <template #trigger>
+                        <div
+                            v-if="!item.deleted_at"
+                            class="text-center bg-white hover:bg-gray-100 transition size-10 rounded-lg"
+                        >
+                            <Link :href="route('dashboard.blogs.edit', item)" class="size-full">
+                                <PencilSquareIcon
+                                    class="text-gray-500 hover:text-gray-700 transition p-1"
+                                />
+                            </Link>
+                        </div>
+
+                        <div
+                            v-if="!item.deleted_at"
+                            class="text-center bg-white hover:bg-gray-100 transition size-10 rounded-lg"
+                        >
+                            <a :href="route('blogs.show', item)" class="size-full">
+                                <EyeIcon class="text-gray-500 hover:text-gray-700 transition p-1" />
+                            </a>
+                        </div>
+
+                        <div
+                            v-if="!item.deleted_at"
+                            class="text-center bg-white hover:bg-gray-100 transition size-10 rounded-lg"
+                        >
+                            <button @click.prevent="deleteBlog(item)" class="size-full">
+                                <TrashIcon
+                                    class="text-gray-500 hover:text-gray-700 transition p-1"
+                                />
+                            </button>
+                        </div>
+
+                        <div
+                            v-else
+                            class="text-center bg-white hover:bg-gray-100 transition size-10 rounded-lg"
+                        >
+                            <button @click.prevent="restoreBlog(item)" class="size-full">
+                                <ArrowLeftStartOnRectangleIcon
+                                    class="text-gray-500 hover:text-gray-700 transition p-1"
+                                />
+                            </button>
+                        </div>
+                    </template>
+                </Dropdown>
+            </template>
+        </Datatable>
+
         <div v-else class="mt-6 flex justify-center align-middle">
             <div class="text-center">
                 <h3 class="text-gray-400 text-md sm:text-xl">

resources/js/Pages/Dashboard/Collection/Index.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref } from 'vue'
-import { Modal, PrimaryButton } from '@sethsharp/ui'
+import { computed, ref } from 'vue'
+import { Datatable, Modal, PrimaryButton, SecondaryButton } from '@sethsharp/ui'
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
 import CreateEditCollectionForm from '@/Components/Collection/CreateEditCollectionForm.vue'
 
-defineProps({
+const props = defineProps({
     allCollections: Array,
 })
 
@@ -15,6 +15,24 @@ const manageCollection = (collection) => {
     currentCollection.value = collection
     open.value = true
 }
+
+const dataTableConfig = computed(() => ({
+    headers: [
+        {
+            value: 'title',
+            name: 'Title',
+        },
+        {
+            value: 'description',
+            name: 'Description',
+        },
+        {
+            value: 'created_at',
+            name: 'Created At',
+        },
+    ],
+    rows: props.allCollections,
+}))
 </script>
 
 <template>
@@ -25,19 +43,16 @@ const manageCollection = (collection) => {
             </PrimaryButton>
         </div>
 
-        <div
-            v-if="allCollections.length > 0"
-            class="grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-4 gap-x-4 mt-6"
-        >
-            <button
-                @click="manageCollection(collection)"
-                v-for="collection in allCollections"
-                :key="collection.id"
-                class="rounded-2xl bg-white hover:bg-gray-50 shadow-md p-4 dark:bg-gray-600 dark:hover:bg-gray-800 transition"
-            >
-                {{ collection.title }}
-            </button>
-        </div>
+        <Datatable v-if="allCollections.length" v-bind="dataTableConfig">
+            <template #cell-created_at="{ item }">
+                {{ new Date(item).toDateString() }}
+            </template>
+
+            <template #row-actions="{ item }">
+                <SecondaryButton @click="manageCollection(item)"> Edit </SecondaryButton>
+            </template>
+        </Datatable>
+
         <div v-else class="flex justify-center align-middle">
             <div class="text-center">
                 <h3 class="text-gray-400 text-md sm:text-xl">There are currently no collections</h3>

resources/js/Pages/Dashboard/Tags/Index.vue

@@ -44,15 +44,15 @@ const dataTableConfig = computed(() => ({
             </div>
         </template>
 
-        <Datatable v-if="tags.data.length" v-bind="dataTableConfig" row-actions>
-            <template #cell-created_at="{ item }">
-                {{ new Date(item).toDateString() }}
-            </template>
-
+        <Datatable v-if="tags.data.length" v-bind="dataTableConfig">
             <template #cell-name="{ item }">
                 {{ item }}
             </template>
 
+            <template #cell-created_at="{ item }">
+                {{ new Date(item).toDateString() }}
+            </template>
+
             <template #row-actions="{ item }">
                 <SecondaryButton @click="openModal(item)"> Edit </SecondaryButton>
             </template>