show today's assignments

frontend/website/src/stores/schedules.ts

@@ -26,6 +26,15 @@ const scheduleAssignmentSchema = z.object({
   }),
 })
 
+export const assignmentForDateSchema = scheduleAssignmentSchema.extend({
+  schedule: z.object({
+    id: z.number().int().positive(),
+    set: z.object({
+      name: z.string().min(1),
+    }),
+  }),
+})
+
 export const scheduleDetailSchema = scheduleSummarySchema.extend({
   days: z.array(
     z.object({
@@ -43,12 +52,18 @@ const scheduleResponseSchema = z.object({
   schedule: scheduleDetailSchema,
 })
 
+const assignmentsForDateResponseSchema = z.object({
+  date: isoDateSchema,
+  assignments: z.array(assignmentForDateSchema),
+})
+
 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 AssignmentForDate = z.infer<typeof assignmentForDateSchema>
 export type CreateScheduleInput = {
   setId: number
   levelId: number
@@ -59,6 +74,7 @@ export type CreateScheduleInput = {
 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."
+const ASSIGNMENTS_ERROR = "We couldn't load today's assignments."
 
 export const useSchedulesStore = defineStore('schedules', () => {
   const schedules = ref<ScheduleSummary[]>([])
@@ -70,7 +86,11 @@ export const useSchedulesStore = defineStore('schedules', () => {
   const detailNotFound = ref(false)
   const creating = ref(false)
   const createError = ref<string | null>(null)
+  const assignmentsForDate = ref<AssignmentForDate[]>([])
+  const assignmentsLoading = ref(false)
+  const assignmentsError = ref<string | null>(null)
   let activeDetailRequestId = 0
+  let assignmentsRequestId = 0
 
   async function fetchSchedules(): Promise<boolean> {
     listLoading.value = true
@@ -202,6 +222,58 @@ export const useSchedulesStore = defineStore('schedules', () => {
     }
   }
 
+  async function fetchAssignmentsForDate(date: string): Promise<boolean> {
+    const requestId = ++assignmentsRequestId
+    assignmentsForDate.value = []
+    assignmentsLoading.value = true
+    assignmentsError.value = null
+
+    try {
+      const query = new URLSearchParams({ date })
+      const response = await fetch(`${API_BASE}/api/assignments?${query.toString()}`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (requestId !== assignmentsRequestId) {
+        return false
+      }
+
+      if (response.status !== 200) {
+        assignmentsError.value = ASSIGNMENTS_ERROR
+
+        return false
+      }
+
+      const responseBody: unknown = await response.json()
+      if (requestId !== assignmentsRequestId) {
+        return false
+      }
+
+      const parsedResponse = assignmentsForDateResponseSchema.parse(responseBody)
+      if (parsedResponse.date !== date) {
+        throw new Error('assignment response did not match requested date')
+      }
+      assignmentsForDate.value = parsedResponse.assignments
+
+      return true
+    } catch {
+      if (requestId === assignmentsRequestId) {
+        assignmentsForDate.value = []
+        assignmentsError.value = ASSIGNMENTS_ERROR
+      }
+
+      return false
+    } finally {
+      if (requestId === assignmentsRequestId) {
+        assignmentsLoading.value = false
+      }
+    }
+  }
+
   return {
     schedules,
     listLoading,
@@ -212,8 +284,12 @@ export const useSchedulesStore = defineStore('schedules', () => {
     detailNotFound,
     creating,
     createError,
+    assignmentsForDate,
+    assignmentsLoading,
+    assignmentsError,
     fetchSchedules,
     fetchSchedule,
     createSchedule,
+    fetchAssignmentsForDate,
   }
 })

frontend/website/src/views/DashboardView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
 import { useSchedulesStore } from '@/stores/schedules'
@@ -10,11 +10,25 @@ const setsStore = useSetsStore()
 const schedulesStore = useSchedulesStore()
 const { sets, loading, error } = storeToRefs(setsStore)
 const { schedules, listLoading, listError } = storeToRefs(schedulesStore)
+const { assignmentsForDate, assignmentsLoading, assignmentsError } = storeToRefs(schedulesStore)
+const todayDate = ref(browserDate(new Date()))
 
 onMounted(async () => {
-  await Promise.all([setsStore.fetchSets(), schedulesStore.fetchSchedules()])
+  await Promise.all([
+    setsStore.fetchSets(),
+    schedulesStore.fetchSchedules(),
+    schedulesStore.fetchAssignmentsForDate(todayDate.value),
+  ])
 })
 
+function browserDate(date: Date): string {
+  const year = String(date.getFullYear()).padStart(4, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+}
+
 function formatDate(value: string): string {
   return new Intl.DateTimeFormat('en', {
     dateStyle: 'medium',
@@ -27,6 +41,67 @@ function formatDate(value: string): string {
   <main class="dashboard-page">
     <AuthenticatedHeader />
 
+    <section class="today-assignments" aria-labelledby="today-heading">
+      <header class="today-assignments__introduction">
+        <div>
+          <p class="sets-catalog__eyebrow">Today's work</p>
+          <h1 id="today-heading">Today</h1>
+        </div>
+        <time :datetime="todayDate" :data-today-date="todayDate">
+          {{ formatDate(todayDate) }}
+        </time>
+      </header>
+
+      <p v-if="assignmentsLoading" class="today-state" role="status">
+        Loading today's assignments...
+      </p>
+
+      <div
+        v-else-if="assignmentsError !== null"
+        class="today-state today-state--error"
+        role="alert"
+      >
+        <p>{{ assignmentsError }}</p>
+        <button
+          type="button"
+          class="retry-button"
+          @click="schedulesStore.fetchAssignmentsForDate(todayDate)"
+        >
+          Try again
+        </button>
+      </div>
+
+      <p v-else-if="assignmentsForDate.length === 0" class="today-state" role="status">
+        Nothing is assigned for today.
+      </p>
+
+      <ul v-else class="today-assignment-list" aria-label="Today's assignments">
+        <li v-for="assignment in assignmentsForDate" :key="assignment.id">
+          <RouterLink
+            class="today-assignment-link"
+            :to="{
+              name: 'schedule-detail',
+              params: { scheduleId: assignment.schedule.id },
+            }"
+          >
+            <article class="today-assignment">
+              <div class="today-assignment__heading">
+                <p>{{ assignment.schedule.set.name }}</p>
+                <span class="today-assignment__kind">{{ assignment.element.kind }}</span>
+              </div>
+              <p class="today-assignment__path">
+                {{ assignment.element.path.join(' / ') }}
+              </p>
+              <span class="today-assignment__action">
+                Open schedule
+                <span aria-hidden="true">→</span>
+              </span>
+            </article>
+          </RouterLink>
+        </li>
+      </ul>
+    </section>
+
     <section class="schedules-catalog" aria-labelledby="schedules-heading">
       <div class="schedules-catalog__heading">
         <div>
@@ -83,7 +158,7 @@ function formatDate(value: string): string {
     <section class="sets-catalog" aria-labelledby="sets-heading">
       <div class="sets-catalog__introduction">
         <p class="sets-catalog__eyebrow">Your library</p>
-        <h1 id="sets-heading">Available sets</h1>
+        <h2 id="sets-heading">Available sets</h2>
         <p class="sets-catalog__description">
           Browse every set available in Attainly and find the collection that fits your next goal.
         </p>
@@ -135,11 +210,29 @@ function formatDate(value: string): string {
   margin: clamp(4.5rem, 10vh, 7rem) auto 0;
 }
 
-.schedules-catalog {
+.today-assignments {
   width: min(100%, 72rem);
   margin: clamp(4.5rem, 10vh, 7rem) auto 0;
 }
 
+.today-assignments__introduction {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.today-assignments__introduction time {
+  color: #68776f;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.schedules-catalog {
+  width: min(100%, 72rem);
+  margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
+}
+
 .schedules-catalog__heading {
   display: flex;
   align-items: end;
@@ -176,7 +269,8 @@ function formatDate(value: string): string {
   text-transform: uppercase;
 }
 
-h1 {
+.today-assignments h1,
+.sets-catalog__introduction h2 {
   margin: 0;
   font-family: Georgia, 'Times New Roman', serif;
   font-size: clamp(3rem, 7vw, 5.25rem);
@@ -185,6 +279,104 @@ h1 {
   letter-spacing: -0.055em;
 }
 
+.today-state {
+  width: 100%;
+  min-height: 7rem;
+  display: grid;
+  place-items: center;
+  margin: 2rem 0 0;
+  padding: 1.5rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  color: #68776f;
+  background: rgb(255 253 247 / 72%);
+  text-align: center;
+}
+
+.today-state--error {
+  align-content: center;
+  gap: 1rem;
+}
+
+.today-state--error p {
+  margin: 0;
+}
+
+.today-assignment-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: 1rem;
+  margin: 2rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.today-assignment-link {
+  display: block;
+  height: 100%;
+  border-radius: 1rem;
+  text-decoration: none;
+}
+
+.today-assignment {
+  height: 100%;
+  padding: 1.4rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  background: linear-gradient(135deg, rgb(255 253 247 / 98%), rgb(244 238 225 / 86%));
+  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 7%);
+  transition:
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.today-assignment-link:hover .today-assignment {
+  border-color: rgb(40 92 78 / 35%);
+  transform: translateY(-2px);
+}
+
+.today-assignment-link:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 38%);
+  outline-offset: 0.25rem;
+}
+
+.today-assignment__heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  color: #926044;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.today-assignment__heading p {
+  margin: 0;
+}
+
+.today-assignment__kind {
+  text-transform: none;
+}
+
+.today-assignment__path {
+  margin: 1.75rem 0 0;
+  color: #183029;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.45rem;
+  line-height: 1.2;
+}
+
+.today-assignment__action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 1.25rem;
+  color: #567064;
+  font-size: 0.76rem;
+  font-weight: 750;
+}
+
 .sets-catalog__description {
   max-width: 38rem;
   margin: 1.5rem 0 0;
@@ -393,6 +585,15 @@ h1 {
     margin-top: 3.75rem;
   }
 
+  .today-assignments {
+    margin-top: 3.75rem;
+  }
+
+  .today-assignments__introduction {
+    display: grid;
+    gap: 1rem;
+  }
+
   .schedules-catalog {
     margin-top: 3.75rem;
   }