add set scheduling ui
This commit is contained in:
parent
b7fb594c26
commit
7e9e93f8d0
GPG key ID:
0FA60884F75520A9
8 changed files with 1182 additions and 8 deletions
|
|
@ -71,6 +71,22 @@ const router = createRouter({
|
|||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/sets/:setId(\\d+)/schedules/new',
|
||||
name: 'schedule-create',
|
||||
component: () => import('@/views/CreateScheduleView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/schedules/:scheduleId(\\d+)',
|
||||
name: 'schedule-detail',
|
||||
component: () => import('@/views/ScheduleDetailView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
|
|
|||
220
frontend/website/src/stores/schedules.ts
Normal file
220
frontend/website/src/stores/schedules.ts
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { z } from 'zod'
|
||||
|
||||
import { API_BASE } from '@/utils/apiBase'
|
||||
|
||||
const isoDateSchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/)
|
||||
|
||||
export const scheduleSummarySchema = z.object({
|
||||
id: z.number().int().positive(),
|
||||
set: z.object({
|
||||
id: z.number().int().positive(),
|
||||
name: z.string().min(1),
|
||||
}),
|
||||
elementKind: z.string().min(1),
|
||||
startDate: isoDateSchema,
|
||||
targetDate: isoDateSchema,
|
||||
assignmentCount: z.number().int().nonnegative(),
|
||||
})
|
||||
|
||||
const scheduleAssignmentSchema = z.object({
|
||||
element: z.object({
|
||||
id: z.number().int().positive(),
|
||||
name: z.string().min(1),
|
||||
kind: z.string().min(1),
|
||||
path: z.array(z.string().min(1)).min(1),
|
||||
}),
|
||||
})
|
||||
|
||||
export const scheduleDetailSchema = scheduleSummarySchema.extend({
|
||||
days: z.array(
|
||||
z.object({
|
||||
date: isoDateSchema,
|
||||
assignments: z.array(scheduleAssignmentSchema),
|
||||
}),
|
||||
),
|
||||
})
|
||||
|
||||
const schedulesResponseSchema = z.object({
|
||||
schedules: z.array(scheduleSummarySchema),
|
||||
})
|
||||
|
||||
const scheduleResponseSchema = z.object({
|
||||
schedule: scheduleDetailSchema,
|
||||
})
|
||||
|
||||
const errorResponseSchema = z.object({
|
||||
error: z.string().min(1),
|
||||
})
|
||||
|
||||
export type ScheduleSummary = z.infer<typeof scheduleSummarySchema>
|
||||
export type ScheduleDetail = z.infer<typeof scheduleDetailSchema>
|
||||
export type CreateScheduleInput = {
|
||||
setId: number
|
||||
elementKind: string
|
||||
startDate: string
|
||||
targetDate: string
|
||||
}
|
||||
|
||||
const LIST_ERROR = "We couldn't load your schedules."
|
||||
const DETAIL_ERROR = "We couldn't load this schedule."
|
||||
const CREATE_ERROR = "We couldn't create this schedule."
|
||||
|
||||
export const useSchedulesStore = defineStore('schedules', () => {
|
||||
const schedules = ref<ScheduleSummary[]>([])
|
||||
const listLoading = ref(false)
|
||||
const listError = ref<string | null>(null)
|
||||
const activeSchedule = ref<ScheduleDetail | null>(null)
|
||||
const detailLoading = ref(false)
|
||||
const detailError = ref<string | null>(null)
|
||||
const detailNotFound = ref(false)
|
||||
const creating = ref(false)
|
||||
const createError = ref<string | null>(null)
|
||||
let activeDetailRequestId = 0
|
||||
|
||||
async function fetchSchedules(): Promise<boolean> {
|
||||
listLoading.value = true
|
||||
listError.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/schedules`, {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
if (response.status !== 200) {
|
||||
schedules.value = []
|
||||
listError.value = LIST_ERROR
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const responseBody: unknown = await response.json()
|
||||
schedules.value = schedulesResponseSchema.parse(responseBody).schedules
|
||||
|
||||
return true
|
||||
} catch {
|
||||
schedules.value = []
|
||||
listError.value = LIST_ERROR
|
||||
|
||||
return false
|
||||
} finally {
|
||||
listLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSchedule(scheduleId: number): Promise<boolean> {
|
||||
const requestId = ++activeDetailRequestId
|
||||
activeSchedule.value = null
|
||||
detailLoading.value = true
|
||||
detailError.value = null
|
||||
detailNotFound.value = false
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/schedules/${scheduleId}`, {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
if (requestId !== activeDetailRequestId) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (response.status === 404) {
|
||||
detailNotFound.value = true
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (response.status !== 200) {
|
||||
detailError.value = DETAIL_ERROR
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const responseBody: unknown = await response.json()
|
||||
if (requestId !== activeDetailRequestId) {
|
||||
return false
|
||||
}
|
||||
|
||||
const parsedSchedule = scheduleResponseSchema.parse(responseBody).schedule
|
||||
if (parsedSchedule.id !== scheduleId) {
|
||||
throw new Error('schedule response did not match requested schedule')
|
||||
}
|
||||
activeSchedule.value = parsedSchedule
|
||||
|
||||
return true
|
||||
} catch {
|
||||
if (requestId === activeDetailRequestId) {
|
||||
activeSchedule.value = null
|
||||
detailError.value = DETAIL_ERROR
|
||||
}
|
||||
|
||||
return false
|
||||
} finally {
|
||||
if (requestId === activeDetailRequestId) {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function createSchedule(input: CreateScheduleInput): Promise<ScheduleDetail | null> {
|
||||
creating.value = true
|
||||
createError.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/schedules`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(input),
|
||||
})
|
||||
const responseBody: unknown = await response.json()
|
||||
|
||||
if (response.status !== 201) {
|
||||
const parsedError = errorResponseSchema.safeParse(responseBody)
|
||||
createError.value = parsedError.success ? parsedError.data.error : CREATE_ERROR
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const createdSchedule = scheduleResponseSchema.parse(responseBody).schedule
|
||||
activeSchedule.value = createdSchedule
|
||||
detailError.value = null
|
||||
detailNotFound.value = false
|
||||
|
||||
return createdSchedule
|
||||
} catch {
|
||||
createError.value = CREATE_ERROR
|
||||
|
||||
return null
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
schedules,
|
||||
listLoading,
|
||||
listError,
|
||||
activeSchedule,
|
||||
detailLoading,
|
||||
detailError,
|
||||
detailNotFound,
|
||||
creating,
|
||||
createError,
|
||||
fetchSchedules,
|
||||
fetchSchedule,
|
||||
createSchedule,
|
||||
}
|
||||
})
|
||||
|
|
@ -31,7 +31,8 @@ body {
|
|||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
|
|
|
|||
405
frontend/website/src/views/CreateScheduleView.vue
Normal file
405
frontend/website/src/views/CreateScheduleView.vue
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { z } from 'zod'
|
||||
|
||||
import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
|
||||
import { useSchedulesStore } from '@/stores/schedules'
|
||||
import { useSetLayoutStore, type SetElementNode } from '@/stores/setLayout'
|
||||
|
||||
type ScheduleField = 'elementKind' | 'startDate' | 'targetDate'
|
||||
type ScheduleFieldErrors = Partial<Record<ScheduleField, string>>
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const setLayoutStore = useSetLayoutStore()
|
||||
const schedulesStore = useSchedulesStore()
|
||||
const { layout, loading, error, notFound } = storeToRefs(setLayoutStore)
|
||||
const { creating, createError } = storeToRefs(schedulesStore)
|
||||
const currentSetId = ref<number | null>(null)
|
||||
const form = reactive({
|
||||
elementKind: '',
|
||||
startDate: '',
|
||||
targetDate: '',
|
||||
})
|
||||
const fieldErrors = ref<ScheduleFieldErrors>({})
|
||||
|
||||
const levels = computed(() => {
|
||||
const counts = new Map<string, number>()
|
||||
|
||||
function countNodes(nodes: SetElementNode[]): void {
|
||||
for (const node of nodes) {
|
||||
counts.set(node.kind, (counts.get(node.kind) ?? 0) + 1)
|
||||
countNodes(node.children)
|
||||
}
|
||||
}
|
||||
|
||||
countNodes(layout.value?.elements ?? [])
|
||||
|
||||
return [...counts.entries()].map(([kind, count]) => ({
|
||||
kind,
|
||||
count,
|
||||
label: humanizeKind(kind),
|
||||
}))
|
||||
})
|
||||
|
||||
const scheduleFormSchema = z
|
||||
.object({
|
||||
elementKind: z.string().min(1, 'Choose a level to schedule.'),
|
||||
startDate: z.string().min(1, 'Choose a start date.'),
|
||||
targetDate: z.string().min(1, 'Choose a target date.'),
|
||||
})
|
||||
.superRefine((value, context) => {
|
||||
if (value.startDate !== '' && value.targetDate !== '' && value.targetDate < value.startDate) {
|
||||
context.addIssue({
|
||||
code: 'custom',
|
||||
path: ['targetDate'],
|
||||
message: 'Target date cannot be before the start date.',
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.params.setId,
|
||||
async (setIdParameter) => {
|
||||
const rawSetId = Array.isArray(setIdParameter) ? setIdParameter[0] : setIdParameter
|
||||
const setId = Number(rawSetId)
|
||||
currentSetId.value = setId
|
||||
|
||||
if (layout.value?.set.id !== setId) {
|
||||
await setLayoutStore.fetchSetLayout(setId)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
fieldErrors.value = {}
|
||||
const result = scheduleFormSchema.safeParse(form)
|
||||
if (!result.success) {
|
||||
const errors: ScheduleFieldErrors = {}
|
||||
for (const issue of result.error.issues) {
|
||||
const field = issue.path[0]
|
||||
if (
|
||||
(field === 'elementKind' || field === 'startDate' || field === 'targetDate') &&
|
||||
errors[field] === undefined
|
||||
) {
|
||||
errors[field] = issue.message
|
||||
}
|
||||
}
|
||||
fieldErrors.value = errors
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
currentSetId.value === null ||
|
||||
!levels.value.some((level) => level.kind === result.data.elementKind)
|
||||
) {
|
||||
fieldErrors.value = {
|
||||
elementKind: 'Choose an available level to schedule.',
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const schedule = await schedulesStore.createSchedule({
|
||||
setId: currentSetId.value,
|
||||
...result.data,
|
||||
})
|
||||
if (schedule !== null) {
|
||||
await router.push({
|
||||
name: 'schedule-detail',
|
||||
params: { scheduleId: schedule.id },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function retry(): Promise<void> {
|
||||
if (currentSetId.value !== null) {
|
||||
await setLayoutStore.fetchSetLayout(currentSetId.value)
|
||||
}
|
||||
}
|
||||
|
||||
function humanizeKind(kind: string): string {
|
||||
const words = kind.replaceAll(/[_-]+/g, ' ')
|
||||
|
||||
return words.charAt(0).toUpperCase() + words.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="schedule-form-page">
|
||||
<AuthenticatedHeader />
|
||||
|
||||
<section class="schedule-form-shell">
|
||||
<RouterLink
|
||||
class="back-link"
|
||||
:to="{ name: 'set-layout', params: { setId: currentSetId ?? undefined } }"
|
||||
>
|
||||
<span aria-hidden="true">←</span>
|
||||
Back to set
|
||||
</RouterLink>
|
||||
|
||||
<p v-if="loading" class="page-state" role="status">Loading scheduling options...</p>
|
||||
|
||||
<div v-else-if="notFound" class="page-state page-state--error" role="alert">
|
||||
<h1>Set not found</h1>
|
||||
<p>The set you want to schedule is not available.</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error !== null" class="page-state page-state--error" role="alert">
|
||||
<p>{{ error }}</p>
|
||||
<button type="button" class="secondary-button" @click="retry">Try again</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="layout !== null">
|
||||
<header class="schedule-form__introduction">
|
||||
<p class="eyebrow">Create schedule</p>
|
||||
<h1>Schedule {{ layout.set.name }}</h1>
|
||||
<p>Choose one level of the set and a date range. Every matching item will be included.</p>
|
||||
</header>
|
||||
|
||||
<form class="schedule-form" novalidate @submit.prevent="submit">
|
||||
<div class="form-field">
|
||||
<label for="schedule-level">Level</label>
|
||||
<select
|
||||
id="schedule-level"
|
||||
v-model="form.elementKind"
|
||||
:aria-invalid="fieldErrors.elementKind !== undefined"
|
||||
:aria-describedby="fieldErrors.elementKind ? 'schedule-level-error' : undefined"
|
||||
:disabled="creating"
|
||||
>
|
||||
<option value="">Choose a level</option>
|
||||
<option v-for="level in levels" :key="level.kind" :value="level.kind">
|
||||
{{ level.label }} ({{ level.count }})
|
||||
</option>
|
||||
</select>
|
||||
<p v-if="fieldErrors.elementKind" id="schedule-level-error" class="field-error">
|
||||
{{ fieldErrors.elementKind }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="date-fields">
|
||||
<div class="form-field">
|
||||
<label for="schedule-start-date">Start date</label>
|
||||
<input
|
||||
id="schedule-start-date"
|
||||
v-model="form.startDate"
|
||||
type="date"
|
||||
:aria-invalid="fieldErrors.startDate !== undefined"
|
||||
:aria-describedby="fieldErrors.startDate ? 'schedule-start-date-error' : undefined"
|
||||
:disabled="creating"
|
||||
/>
|
||||
<p v-if="fieldErrors.startDate" id="schedule-start-date-error" class="field-error">
|
||||
{{ fieldErrors.startDate }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="schedule-target-date">Target date</label>
|
||||
<input
|
||||
id="schedule-target-date"
|
||||
v-model="form.targetDate"
|
||||
type="date"
|
||||
:aria-invalid="fieldErrors.targetDate !== undefined"
|
||||
:aria-describedby="
|
||||
fieldErrors.targetDate ? 'schedule-target-date-error' : undefined
|
||||
"
|
||||
:disabled="creating"
|
||||
/>
|
||||
<p v-if="fieldErrors.targetDate" id="schedule-target-date-error" class="field-error">
|
||||
{{ fieldErrors.targetDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="createError !== null" class="form-error" role="alert">{{ createError }}</p>
|
||||
|
||||
<button type="submit" class="primary-button" :disabled="creating">
|
||||
{{ creating ? 'Creating schedule...' : 'Create schedule' }}
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.schedule-form-page {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding: 2rem clamp(1.5rem, 6vw, 5rem) 5rem;
|
||||
color: #183029;
|
||||
background: #f4f1e7;
|
||||
}
|
||||
|
||||
.schedule-form-shell {
|
||||
width: min(100%, 46rem);
|
||||
margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #5e7067;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 750;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:focus-visible,
|
||||
.primary-button:focus-visible,
|
||||
.secondary-button:focus-visible,
|
||||
select:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.schedule-form__introduction {
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 1rem;
|
||||
color: #926044;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: clamp(2.75rem, 7vw, 4.8rem);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.schedule-form__introduction > p:last-child {
|
||||
max-width: 38rem;
|
||||
margin: 1.4rem 0 0;
|
||||
color: #68776f;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.schedule-form {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2.75rem;
|
||||
padding: clamp(1.3rem, 4vw, 2rem);
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 253 247 / 82%);
|
||||
box-shadow: 0 1rem 2.5rem rgb(40 62 52 / 8%);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.date-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
width: 100%;
|
||||
min-height: 3rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border: 1px solid rgb(24 58 49 / 22%);
|
||||
border-radius: 0.7rem;
|
||||
color: #183029;
|
||||
background: #fffdf7;
|
||||
}
|
||||
|
||||
select[aria-invalid='true'],
|
||||
input[aria-invalid='true'] {
|
||||
border-color: #a64b3c;
|
||||
}
|
||||
|
||||
.field-error,
|
||||
.form-error {
|
||||
margin: 0;
|
||||
color: #934033;
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
min-height: 2.8rem;
|
||||
padding: 0.7rem 1.1rem;
|
||||
border-radius: 0.7rem;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
justify-self: start;
|
||||
border: 0;
|
||||
color: #fffdf7;
|
||||
background: #183a31;
|
||||
}
|
||||
|
||||
.primary-button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
border: 1px solid rgb(24 58 49 / 28%);
|
||||
color: #183a31;
|
||||
background: #fffdf7;
|
||||
}
|
||||
|
||||
.page-state {
|
||||
display: grid;
|
||||
min-height: 10rem;
|
||||
place-items: center;
|
||||
margin-top: 2.75rem;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
color: #68776f;
|
||||
background: rgb(255 253 247 / 72%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-state--error {
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-state--error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 37.5rem) {
|
||||
.schedule-form-page {
|
||||
padding: 1.4rem 1.1rem 3rem;
|
||||
}
|
||||
|
||||
.schedule-form-shell {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.date-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,20 +3,89 @@ import { storeToRefs } from 'pinia'
|
|||
import { onMounted } from 'vue'
|
||||
|
||||
import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
|
||||
import { useSchedulesStore } from '@/stores/schedules'
|
||||
import { useSetsStore } from '@/stores/sets'
|
||||
|
||||
const setsStore = useSetsStore()
|
||||
const schedulesStore = useSchedulesStore()
|
||||
const { sets, loading, error } = storeToRefs(setsStore)
|
||||
const { schedules, listLoading, listError } = storeToRefs(schedulesStore)
|
||||
|
||||
onMounted(async () => {
|
||||
await setsStore.fetchSets()
|
||||
await Promise.all([setsStore.fetchSets(), schedulesStore.fetchSchedules()])
|
||||
})
|
||||
|
||||
function humanizeKind(kind: string): string {
|
||||
const words = kind.replaceAll(/[_-]+/g, ' ')
|
||||
|
||||
return words.charAt(0).toUpperCase() + words.slice(1)
|
||||
}
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
dateStyle: 'medium',
|
||||
timeZone: 'UTC',
|
||||
}).format(new Date(`${value}T00:00:00Z`))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="dashboard-page">
|
||||
<AuthenticatedHeader />
|
||||
|
||||
<section class="schedules-catalog" aria-labelledby="schedules-heading">
|
||||
<div class="schedules-catalog__heading">
|
||||
<div>
|
||||
<p class="sets-catalog__eyebrow">Your plans</p>
|
||||
<h2 id="schedules-heading">Your schedules</h2>
|
||||
</div>
|
||||
<p>Return to a plan and see what is assigned for each day.</p>
|
||||
</div>
|
||||
|
||||
<p v-if="listLoading" class="catalog-state catalog-state--compact" role="status">
|
||||
Loading schedules...
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-else-if="listError !== null"
|
||||
class="catalog-state catalog-state--compact catalog-state--error"
|
||||
role="alert"
|
||||
>
|
||||
<p>{{ listError }}</p>
|
||||
<button type="button" class="retry-button" @click="schedulesStore.fetchSchedules">
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-else-if="schedules.length === 0"
|
||||
class="catalog-state catalog-state--compact"
|
||||
role="status"
|
||||
>
|
||||
You have not created a schedule yet.
|
||||
</p>
|
||||
|
||||
<ul v-else class="schedule-grid" aria-label="Your schedules">
|
||||
<li v-for="schedule in schedules" :key="schedule.id">
|
||||
<RouterLink
|
||||
class="schedule-card-link"
|
||||
:to="{ name: 'schedule-detail', params: { scheduleId: schedule.id } }"
|
||||
>
|
||||
<article class="schedule-card">
|
||||
<div class="schedule-card__heading">
|
||||
<p>{{ humanizeKind(schedule.elementKind) }}</p>
|
||||
<span>{{ schedule.assignmentCount }} assignments</span>
|
||||
</div>
|
||||
<h3>{{ schedule.set.name }}</h3>
|
||||
<span class="schedule-card__dates">
|
||||
{{ formatDate(schedule.startDate) }} to {{ formatDate(schedule.targetDate) }}
|
||||
</span>
|
||||
</article>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sets-catalog" aria-labelledby="sets-heading">
|
||||
<div class="sets-catalog__introduction">
|
||||
<p class="sets-catalog__eyebrow">Your library</p>
|
||||
|
|
@ -72,6 +141,34 @@ onMounted(async () => {
|
|||
margin: clamp(4.5rem, 10vh, 7rem) auto 0;
|
||||
}
|
||||
|
||||
.schedules-catalog {
|
||||
width: min(100%, 72rem);
|
||||
margin: clamp(4.5rem, 10vh, 7rem) auto 0;
|
||||
}
|
||||
|
||||
.schedules-catalog__heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.schedules-catalog__heading h2 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: clamp(2.25rem, 5vw, 3.5rem);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
|
||||
.schedules-catalog__heading > p {
|
||||
max-width: 24rem;
|
||||
margin: 0;
|
||||
color: #68776f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.sets-catalog__introduction {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
|
@ -120,6 +217,11 @@ h1 {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-state--compact {
|
||||
min-height: 7rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.catalog-state--error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -155,6 +257,74 @@ h1 {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.schedule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
||||
gap: 1rem;
|
||||
margin: 2rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.schedule-card-link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.schedule-card {
|
||||
height: 100%;
|
||||
padding: 1.4rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 253 247 / 88%);
|
||||
box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 7%);
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.schedule-card-link:hover .schedule-card {
|
||||
border-color: rgb(40 92 78 / 35%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.schedule-card-link:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 38%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.schedule-card__heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: #926044;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.schedule-card__heading p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.schedule-card h3 {
|
||||
margin: 2rem 0 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.schedule-card__dates {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
color: #68776f;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.set-card {
|
||||
height: 100%;
|
||||
min-height: 11rem;
|
||||
|
|
@ -225,6 +395,15 @@ h1 {
|
|||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.schedules-catalog {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.schedules-catalog__heading {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.set-grid {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
|
|
|||
323
frontend/website/src/views/ScheduleDetailView.vue
Normal file
323
frontend/website/src/views/ScheduleDetailView.vue
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
|
||||
import { useSchedulesStore } from '@/stores/schedules'
|
||||
|
||||
const route = useRoute()
|
||||
const schedulesStore = useSchedulesStore()
|
||||
const { activeSchedule, detailLoading, detailError, detailNotFound } = storeToRefs(schedulesStore)
|
||||
const currentScheduleId = ref<number | null>(null)
|
||||
|
||||
watch(
|
||||
() => route.params.scheduleId,
|
||||
async (scheduleIdParameter) => {
|
||||
const rawScheduleId = Array.isArray(scheduleIdParameter)
|
||||
? scheduleIdParameter[0]
|
||||
: scheduleIdParameter
|
||||
const scheduleId = Number(rawScheduleId)
|
||||
currentScheduleId.value = scheduleId
|
||||
|
||||
if (activeSchedule.value?.id !== scheduleId) {
|
||||
await schedulesStore.fetchSchedule(scheduleId)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
async function retry(): Promise<void> {
|
||||
if (currentScheduleId.value !== null) {
|
||||
await schedulesStore.fetchSchedule(currentScheduleId.value)
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
dateStyle: 'medium',
|
||||
timeZone: 'UTC',
|
||||
}).format(new Date(`${value}T00:00:00Z`))
|
||||
}
|
||||
|
||||
function humanizeKind(kind: string): string {
|
||||
const words = kind.replaceAll(/[_-]+/g, ' ')
|
||||
|
||||
return words.charAt(0).toUpperCase() + words.slice(1)
|
||||
}
|
||||
|
||||
function pluralKind(kind: string, count: number): string {
|
||||
if (count === 1) {
|
||||
return kind
|
||||
}
|
||||
|
||||
if (kind.endsWith('y')) {
|
||||
return `${kind.slice(0, -1)}ies`
|
||||
}
|
||||
|
||||
if (kind.endsWith('s')) {
|
||||
return kind
|
||||
}
|
||||
|
||||
return `${kind}s`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="schedule-page">
|
||||
<AuthenticatedHeader />
|
||||
|
||||
<section class="schedule-shell">
|
||||
<RouterLink class="back-link" :to="{ name: 'dashboard' }">
|
||||
<span aria-hidden="true">←</span>
|
||||
Back to dashboard
|
||||
</RouterLink>
|
||||
|
||||
<p v-if="detailLoading" class="page-state" role="status">Loading schedule...</p>
|
||||
|
||||
<div v-else-if="detailNotFound" class="page-state page-state--error" role="alert">
|
||||
<h1>Schedule not found</h1>
|
||||
<p>This schedule is not available.</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="detailError !== null" class="page-state page-state--error" role="alert">
|
||||
<p>{{ detailError }}</p>
|
||||
<button type="button" class="retry-button" @click="retry">Try again</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="activeSchedule !== null">
|
||||
<header class="schedule-introduction">
|
||||
<p class="eyebrow">{{ humanizeKind(activeSchedule.elementKind) }} plan</p>
|
||||
<h1>{{ activeSchedule.set.name }} schedule</h1>
|
||||
<p class="schedule-summary">
|
||||
{{ activeSchedule.assignmentCount }}
|
||||
{{ pluralKind(activeSchedule.elementKind, activeSchedule.assignmentCount) }} across
|
||||
{{ activeSchedule.days.length }}
|
||||
{{ activeSchedule.days.length === 1 ? 'day' : 'days' }}
|
||||
</p>
|
||||
<p class="schedule-range">
|
||||
{{ formatDate(activeSchedule.startDate) }} to
|
||||
{{ formatDate(activeSchedule.targetDate) }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<ol class="schedule-days" aria-label="Scheduled days">
|
||||
<li
|
||||
v-for="day in activeSchedule.days"
|
||||
:key="day.date"
|
||||
class="schedule-day"
|
||||
data-schedule-day
|
||||
:data-schedule-date="day.date"
|
||||
>
|
||||
<header class="schedule-day__header">
|
||||
<time :datetime="day.date">{{ formatDate(day.date) }}</time>
|
||||
<span>{{ day.assignments.length }} assigned</span>
|
||||
</header>
|
||||
|
||||
<p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
|
||||
|
||||
<ul v-else class="assignment-list">
|
||||
<li v-for="assignment in day.assignments" :key="assignment.element.id">
|
||||
<span class="assignment-path">{{ assignment.element.path.join(' / ') }}</span>
|
||||
<span class="assignment-kind">{{ humanizeKind(assignment.element.kind) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.schedule-page {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding: 2rem clamp(1.5rem, 6vw, 5rem) 5rem;
|
||||
color: #183029;
|
||||
background: #f4f1e7;
|
||||
}
|
||||
|
||||
.schedule-shell {
|
||||
width: min(100%, 56rem);
|
||||
margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #5e7067;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 750;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:focus-visible,
|
||||
.retry-button:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.schedule-introduction {
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 1rem;
|
||||
color: #926044;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: clamp(3rem, 7vw, 5.25rem);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
margin: 1.35rem 0 0;
|
||||
color: #344e45;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.schedule-range {
|
||||
margin: 0.5rem 0 0;
|
||||
color: #68776f;
|
||||
}
|
||||
|
||||
.schedule-days {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 3rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.schedule-day {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 253 247 / 82%);
|
||||
box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
|
||||
}
|
||||
|
||||
.schedule-day__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-bottom: 1px solid rgb(24 48 41 / 10%);
|
||||
color: #5e7067;
|
||||
background: rgb(239 228 212 / 42%);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rest-day {
|
||||
margin: 0;
|
||||
padding: 1.2rem 1rem;
|
||||
color: #79877f;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.assignment-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.assignment-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.assignment-list li + li {
|
||||
border-top: 1px solid rgb(24 48 41 / 10%);
|
||||
}
|
||||
|
||||
.assignment-path {
|
||||
min-width: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.05rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.assignment-kind {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
color: #81533a;
|
||||
background: #efe4d4;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-state {
|
||||
display: grid;
|
||||
min-height: 10rem;
|
||||
place-items: center;
|
||||
margin-top: 2.75rem;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
color: #68776f;
|
||||
background: rgb(255 253 247 / 72%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-state--error {
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-state--error h1,
|
||||
.page-state--error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-state--error h1 {
|
||||
font-size: clamp(2.25rem, 5vw, 3.6rem);
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
min-height: 2.65rem;
|
||||
padding: 0.65rem 1rem;
|
||||
border: 1px solid rgb(24 58 49 / 28%);
|
||||
border-radius: 0.7rem;
|
||||
color: #183a31;
|
||||
background: #fffdf7;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 37.5rem) {
|
||||
.schedule-page {
|
||||
padding: 1.4rem 1.1rem 3rem;
|
||||
}
|
||||
|
||||
.schedule-shell {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.assignment-list li {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -63,6 +63,14 @@ async function retry(): Promise<void> {
|
|||
<p class="set-layout__description">
|
||||
Explore every element in this set and see how each level fits into the whole.
|
||||
</p>
|
||||
<RouterLink
|
||||
v-if="layout.elements.length > 0"
|
||||
class="schedule-link"
|
||||
:to="{ name: 'schedule-create', params: { setId: layout.set.id } }"
|
||||
>
|
||||
Schedule this set
|
||||
<span aria-hidden="true">→</span>
|
||||
</RouterLink>
|
||||
</header>
|
||||
|
||||
<p
|
||||
|
|
@ -145,6 +153,31 @@ h1 {
|
|||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.schedule-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 2.8rem;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 0.7rem;
|
||||
color: #fffdf7;
|
||||
background: #183a31;
|
||||
box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.schedule-link:hover {
|
||||
background: #285c4e;
|
||||
}
|
||||
|
||||
.schedule-link:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.layout-outline {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue