Implement autosave

client/package.json

@@ -23,6 +23,7 @@
     "buffer": "^6.0.3",
     "luxon": "^3.3.0",
     "stream-browserify": "^3.0.0",
+    "throttle-debounce": "^5.0.0",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5",
@@ -35,6 +36,7 @@
     "@types/bootstrap": "^5.2.6",
     "@types/luxon": "^3.2.0",
     "@types/node": "^18.15.1",
+    "@types/throttle-debounce": "^5.0.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.0",

client/src/types/throttle-debounce.d.ts

@@ -0,0 +1 @@
+declare module "throttle-debounce";

client/src/views/PostFormView.vue

@@ -4,7 +4,7 @@
       <div class="col w-50">
         <div class="card flex-md-row mb-4 box-shadow h-md-250">
           <div class="card-body">
-            <form @submit="submitForm($event)">
+            <form @submit.prevent="submitForm" @input="handleAutoSave">
               <div class="form-floating mb-3">
                 <input v-model="form.title" type="text" class="form-control" id="title" placeholder="Titel" required />
                 <label for="title">{{ t("posts.form.title") }}</label>
@@ -50,7 +50,7 @@
               </div>
 
               <div class="form-check form-switch">
-                <input v-model="form.draft" class="form-check-input" type="checkbox" id="draft" />
+                <input v-model="form.draft" class="form-check-input" type="checkbox" id="draft" v-on:change="canBeAutosaved = form.draft" />
                 <label class="form-check-label" for="draft">{{ t("posts.form.draft") }}</label>
               </div>
 
@@ -266,14 +266,14 @@ import ImagePreview from "@client/components/ImagePreview.vue";
 import LoadingSpinner from "@client/components/LoadingSpinner.vue";
 import MarkDown from "@client/components/MarkDown.vue";
 import PostNotAvailable from "@client/components/PostNotAvailable.vue";
-import { debounce } from "@client/debounce.js";
 import { PostEndpoints } from "@client/util/api-client.js";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { t, tc } from "@fumix/fu-blog-client/src/plugins/i18n.js";
 import type { DraftResponseDto, NewPostRequestDto, Post, Tag } from "@fumix/fu-blog-common";
 import { bytesToBase64URL, convertToHumanReadableFileSize } from "@fumix/fu-blog-common";
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { debounce } from "throttle-debounce";
 import VueTagsInput from "@sipec/vue3-tags-input";
 
 const tag = ref<string>("");
@@ -285,6 +285,8 @@ const dropzoneHighlight = ref<boolean>(false);
 const router = useRouter();
 const markdownArea = ref(null);
 const postHasError = ref<boolean>(false);
+const autoSavedDraftId = ref<number | undefined>(undefined);
+const canBeAutosaved = ref<boolean>(true);
 const tagList = ref<Tag[]>([]);
 
 const form = reactive<NewPostRequestDto>({
@@ -326,15 +328,17 @@ onMounted(async () => {
       form.draft = resJson.draft;
       tags.value = resJson.tags ? resJson.tags?.map((tag) => ({ text: tag.name })) : [];
       postHasError.value = false;
+      // avoid autosaving in edit mode, except if its still a draft
+      canBeAutosaved.value = resJson.draft;
     } catch (e) {
       postHasError.value = true;
     }
   }
 
-  debounce(() => {
+  debounce(1000, () => {
     loading.value = true;
     md.value = form.markdown;
-  }, 1000);
+  });
 });
 
 const pasteImageFileToMarkdown = (markdown: string) => {
@@ -444,9 +448,14 @@ const addFile = (file: File) => {
     .catch((it) => console.error("Failed to calculate SHA-256 hash!"));
 };
 
-const submitForm = (e: Event) => {
-  e.preventDefault();
-  send(props.postId);
+const handleAutoSave = debounce(1000, () => {
+  if (canBeAutosaved.value) {
+    send(props.postId, true);
+  }
+});
+
+const submitForm = () => {
+  send(props.postId, false);
 };
 
 const insertIntoTextarea = (
@@ -462,10 +471,19 @@ const insertIntoTextarea = (
   return before + insertedText + after;
 };
 
-const send = async (id: number | undefined) => {
+const send = async (id: number | undefined, autosave: boolean) => {
+  form.draft = autosave;
   const successAction = (r: DraftResponseDto) => {
-    router.push(`/posts/post/${r.postId}`);
+    if (!autosave) {
+      router.push(`/posts/post/${r.postId}`);
+    } else {
+      // no routing when autosaving
+      autoSavedDraftId.value = r.postId;
+    }
   };
+  if (autoSavedDraftId.value) {
+    id = autoSavedDraftId.value;
+  }
   if (!id) {
     await PostEndpoints.createPost(form, Object.values(files))
       .then(successAction)

server/src/routes/posts.ts

@@ -24,13 +24,10 @@ router.get("/page/:page([0-9]+)/count/:count([0-9]+)/search/:search/operator/:op
   const skipEntries = page * itemsPerPage - itemsPerPage;
   let searchTerm = "";
   if (req.params.search) {
-    const splitSearchParams: string[] = req.params.search.trim().split(" ");
+    const splitSearchParams: string[] = decodeURI(req.params.search).trim().split(" ");
     const operator = req.params.operator === "or" ? " | " : " & ";
 
-    searchTerm = splitSearchParams
-      .map((word) => escape(word))
-      .filter(Boolean)
-      .join(operator);
+    searchTerm = splitSearchParams.filter(Boolean).join(operator);
   }
 
   // TODO : add createdBy and tags to search results