Added Today View and show message with week info when in grading view.
Build and Test App / Build-and-test-App (push) Successful in 34s Details

This commit is contained in:
Andrew Lalis 2025-02-03 15:25:43 -05:00
parent 45ac42aa80
commit 4349e4f2c3
1 changed files with 31 additions and 5 deletions

View File

@ -22,7 +22,8 @@ const apiClient = new ClassroomComplianceAPIClient(authStore)
enum TableView {
FULL = "Full",
GRADING = "Grading",
WHITEBOARD = "Whiteboard"
WHITEBOARD = "Whiteboard",
TODAY = "Today"
}
const students: Ref<EntriesResponseStudent[]> = ref([])
@ -55,6 +56,12 @@ onMounted(async () => {
}
saveSortPreference()
})
// If the user selects "Today View", forcibly load the current week, so they'll only see today.
watch(selectedView, () => {
if (selectedView.value === TableView.TODAY) {
showThisWeek()
}
})
attemptSortByStoredPreference()
})
@ -185,6 +192,19 @@ async function discardEdits() {
}
}
function getVisibleDates(): string[] {
if (selectedView.value === TableView.FULL) return dates.value
if (selectedView.value === TableView.TODAY) {
const today = new Date()
today.setUTCHours(0, 0, 0, 0)
const todayStr = today.toISOString().substring(0, 10)
for (const date of dates.value) {
if (date === todayStr) return [date]
}
}
return []
}
function addAllEntriesForDate(dateStr: string) {
for (let i = 0; i < students.value.length; i++) {
const student = students.value[i]
@ -198,9 +218,10 @@ function addAllEntriesForDate(dateStr: string) {
<template>
<div>
<div class="button-bar">
<button type="button" @click="showPreviousWeek">Previous Week</button>
<button type="button" @click="showThisWeek">This Week</button>
<button type="button" @click="showNextWeek">Next Week</button>
<button type="button" @click="showPreviousWeek" :disabled="selectedView === TableView.TODAY">Previous
Week</button>
<button type="button" @click="showThisWeek" :disabled="selectedView === TableView.TODAY">This Week</button>
<button type="button" @click="showNextWeek" :disabled="selectedView === TableView.TODAY">Next Week</button>
<button type="button" @click="saveEdits" :disabled="!entriesChangedSinceLastSave">
Save
</button>
@ -217,15 +238,20 @@ function addAllEntriesForDate(dateStr: string) {
<option :value="TableView.FULL">Full View</option>
<option :value="TableView.GRADING">Grading View</option>
<option :value="TableView.WHITEBOARD">Whiteboard View</option>
<option :value="TableView.TODAY">Today View</option>
</select>
</div>
<p v-if="selectedView === TableView.GRADING">
Grading for the week from {{ fromDate.toLocaleDateString() }} to {{ toDate.toLocaleDateString() }}.
</p>
<table class="entries-table" :class="{ 'entries-table-reduced-view': selectedView !== TableView.FULL }">
<thead>
<tr>
<th>Student</th>
<th v-if="assignedDesks">Desk</th>
<DateHeaderCell v-for="date in selectedView === TableView.FULL ? dates : []" :key="date" :date-str="date"
<DateHeaderCell v-for="date in getVisibleDates()" :key="date" :date-str="date"
@add-all-entries-clicked="addAllEntriesForDate(date)" />
<th v-if="selectedView !== TableView.WHITEBOARD">Score</th>
</tr>