Hornwitser
e3ff872b5c
Use a single mutable location, event, slot, etc, for each unique resource that keeps track of the local editable client copy and the server copy of the data contained in it. This makes it much simpler to update these data structures as I can take advantage of the v-model bindings in Vue.js and work with the system instead of against it.
141 lines
2.8 KiB
Vue
141 lines
2.8 KiB
Vue
<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>
|