reorder

client/components/PadTable.js

@@ -1,21 +1,41 @@
 export default {
 	setup() {
-		const { ref, computed, watch } = Vue;
+		const { ref, computed } = Vue;
+		const columns = ["title", "overview", "categories", "date"];
 
+		const loaded = ref(false);
 		const currentPage = ref("");
 		const pads = ref([]);
-		const loaded = ref(false);
 
 		const currentSort = ref("date");
 		const currentSortDir = ref("desc");
 
-		const tags = ref([]);
+		const categories = ref([]);
 		const selected = ref(new Set());
-
 		const toggle = function (tag) {
 			selected.value.has(tag) ? selected.value.delete(tag) : selected.value.add(tag);
 		};
 
+		// fetch("https://hub.xpub.nl/soupboat/padliography/")
+		fetch("http://127.0.0.1:3147/")
+			.then((res) => res.json())
+			.then((data) => {
+				pads.value = data.pads;
+				pads.value.map(
+					(pad) =>
+						(pad.categories = pad.categories
+							.split(",")
+							.map((category) => category.trim()))
+				);
+
+				categories.value = Array.from(
+					new Set([...pads.value.map((pad) => pad.categories)].flat())
+				).sort();
+
+				currentPage.value = data.page;
+				loaded.value = true;
+			});
+
 		const sortedPads = computed(() => {
 			return filteredPads.value.sort((a, b) => {
 				let modifier = 1;
@@ -33,6 +53,13 @@ export default {
 			});
 		});
 
+		const sort = function (s) {
+			if (s == currentSort.value) {
+				currentSortDir.value = currentSortDir.value === "asc" ? "desc" : "asc";
+			}
+			currentSort.value = s;
+		};
+
 		const filteredPads = computed(() => {
 			if (selected.value.size == 0) return pads.value;
 			else
@@ -47,35 +74,6 @@ export default {
 			).padStart(2, "0")}-${date.getFullYear()}`;
 		};
 
-		const sort = function (s) {
-			if (s == currentSort.value) {
-				currentSortDir.value = currentSortDir.value === "asc" ? "desc" : "asc";
-			}
-			currentSort.value = s;
-		};
-
-		const columns = ["title", "overview", "categories", "date"];
-
-		// fetch("https://hub.xpub.nl/soupboat/padliography/")
-		fetch("http://127.0.0.1:3147/")
-			.then((res) => res.json())
-			.then((data) => {
-				pads.value = data.pads;
-
-				pads.value.map(
-					(pad) =>
-						(pad.categories = pad.categories
-							.split(",")
-							.map((category) => category.trim()))
-				);
-
-				tags.value = Array.from(
-					new Set([...pads.value.map((pad) => pad.categories)].flat())
-				).sort();
-				currentPage.value = data.page;
-				loaded.value = true;
-			});
-
 		return {
 			pads,
 			columns,
@@ -85,7 +83,7 @@ export default {
 			currentSort,
 			currentSortDir,
 			loaded,
-			tags,
+			categories,
 			selected,
 			toggle,
 			sort,
@@ -105,7 +103,7 @@ export default {
 				<h2>Filter Categories</h2>
 				<ul>
 					<li :class="{active: selected.size == 0}" @click="selected.clear()">All</li>
-					<li v-for="tag in tags" :key="tag" @click="toggle(tag)" :class="{active: selected.has(tag)}">{{tag}}</li>
+					<li v-for="tag in categories" :key="tag" @click="toggle(tag)" :class="{active: selected.has(tag)}">{{tag}}</li>
 				</ul>
 			</div>