Hornwitser
e52972853d
I firmly believe in free software. The application I'm making here have capabilities that I've not seen in any system. It presents itself as an opportunity to collaborate on a tool that serves the people rather than corporations. Whose incentives are to help people rather, not make the most money. And whose terms ensure that these freedoms and incentives cannot be taken back or subverted. I license this software under the AGPL.
145 lines
2.9 KiB
Vue
145 lines
2.9 KiB
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>
|