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

82
ui/pages/admin/users/[id]/edit.vue Normal file
View File

@@ -0,0 +1,82 @@
<script setup lang="ts">
import type { Plan, User } from '~/types/user';
definePageMeta({
middleware: ["auth", "admin"],
layout: "admin"
});
const route = useRoute();
let { data: user } = await useFetch<User>('/api/admin/users/' + route.params.id);
let username = ref(user.value?.username);
let email = ref(user.value?.email);
let password = ref('');
let plan_id = ref(user.value?.plan.id);
let is_admin = ref(user.value?.is_admin ? 'checked' : 'unchecked');
const updateUser = async () => {
let body = {
username: username.value,
email: email.value,
password: password.value,
plan_id: plan_id.value,
is_admin: is_admin.value === 'checked' ? true : false,
}
if (password.value === '') {
delete body.password
}
await $fetch('/api/admin/users/edit/' + route.params.id, {
method: "POST",
body,
})
}
let { data: plans } = await useFetch<Plan[]>('/api/admin/plans');
</script>
<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">Edit User Account
</h4>
<div class="p-4">
<label for="username" class="block max-w-64 text-sm">Username</label>
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
<label for="email" class="block max-w-64 text-sm">Email</label>
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
<div class="mb-2">
<label for="password" class="block max-w-64 text-sm">Password</label>
<Input v-model="password" id="password" placeholder="Password" class="w-full" />
<p class="text-muted text-sm">Leave the password empty to keep it unchanged</p>
</div>
<label for="plan_id" class="block max-w-64 text-sm">Plan</label>
<!-- select the one with the value of user.value.plan_id -->
<select v-model="plan_id" id="plan_id" :selected="plan_id"
class="w-full max-w-64 px-4 py-2 rounded-md bg-overlay border hover:border-muted/40 focus:border-muted/60 cursor-pointer">
<option v-for="plan in plans" :key="plan.id" :value="plan.id">
{{ formatBytes(plan.max_storage) }}
</option>
</select>
<hr class="my-4" />
<div class="flex items-center">
<Checkbox v-model="is_admin" id="is_admin" type="checkbox" class="mr-2" />
<label for="is_admin" class="text-sm">
Is Admin
</label>
</div>
<hr class="my-4" />
<div>
<button
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
v-on:click="updateUser">
Update User
</button>
</div>
</div>
</div>
</div>
</template>

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>

64
ui/pages/admin/users/new.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import type { User } from '~/types/user';
definePageMeta({
middleware: ["auth", "admin"],
layout: "admin"
});
let username = ref('')
let email = ref('')
let password = ref('')
let error = ref('')
let timeout;
const submitForm = async () => {
let { data, error: fetchError } = await useAsyncData<User, NuxtError<{ message: string }>>(
() => $fetch('/api/admin/users/new', {
method: 'POST',
body: {
"username": username.value,
"email": email.value,
"password": password.value,
}
})
)
if (fetchError.value != null && fetchError.value.data !== undefined) {
error.value = fetchError.value.data.message
timeout = setTimeout(() => error.value = "", 15000)
} else if (data.value !== null) {
await navigateTo('/admin/users')
}
}
onUnmounted(() => {
clearTimeout(timeout)
})
</script>
<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">Create User Account
</h4>
<div class="p-4">
<label for="username" class="block max-w-64 text-sm">Username</label>
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
<label for="email" class="block max-w-64 text-sm">Email</label>
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
<label for="password" class="block max-w-64 text-sm">Password</label>
<Input v-model="password" id="password" type="password" placeholder="Password" class="w-full mb-2" />
<p class="text-love mb-2">{{ error }}</p>
<div>
<button
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
v-on:click="submitForm">
Create User Account
</button>
</div>
</div>
</div>
</div>
</template>