zoeissleeping/filething
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ssr runner and more admin panel stuff

Browse Source
This commit is contained in:
Zoe
2024-09-30 00:40:54 -05:00
parent 66f8437351
commit c208e35e4c
27 changed files with 617 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
ui/pages/admin/users/index.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts">
import { useUser } from "~/composables/useUser"
import type { User } from "~/types/user";
const { getUser } = useUser()
definePageMeta({
middleware: ["auth", "admin"],
@@ -10,12 +8,18 @@ definePageMeta({
let page = ref(0)
const { data: users } = await useFetch<User[]>('/api/admin/get-users/' + page.value);
const { data: usersCount } = await useFetch<{ total_users: number }>('/api/admin/get-total-users');
const { data } = await useFetch<{ users: User[], total_users: number }>('/api/admin/users?page=' + page.value);
if (data.value === null) {
throw new Error("Failed to fetch users");
}
// let { users, total_users } = data.value;
let users = ref(data.value.users);
let total_users = ref(data.value.total_users);
const fetchNextPage = async () => {
page.value += 1;
let moreUsers = await $fetch('/api/admin/get-users/' + page.value);
let { users: moreUsers } = await $fetch<{ users: User[], total_users: number }>('/api/admin/users?page=' + page.value);
console.log(moreUsers)
users.value = users.value?.concat(moreUsers)
}
@@ -24,8 +28,17 @@ const fetchNextPage = async () => {
<template>
<div class="w-full h-fit mb-4">
<div class="overflow-hidden rounded-md border text-[15px]">
<h4 class="bg-surface px-3.5 py-3 border-b">User Account Management (Total: {{ usersCount.total_users }})
</h4>
<div class="flex bg-surface border-b items-center justify-between px-3.5 ">
<h4 class="py-3 w-fit">User Account Management (Total: {{ total_users }})
</h4>
<NuxtLink to="/admin/users/new">
<button
class="transition-bg bg-pine/10 text-pine px-2 py-1.5 rounded-md hover:bg-pine/15 active:bg-pine/25 h-fit text-xs"
v-on:click="updateUser">
Create User Account
</button>
</NuxtLink>
</div>
<div class="overflow-x-scroll max-w-full">
<table class="min-w-full">
<thead>
@@ -40,7 +53,10 @@ const fetchNextPage = async () => {
</thead>
<tbody>
<tr v-for="user in users" class="border-t">
<td class="py-2 px-4 max-w-44" :title="user.id">{{ user.id }}</td>
<td class="py-2 px-4 max-w-44 whitespace-nowrap overflow-hidden text-ellipsis"
:title="user.id">
{{ user.id }}
</td>
<td class="py-2 px-4">
{{ user.username }}
<span v-if="user.is_admin"
@@ -65,18 +81,20 @@ const fetchNextPage = async () => {
}) }}</td>
<td class="py-2 px-4 h-full">
<div class="flex items-center justify-end">
<NuxtLink :to="`/admin/users/${user.id}/edit`"></NuxtLink>
<button
class="my-auto hover:bg-muted/10 p-1 transition-bg active:bg-muted/20 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24">
<g class="stroke-blue-400/90" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
</g>
</svg>
</button>
<NuxtLink :to="`/admin/users/${user.id}/edit`">
<button
class="my-auto hover:bg-muted/10 p-1 transition-bg active:bg-muted/20 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24">
<g class="stroke-blue-400/90" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
<path
d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
</g>
</svg>
</button>
</NuxtLink>
</div>
</td>
</tr>
@@ -84,8 +102,9 @@ const fetchNextPage = async () => {
</table>
</div>
</div>
<div class="w-full h-full flex justify-center mt-4" v-if="users?.length != usersCount.total_users">
<button class="bg-accent/10 text-accent px-2 py-1 rounded-md hover:" v-on:click="fetchNextPage()">Load
<div class="w-full h-full flex justify-center mt-4" v-if="users?.length != total_users">
<button class="transition-bg bg-pine/10 text-pine px-2 py-1 rounded-md hover:bg-pine/15 active:bg-pine/25"
v-on:click="fetchNextPage()">Load
More</button>
</div>
</div>