preview pad

static/js/PadForm.js

@@ -1,3 +1,5 @@
+import { PadStore } from "./PadStore.js";
+
 export default {
 	setup() {
 		const { ref, computed } = Vue;
@@ -25,16 +27,21 @@ export default {
 				link.value = newPad();
 			}
 
+			const pad = {
+				title: title.value.trim(),
+				link: link.value,
+				overview: overview.value,
+				categories: categories.value,
+				date: date.value,
+			};
+			PadStore.value.unshift(pad);
+
+			pad.categories.join(", ");
+
 			fetch("api", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
+				body: JSON.stringify(pad),
-					title: title.value.trim(),
-					link: link.value,
-					overview: overview.value,
-					categories: categories.value.join(", "),
-					date: date.value,
-				}),
 			});
 			sent.value = true;
 
@@ -45,7 +52,18 @@ export default {
 			date.value = null;
 		};
 
-		return { title, link, overview, categories, date, submit, newPad, sent, disabled };
+		return {
+			title,
+			link,
+			overview,
+			categories,
+			date,
+			submit,
+			newPad,
+			sent,
+			disabled,
+			PadStore,
+		};
 	},
 
 	template: `
@@ -61,6 +79,7 @@ export default {
 			<input class='date'  type="date" v-model="date" placeholder="Date" />
              
 			<button @click="submit" class="submit">Insert</button>
+
         </div>
     
     

static/js/PadStore.js

@@ -0,0 +1,3 @@
+const { ref } = Vue;
+
+export const PadStore = ref([]);

static/js/PadTable.js

@@ -1,3 +1,5 @@
+import { PadStore } from "./PadStore.js";
+
 export default {
 	setup() {
 		const { ref, computed } = Vue;
@@ -61,13 +63,17 @@ export default {
 		};
 
 		const filteredPads = computed(() => {
-			if (selected.value.size == 0) return pads.value;
+			if (selected.value.size == 0) return storedPads.value;
 			else
-				return pads.value.filter((pad) => {
+				return storedPads.value.filter((pad) => {
 					return pad.categories.some((category) => selected.value.has(category));
 				});
 		});
 
+		const storedPads = computed(() => {
+			return [...PadStore.value, ...pads.value];
+		});
+
 		const formatDate = function (date) {
 			return `${String(date.getDate()).padStart(2, "0")}-${String(
 				date.getMonth() + 1
@@ -88,6 +94,8 @@ export default {
 			toggle,
 			sort,
 			formatDate,
+			PadStore,
+			storedPads,
 		};
 	},
 	template: `
@@ -112,6 +120,7 @@ export default {
 			</p>
 
 
+
 			<table>
 				<tr class="header">
 					<th v-for="column in columns" :class="column" @click='sort(column)'>