show sets on dashboard
This commit is contained in:
parent
2072166bdd
commit
321c1b7bb0
GPG key ID:
0FA60884F75520A9
4 changed files with 221 additions and 21 deletions
|
|
@ -38,6 +38,13 @@ function visitDashboardAndLogout(): void {
|
|||
}
|
||||
|
||||
describe('session authentication', () => {
|
||||
beforeEach(() => {
|
||||
cy.intercept('GET', '**/api/sets', {
|
||||
statusCode: 200,
|
||||
body: { sets: [] },
|
||||
})
|
||||
})
|
||||
|
||||
it('restores an authenticated session on a protected route', () => {
|
||||
cy.intercept('GET', '**/api/me', {
|
||||
statusCode: 200,
|
||||
|
|
@ -48,7 +55,7 @@ describe('session authentication', () => {
|
|||
cy.wait('@me')
|
||||
|
||||
cy.location('pathname').should('equal', '/dashboard')
|
||||
cy.get('h1').should('have.text', 'Your next step starts here.')
|
||||
cy.get('h1').should('have.text', 'Available sets')
|
||||
})
|
||||
|
||||
it('redirects an unauthenticated protected route to login', () => {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ describe('sets dashboard', () => {
|
|||
cy.wait('@sets')
|
||||
|
||||
cy.get('[role="status"]').should(
|
||||
'have.text',
|
||||
'contain.text',
|
||||
'No sets are available yet.',
|
||||
)
|
||||
})
|
||||
|
|
|
|||
65
frontend/website/src/stores/sets.ts
Normal file
65
frontend/website/src/stores/sets.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { z } from 'zod'
|
||||
|
||||
import { API_BASE } from '@/utils/apiBase'
|
||||
|
||||
export const setSummarySchema = z.object({
|
||||
id: z.number().int().positive(),
|
||||
name: z.string().min(1),
|
||||
})
|
||||
|
||||
const setsResponseSchema = z.object({
|
||||
sets: z.array(setSummarySchema),
|
||||
})
|
||||
|
||||
export type SetSummary = z.infer<typeof setSummarySchema>
|
||||
|
||||
const LOAD_ERROR = "We couldn't load the available sets."
|
||||
|
||||
export const useSetsStore = defineStore('sets', () => {
|
||||
const sets = ref<SetSummary[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function fetchSets(): Promise<boolean> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/sets`, {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
if (response.status !== 200) {
|
||||
sets.value = []
|
||||
error.value = LOAD_ERROR
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const responseBody: unknown = await response.json()
|
||||
sets.value = setsResponseSchema.parse(responseBody).sets
|
||||
|
||||
return true
|
||||
} catch {
|
||||
sets.value = []
|
||||
error.value = LOAD_ERROR
|
||||
|
||||
return false
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
sets,
|
||||
loading,
|
||||
error,
|
||||
fetchSets,
|
||||
}
|
||||
})
|
||||
|
|
@ -1,12 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import BrandWordmark from '@/components/BrandWordmark.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useSetsStore } from '@/stores/sets'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const setsStore = useSetsStore()
|
||||
const { sets, loading, error } = storeToRefs(setsStore)
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
await setsStore.fetchSets()
|
||||
})
|
||||
|
||||
async function handleLogout(): Promise<void> {
|
||||
await authStore.logout()
|
||||
await router.push({ name: 'login' })
|
||||
|
|
@ -15,18 +24,39 @@ async function handleLogout(): Promise<void> {
|
|||
|
||||
<template>
|
||||
<main class="dashboard-page">
|
||||
<header>
|
||||
<header class="dashboard-header">
|
||||
<BrandWordmark theme="dark" />
|
||||
<button type="button" class="logout-button" @click="handleLogout">Log out</button>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<p>Dashboard</p>
|
||||
<h1>Your next step starts here.</h1>
|
||||
<span>
|
||||
Your goals and today's assignments will appear here once account authentication is
|
||||
connected.
|
||||
</span>
|
||||
<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>
|
||||
<p class="sets-catalog__description">
|
||||
Browse every set available in Attainly and find the collection that fits your next goal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p v-if="loading" class="catalog-state" role="status">Loading sets...</p>
|
||||
|
||||
<div v-else-if="error !== null" class="catalog-state catalog-state--error" role="alert">
|
||||
<p>{{ error }}</p>
|
||||
<button type="button" class="retry-button" @click="setsStore.fetchSets">Try again</button>
|
||||
</div>
|
||||
|
||||
<p v-else-if="sets.length === 0" class="catalog-state" role="status">
|
||||
No sets are available yet.
|
||||
</p>
|
||||
|
||||
<ul v-else class="set-grid" aria-label="Available sets">
|
||||
<li v-for="availableSet in sets" :key="availableSet.id">
|
||||
<article class="set-card">
|
||||
<p>Set</p>
|
||||
<h2>{{ availableSet.name }}</h2>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -40,7 +70,7 @@ async function handleLogout(): Promise<void> {
|
|||
background: #f4f1e7;
|
||||
}
|
||||
|
||||
header {
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
width: min(100%, 76rem);
|
||||
align-items: center;
|
||||
|
|
@ -76,13 +106,16 @@ header {
|
|||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
section {
|
||||
width: min(100%, 42rem);
|
||||
margin: clamp(6rem, 18vh, 12rem) auto 0;
|
||||
text-align: center;
|
||||
.sets-catalog {
|
||||
width: min(100%, 72rem);
|
||||
margin: clamp(4.5rem, 10vh, 7rem) auto 0;
|
||||
}
|
||||
|
||||
section p {
|
||||
.sets-catalog__introduction {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.sets-catalog__eyebrow {
|
||||
margin: 0 0 1rem;
|
||||
color: #926044;
|
||||
font-size: 0.72rem;
|
||||
|
|
@ -94,17 +127,112 @@ section p {
|
|||
h1 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: clamp(3rem, 7vw, 5rem);
|
||||
font-size: clamp(3rem, 7vw, 5.25rem);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
|
||||
section span {
|
||||
display: block;
|
||||
max-width: 34rem;
|
||||
margin: 1.5rem auto 0;
|
||||
.sets-catalog__description {
|
||||
max-width: 38rem;
|
||||
margin: 1.5rem 0 0;
|
||||
color: #68776f;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.catalog-state {
|
||||
width: 100%;
|
||||
min-height: 10rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 3rem 0 0;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
color: #68776f;
|
||||
background: rgb(255 253 247 / 72%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.catalog-state--error {
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-state--error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
border-color: #285c4e;
|
||||
background: #f9f5e9;
|
||||
}
|
||||
|
||||
.retry-button:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.set-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
|
||||
gap: 1rem;
|
||||
margin: 3rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.set-card {
|
||||
min-height: 11rem;
|
||||
padding: 1.6rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(135deg, rgb(255 253 247 / 96%), rgb(242 236 221 / 82%));
|
||||
box-shadow: 0 1rem 2.5rem rgb(40 62 52 / 8%);
|
||||
}
|
||||
|
||||
.set-card p {
|
||||
margin: 0 0 2.4rem;
|
||||
color: #926044;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.13em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.set-card h2 {
|
||||
margin: 0;
|
||||
color: #183029;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: clamp(1.65rem, 3vw, 2.1rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
@media (max-width: 37.5rem) {
|
||||
.dashboard-page {
|
||||
padding: 1.4rem 1.1rem 2.5rem;
|
||||
}
|
||||
|
||||
.sets-catalog {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.set-grid {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue