rythondev/dsec-notebook
1
0
Fork 0
mirror of https://github.com/dsec-hub/dsec-notebook.git synced 2026-09-22 07:24:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added prompt to display unsaved changes before leaving post

Browse source
This commit is contained in:
liyunze 2026-09-04 19:58:17 +08:00
parent 56d4895ce7
commit 638a44c2bf
2 changed files with 56 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/routes/post/note/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { query, mutation } from "$lib/api"; import { query, mutation } from "$lib/api";
import { isAuthenticated, getToken, initAuth } from "$lib/stores/auth"; import { isAuthenticated, getToken, initAuth } from "$lib/stores/auth";
import { goto } from "$app/navigation"; import { beforeNavigate, goto } from "$app/navigation";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { get } from "svelte/store"; import { get } from "svelte/store";
import MarkdownEditor from "$lib/components/MarkdownEditor.svelte"; import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
@ -19,6 +19,30 @@
let useCustomUnit = $state(false); let useCustomUnit = $state(false);
let error = $state(""); let error = $state("");
let loading = $state(false); let loading = $state(false);
let allowLeave = $state(false);
const isDirty = $derived(
Boolean(
title.trim() ||
content.trim() ||
selectedTopicId ||
selectedUnitId ||
customUnit.trim(),
),
);
beforeNavigate(({ cancel, type }) => {
if (allowLeave || !isDirty || type === "leave") return;
if (!confirm("Are you sure? You have unsaved changes.")) {
cancel();
}
});
function handleBeforeUnload(event: BeforeUnloadEvent) {
if (allowLeave || !isDirty) return;
event.preventDefault();
event.returnValue = "";
}
const topicOptions = $derived( const topicOptions = $derived(
topics.map((topic) => ({ topics.map((topic) => ({
@ -93,6 +117,7 @@
unitId, unitId,
})) as string; })) as string;
allowLeave = true;
goto(unitCode ? postPath(unitCode, id) : `/notes/${id}`); goto(unitCode ? postPath(unitCode, id) : `/notes/${id}`);
} catch (err: any) { } catch (err: any) {
error = err.message ?? "Failed to publish note"; error = err.message ?? "Failed to publish note";
@ -106,6 +131,8 @@
<title>Post a note — Notebook</title> <title>Post a note — Notebook</title>
</svelte:head> </svelte:head>
<svelte:window onbeforeunload={handleBeforeUnload} />
<div class="page"> <div class="page">
<h1 class="text-ink font-serif text-4xl font-medium">Post a note</h1> <h1 class="text-ink font-serif text-4xl font-medium">Post a note</h1>
<p class="text-muted mt-2 mb-10 text-[15px]">Share study notes with the Deakin community.</p> <p class="text-muted mt-2 mb-10 text-[15px]">Share study notes with the Deakin community.</p>

29
src/routes/post/question/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { query, mutation } from "$lib/api"; import { query, mutation } from "$lib/api";
import { isAuthenticated, getToken, initAuth } from "$lib/stores/auth"; import { isAuthenticated, getToken, initAuth } from "$lib/stores/auth";
import { goto } from "$app/navigation"; import { beforeNavigate, goto } from "$app/navigation";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { get } from "svelte/store"; import { get } from "svelte/store";
import MarkdownEditor from "$lib/components/MarkdownEditor.svelte"; import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
@ -19,6 +19,30 @@
let useCustomUnit = $state(false); let useCustomUnit = $state(false);
let error = $state(""); let error = $state("");
let loading = $state(false); let loading = $state(false);
let allowLeave = $state(false);
const isDirty = $derived(
Boolean(
title.trim() ||
content.trim() ||
selectedTopicId ||
selectedUnitId ||
customUnit.trim(),
),
);
beforeNavigate(({ cancel, type }) => {
if (allowLeave || !isDirty || type === "leave") return;
if (!confirm("Are you sure? You have unsaved changes.")) {
cancel();
}
});
function handleBeforeUnload(event: BeforeUnloadEvent) {
if (allowLeave || !isDirty) return;
event.preventDefault();
event.returnValue = "";
}
const topicOptions = $derived( const topicOptions = $derived(
topics.map((topic) => ({ topics.map((topic) => ({
@ -93,6 +117,7 @@
unitId, unitId,
})) as string; })) as string;
allowLeave = true;
goto(unitCode ? postPath(unitCode, id) : `/questions/${id}`); goto(unitCode ? postPath(unitCode, id) : `/questions/${id}`);
} catch (err: any) { } catch (err: any) {
error = err.message ?? "Failed to post question"; error = err.message ?? "Failed to post question";
@ -106,6 +131,8 @@
<title>Ask a question — Notebook</title> <title>Ask a question — Notebook</title>
</svelte:head> </svelte:head>
<svelte:window onbeforeunload={handleBeforeUnload} />
<div class="page"> <div class="page">
<h1 class="text-ink font-serif text-4xl font-medium">Ask a question</h1> <h1 class="text-ink font-serif text-4xl font-medium">Ask a question</h1>
<p class="text-muted mt-2 mb-10 text-[15px]"> <p class="text-muted mt-2 mb-10 text-[15px]">