Skip to content

Commit

Permalink
Clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@andyksaw
andyksaw committed Jan 4, 2025
1 parent 7945e03 commit 8126767
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 63 deletions.
23 changes: 15 additions & 8 deletions resources/js/manage/Components/DataTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,40 +20,47 @@ const slots = useSlots()

<template>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<thead class="text-xs text-gray-500 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th
v-if="showIndex"
scope="col"
class="px-4 py-3"
class="p-4"
>
#
</th>
<th
scope="col"
class="px-4 py-3"
v-for="(field, index) in fields"
:key="index"
scope="col"
class="p-4"
>
{{ field.label }}
</th>
<th
v-if="slots.actions"
scope="col"
class="p-4"
>
Actions
</th>
</tr>
</thead>
<tbody>
<tr
class="border-b dark:border-gray-700"
class="border-b border-gray-50 dark:border-gray-700"
v-for="(row, index) in rows"
:key="index"
>
<td
v-if="showIndex"
class="px-4 py-3 text-gray-400 whitespace-nowrap"
class="p-4 text-gray-300 whitespace-nowrap"
>
#{{ index + 1 }}
</td>

<td
class="px-4 py-3 text-gray-900 whitespace-nowrap dark:text-white"
class="p-4 text-gray-500 whitespace-nowrap dark:text-white"
v-for="field in fields"
>
<template v-if="slots[field.key]">
Expand All @@ -66,7 +73,7 @@ const slots = useSlots()

<td
v-if="slots.actions"
class="px-4 py-3 text-gray-900 whitespace-nowrap dark:text-white"
class="p-4 text-gray-900 whitespace-nowrap dark:text-white"
>
<slot name="actions" :item="row" />
</td>
Expand Down
5 changes: 4 additions & 1 deletion resources/js/manage/Components/InfinitePagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,10 @@ onMounted(() => {
<!-- Invisible element to trigger loading next page -->
<div ref="lastElement" class="-translate-y-32"></div>

<div v-if="reachedEnd" class="text-sm text-gray-400 p-4 text-center">
<div v-if="reachedEnd" class="text-sm text-gray-400 p-4 bg-gray-50 flex gap-2 justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 0 1 3.15 0V15M6.9 7.575a1.575 1.575 0 1 0-3.15 0v8.175a6.75 6.75 0 0 0 6.75 6.75h2.018a5.25 5.25 0 0 0 3.712-1.538l1.732-1.732a5.25 5.25 0 0 0 1.538-3.712l.003-2.024a.668.668 0 0 1 .198-.471 1.575 1.575 0 1 0-2.228-2.228 3.818 3.818 0 0 0-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0 1 16.35 15m.002 0h-.002" />
</svg>
Reached the End
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/manage/Pages/Accounts/AccountList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ watch(
:initial="accounts"
:query="query"
v-slot="source"
class="overflow-x-auto"
class="overflow-x-auto border-t border-gray-200"
>
<AccountListTable
:accounts="source.data"
Expand Down
9 changes: 3 additions & 6 deletions resources/js/manage/Pages/Accounts/Partials/AccountListTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface Props {
const props = defineProps<Props>()
const fields = [
{ key: 'id', label: 'ID' },
{ key: 'account_id', label: 'ID' },
{ key: 'username', label: 'Username' },
{ key: 'email', label: 'Email' },
{ key: 'activated', label: 'Activated' },
Expand All @@ -21,10 +21,7 @@ const fields = [
]
const rows = computed(
() => props.accounts.map((account) => ({
id: account.account_id,
username: account.username,
email: account.email,
activated: account.activated,
...account,
created_at: format(account.created_at),
updated_at: format(account.updated_at),
}))
Expand All @@ -38,7 +35,7 @@ const rows = computed(
</template>
<template #username="{ item }">
<Link
:href="'/manage/accounts/' + item.id"
:href="'/manage/accounts/' + item.account_id"
class="text-blue-500"
>
{{ item.username }}
Expand Down
83 changes: 36 additions & 47 deletions resources/js/manage/Pages/Groups/Partials/GroupListTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,48 @@ import { Link } from '@inertiajs/vue3'
import { Group } from '../../../Data/Group'
import BooleanCheck from '../../../Components/BooleanCheck.vue'
import FilledButton from '../../../Components/FilledButton.vue'
import DataTable from '../../../Components/DataTable.vue'
interface Props {
groups: Group[],
}
defineProps<Props>()
const fields = [
{ key: 'group_id', label: 'ID' },
{ key: 'name', label: 'Name' },
{ key: 'accounts_count', label: 'Accounts' },
{ key: 'alias', label: 'Alias' },
{ key: 'minecraft_name', label: 'Minecraft Name' },
{ key: 'group_type', label: 'Group Type' },
{ key: 'display_priority', label: 'Display Priority' },
{ key: 'is_default', label: 'Is Default?' },
{ key: 'is_admin', label: 'Is Admin?' },
]
</script>

<template>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-4 py-3">Id</th>
<th scope="col" class="px-4 py-3">Name</th>
<th scope="col" class="px-4 py-3">Members</th>
<th scope="col" class="px-4 py-3">Alias</th>
<th scope="col" class="px-4 py-3">Minecraft Name</th>
<th scope="col" class="px-4 py-3">Group Type</th>
<th scope="col" class="px-4 py-3">Display Priority</th>
<th scope="col" class="px-4 py-3">Is Default?</th>
<th scope="col" class="px-4 py-3">Is Admin?</th>
<th scope="col" class="px-4 py-3">Actions</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-gray-700" v-for="group in groups">
<td class="px-4 py-3 text-gray-900 whitespace-nowrap dark:text-white">{{ group.group_id }}</td>
<td class="px-4 py-3 font-bold">{{ group.name }}</td>
<td class="px-4 py-3">
<Link
:href="'/manage/groups/' + group.group_id + '/accounts'"
class="text-blue-500 font-bold"
>
{{ group.accounts_count }}
</Link></td>
<td class="px-4 py-3">{{ group.alias }}</td>
<td class="px-4 py-3">{{ group.minecraft_name }}</td>
<td class="px-4 py-3">{{ group.group_type }}</td>
<td class="px-4 py-3">{{ group.display_priority }}</td>
<td class="px-4 py-3">
<BooleanCheck :value="group.is_default"/>
</td>
<td class="px-4 py-3">
<BooleanCheck :value="group.is_admin"/>
</td>
<td class="px-4 py-1 text-right">
<Link :href="'/manage/groups/' + group.group_id + '/edit'">
<FilledButton variant="secondary">
Edit
</FilledButton>
</Link>
</td>
</tr>
</tbody>
</table>
<DataTable :fields="fields" :rows="groups">
<template #accounts_count="{ item }">
<Link
:href="'/manage/groups/' + item.group_id + '/accounts'"
class="text-blue-500 font-bold"
>
{{ item.accounts_count }}
</Link>
</template>
<template #is_default="{ item }">
<BooleanCheck :value="item.is_default" />
</template>
<template #is_admin="{ item }">
<BooleanCheck :value="item.is_default" />
</template>
<template #actions="{ item }">
<Link :href="'/manage/groups/' + item.group_id + '/edit'">
<FilledButton variant="secondary">
Edit
</FilledButton>
</Link>
</template>
</DataTable>
</template>

0 comments on commit 8126767

Please sign in to comment.