Navigation stub, sortable bookmarks

src/digimarks/static/css/digimarks.css

@@ -4,3 +4,45 @@
 
 /** Navigation **/
 
+nav {
+    /*background: #666;*/
+}
+
+nav ul {
+}
+
+body {
+    height: 125vh;
+    font-family: sans-serif;
+    margin-top: 3rem;
+    padding: 30px;
+}
+
+main {
+    color: black;
+}
+
+header {
+    background-color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 0 6px 0 #666666;
+}
+
+header * {
+    display: inline;
+}
+
+header li {
+    margin: 20px;
+}
+
+header li a {
+    color: black;
+    text-decoration: none;
+}

src/digimarks/static/js/digimarks.js

@@ -49,7 +49,6 @@ document.addEventListener('alpine:init', () => {
             this.cache[this.userKey]['bookmarks'] = result;
             this.loading = false;
         },
-
         get filteredItems() {
             // return this.cache[this.userKey]['bookmarks'].filter(
             //     i => i.title.includes(this.search)
@@ -58,6 +57,18 @@ document.addEventListener('alpine:init', () => {
             return this.bookmarks.filter(
                 i => i.title.match(new RegExp(this.search, "i"))
             )
+        },
+        async sortAlphabetically() {
+            this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
+        },
+        async sortCreated(order = 'asc') {
+            if (order === 'desc') {
+                this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date));
+            } else
+            {
+
+                this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
+            }
         }
     })
 });

src/digimarks/templates/user_index.html

@@ -7,24 +7,33 @@
          x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
          x-data="">
 
+    <header>
+
         <nav class="menu">
             <ul>
                 <li>digimarks</li>
                 <li>tags</li>
                 <li>add bookmark</li>
             </ul>
+            <input x-model="$store.digimarks.search" placeholder="Search...">
         </nav>
+    </header>
+        <main>
 
-        Welcome user <span x-text="$store.digimarks.userKey"></span>! Tryout: <b x-text="$store.digimarks.tryout"></b>
+            <p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
-        <input x-model="$store.digimarks.search" placeholder="Search...">
+        <div x-show="$store.digimarks.loading">Loading...</div>
-        <div x-show="$store.digimarks.loading">
+
-            Loading...
+            <p>
-        </div>
+            <button @click="$store.digimarks.sortAlphabetically()">sort a-z</button>
+            <button @click="$store.digimarks.sortCreated()">sort date asc</button>
+            <button @click="$store.digimarks.sortCreated('desc')">sort date desc</button>
+            </p>
 
         <ul x-cloak>
             <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>
             </template>
         </ul>
+        </main>
     </div>
 {% endblock %}