Hornwitser
4ff3dcb3fe
When async components are added dynamically to the tree via v-for list that change their order and position gets messed up. I am not sure what causes this, so I will just work around the issue for now and not use async components. Components that need async data loaded will instead depend on the parent page fetching this data during its setup.
74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Id</th>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Last Update</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="user in usersStore.users.values()">
|
|
<td>{{ user.id }}</td>
|
|
<td>
|
|
{{ user.name }}
|
|
</td>
|
|
<td>
|
|
<select
|
|
v-if='user.type !== "anonymous"'
|
|
v-model="user.type"
|
|
>
|
|
<option value="regular">Regular</option>
|
|
<option value="crew">Crew</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
<template v-else>
|
|
{{ user.type }}
|
|
</template>
|
|
</td>
|
|
<td>
|
|
{{ user.updatedAt.toFormat("yyyy-LL-dd HH:mm") }}
|
|
</td>
|
|
<td>
|
|
<button
|
|
v-if="user.isModified()"
|
|
type="button"
|
|
@click="saveUser(user);"
|
|
>Save</button>
|
|
<button
|
|
v-if="user.isModified()"
|
|
type="button"
|
|
@click="user.discard()"
|
|
>Discard</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
useEventSource();
|
|
const usersStore = useUsersStore();
|
|
|
|
async function saveUser(user: ClientUser) {
|
|
try {
|
|
await $fetch("/api/admin/user", {
|
|
method: "PATCH",
|
|
body: user.toApi(),
|
|
});
|
|
} catch (err: any) {
|
|
console.error(err);
|
|
alert(err?.data?.message ?? err.message);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|