working filters

client/components/PadTable.js

@@ -1,6 +1,6 @@
 export default {
 	setup() {
-		const { ref, computed } = Vue;
+		const { ref, computed, watch } = Vue;
 
 		const currentPage = ref("");
 		const pads = ref([]);
@@ -10,9 +10,14 @@ export default {
 		const currentSortDir = ref("desc");
 
 		const tags = ref([]);
+		const selected = ref(new Set());
+
+		const toggle = function (tag) {
+			selected.value.has(tag) ? selected.value.delete(tag) : selected.value.add(tag);
+		};
 
 		const sortedPads = computed(() => {
-			return pads.value.sort((a, b) => {
+			return filteredPads.value.sort((a, b) => {
 				let modifier = 1;
 
 				if (currentSortDir.value === "desc") modifier = -1;
@@ -28,6 +33,14 @@ export default {
 			});
 		});
 
+		const filteredPads = computed(() => {
+			if (selected.value.size == 0) return pads.value;
+			else
+				return pads.value.filter((pad) => {
+					return pad.categories.some((category) => selected.value.has(category));
+				});
+		});
+
 		const formatDate = function (date) {
 			return `${String(date.getDate()).padStart(2, "0")}-${String(
 				date.getMonth() + 1
@@ -67,11 +80,14 @@ export default {
 			pads,
 			columns,
 			sortedPads,
+			filteredPads,
 			currentPage,
 			currentSort,
 			currentSortDir,
 			loaded,
 			tags,
+			selected,
+			toggle,
 			sort,
 			formatDate,
 		};
@@ -88,7 +104,8 @@ export default {
 			<div class="filter">
 				<h2>Filter Categories</h2>
 				<ul>
-					<li v-for="tag in tags" :key="tag">{{tag}}</li>
+					<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>
 				</ul>
 			</div>
 

client/style.css

@@ -1,6 +1,6 @@
 :root {
-	--bg: #000000;
+	--bg: dodgerblue;
-	--color: dodgerblue;
+	--color: white;
 }
 
 * {
@@ -182,6 +182,13 @@ tr:hover:not(:first-of-type) {
 	display: inline-block;
 	border: 1px solid currentColor;
 	padding: 0 4px;
+	user-select: none;
+	cursor: pointer;
+}
+
+.filter .active {
+	background-color: var(--color);
+	color: var(--bg);
 }
 
 tr {