owltide/components/TableUsers.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>
					<NuxtLink :to="`/admin/users/${user.id}`">
						<template v-if="user.name">
							{{ user.name }}
						</template>
						<i v-else>(empty)</i>
					</NuxtLink>
				</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="usersStore.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();
</script>