show today's assignments
This commit is contained in:
parent
e1d2262579
commit
85c9f4bbc9
GPG key ID:
0FA60884F75520A9
2 changed files with 282 additions and 5 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue