pad-bis/static/js/PadTable.js

import padliographyStore from "./PadStore.js";

export default {
	setup() {
		const { ref, computed, watchEffect } = Vue;
		const columns = ["title", "overview", "categories", "date"];

		const loaded = ref(false);

		const { padStore, currentPage } = padliographyStore();
		const newPage = ref("");
		const edit = ref(false);

		const pads = ref([]);

		const currentSort = ref("date");
		const currentSortDir = ref("desc");

		const categories = ref([]);
		const selected = ref(new Set());
		const toggle = function (tag) {
			selected.value.has(tag) ? selected.value.delete(tag) : selected.value.add(tag);
		};

		watchEffect(() => {
			fetch(`api/${currentPage.value}`)
				.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();

					loaded.value = true;
				});
		});
		const sortedPads = computed(() => {
			return filteredPads.value.sort((a, b) => {
				let modifier = 1;

				if (currentSortDir.value === "desc") modifier = -1;

				if (currentSort.value === "date") {
					a[currentSort.value] = new Date(a[currentSort.value]);
					b[currentSort.value] = new Date(b[currentSort.value]);
				}

				if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
				if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
				return 0;
			});
		});

		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 storedPads.value;
			else
				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) {
			date = new Date(date);
			return `${String(date.getDate()).padStart(2, "0")}-${String(
				date.getMonth() + 1
			).padStart(2, "0")}-${date.getFullYear()}`;
		};

		return {
			pads,
			columns,
			currentPage,
			loaded,
			filteredPads,
			categories,
			selected,
			sortedPads,
			currentSort,
			currentSortDir,
			toggle,
			sort,
			formatDate,
			padStore,
			storedPads,
			edit,
			newPage,
		};
	},
	template: `

		<div v-if="!loaded" class='loading grow'>
			Loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading etc
		</div>

		<div v-else>
			<div class="filter">
				<h2>Filter Categories</h2>
				<ul>
					<li :class="{active: selected.size == 0}" @click="selected.clear()">All</li>
					<li v-for="tag in categories" :key="tag" @click="toggle(tag)" :class="{active: selected.has(tag)}">{{tag}}</li>
				</ul>
			</div>

	
			<p class="from">
				Fetching pads from
				<span class="editing" v-if="edit">

					<input v-model="newPage">
					<button @click="edit=false, currentPage=newPage"> confirm </button>
					<button @click="edit=false"> x </button>
					</span>

					<a v-else :href="'https://pzwiki.wdka.nl/mediadesign/' + currentPage">{{currentPage}}</a> <button class="change" v-if="!edit" @click="edit = true">change</button>
			</p>



			<table>
				<tr class="header">
					<th v-for="column in columns" :class="column" @click='sort(column)'> 
						{{column }}
						<span v-if='column == currentSort'> {{ currentSortDir == 'asc' ?  '▼' : '▲'}}</span>
					</th>
				</tr>
				<tr v-for="(pad, index) in sortedPads" key="pad.title, index" :class="pad.category">
					<td class="title">
						<a :href="pad.link" class='stretched' target="_blank"> {{pad.title}} </a>
					</td>
					<td class="overview">
						<p>
							{{pad.overview}}
						</p>
					</td>
					<td class="categories">
						<span class="category" v-for="category in pad.categories" :key="category">{{category}}</span>
					</td>
					<td class="date">{{formatDate(pad.date)}}</td>
					
				</tr>
			</table>
			</div>
			`,
};