143 lines
4.5 KiB
Vue
143 lines
4.5 KiB
Vue
<template>
|
|
<div>
|
|
<v-data-table-server
|
|
fixed-header
|
|
class="h-full"
|
|
density="compact"
|
|
:headers="dataDefinitions.users"
|
|
:items="users"
|
|
:items-length="pagination.total"
|
|
:loading="reverting"
|
|
v-model:items-per-page="pagination.pageSize"
|
|
@update:options="readUsers"
|
|
item-value="id"
|
|
>
|
|
<template v-slot:top>
|
|
<v-toolbar color="secondary">
|
|
<div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
|
|
<v-btn class="me-2" icon="mdi-account-group" density="compact" :to="{ name: 'admin.dashboard' }" exact />
|
|
<h3 class="ml-2 text-lg font-500">Users</h3>
|
|
</div>
|
|
</v-toolbar>
|
|
</template>
|
|
|
|
<template v-slot:item="{ item }: { item: any }">
|
|
<tr>
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.name }}</td>
|
|
<td>{{ item.nick }}</td>
|
|
<td>{{ new Date(item.created_at).toLocaleString() }}</td>
|
|
<td>
|
|
<v-tooltip text="Details">
|
|
<template #activator="{ props }">
|
|
<v-btn
|
|
v-bind="props"
|
|
variant="text"
|
|
size="x-small"
|
|
color="info"
|
|
icon="mdi-dots-horizontal"
|
|
@click="viewingUser = item"
|
|
/>
|
|
</template>
|
|
</v-tooltip>
|
|
<v-tooltip text="Assign Permissions">
|
|
<template #activator="{ props }">
|
|
<v-btn
|
|
v-bind="props"
|
|
variant="text"
|
|
size="x-small"
|
|
color="teal"
|
|
icon="mdi-code-block-braces"
|
|
@click="assigningPermUser = item"
|
|
/>
|
|
</template>
|
|
</v-tooltip>
|
|
<v-tooltip text="View Auth Factors">
|
|
<template #activator="{ props }">
|
|
<v-btn
|
|
v-bind="props"
|
|
variant="text"
|
|
size="x-small"
|
|
color="warning"
|
|
icon="mdi-lock"
|
|
@click="viewingFactorUser = item"
|
|
/>
|
|
</template>
|
|
</v-tooltip>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table-server>
|
|
|
|
<user-detail-panel :data="viewingUser" @close="viewingUser = null" />
|
|
<user-assign-perms-panel :data="assigningPermUser" @close="assigningPermUser = null"
|
|
@success="readUsers(pagination)"
|
|
@error="(val: string) => error = val" />
|
|
<user-factor-panel :data="viewingFactorUser" @close="viewingFactorUser = null"
|
|
@error="(val: string) => error = val" />
|
|
|
|
<v-snackbar :timeout="3000" :model-value="error != null" @update:model-value="() => error = null">
|
|
{{ error }}
|
|
</v-snackbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from "vue"
|
|
import { request } from "@/scripts/request"
|
|
import { getAtk } from "@/stores/userinfo"
|
|
import UserDetailPanel from "@/components/admin/UserDetailPanel.vue"
|
|
import UserAssignPermsPanel from "@/components/admin/UserAssignPermsPanel.vue"
|
|
import UserFactorPanel from "@/components/admin/UserFactorPanel.vue"
|
|
|
|
const error = ref<string | null>(null)
|
|
|
|
const users = ref<any[]>([])
|
|
|
|
const viewingUser = ref<any>(null)
|
|
const viewingFactorUser = ref<any>(null)
|
|
const assigningPermUser = ref<any>(null)
|
|
|
|
const dataDefinitions: { [id: string]: any[] } = {
|
|
users: [
|
|
{ align: "start", key: "id", title: "ID" },
|
|
{ align: "start", key: "name", title: "Name" },
|
|
{ align: "start", key: "nick", title: "Nick" },
|
|
{ align: "start", key: "created_at", title: "Created At" },
|
|
{ align: "start", key: "actions", title: "Actions", sortable: false },
|
|
],
|
|
}
|
|
|
|
const reverting = ref(true)
|
|
const pagination = reactive({
|
|
page: 1, pageSize: 5, total: 0,
|
|
})
|
|
|
|
async function readUsers({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
|
|
if (itemsPerPage) pagination.pageSize = itemsPerPage
|
|
if (page) pagination.page = page
|
|
|
|
reverting.value = true
|
|
const res = await request(
|
|
"/api/admin/users?" +
|
|
new URLSearchParams({
|
|
take: pagination.pageSize.toString(),
|
|
offset: ((pagination.page - 1) * pagination.pageSize).toString(),
|
|
}),
|
|
{
|
|
headers: { Authorization: `Bearer ${getAtk()}` },
|
|
},
|
|
)
|
|
if (res.status !== 200) {
|
|
error.value = await res.text()
|
|
} else {
|
|
const data = await res.json()
|
|
users.value = data["data"]
|
|
pagination.total = data["count"]
|
|
}
|
|
reverting.value = false
|
|
}
|
|
|
|
onMounted(() => readUsers({}))
|
|
</script>
|