Skip to content

Commit

Permalink
improve DT
Browse files Browse the repository at this point in the history
  • Loading branch information
@SethSharp
SethSharp committed Aug 29, 2024
1 parent d9b710d commit 86c175f
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 155 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.48",
"@sethsharp/ui": "1.0.0-alpha.2.0.49",
"@tiptap/extension-bubble-menu": "^2.2.1",
"@tiptap/extension-code-block-lowlight": "^2.2.4",
"@tiptap/extension-document": "^2.2.1",
Expand Down
103 changes: 0 additions & 103 deletions resources/js/Components/Cards/Blog.vue
View file

This file was deleted.

12 changes: 11 additions & 1 deletion resources/js/Helpers/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,14 @@ const getBlogCoverImage = (cover) => {
return placeholderCover
}

export { getBlogCoverImage }
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
}

export { getBlogCoverImage, formatDate }
104 changes: 63 additions & 41 deletions resources/js/Pages/Dashboard/Blogs/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { router, Link } from '@inertiajs/vue3'
import { SecondaryButton, PrimaryButton, Text, Datatable, Dropdown } from '@sethsharp/ui'
import Blog from '@/Components/Cards/Blog.vue'
import {
SecondaryButton,
PrimaryButton,
Text,
Datatable,
Dropdown,
BaseDropdownMenuItem,
} from '@sethsharp/ui'
import IndexBlogsLayout from '@/Layouts/IndexBlogsLayout.vue'
import {
ArrowLeftStartOnRectangleIcon,
EyeIcon,
PencilSquareIcon,
TrashIcon,
} from '@heroicons/vue/16/solid/index.js'
import { getBlogCoverImage } from '@/Helpers/helpers.js'
import { formatDate, getBlogCoverImage } from '@/Helpers/helpers.js'
const props = defineProps({
blogs: Object,
Expand Down Expand Up @@ -62,7 +68,7 @@ const dataTableConfig = computed(() => ({
name: 'Deleted At',
},
],
rows: props.allCollections,
rows: props.blogs.data,
}))
const deleteBlog = (blog) => {
Expand Down Expand Up @@ -104,24 +110,28 @@ onMounted(() => {
</div>
</div>
<div v-if="blogs.data.length > 0" class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mt-6">
<Blog v-for="blog in blogs.data" :blog="blog" />
</div>
<Datatable v-bind="dataTableConfig">
<Datatable v-if="blogs.data.length" v-bind="dataTableConfig">
<template #cell_cover="{ item }">
<div class="sm:w-1/2 p-4">
<img
:src="getBlogCoverImage(item.cover)"
:src="getBlogCoverImage(item)"
alt="Blog cover image"
class="rounded-lg h-full object-cover object-left max-h-64 mx-auto aspect-square"
/>
</div>
</template>
<template #cell_created_at="{ item }">
{{ formatDate(item) }}
</template>
<template #cell_updated_at="{ item }">
{{ formatDate(item) }}
</template>
<template #cell_deleted_at="{ item }">
<div v-if="item">
{{ item }}
{{ formatDate(item) }}
</div>
</template>
Expand All @@ -131,48 +141,60 @@ onMounted(() => {
<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">
<template #content>
<BaseDropdownMenuItem v-if="!item.deleted_at">
<Link
:href="route('dashboard.blogs.edit', item)"
class="justify-center flex size-full"
>
<PencilSquareIcon
class="text-gray-500 hover:text-gray-700 transition p-1"
class="text-gray-500 dark:text-slate-300 transition size-7"
/>
<span class="my-auto text-gray-600 dark:text-slate-300"> Edit</span>
</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" />
</BaseDropdownMenuItem>
<BaseDropdownMenuItem v-if="!item.deleted_at">
<a
:href="route('blogs.show', item)"
class="justify-center flex size-full"
>
<EyeIcon
class="text-gray-500 dark:text-slate-300 transition size-7"
/>
<span class="my-auto text-gray-600 dark:text-slate-300">
View
</span>
</a>
</div>
</BaseDropdownMenuItem>
<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">
<BaseDropdownMenuItem v-if="!item.deleted_at">
<button
@click.prevent="deleteBlog(item)"
class="justify-center flex size-full"
>
<TrashIcon
class="text-gray-500 hover:text-gray-700 transition p-1"
class="text-gray-500 dark:text-slate-300 transition size-7"
/>
<span class="my-auto text-gray-600 dark:text-slate-300">
Delete
</span>
</button>
</div>
</BaseDropdownMenuItem>
<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">
<BaseDropdownMenuItem v-else>
<button
@click.prevent="restoreBlog(item)"
class="justify-center flex size-full"
>
<ArrowLeftStartOnRectangleIcon
class="text-gray-500 hover:text-gray-700 transition p-1"
class="text-gray-500 dark:text-slate-300 transition size-7"
/>
<span class="my-auto text-gray-600 dark:text-slate-300">
Restore
</span>
</button>
</div>
</BaseDropdownMenuItem>
</template>
</Dropdown>
</template>
Expand Down
5 changes: 3 additions & 2 deletions resources/js/Pages/Dashboard/Collection/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { computed, ref } from 'vue'
import { Datatable, Modal, PrimaryButton, SecondaryButton } from '@sethsharp/ui'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { formatDate, getBlogCoverImage } from '@/Helpers/helpers.js'
import CreateEditCollectionForm from '@/Components/Collection/CreateEditCollectionForm.vue'
const props = defineProps({
Expand Down Expand Up @@ -44,8 +45,8 @@ const dataTableConfig = computed(() => ({
</div>

<Datatable v-if="allCollections.length" v-bind="dataTableConfig">
<template #cell-created_at="{ item }">
{{ new Date(item).toDateString() }}
<template #cell_created_at="{ item }">
{{ formatDate(item) }}
</template>

<template #row-actions="{ item }">
Expand Down
7 changes: 4 additions & 3 deletions resources/js/Pages/Dashboard/Tags/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup>
import { computed, ref } from 'vue'
import { Modal, PrimaryButton, SecondaryButton, Datatable } from '@sethsharp/ui'
import { formatDate } from '@/Helpers/helpers.js'
import IndexTagsLayout from '@/Layouts/IndexTagsLayout.vue'
import CreateEditTagForm from '@/Components/Tags/CreateEditTagForm.vue'
Expand Down Expand Up @@ -45,12 +46,12 @@ const dataTableConfig = computed(() => ({
</template>

<Datatable v-if="tags.data.length" v-bind="dataTableConfig">
<template #cell-name="{ item }">
<template #cell_name="{ item }">
{{ item }}
</template>

<template #cell-created_at="{ item }">
{{ new Date(item).toDateString() }}
<template #cell_created_at="{ item }">
{{ formatDate(item) }}
</template>

<template #row-actions="{ item }">
Expand Down

0 comments on commit 86c175f

Please sign in to comment.