implement ordering of nodes

liamcottle · Nov 18, 2024 · 9c81265 · 9c81265
1 parent b95010c
commit 9c81265
Showing 1 changed file with 44 additions and 3 deletions.
diff --git a/src/components/nodes/NodesList.vue b/src/components/nodes/NodesList.vue
@@ -2,8 +2,32 @@
     <div class="flex flex-col h-full w-full overflow-hidden">
 
         <!-- search -->
-        <div v-if="nodes.length > 0" class="bg-white p-1 border-b border-gray-300">
-            <input v-model="nodesSearchTerm" type="text" :placeholder="`Search ${nodes.length} Nodes...`" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+        <div v-if="nodes.length > 0" class="flex bg-white border-b border-gray-300 divide-x">
+            <div class="p-1 w-full">
+                <input v-model="nodesSearchTerm" type="text" :placeholder="`Search ${nodes.length} Nodes...`" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            </div>
+            <div class="flex text-gray-500">
+                <DropDownMenu class="mx-auto my-auto">
+                    <template v-slot:button>
+                        <IconButton class="bg-transparent">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                <path d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" />
+                            </svg>
+                        </IconButton>
+                    </template>
+                    <template v-slot:items>
+                        <div class="p-2 border-b text-sm font-bold">Order</div>
+                        <DropDownMenuItem @click="order = 'a-z'">
+                            <input type="radio" :checked="order === 'a-z'"/>
+                            <div class="my-auto" :class="{ 'font-bold': order === 'a-z' }">A-Z</div>
+                        </DropDownMenuItem>
+                        <DropDownMenuItem @click="order = 'heard-recently'">
+                            <input type="radio" :checked="order === 'heard-recently'"/>
+                            <div class="my-auto" :class="[ order === 'heard-recently' ? 'font-bold' : '' ]">Heard Recently</div>
+                        </DropDownMenuItem>
+                    </template>
+                </DropDownMenu>
+            </div>
         </div>
 
         <!-- nodes -->
@@ -18,10 +42,16 @@
 import NodeUtils from "../../js/NodeUtils.js";
 import GlobalState from "../../js/GlobalState.js";
 import NodeListItem from "./NodeListItem.vue";
+import IconButton from "../IconButton.vue";
+import DropDownMenu from "../DropDownMenu.vue";
+import DropDownMenuItem from "../DropDownMenuItem.vue";
 
 export default {
     name: 'NodesList',
     components: {
+        DropDownMenuItem,
+        DropDownMenu,
+        IconButton,
         NodeListItem,
     },
     emits: [
@@ -32,6 +62,7 @@ export default {
     },
     data() {
         return {
+            order: "heard-recently",
             nodesSearchTerm: "",
         };
     },
@@ -50,7 +81,17 @@ export default {
         orderedNodes() {
 
             // get ordered nodes
-            var orderedNodes = this.nodesOrderedByLastHeard;
+            var orderedNodes = [];
+            switch(this.order){
+                case "a-z": {
+                    orderedNodes = this.nodesOrderedByName;
+                    break;
+                }
+                case "heard-recently": {
+                    orderedNodes = this.nodesOrderedByLastHeard;
+                    break;
+                }
+            }
 
             // find our node in the list
             const myNode = orderedNodes.find((node) => {