implementing translation and refactor
This commit is contained in:
Geriano
@@ -1,65 +1,196 @@
|
||||
<script setup>
|
||||
import { getCurrentInstance, ref, onMounted } from 'vue';
|
||||
import DashboardLayout from '@/Layouts/DashboardLayout.vue';
|
||||
import Card from '@/Components/Card.vue';
|
||||
import Icon from '@/Components/Icon.vue';
|
||||
import Builder from '@/Components/DataTable/Builder.vue';
|
||||
import Th from '@/Components/DataTable/Th.vue';
|
||||
|
||||
const self = getCurrentInstance()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout title="Login Activity">
|
||||
<DashboardLayout
|
||||
:title="__('login activities')"
|
||||
>
|
||||
<Card class="bg-white dark:bg-gray-700 dark:text-gray-200">
|
||||
<template #header>
|
||||
<div class="flex items-center space-x-2 bg-gray-200 dark:bg-gray-800 p-2">
|
||||
<p class="lowercase first-letter:capitalize font-semibold">login activities</p>
|
||||
<p class="lowercase first-letter:capitalize font-semibold">
|
||||
{{ __('login activities') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<Builder :url="route('api.v1.superuser.activity.login')">
|
||||
<Builder
|
||||
:url="route('api.v1.superuser.activity.login')"
|
||||
>
|
||||
<template #thead="table">
|
||||
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
|
||||
<Th class="border p-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="users.name">name</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="users.username">username</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="login_activities.ip_address">ip address</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="login_activities.browser">browser</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="login_activities.platform">platform</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="login_activities.created_at">at</Th>
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border p-2 text-center"
|
||||
>
|
||||
{{ __('no') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="true"
|
||||
name="users.name"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('name') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="true"
|
||||
name="users.username"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('username') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="true"
|
||||
name="login_activities.ip_address"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('ip address') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="true"
|
||||
name="login_activities.browser"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('browser') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="true"
|
||||
name="login_activities.platform"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('platform') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="true"
|
||||
name="login_activities.created_at"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('at') }}
|
||||
</Th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #tfoot="table">
|
||||
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
|
||||
<Th class="border p-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">ip address</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">browser</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">platform</Th>
|
||||
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">at</Th>
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border p-2 text-center"
|
||||
>
|
||||
{{ __('no') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('name') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('username') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('ip address') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('browser') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('platform') }}
|
||||
</Th>
|
||||
|
||||
<Th
|
||||
:table="table"
|
||||
:sort="false"
|
||||
class="border px-3 py-2 text-center whitespace-nowrap"
|
||||
>
|
||||
{{ __('at') }}
|
||||
</Th>
|
||||
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #tbody="{ data }">
|
||||
<transition-group
|
||||
<TransitionGroup
|
||||
enterActiveClass="transition-all duration-100"
|
||||
leaveActiveClass="transition-all duration-50"
|
||||
enterFromClass="opacity-0 -scale-y-100"
|
||||
leaveToClass="opacity-0 -scale-y-100">
|
||||
<tr v-for="(activity, i) in data" :key="i" class="dark:hover:bg-gray-600 dark:border-gray-800 transition-all duration-300">
|
||||
<td class="px-2 py-1 border border-inherit text-center">{{ i + 1 }}</td>
|
||||
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.name }}</td>
|
||||
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.username }}</td>
|
||||
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.ip_address }}</td>
|
||||
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.browser }}</td>
|
||||
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.platform }}</td>
|
||||
<td class="px-2 py-1 border border-inherit uppercase">{{ new Date(activity.created_at).toLocaleString('id') }}</td>
|
||||
leaveToClass="opacity-0 -scale-y-100"
|
||||
>
|
||||
<tr
|
||||
v-for="(activity, i) in data"
|
||||
:key="i"
|
||||
class="dark:hover:bg-gray-600 dark:border-gray-800 transition-all duration-300"
|
||||
>
|
||||
<td class="px-2 py-1 border border-inherit text-center">
|
||||
{{ i + 1 }}
|
||||
</td>
|
||||
|
||||
<td class="px-2 py-1 border border-inherit uppercase">
|
||||
{{ activity.name }}
|
||||
</td>
|
||||
|
||||
<td class="px-2 py-1 border border-inherit uppercase">
|
||||
{{ activity.username }}
|
||||
</td>
|
||||
|
||||
<td class="px-2 py-1 border border-inherit uppercase">
|
||||
{{ activity.ip_address }}
|
||||
</td>
|
||||
|
||||
<td class="px-2 py-1 border border-inherit uppercase">
|
||||
{{ __(activity.browser) }}
|
||||
</td>
|
||||
|
||||
<td class="px-2 py-1 border border-inherit uppercase">
|
||||
{{ __(activity.platform) }}
|
||||
</td>
|
||||
|
||||
<td class="px-2 py-1 border border-inherit uppercase">
|
||||
{{ new Date(activity.created_at).toLocaleString('id') }}
|
||||
</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
</Builder>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user