diff --git a/client/components/PadTable.js b/client/components/PadTable.js index 154e120..c6186c4 100644 --- a/client/components/PadTable.js +++ b/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 {