From: Adam Dullage <redacted>
Date: Fri, 17 May 2024 07:09:55 +0000 (+0100)
Subject: Implement search sorting
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=534b8b799970e6438361edbf6e42c9473fc1384e;p=flatnotes.git

Implement search sorting
---

diff --git a/client/components/CustomButton.vue b/client/components/CustomButton.vue
index 14009cc..4264312 100644
--- a/client/components/CustomButton.vue
+++ b/client/components/CustomButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="rounded px-2 py-1"
+    class="text-nowrap rounded px-2 py-1"
     :class="{
       'bg-theme-background text-theme-text-muted hover:bg-theme-background-elevated':
         style === 'subtle',
diff --git a/client/constants.js b/client/constants.js
index 25f88f0..811af42 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -6,37 +6,11 @@ export const params = {
   sortBy: "sortBy",
 };
 
-// Other
-export const alphabet = [
-  "A",
-  "B",
-  "C",
-  "D",
-  "E",
-  "F",
-  "G",
-  "H",
-  "I",
-  "J",
-  "K",
-  "L",
-  "M",
-  "N",
-  "O",
-  "P",
-  "Q",
-  "R",
-  "S",
-  "T",
-  "U",
-  "V",
-  "W",
-  "X",
-  "Y",
-  "Z",
-];
-
-export const searchSortOptions = { score: 0, title: 1, lastModified: 2 };
+export const searchSortOptions = {
+  score: 0,
+  title: 1,
+  lastModified: 2,
+};
 
 export const authTypes = {
   none: "none",
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 1d11709..42f47ce 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -35,7 +35,7 @@ import { RouterLink, useRouter } from "vue-router";
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
 import PrimeMenu from "../components/PrimeMenu.vue";
-import { authTypes } from "../constants.js";
+import { authTypes, params, searchSortOptions } from "../constants.js";
 import { useGlobalStore } from "../globalStore.js";
 import { toggleTheme } from "../helpers.js";
 import { clearStoredToken } from "../tokenStorage.js";
@@ -60,7 +60,14 @@ const menuItems = [
   {
     label: "All Notes",
     icon: mdilNoteMultiple,
-    command: () => router.push({ name: "search", query: { term: "*" } }),
+    command: () =>
+      router.push({
+        name: "search",
+        query: {
+          [params.searchTerm]: "*",
+          [params.sortBy]: searchSortOptions.title,
+        },
+      }),
   },
   {
     label: "Toggle Theme",
diff --git a/client/router.js b/client/router.js
index 51211a6..07b6c9d 100644
--- a/client/router.js
+++ b/client/router.js
@@ -33,6 +33,7 @@ const router = createRouter({
       component: () => import("./views/SearchResults.vue"),
       props: (route) => ({
         searchTerm: route.query[constants.params.searchTerm],
+        sortBy: Number(route.query[constants.params.sortBy]) || undefined,
       }),
     },
   ],
diff --git a/client/views/SearchResults.vue b/client/views/SearchResults.vue
index f4df680..265061b 100644
--- a/client/views/SearchResults.vue
+++ b/client/views/SearchResults.vue
@@ -1,13 +1,21 @@
 <template>
-  <div class="flex h-full flex-col">
+  <div class="flex h-full max-w-[700px] flex-col">
     <!-- Search Input -->
-    <SearchInput
-      :initialSearchTerm="props.searchTerm"
-      class="mb-8 max-w-[700px]"
-    />
+    <SearchInput :initialSearchTerm="props.searchTerm" class="mb-2" />
+
+    <!-- Sort By -->
+    <div class="flex justify-end">
+      <CustomButton
+        :label="`Sort By: ${sortByName}`"
+        :iconPath="mdiSort"
+        class="mb-1"
+        @click="toggleSortMenu"
+      />
+      <PrimeMenu ref="sortMenu" :model="menuItems" :popup="true" />
+    </div>
 
     <!-- Search Results -->
-    <LoadingIndicator ref="loadingIndicator" class="max-w-[700px] flex-1">
+    <LoadingIndicator ref="loadingIndicator" class="flex-1">
       <div
         v-for="result in results"
         class="mb-4 cursor-pointer rounded px-2 py-1 hover:bg-theme-background-elevated"
@@ -37,25 +45,46 @@
 
 <script setup>
 import { useToast } from "primevue/usetoast";
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 
-import { mdiMagnify } from "@mdi/js";
-import { getNotes, apiErrorHandler } from "../api.js";
+import { mdiMagnify, mdiSort } from "@mdi/js";
+import { apiErrorHandler, getNotes } from "../api.js";
+import CustomButton from "../components/CustomButton.vue";
 import LoadingIndicator from "../components/LoadingIndicator.vue";
+import PrimeMenu from "../components/PrimeMenu.vue";
 import Tag from "../components/Tag.vue";
+import { params, searchSortOptions } from "../constants.js";
 import SearchInput from "../partials/SearchInput.vue";
 
-const props = defineProps({ searchTerm: String });
+const props = defineProps({
+  searchTerm: String,
+  sortBy: {
+    type: Number,
+    default: searchSortOptions.score,
+  },
+});
 
 const loadingIndicator = ref();
 const results = ref([]);
+const router = useRouter();
+const sortMenu = ref();
 const toast = useToast();
 
+const sortByName = computed(() => {
+  const sortOptionNames = {
+    [searchSortOptions.title]: "Title",
+    [searchSortOptions.lastModified]: "Last Modified",
+    [searchSortOptions.score]: "Score",
+  };
+  return sortOptionNames[props.sortBy];
+});
+
 function init() {
   loadingIndicator.value.setLoading();
   getNotes(props.searchTerm)
     .then((data) => {
-      results.value = data;
+      results.value = sortResults(data);
       if (results.value.length > 0) {
         loadingIndicator.value.setLoaded();
       } else {
@@ -68,7 +97,58 @@ function init() {
     });
 }
 
+function sortResults(results) {
+  if (props.sortBy === searchSortOptions.title) {
+    return results.sort((a, b) => a.title.localeCompare(b.title));
+  } else if (props.sortBy === searchSortOptions.lastModified) {
+    return results.sort((a, b) => b.lastModified - a.lastModified);
+  } else {
+    return results.sort((a, b) => b.score - a.score);
+  }
+}
+
+function reSortResults() {
+  results.value = sortResults(results.value);
+}
+
+function updateSortByParam(sortBy) {
+  router.push({
+    name: "search",
+    query: {
+      [params.searchTerm]: props.searchTerm,
+      [params.sortBy]: sortBy,
+    },
+  });
+}
+
+const menuItems = [
+  {
+    label: "Sort By: Score",
+    command: () => {
+      updateSortByParam(searchSortOptions.score);
+    },
+  },
+
+  {
+    label: "Sort By: Title",
+    command: () => {
+      updateSortByParam(searchSortOptions.title);
+    },
+  },
+  {
+    label: "Sort By: Last Modified",
+    command: () => {
+      updateSortByParam(searchSortOptions.lastModified);
+    },
+  },
+];
+
+function toggleSortMenu(event) {
+  sortMenu.value.toggle(event);
+}
+
 watch(() => props.searchTerm, init);
+watch(() => props.sortBy, reSortResults);
 onMounted(init);
 </script>