1
0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-07 02:35:10 +01:00

Also order z-a

This commit is contained in:
2025-05-06 08:02:53 +02:00
parent 40a0f773c4
commit 127284716e
2 changed files with 27 additions and 24 deletions

View File

@@ -58,15 +58,17 @@ document.addEventListener('alpine:init', () => {
i => i.title.match(new RegExp(this.search, "i")) i => i.title.match(new RegExp(this.search, "i"))
) )
}, },
async sortAlphabetically() { async sortAlphabetically(order = 'asc') {
this.bookmarks.sort((a, b) => a.title.localeCompare(b.title)); if (order === 'desc') {
this.bookmarks.sort((a, b) => b.title.localeCompare(a.title));
} else {
this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
}
}, },
async sortCreated(order = 'asc') { async sortCreated(order = 'asc') {
if (order === 'desc') { if (order === 'desc') {
this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date)); this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date));
} else } else {
{
this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date)); this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
} }
} }

View File

@@ -7,33 +7,34 @@
x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()" x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
x-data=""> x-data="">
<header> <header>
<nav class="menu"> <nav class="menu">
<ul> <ul>
<li>digimarks</li> <li>digimarks</li>
<li>tags</li> <li>tags</li>
<li>add bookmark</li> <li>add bookmark</li>
</ul> </ul>
<input x-model="$store.digimarks.search" placeholder="Search..."> <input x-model="$store.digimarks.search" placeholder="Search...">
</nav> </nav>
</header> </header>
<main> <main>
<p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p> <p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
<div x-show="$store.digimarks.loading">Loading...</div> <div x-show="$store.digimarks.loading">Loading...</div>
<p> <p>
<button @click="$store.digimarks.sortAlphabetically()">sort a-z</button> <button @click="$store.digimarks.sortAlphabetically()">sort a-z</button>
<button @click="$store.digimarks.sortCreated()">sort date asc</button> <button @click="$store.digimarks.sortAlphabetically('desc')">sort z-a</button>
<button @click="$store.digimarks.sortCreated('desc')">sort date desc</button> <button @click="$store.digimarks.sortCreated()">sort date asc</button>
<button @click="$store.digimarks.sortCreated('desc')">sort date desc</button>
</p> </p>
<ul x-cloak> <ul x-cloak>
<template x-for="bookmark in $store.digimarks.filteredItems" :key="bookmark.id"> <template x-for="bookmark in $store.digimarks.filteredItems" :key="bookmark.id">
<li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li> <li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
</template> </template>
</ul> </ul>
</main> </main>
</div> </div>
{% endblock %} {% endblock %}