public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Use a pinia store to manage account state
All checks were successful
/ build (push) Successful in 3m29s
Details
/ deploy (push) Successful in 47s
Details

Browse source 
Refactor the existing scattered code dealing with the account state into
a pinia store.
This commit is contained in:
Hornwitser 2025-05-24 20:01:23 +02:00
parent fae8b4e2e4
commit e722876aae
12 changed files with 126 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

11
pages/account/settings.vue
View file

@ -1,14 +1,14 @@
<template>
<main>
<h1>Account Settings</h1>
<p v-if="sessionStore.account?.type !== 'anonymous'">
Name: {{ sessionStore.account?.name }}
<p v-if="accountStore.type !== 'anonymous'">
Name: {{ accountStore.name }}
</p>
<p>Access: {{ sessionStore.account?.type }}</p>
<p>Access: {{ accountStore.type }}</p>
<form @submit.prevent="changeSettings">
<label>
Timezone
<input type="text" v-model="timezone">
<input type="text" v-model="timezone" :placeholder="accountStore.defaultTimezone">
</label>
<button type="submit">
Save
@ -35,8 +35,9 @@ definePageMeta({
});
const sessionStore = useSessionStore();
const accountStore = useAccountStore();
const timezone = ref(sessionStore.account?.timezone ?? "");
const timezone = ref(accountStore.timezone ?? "");
async function changeSettings() {
try {

10
pages/edit.vue
View file

@ -19,7 +19,7 @@
</select>
</label>
<h2>Locations</h2>
<LocationsTable :edit="isAdmin" />
<LocationsTable :edit="accountStore.canEditPublic" />
<h2>Schedule</h2>
<label>
Location Filter:
@ -77,7 +77,7 @@ definePageMeta({
const schedule = await useSchedule();
const { data: accounts } = await useAccounts();
const sessionStore = useSessionStore();
const accountStore = useAccountStore();
const route = useRoute();
const crewFilter = computed({
@ -91,14 +91,14 @@ const crewFilter = computed({
}),
});
const eventSlotFilter = computed(() => {
if (crewFilter.value === undefined || !sessionStore.account) {
if (crewFilter.value === undefined || !accountStore.valid) {
return () => true;
}
const cid = parseInt(crewFilter.value);
return (slot: TimeSlot) => slot.assigned?.some(id => id === cid) || false;
});
const shiftSlotFilter = computed(() => {
if (crewFilter.value === undefined || !sessionStore.account) {
if (crewFilter.value === undefined || !accountStore.valid) {
return () => true;
}
const cid = parseInt(crewFilter.value);
@ -126,6 +126,4 @@ const roleFilter = computed({
},
}),
});
const isAdmin = computed(() => sessionStore.account?.type === "admin")
</script>

8
pages/index.vue
View file

@ -5,13 +5,13 @@
<li>
<NuxtLink to="/schedule">View Schedule</NuxtLink>
</li>
<li v-if="sessionStore.account?.type === 'admin' || sessionStore.account?.type === 'crew'">
<li v-if="accountStore.canEdit">
<NuxtLink to="/edit">Edit Schedule</NuxtLink>
</li>
<li v-if="sessionStore.account">
<li v-if="accountStore.valid">
<NuxtLink to="/account/settings">Account Settings</NuxtLink>
</li>
<li v-if="!sessionStore.account">
<li v-else>
<NuxtLink to="/login">Log In / Create Account</NuxtLink>
</li>
</ul>
@ -19,5 +19,5 @@
</template>
<script lang="ts" setup>
const sessionStore = useSessionStore();
const accountStore = useAccountStore();
</script>

24
pages/schedule.vue
View file

@ -4,7 +4,7 @@
<p>
Study carefully, we only hold these events once a year.
</p>
<p v-if="!sessionStore.account">
<p v-if="!accountStore.valid">
<NuxtLink to="/login">Login</NuxtLink> or <NuxtLink to="/login#create-account">Create an account</NuxtLink>
to get notified about updates to the schedule.
</p>
@ -12,7 +12,7 @@
Check out your <NuxtLink to="/account/settings">Account Setting</NuxtLink> to set up notifications for changes to schedule.
</p>
<h2>Schedule</h2>
<label v-if="sessionStore.account">
<label v-if="accountStore.valid">
Filter:
<select
v-model="filter"
@ -26,11 +26,11 @@
:selected='filter === "my-schedule"'
>My Schedule</option>
<option
v-if="isCrew"
v-if="accountStore.isCrew"
value="assigned"
:selected='filter === "assigned"'
>Assigned to Me</option>
<optgroup v-if="isCrew && accounts" label="Crew">
<optgroup v-if="accountStore.isCrew && accounts" label="Crew">
<option
v-for="account in accounts.filter(a => a.type === 'crew' || a.type === 'admin')"
:key="account.id"
@ -57,13 +57,9 @@
<script setup lang="ts">
import type { ShiftSlot, TimeSlot } from '~/shared/types/schedule';
const sessionStore = useSessionStore();
const accountStore = useAccountStore();
const { data: accounts } = await useAccounts();
const schedule = await useSchedule();
const isCrew = computed(() => (
sessionStore.account?.type === "crew"
|| sessionStore.account?.type === "admin"
));
const route = useRoute();
const filter = computed({
@ -78,12 +74,12 @@ const filter = computed({
});
const eventSlotFilter = computed(() => {
if (filter.value === undefined || !sessionStore.account) {
if (filter.value === undefined || !accountStore.valid) {
return () => true;
}
const aid = sessionStore.account?.id;
const aid = accountStore.id;
if (filter.value === "my-schedule") {
const ids = new Set(sessionStore.account?.interestedIds);
const ids = new Set(accountStore.interestedIds);
for (const event of schedule.value.events) {
if (ids.has(event.id)) {
for (const slot of event.slots) {
@ -103,11 +99,11 @@ const eventSlotFilter = computed(() => {
return () => false;
});
const shiftSlotFilter = computed(() => {
if (filter.value === undefined || !sessionStore.account) {
if (filter.value === undefined || !accountStore.valid) {
return () => true;
}
if (filter.value === "my-schedule" || filter.value === "assigned") {
const aid = sessionStore.account?.id;
const aid = accountStore.id;
return (slot: ShiftSlot) => slot.assigned?.some(id => id === aid) || false;
}
if (filter.value.startsWith("crew-")) {