You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
export default {
|
|
setup() {
|
|
const { ref, computed } = Vue;
|
|
|
|
const pads = ref([]);
|
|
|
|
const currentSort = ref("date");
|
|
const currentSortDir = ref("asc");
|
|
|
|
const sortedPads = computed(() => {
|
|
return pads.value.sort((a, b) => {
|
|
let modifier = 1;
|
|
if (currentSortDir.value === "desc") modifier = -1;
|
|
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 columns = ["title", "overview", "categories", "date"];
|
|
|
|
fetch("http://localhost:3146/")
|
|
.then((res) => res.json())
|
|
.then((data) => (pads.value = data));
|
|
|
|
return { pads, columns, sortedPads, sort };
|
|
},
|
|
template: `
|
|
<table>
|
|
<tr class="header">
|
|
<th v-for="column in columns" @click='sort(column)'>{{column }}</th>
|
|
</tr>
|
|
<tr v-for="(pad, index) in sortedPads" key="pad.title, index" :class="pad.category">
|
|
|
|
|
|
<td class="title">
|
|
<a :href="pad.link" target="_blank"> {{pad.title}} </a>
|
|
</td>
|
|
<td class="overview">{{pad.overview}}</td>
|
|
<td class="categories">{{pad.category}}</td>
|
|
<td class="date">{{pad.date}}</td>
|
|
|
|
</tr>
|
|
</table>
|
|
`,
|
|
};
|