From ccb4354b265d5a7bb27d54031f99c9735d7c10e4 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Sat, 7 Jun 2025 23:49:28 +1000 Subject: [PATCH] feat: assessments overview mark as complete --- .../built-in/assessmentsOverview/api.ts | 114 ++-- .../built-in/assessmentsOverview/index.ts | 84 +-- .../built-in/assessmentsOverview/styles.css | 113 ++++ .../built-in/assessmentsOverview/ui.ts | 531 +++++++++++++----- .../built-in/assessmentsOverview/utils.ts | 112 ++-- 5 files changed, 669 insertions(+), 285 deletions(-) diff --git a/src/plugins/built-in/assessmentsOverview/api.ts b/src/plugins/built-in/assessmentsOverview/api.ts index 0d746403..84fd349d 100644 --- a/src/plugins/built-in/assessmentsOverview/api.ts +++ b/src/plugins/built-in/assessmentsOverview/api.ts @@ -1,5 +1,13 @@ -interface Subject { code: string; programme: number; metaclass: number; title: string; } -interface PrefItem { name: string; value: string; } +interface Subject { + code: string; + programme: number; + metaclass: number; + title: string; +} +interface PrefItem { + name: string; + value: string; +} let cache: { time: number; data: any } | null = null; const CACHE_MS = 10 * 60 * 1000; @@ -7,29 +15,31 @@ const student = 69; async function fetchJSON(url: string, body: any) { const res = await fetch(`${location.origin}${url}`, { - method: 'POST', - credentials: 'include', - headers: { 'Content-Type': 'application/json; charset=utf-8' }, + method: "POST", + credentials: "include", + headers: { "Content-Type": "application/json; charset=utf-8" }, body: JSON.stringify(body), }); return res.json(); } async function loadSubjects() { - const res = await fetchJSON('/seqta/student/load/subjects?', {}); - return res.payload.filter((s: any) => s.active === 1).flatMap((s: any) => s.subjects); + const res = await fetchJSON("/seqta/student/load/subjects?", {}); + return res.payload + .filter((s: any) => s.active === 1) + .flatMap((s: any) => s.subjects); } async function loadPrefs(student: number) { - const res = await fetchJSON('/seqta/student/load/prefs?', { - request: 'userPrefs', + const res = await fetchJSON("/seqta/student/load/prefs?", { + request: "userPrefs", asArray: true, user: student, }); const colors: Record = {}; res.payload.forEach((p: PrefItem) => { - if (p.name.startsWith('timetable.subject.colour.')) { - const code = p.name.replace('timetable.subject.colour.', ''); + if (p.name.startsWith("timetable.subject.colour.")) { + const code = p.name.replace("timetable.subject.colour.", ""); colors[code] = p.value; } }); @@ -37,45 +47,57 @@ async function loadPrefs(student: number) { } async function loadUpcoming(student: number) { - const res = await fetchJSON('/seqta/student/assessment/list/upcoming?', { student }); + const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", { + student, + }); return res.payload; } async function loadPast(student: number, subjects: Subject[]) { const map: Record = {}; - await Promise.all(subjects.map(async (s) => { - const res = await fetchJSON('/seqta/student/assessment/list/past?', { - programme: s.programme, - metaclass: s.metaclass, - student, - }); - if (res.payload.tasks) { - res.payload.tasks.forEach((t: any) => { map[t.id] = t; }); - } - })); + await Promise.all( + subjects.map(async (s) => { + const res = await fetchJSON("/seqta/student/assessment/list/past?", { + programme: s.programme, + metaclass: s.metaclass, + student, + }); + if (res.payload.tasks) { + res.payload.tasks.forEach((t: any) => { + map[t.id] = t; + }); + } + }), + ); return map; } async function loadSubmissions(student: number, assessments: any[]) { const submissionMap: Record = {}; - - // Fetch submission status for each assessment - await Promise.all(assessments.map(async (assessment) => { - try { - const res = await fetchJSON('/seqta/student/assessment/submissions/get', { - assessment: assessment.id, - metaclass: assessment.metaclassID, - student, - }); - - // If there are any submissions, mark as submitted - submissionMap[assessment.id] = res.payload && res.payload.length > 0; - } catch (error) { - console.warn(`Failed to fetch submission for assessment ${assessment.id}:`, error); - submissionMap[assessment.id] = false; - } - })); - + + await Promise.all( + assessments.map(async (assessment) => { + try { + const res = await fetchJSON( + "/seqta/student/assessment/submissions/get", + { + assessment: assessment.id, + metaclass: assessment.metaclassID, + student, + }, + ); + + submissionMap[assessment.id] = res.payload && res.payload.length > 0; + } catch (error) { + console.warn( + `Failed to fetch submission for assessment ${assessment.id}:`, + error, + ); + submissionMap[assessment.id] = false; + } + }), + ); + return submissionMap; } @@ -88,21 +110,21 @@ export async function getAssessmentsData() { ]); const pastMap = await loadPast(student, subjects); const map: Record = {}; - upcoming.forEach((a: any) => { map[a.id] = { ...a }; }); + upcoming.forEach((a: any) => { + map[a.id] = { ...a }; + }); Object.values(pastMap).forEach((t: any) => { if (map[t.id]) Object.assign(map[t.id], t); else map[t.id] = t; }); - - // Load submission data for all assessments + const allAssessments = Object.values(map); const submissions = await loadSubmissions(student, allAssessments); - - // Add submission status to each assessment + allAssessments.forEach((assessment: any) => { assessment.submitted = submissions[assessment.id] || false; }); - + const data = { assessments: allAssessments, subjects, colors }; cache = { time: Date.now(), data }; return data; diff --git a/src/plugins/built-in/assessmentsOverview/index.ts b/src/plugins/built-in/assessmentsOverview/index.ts index 33888ae7..24ac48e1 100644 --- a/src/plugins/built-in/assessmentsOverview/index.ts +++ b/src/plugins/built-in/assessmentsOverview/index.ts @@ -1,29 +1,35 @@ -import type { Plugin } from '../../core/types'; -import { waitForElm } from '@/seqta/utils/waitForElm'; -import { getAssessmentsData } from './api'; -import { renderSkeletonLoader, renderErrorState } from './ui'; -import styles from './styles.css?inline'; -import { delay } from '@/seqta/utils/delay'; +import type { Plugin } from "../../core/types"; +import { waitForElm } from "@/seqta/utils/waitForElm"; +import { getAssessmentsData } from "./api"; +import { renderSkeletonLoader, renderErrorState } from "./ui"; +import styles from "./styles.css?inline"; +import { delay } from "@/seqta/utils/delay"; const assessmentsOverviewPlugin: Plugin<{}> = { - id: 'assessments-overview', - name: 'Assessments Overview', - description: 'Adds an overview option to the assessments page that organizes assessments by status', - version: '1.0.0', + id: "assessments-overview", + name: "Assessments Overview", + description: + "Adds an overview option to the assessments page that organizes assessments by status", + version: "1.0.0", settings: {}, disableToggle: false, styles, run: async () => { - const menu = (await waitForElm('[data-key="assessments"] > .sub > ul', true, 100, 60)) as HTMLElement; - const gridItem = document.createElement('li'); - gridItem.className = 'item'; - const label = document.createElement('label'); - label.textContent = 'Overview'; + const menu = (await waitForElm( + '[data-key="assessments"] > .sub > ul', + true, + 100, + 60, + )) as HTMLElement; + const gridItem = document.createElement("li"); + gridItem.className = "item"; + const label = document.createElement("label"); + label.textContent = "Overview"; gridItem.appendChild(label); menu.insertBefore(gridItem, menu.children[1] || null); - if (window.location.hash.includes('/assessments/overview')) { + if (window.location.hash.includes("/assessments/overview")) { loadGridView(); } @@ -31,42 +37,50 @@ const assessmentsOverviewPlugin: Plugin<{}> = { e.preventDefault(); loadGridView(); }; - gridItem.addEventListener('click', clickHandler); + gridItem.addEventListener("click", clickHandler); async function loadGridView() { await delay(1); - window.history.pushState({}, '', '/#?page=/assessments/overview'); - const main = document.getElementById('main'); + window.history.pushState({}, "", "/#?page=/assessments/overview"); + document.title = "Overview ― SEQTA Learn"; + const main = document.getElementById("main"); if (!main) return; - // Update navigation state - document.querySelectorAll('[data-key="assessments"] .item').forEach(item => { - item.classList.remove('active'); - }); - gridItem.classList.add('active'); - document.querySelector('[data-key="assessments"]')?.classList.add('active'); - - // Clear main content and add container + document + .querySelectorAll('[data-key="assessments"] .item') + .forEach((item) => { + item.classList.remove("active"); + }); + gridItem.classList.add("active"); + document + .querySelector('[data-key="assessments"]') + ?.classList.add("active"); + main.innerHTML = '
'; - const container = document.getElementById('grid-view-container') as HTMLElement; - + const container = document.getElementById( + "grid-view-container", + ) as HTMLElement; + renderSkeletonLoader(container); - + try { const data = await getAssessmentsData(); - const { renderGrid } = await import('./ui'); + const { renderGrid } = await import("./ui"); renderGrid(container, data); } catch (err) { - console.error('Failed to load assessments:', err); - renderErrorState(container, err instanceof Error ? err.message : 'Unknown error'); + console.error("Failed to load assessments:", err); + renderErrorState( + container, + err instanceof Error ? err.message : "Unknown error", + ); } } return () => { - gridItem.removeEventListener('click', clickHandler); + gridItem.removeEventListener("click", clickHandler); gridItem.remove(); }; }, }; -export default assessmentsOverviewPlugin; \ No newline at end of file +export default assessmentsOverviewPlugin; diff --git a/src/plugins/built-in/assessmentsOverview/styles.css b/src/plugins/built-in/assessmentsOverview/styles.css index 6e908b7a..2b47624c 100644 --- a/src/plugins/built-in/assessmentsOverview/styles.css +++ b/src/plugins/built-in/assessmentsOverview/styles.css @@ -224,12 +224,125 @@ background: var(--subject-color, #d41e3a); } +.card-menu { + position: absolute; + top: 0.75rem; + right: 0.75rem; + z-index: 20; +} + +.menu-button { + background: transparent !important; + border: none !important; + padding: 0.25rem !important; + cursor: pointer; + border-radius: 4px; + color: #64748b; + transition: all 0.2s ease; + display: flex !important; + align-items: center; + justify-content: center; + width: 24px !important; + height: 24px !important; + margin: 0 !important; + position: static !important; + transform: none !important; + box-shadow: none !important; + outline: none !important; +} + +.menu-button:hover { + background: #f1f5f9 !important; + color: #1a1a1a; +} + +.menu-button svg { + width: 16px !important; + height: 16px !important; + fill: currentColor !important; + display: block !important; +} + +.dark .menu-button { + color: var(--text-primary); + opacity: 0.7; +} + +.dark .menu-button:hover { + background: rgba(255, 255, 255, 0.1) !important; + opacity: 1; +} + +.menu-dropdown { + position: absolute; + top: 100%; + right: 0; + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + min-width: 140px; + z-index: 30; + margin-top: 4px; +} + +.dark .menu-dropdown { + background: var(--background-secondary); + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.menu-item { + display: block; + width: 100%; + padding: 0.5rem 0.75rem; + background: transparent; + border: none; + text-align: left; + cursor: pointer; + font-size: 0.875rem; + color: #1a1a1a; + transition: background-color 0.2s ease; + white-space: nowrap; +} + +.menu-item:hover { + background: #f8fafc; +} + +.dark .menu-item { + color: var(--text-primary); +} + +.dark .menu-item:hover { + background: rgba(255, 255, 255, 0.05); +} + +.menu-item.mark-completed { + color: #059669; + font-weight: 500; +} + +.dark .menu-item.mark-completed { + color: #10b981; +} + +.menu-item.mark-not-completed { + color: #dc2626; + font-weight: 500; +} + +.dark .menu-item.mark-not-completed { + color: #ef4444; +} + .assessment-title { font-size: 0.875rem; font-weight: 600; color: #1a1a1a; margin: 0 0 0.75rem 0; line-height: 1.4; + padding-right: 2rem; /* Make room for menu button */ } .dark .assessment-title { diff --git a/src/plugins/built-in/assessmentsOverview/ui.ts b/src/plugins/built-in/assessmentsOverview/ui.ts index cb9a3ab6..75c41ed1 100644 --- a/src/plugins/built-in/assessmentsOverview/ui.ts +++ b/src/plugins/built-in/assessmentsOverview/ui.ts @@ -1,40 +1,53 @@ -import { determineStatus, formatDate, getGradeValue } from './utils'; -import { settingsState } from '@/seqta/utils/listeners/SettingsState'; +import { determineStatus, formatDate, getGradeValue } from "./utils"; +import { settingsState } from "@/seqta/utils/listeners/SettingsState"; function percentageToLetter(percentage: number): string { const letterMap: Record = { - 100: 'A+', 95: 'A', 90: 'A-', 85: 'B+', 80: 'B', 75: 'B-', - 70: 'C+', 65: 'C', 60: 'C-', 55: 'D+', 50: 'D', 45: 'D-', - 40: 'E+', 35: 'E', 30: 'E-', 0: 'F' + 100: "A+", + 95: "A", + 90: "A-", + 85: "B+", + 80: "B", + 75: "B-", + 70: "C+", + 65: "C", + 60: "C-", + 55: "D+", + 50: "D", + 45: "D-", + 40: "E+", + 35: "E", + 30: "E-", + 0: "F", }; - + const rounded = Math.ceil(percentage / 5) * 5; - return letterMap[rounded] || 'F'; + return letterMap[rounded] || "F"; } interface FilterOptions { subject: string; - sortBy: 'due' | 'grade' | 'subject' | 'title'; + sortBy: "due" | "grade" | "subject" | "title"; } let currentFilters: FilterOptions = { - subject: 'all', - sortBy: 'due' + subject: "all", + sortBy: "due", }; export function renderGrid(container: HTMLElement, data: any) { - container.innerHTML = ''; - container.className = ''; - container.id = 'grid-view-container'; - - const header = document.createElement('div'); - header.className = 'grid-view-header'; - header.innerHTML = /* html */` + container.innerHTML = ""; + container.className = ""; + container.id = "grid-view-container"; + + const header = document.createElement("div"); + header.className = "grid-view-header"; + header.innerHTML = `

Assessments

`; - + container.appendChild(header); - - const subjectFilter = header.querySelector('#subject-filter') as HTMLSelectElement; - const sortFilter = header.querySelector('#sort-filter') as HTMLSelectElement; - - subjectFilter.addEventListener('change', () => { + + const subjectFilter = header.querySelector( + "#subject-filter", + ) as HTMLSelectElement; + const sortFilter = header.querySelector("#sort-filter") as HTMLSelectElement; + + subjectFilter.addEventListener("change", () => { currentFilters.subject = subjectFilter.value; renderAssessments(); }); - - sortFilter.addEventListener('change', () => { + + sortFilter.addEventListener("change", () => { currentFilters.sortBy = sortFilter.value as any; renderAssessments(); }); - const mainContent = document.createElement('div'); - mainContent.id = 'main-grid-content'; + const mainContent = document.createElement("div"); + mainContent.id = "main-grid-content"; container.appendChild(mainContent); function renderAssessments() { - const contentArea = container.querySelector('#main-grid-content') as HTMLElement; - contentArea.innerHTML = ''; + const contentArea = container.querySelector( + "#main-grid-content", + ) as HTMLElement; + contentArea.innerHTML = ""; - // Filter assessments by subject let filteredAssessments = data.assessments.filter((a: any) => { - const subjectMatch = currentFilters.subject === 'all' || a.code === currentFilters.subject; + const subjectMatch = + currentFilters.subject === "all" || a.code === currentFilters.subject; return subjectMatch; }); - // Sort assessments filteredAssessments.sort((a: any, b: any) => { switch (currentFilters.sortBy) { - case 'due': + case "due": return new Date(a.due).getTime() - new Date(b.due).getTime(); - case 'grade': + case "grade": const gradeA = getGradeValue(a); const gradeB = getGradeValue(b); if (gradeA === null && gradeB === null) return 0; if (gradeA === null) return 1; if (gradeB === null) return -1; return gradeB - gradeA; - case 'subject': + case "subject": return a.code.localeCompare(b.code); - case 'title': + case "title": return a.title.localeCompare(b.title); default: return 0; @@ -108,74 +124,77 @@ export function renderGrid(container: HTMLElement, data: any) { renderKanbanBoard(contentArea, filteredAssessments, data); } - function renderKanbanBoard(container: HTMLElement, assessments: any[], data: any) { - // Group assessments by status + function renderKanbanBoard( + container: HTMLElement, + assessments: any[], + data: any, + ) { const statusGroups = { - 'UPCOMING': [] as any[], - 'DUE_SOON': [] as any[], - 'OVERDUE': [] as any[], - 'SUBMITTED': [] as any[], - 'MARKS_RELEASED': [] as any[] + UPCOMING: [] as any[], + DUE_SOON: [] as any[], + OVERDUE: [] as any[], + SUBMITTED: [] as any[], + MARKS_RELEASED: [] as any[], }; - assessments.forEach(assessment => { + assessments.forEach((assessment) => { const status = determineStatus(assessment); if (statusGroups[status as keyof typeof statusGroups]) { statusGroups[status as keyof typeof statusGroups].push(assessment); } }); - const board = document.createElement('div'); - board.className = 'kanban-board'; + const board = document.createElement("div"); + board.className = "kanban-board"; const columns = [ { - key: 'UPCOMING', - title: 'Upcoming', - className: 'column-upcoming', - icon: '📅' + key: "UPCOMING", + title: "Upcoming", + className: "column-upcoming", + icon: "📅", }, { - key: 'DUE_SOON', - title: 'Due Soon', - className: 'column-due-soon', - icon: '⏰' + key: "DUE_SOON", + title: "Due Soon", + className: "column-due-soon", + icon: "⏰", }, { - key: 'OVERDUE', - title: 'Overdue', - className: 'column-overdue', - icon: '🚨' + key: "OVERDUE", + title: "Overdue", + className: "column-overdue", + icon: "🚨", }, { - key: 'SUBMITTED', - title: 'Submitted', - className: 'column-submitted', - icon: '📝' + key: "SUBMITTED", + title: "Submitted", + className: "column-submitted", + icon: "📝", }, { - key: 'MARKS_RELEASED', - title: 'Marked', - className: 'column-marked', - icon: '✅' - } + key: "MARKS_RELEASED", + title: "Marked", + className: "column-marked", + icon: "✅", + }, ]; - columns.forEach(column => { - const assessmentList = statusGroups[column.key as keyof typeof statusGroups]; - - // Skip SUBMITTED column if it's empty - if (column.key === 'SUBMITTED' && assessmentList.length === 0) { + columns.forEach((column) => { + const assessmentList = + statusGroups[column.key as keyof typeof statusGroups]; + + if (column.key === "SUBMITTED" && assessmentList.length === 0) { return; } - - const columnParentEl = document.createElement('div'); - columnParentEl.className = 'kanban-column-parent'; - const columnEl = document.createElement('div'); + const columnParentEl = document.createElement("div"); + columnParentEl.className = "kanban-column-parent"; + + const columnEl = document.createElement("div"); columnEl.className = `kanban-column ${column.className}`; - - columnEl.innerHTML = /* html */` + + columnEl.innerHTML = `
${column.icon} ${column.title} @@ -185,18 +204,25 @@ export function renderGrid(container: HTMLElement, data: any) {
`; - const cardsContainer = columnEl.querySelector(`#${column.key.toLowerCase()}-cards`) as HTMLElement; - + const cardsContainer = columnEl.querySelector( + `#${column.key.toLowerCase()}-cards`, + ) as HTMLElement; + if (assessmentList.length === 0) { - cardsContainer.innerHTML = /* html */` + cardsContainer.innerHTML = `
${column.icon}

No ${column.title.toLowerCase()} assessments

`; } else { - assessmentList.forEach(assessment => { - cardsContainer.appendChild(createKanbanCard(assessment, data.colors[assessment.code] || '#6366f1')); + assessmentList.forEach((assessment) => { + cardsContainer.appendChild( + createKanbanCard( + assessment, + data.colors[assessment.code] || "#6366f1", + ), + ); }); } @@ -211,35 +237,80 @@ export function renderGrid(container: HTMLElement, data: any) { const status = determineStatus(assessment); const dueDateClass = getDueDateClass(assessment); - const card = document.createElement('div'); - card.className = 'assessment-card'; + const completedKey = "betterseqta-completed-assessments"; + const completed = JSON.parse(localStorage.getItem(completedKey) || "[]"); + const isManuallyCompleted = completed.includes(assessment.id); + + const card = document.createElement("div"); + card.className = "assessment-card"; card.dataset.subject = assessment.code; card.dataset.status = status; - card.style.setProperty('--subject-color', color); + card.style.setProperty("--subject-color", color); card.innerHTML = `
${assessment.code} - ${assessment.submitted ? 'Submitted' : ''} + ${assessment.submitted ? 'Submitted' : ""} + ${isManuallyCompleted && status === "MARKS_RELEASED" && !assessment.results ? 'Completed' : ""}
+ ${ + status !== "MARKS_RELEASED" + ? ` +
+ + +
+ ` + : isManuallyCompleted + ? ` +
+ + +
+ ` + : "" + }

${assessment.title}

- ${!assessment.results ? ` + ${ + !assessment.results && !isManuallyCompleted + ? `
📅 ${formatDate(assessment.due, assessment.submitted)}
- ` : ''} - ${assessment.results - ? /* html */` + ` + : "" + } + ${ + assessment.results + ? `
${(() => { const allSettings = settingsState.getAll() as unknown as any; - const letterGradeSetting = allSettings['plugin.assessments-average.settings']?.lettergrade; - return letterGradeSetting + const letterGradeSetting = + allSettings["plugin.assessments-average.settings"] + ?.lettergrade; + return letterGradeSetting ? percentageToLetter(assessment.results.percentage) : `${assessment.results.percentage}%`; })()} @@ -247,44 +318,192 @@ export function renderGrid(container: HTMLElement, data: any) {
- ` : '' + ` + : "" } `; - card.addEventListener('click', () => { + card.addEventListener("click", (e) => { + if ((e.target as HTMLElement).closest(".card-menu")) { + return; + } window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`; }); + if (status !== "MARKS_RELEASED" || isManuallyCompleted) { + const menuButton = card.querySelector( + ".menu-button", + ) as HTMLButtonElement; + const menuDropdown = card.querySelector(".menu-dropdown") as HTMLElement; + const markCompletedBtn = card.querySelector( + ".mark-completed", + ) as HTMLButtonElement; + const markNotCompletedBtn = card.querySelector( + ".mark-not-completed", + ) as HTMLButtonElement; + + menuButton?.addEventListener("click", (e) => { + e.stopPropagation(); + + document.querySelectorAll(".menu-dropdown").forEach((dropdown) => { + if (dropdown !== menuDropdown) { + (dropdown as HTMLElement).style.display = "none"; + } + }); + + menuDropdown.style.display = + menuDropdown.style.display === "none" ? "block" : "none"; + }); + + markCompletedBtn?.addEventListener("click", (e) => { + e.stopPropagation(); + markAssessmentCompleted(assessment); + menuDropdown.style.display = "none"; + }); + + markNotCompletedBtn?.addEventListener("click", (e) => { + e.stopPropagation(); + unmarkAssessmentCompleted(assessment); + menuDropdown.style.display = "none"; + }); + + document.addEventListener("click", (e) => { + if (!card.contains(e.target as Node)) { + menuDropdown.style.display = "none"; + } + }); + } + return card; } + function markAssessmentCompleted(assessment: any) { + const completedKey = "betterseqta-completed-assessments"; + const completed = JSON.parse(localStorage.getItem(completedKey) || "[]"); + + if (!completed.includes(assessment.id)) { + completed.push(assessment.id); + localStorage.setItem(completedKey, JSON.stringify(completed)); + + updateAssessmentCard(assessment); + } + } + + function unmarkAssessmentCompleted(assessment: any) { + const completedKey = "betterseqta-completed-assessments"; + const completed = JSON.parse(localStorage.getItem(completedKey) || "[]"); + + const index = completed.indexOf(assessment.id); + if (index > -1) { + completed.splice(index, 1); + localStorage.setItem(completedKey, JSON.stringify(completed)); + + updateAssessmentCard(assessment); + } + } + + function updateAssessmentCard(assessment: any) { + const existingCard = document + .querySelector(`[data-assessment-id="${assessment.id}"]`) + ?.closest(".assessment-card") as HTMLElement; + if (!existingCard) return; + + const newStatus = determineStatus(assessment); + const completedKey = "betterseqta-completed-assessments"; + const completed = JSON.parse(localStorage.getItem(completedKey) || "[]"); + const isManuallyCompleted = completed.includes(assessment.id); + + const currentColumn = existingCard.closest(".column-cards") as HTMLElement; + const currentColumnId = currentColumn?.id; + const targetColumnId = `${newStatus.toLowerCase()}-cards`; + + if (currentColumnId !== targetColumnId) { + const targetColumn = document.getElementById(targetColumnId); + if (targetColumn) { + existingCard.remove(); + + const newCard = createKanbanCard( + assessment, + data.colors[assessment.code] || "#6366f1", + ); + targetColumn.appendChild(newCard); + + updateColumnCounts(); + + const emptyState = targetColumn.querySelector(".empty-column"); + if (emptyState) { + emptyState.remove(); + } + + if (currentColumn && currentColumn.children.length === 0) { + const columnKey = currentColumnId + ?.replace("-cards", "") + .toUpperCase(); + const columnInfo = getColumnInfo(columnKey); + if (columnInfo) { + currentColumn.innerHTML = ` +
+
${columnInfo.icon}
+

No ${columnInfo.title.toLowerCase()} assessments

+
+ `; + } + } + } + } else { + const newCard = createKanbanCard( + assessment, + data.colors[assessment.code] || "#6366f1", + ); + existingCard.replaceWith(newCard); + } + } + + function updateColumnCounts() { + document.querySelectorAll(".column-count").forEach((countEl) => { + const column = countEl.closest(".kanban-column"); + const cardsContainer = column?.querySelector(".column-cards"); + const cardCount = + cardsContainer?.querySelectorAll(".assessment-card").length || 0; + countEl.textContent = cardCount.toString(); + }); + } + + function getColumnInfo(columnKey: string | undefined) { + const columns = { + UPCOMING: { title: "Upcoming", icon: "📅" }, + DUE_SOON: { title: "Due Soon", icon: "⏰" }, + OVERDUE: { title: "Overdue", icon: "🚨" }, + SUBMITTED: { title: "Submitted", icon: "📝" }, + MARKS_RELEASED: { title: "Marked", icon: "✅" }, + }; + return columnKey ? columns[columnKey as keyof typeof columns] : null; + } function getDueDateClass(assessment: any): string { const status = determineStatus(assessment); switch (status) { - case 'OVERDUE': - return 'overdue'; - case 'DUE_SOON': - return 'due-soon'; - case 'UPCOMING': - return 'upcoming'; + case "OVERDUE": + return "overdue"; + case "DUE_SOON": + return "due-soon"; + case "UPCOMING": + return "upcoming"; default: - return ''; + return ""; } } - // Initial render renderAssessments(); } export function renderSkeletonLoader(container: HTMLElement) { - container.innerHTML = ''; - container.className = ''; - container.id = 'grid-view-container'; - - // Create header with disabled filters - const header = document.createElement('div'); - header.className = 'grid-view-header'; + container.innerHTML = ""; + container.className = ""; + container.id = "grid-view-container"; + + const header = document.createElement("div"); + header.className = "grid-view-header"; header.innerHTML = `

Assessments

@@ -296,55 +515,55 @@ export function renderSkeletonLoader(container: HTMLElement) {
`; - + container.appendChild(header); - const mainContent = document.createElement('div'); - mainContent.id = 'main-grid-content'; + const mainContent = document.createElement("div"); + mainContent.id = "main-grid-content"; container.appendChild(mainContent); const columns = [ { - key: 'UPCOMING', - title: 'Upcoming', - className: 'column-upcoming', - icon: '📅', - skeletonCount: 3 + key: "UPCOMING", + title: "Upcoming", + className: "column-upcoming", + icon: "📅", + skeletonCount: 3, }, { - key: 'DUE_SOON', - title: 'Due Soon', - className: 'column-due-soon', - icon: '⏰', - skeletonCount: 2 + key: "DUE_SOON", + title: "Due Soon", + className: "column-due-soon", + icon: "⏰", + skeletonCount: 2, }, { - key: 'OVERDUE', - title: 'Overdue', - className: 'column-overdue', - icon: '🚨', - skeletonCount: 1 + key: "OVERDUE", + title: "Overdue", + className: "column-overdue", + icon: "🚨", + skeletonCount: 1, }, { - key: 'MARKS_RELEASED', - title: 'Marked', - className: 'column-marked', - icon: '✅', - skeletonCount: 4 - } + key: "MARKS_RELEASED", + title: "Marked", + className: "column-marked", + icon: "✅", + skeletonCount: 4, + }, ]; - const board = document.createElement('div'); - board.className = 'kanban-board'; + const board = document.createElement("div"); + board.className = "kanban-board"; - columns.forEach(column => { - const columnParentEl = document.createElement('div'); - columnParentEl.className = 'kanban-column-parent'; + columns.forEach((column) => { + const columnParentEl = document.createElement("div"); + columnParentEl.className = "kanban-column-parent"; - const columnEl = document.createElement('div'); + const columnEl = document.createElement("div"); columnEl.className = `kanban-column ${column.className}`; - - columnEl.innerHTML = /* html */` + + columnEl.innerHTML = `
${column.icon} ${column.title} @@ -354,10 +573,14 @@ export function renderSkeletonLoader(container: HTMLElement) {
`; - const cardsContainer = columnEl.querySelector(`#${column.key.toLowerCase()}-cards`) as HTMLElement; - + const cardsContainer = columnEl.querySelector( + `#${column.key.toLowerCase()}-cards`, + ) as HTMLElement; + for (let i = 0; i < column.skeletonCount; i++) { - cardsContainer.appendChild(createSkeletonCard(column.key === 'MARKS_RELEASED')); + cardsContainer.appendChild( + createSkeletonCard(column.key === "MARKS_RELEASED"), + ); } columnParentEl.appendChild(columnEl); @@ -368,19 +591,23 @@ export function renderSkeletonLoader(container: HTMLElement) { } function createSkeletonCard(footer: boolean = false): HTMLElement { - const card = document.createElement('div'); - card.className = 'assessment-card'; + const card = document.createElement("div"); + card.className = "assessment-card"; card.innerHTML = `
- ${footer ? /* html */` + ${ + footer + ? `
- ` : ''} + ` + : "" + } `; return card; @@ -391,10 +618,10 @@ export function renderLoadingState(container: HTMLElement) { } export function renderErrorState(container: HTMLElement, error: string) { - container.innerHTML = /* html */` + container.innerHTML = `

Failed to load assessments

${error}

`; -} \ No newline at end of file +} diff --git a/src/plugins/built-in/assessmentsOverview/utils.ts b/src/plugins/built-in/assessmentsOverview/utils.ts index bf8cb2ae..f058fd80 100644 --- a/src/plugins/built-in/assessmentsOverview/utils.ts +++ b/src/plugins/built-in/assessmentsOverview/utils.ts @@ -3,91 +3,99 @@ export function formatDate(dateStr: string, submitted?: boolean): string { const now = new Date(); const diffTime = d.getTime() - now.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); - - // If it's overdue but don't show overdue text for submitted assessments + if (diffDays < 0 && !submitted) { const overdueDays = Math.abs(diffDays); - if (overdueDays === 1) return '1 day overdue'; + if (overdueDays === 1) return "1 day overdue"; return `${overdueDays} days overdue`; } - - // If it's today - if (diffDays === 0) return 'Today'; - - // If it's tomorrow - if (diffDays === 1) return 'Tomorrow'; - - // If it's within a week + + if (diffDays === 0) return "Today"; + + if (diffDays === 1) return "Tomorrow"; + if (diffDays <= 7) { - const weekdayName = d.toLocaleDateString(undefined, { weekday: 'long' }); - // If it's in the past, add "Last" prefix + const weekdayName = d.toLocaleDateString(undefined, { weekday: "long" }); + return diffDays < 0 ? `Last ${weekdayName}` : weekdayName; } - - // Otherwise show full date + return d.toLocaleDateString(undefined, { - weekday: 'short', - month: 'short', - day: 'numeric', - year: d.getFullYear() !== now.getFullYear() ? 'numeric' : undefined + weekday: "short", + month: "short", + day: "numeric", + year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined, }); } export function determineStatus(item: any): string { - // Check if marks are released or if there's a grade - if (item.status === 'MARKS_RELEASED' || item.grade || - (item.percentage !== undefined && item.percentage !== null) || - (item.achieved !== undefined && item.achieved !== null)) { - return 'MARKS_RELEASED'; + if ( + item.status === "MARKS_RELEASED" || + item.grade || + (item.percentage !== undefined && item.percentage !== null) || + (item.achieved !== undefined && item.achieved !== null) + ) { + return "MARKS_RELEASED"; } - - // Check if submitted (awaiting marking) + + const completedKey = "betterseqta-completed-assessments"; + const completed = JSON.parse(localStorage.getItem(completedKey) || "[]"); + if (completed.includes(item.id)) { + return "MARKS_RELEASED"; + } + if (item.submitted) { - return 'SUBMITTED'; + return "SUBMITTED"; } - + const now = new Date(); const due = new Date(item.due); - - // Calculate the difference in days (consistent with formatDate) + const diffTime = due.getTime() - now.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); - - // Check if overdue (past due date, but not including today) + if (diffDays < 0) { - return 'OVERDUE'; + return "OVERDUE"; } - - // Check if due soon (today through 7 days from now) + if (diffDays <= 7) { - return 'DUE_SOON'; + return "DUE_SOON"; } - - return 'UPCOMING'; + + return "UPCOMING"; } export function getGradeValue(assessment: any): number | null { - // Check results.percentage first (most common for graded assessments) - if (assessment.results?.percentage !== undefined && assessment.results.percentage !== null) { + if ( + assessment.results?.percentage !== undefined && + assessment.results.percentage !== null + ) { return assessment.results.percentage; } - - // Check direct percentage property + if (assessment.percentage !== undefined && assessment.percentage !== null) { return assessment.percentage; } - - // Check achieved/outOf combination - if (assessment.achieved !== undefined && assessment.outOf !== undefined && - assessment.achieved !== null && assessment.outOf !== null && assessment.outOf > 0) { + + if ( + assessment.achieved !== undefined && + assessment.outOf !== undefined && + assessment.achieved !== null && + assessment.outOf !== null && + assessment.outOf > 0 + ) { return (assessment.achieved / assessment.outOf) * 100; } - - // Check results achieved/outOf combination - if (assessment.results?.achieved !== undefined && assessment.results?.outOf !== undefined && - assessment.results.achieved !== null && assessment.results.outOf !== null && assessment.results.outOf > 0) { + + if ( + assessment.results?.achieved !== undefined && + assessment.results?.outOf !== undefined && + assessment.results.achieved !== null && + assessment.results.outOf !== null && + assessment.results.outOf > 0 + ) { return (assessment.results.achieved / assessment.results.outOf) * 100; } - + return null; -} \ No newline at end of file +}