mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-17 17:07:07 +00:00
fix: fix assement overview
This commit is contained in:
@@ -61,6 +61,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
|
||||
const gridItem = document.createElement("li");
|
||||
gridItem.className = "item";
|
||||
gridItem.classList.add(OVERVIEW_MENU_CLASS);
|
||||
gridItem.dataset.betterseqta = "true";
|
||||
const label = document.createElement("label");
|
||||
label.textContent = "Overview";
|
||||
gridItem.appendChild(label);
|
||||
@@ -79,9 +80,11 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
|
||||
|
||||
const clickHandler = (e: Event) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
void loadGridView();
|
||||
};
|
||||
gridItem.addEventListener("click", clickHandler);
|
||||
gridItem.addEventListener("click", clickHandler, true);
|
||||
|
||||
const popstateHandler = () => {
|
||||
if (isOverviewRoute()) {
|
||||
@@ -131,16 +134,16 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
|
||||
|
||||
if (requestId !== loadRequestId) return;
|
||||
|
||||
void renderSkeletonLoader(container);
|
||||
renderSkeletonLoader(container);
|
||||
|
||||
try {
|
||||
const data = await getAssessmentsData();
|
||||
if (requestId !== loadRequestId) return;
|
||||
void renderGrid(container, data);
|
||||
renderGrid(container, data);
|
||||
} catch (err) {
|
||||
if (requestId !== loadRequestId) return;
|
||||
console.error("Failed to load assessments:", err);
|
||||
void renderErrorState(
|
||||
renderErrorState(
|
||||
container,
|
||||
err instanceof Error ? err.message : "Unknown error",
|
||||
);
|
||||
@@ -151,7 +154,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
|
||||
loadRequestId += 1;
|
||||
window.removeEventListener("popstate", popstateHandler);
|
||||
menuObserver.disconnect();
|
||||
gridItem.removeEventListener("click", clickHandler);
|
||||
gridItem.removeEventListener("click", clickHandler, true);
|
||||
teardownOverviewUi();
|
||||
gridItem.remove();
|
||||
};
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import renderSvelte from "@/interface/main";
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import AssessmentsOverview from "./AssessmentsOverview.svelte";
|
||||
import SkeletonLoader from "./SkeletonLoader.svelte";
|
||||
import ErrorState from "./ErrorState.svelte";
|
||||
import { unmount } from "svelte";
|
||||
|
||||
let currentApp: any = null;
|
||||
@@ -115,42 +119,26 @@ function prepareContainer(container: HTMLElement) {
|
||||
watchOverviewTheme(container);
|
||||
}
|
||||
|
||||
async function mountOverviewComponent(
|
||||
container: HTMLElement,
|
||||
loader: () => Promise<{ default: any }>,
|
||||
props: Record<string, unknown> = {},
|
||||
) {
|
||||
const [{ default: renderSvelte }, { default: Component }] = await Promise.all([
|
||||
import("@/interface/main"),
|
||||
loader(),
|
||||
]);
|
||||
currentApp = renderSvelte(Component, container, props);
|
||||
}
|
||||
|
||||
export async function renderGrid(container: HTMLElement, data: any) {
|
||||
export function renderGrid(container: HTMLElement, data: any) {
|
||||
if (currentApp) unmount(currentApp);
|
||||
prepareContainer(container);
|
||||
await mountOverviewComponent(container, () => import("./AssessmentsOverview.svelte"), {
|
||||
data,
|
||||
});
|
||||
currentApp = renderSvelte(AssessmentsOverview, container, { data });
|
||||
}
|
||||
|
||||
export async function renderSkeletonLoader(container: HTMLElement) {
|
||||
export function renderSkeletonLoader(container: HTMLElement) {
|
||||
if (currentApp) unmount(currentApp);
|
||||
prepareContainer(container);
|
||||
await mountOverviewComponent(container, () => import("./SkeletonLoader.svelte"));
|
||||
currentApp = renderSvelte(SkeletonLoader, container);
|
||||
}
|
||||
|
||||
export async function renderLoadingState(container: HTMLElement) {
|
||||
await renderSkeletonLoader(container);
|
||||
export function renderLoadingState(container: HTMLElement) {
|
||||
renderSkeletonLoader(container);
|
||||
}
|
||||
|
||||
export async function renderErrorState(container: HTMLElement, error: string) {
|
||||
export function renderErrorState(container: HTMLElement, error: string) {
|
||||
if (currentApp) unmount(currentApp);
|
||||
prepareContainer(container);
|
||||
await mountOverviewComponent(container, () => import("./ErrorState.svelte"), {
|
||||
error,
|
||||
});
|
||||
currentApp = renderSvelte(ErrorState, container, { error });
|
||||
}
|
||||
|
||||
export function teardownOverviewUi() {
|
||||
|
||||
Reference in New Issue
Block a user