jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementing processing and empty state

Browse Source
This commit is contained in:
Geriano
2022-07-29 18:11:49 +07:00
parent 70d5a1b8f1
commit 7036092af9
2 changed files with 125 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/Pages/Superuser/Role/Index.vue
View File

@@ -114,24 +114,33 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<div class="flex flex-col space-y-2">
<Builder :url="route('api.v1.superuser.role.paginate')">
<template v-slot:thead="table">
<tr class="bg-gray-200 dark:bg-gray-800">
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="name">name</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
<Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="name">name</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
</tr>
</template>
<template v-slot:tfoot="table">
<tr class="bg-gray-200 dark:bg-gray-800">
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
<Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
</tr>
</template>
<template v-slot:tbody="{ data, refresh }">
<template v-slot:tbody="{ data, processing, empty, refresh }">
<template v-if="processing">
<tr v-for="i in Array(5).fill(0)" :key="i">
<td class="text-5xl text-center p-2" colspan="1000">
<div class="lowercase first-letter:capitalize font-semibold dark:bg-gray-800 animate-pulse p-5 rounded-md"></div>
</td>
</tr>
</template>
<template v-else>
<tr v-for="(role, i) in (tableRefresh = refresh) ? data : data" :key="i">
<td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
<td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td>
@@ -164,8 +173,9 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</div>
</td>
</tr>
</template>
<tr v-if="!data?.length">
<tr v-if="empty">
<td class="text-5xl text-center p-4" colspan="1000">
<p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
</td>

60
resources/js/Pages/Superuser/User/Index.vue
View File

@@ -141,37 +141,46 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<div class="flex flex-col space-y-2">
<Builder :url="route('api.v1.superuser.user.paginate')">
<template v-slot:thead="table">
<tr class="bg-gray-200 dark:bg-gray-800">
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="name">name</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="username">username</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="email">email</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">roles</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="email_verified_at">verified at</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="created_at">created at</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="updated_at">updated at</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
<Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="name">name</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="username">username</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="email">email</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">roles</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="email_verified_at">verified at</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="created_at">created at</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="updated_at">updated at</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
</tr>
</template>
<template v-slot:tfoot="table">
<tr class="bg-gray-200 dark:bg-gray-800">
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">username</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">email</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">roles</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">verified at</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">created at</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">updated at</Th>
<Th class="border border-gray-300 dark:border-gray-900 px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
<Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">username</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">email</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">permissions</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">roles</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">verified at</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">created at</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">updated at</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">action</Th>
</tr>
</template>
<template v-slot:tbody="{ data, refresh }">
<tr v-for="(user, i) in (tableRefresh = refresh) ? data : data" :key="i">
<template v-slot:tbody="{ data, processing, empty, refresh }">
<template v-if="processing">
<tr v-for="i in Array(5).fill(0)" :key="i">
<td class="text-5xl text-center p-2" colspan="1000">
<div class="lowercase first-letter:capitalize font-semibold dark:bg-gray-800 animate-pulse p-5 rounded-md"></div>
</td>
</tr>
</template>
<template v-else>
<tr v-for="(user, i) in (tableRefresh = refresh) ? data : data" :key="i" class="dark:hover:bg-gray-600 transition-all">
<td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
<td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.name }}</td>
<td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.username }}</td>
@@ -219,8 +228,9 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</div>
</td>
</tr>
</template>
<tr v-if="!data?.length">
<tr v-if="empty">
<td class="text-5xl text-center p-4" colspan="1000">
<p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
</td>