add set scheduling ui

frontend/website/src/views/DashboardView.vue

@@ -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;
   }