owltide/components/TableScheduleRoles.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>name</th>
					<th>description</th>
					<th v-if="edit"></th>
				</tr>
			</thead>
			<tbody>
				<template v-if="edit">
					<tr
						v-for="role in schedule.roles.values()"
						:key="role.id"
						:class="{ removed: role.deleted }"
					>
						<td>{{ role.id }}</td>
						<td>
							<input
								type="text"
								v-model="role.name"
							>
						</td>
						<td>
							<input
								type="text"
								v-model="role.description"
							>
						</td>
						<td>
							<button
								type="button"
								:disabled="role.deleted"
								@click="role.deleted = true"
							>Delete</button>
							<button
								v-if="role.isModified()"
								type="button"
								@click="schedule.roles.discardId(role.id)"
							>Revert</button>
						</td>
					</tr>
					<tr>
						<td>{{ schedule.nextClientId }}</td>
						<td>
							<input
								type="text"
								v-model="newRoleName"
							>
						</td>
						<td>
							<input
								type="text"
								v-model="newRoleDescription"
							>
						</td>
						<td>
							<button
								v-if="roleExists(newRoleName)"
								disabled
							>Role already exists</button>
							<button
								v-else
								type="button"
								@click="newRole"
							>Add Role</button>
						</td>
					</tr>
				</template>
				<template v-else>
					<tr
						v-for="role in schedule.roles.values()"
						:key="role.id"
					>
						<td>{{ role.id }}</td>
						<td>{{ role.name }}</td>
						<td>{{ role.description }}</td>
					</tr>
				</template>
			</tbody>
		</table>
	</div>
</template>

<script lang="ts" setup>
import { Info } from '~/shared/utils/luxon';
import { toId } from '~/shared/utils/functions';

defineProps<{
	edit?: boolean,
}>();

const schedule = await useSchedule();
const accountStore = useAccountStore();

const newRoleName = ref("");
const newRoleDescription = ref("");

function roleExists(name: string) {
	name = toId(name);
	return (
		[...schedule.value.roles.values()].some(r => !r.deleted && toId(r.name) === name)
	);
}
function newRole() {
	if (roleExists(newRoleName.value)) {
		alert(`Role ${newRoleName.value} already exists`);
		return;
	}
	const zone = Info.normalizeZone(accountStore.activeTimezone);
	const locale = accountStore.activeLocale;
	const role = ClientScheduleRole.create(
		schedule.value.nextClientId--,
		newRoleName.value,
		newRoleDescription.value,
		{ zone, locale },
	);
	schedule.value.roles.add(role);
	newRoleName.value = "";
	newRoleDescription.value = "";
}

</script>

<style scoped>
table {
	border-spacing: 0;
}
table th {
	text-align: left;
	border-bottom: 1px solid var(--foreground);
}
table :is(th, td) + :is(th, td) {
	padding-inline-start: 0.4em;
}
.removed :is(td, input) {
	text-decoration: line-through;
}
</style>