From: Adam Dullage <redacted>
Date: Mon, 29 Apr 2024 19:58:35 +0000 (+0100)
Subject: Added note view, navbar styling & API improvements
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=32d93020b13f08c3b24371a181a64755d19e5e95;p=flatnotes.git

Added note view, navbar styling & API improvements
---

diff --git a/client/App.vue b/client/App.vue
index 09d4e1e..4aeaec4 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -21,8 +21,8 @@ const route = useRoute();
 
 onBeforeMount(() => {
   getConfig()
-    .then((response) => {
-      globalStore.authType = response.data.authType;
+    .then((data) => {
+      globalStore.authType = data.authType;
     })
     .catch(function (error) {
       if (!error.handled) {
diff --git a/client/api.js b/client/api.js
index d56334d..4636dd4 100644
--- a/client/api.js
+++ b/client/api.js
@@ -1,5 +1,6 @@
 import * as constants from "./constants.js";
 
+import { Note } from "./classes.js";
 import axios from "axios";
 import { getStoredToken } from "./tokenStorage.js";
 import router from "./router.js";
@@ -40,24 +41,41 @@ api.interceptors.response.use(
   },
 );
 
-export function getConfig() {
-  return api.get("/api/config");
+export async function getConfig() {
+  try {
+    const response = await api.get("/api/config");
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
 }
 
-export function getToken(username, password, totp) {
-  return api.post("/api/token", {
-    username: username,
-    password: totp ? password + totp : password,
-  });
+export async function getToken(username, password, totp) {
+  try {
+    const response = await api.post("/api/token", {
+      username: username,
+      password: totp ? password + totp : password,
+    });
+    return response.data.access_token;
+  } catch (response) {
+    return Promise.reject(response);
+  }
 }
 
-export function getNotes(term, sort, order, limit) {
-  return api.get("/api/search", {
-    params: {
-      term: term,
-      sort: sort,
-      order: order,
-      limit: limit,
-    },
-  });
+export async function getNotes(term, sort, order, limit) {
+  try {
+    const response = await api.get("/api/search", {
+      params: {
+        term: term,
+        sort: sort,
+        order: order,
+        limit: limit,
+      },
+    });
+    return response.data.map(
+      (note) => new Note(note.title, note.lastModified, note.content),
+    );
+  } catch (response) {
+    return Promise.reject(response);
+  }
 }
diff --git a/client/classes.js b/client/classes.js
new file mode 100644
index 0000000..84f7679
--- /dev/null
+++ b/client/classes.js
@@ -0,0 +1,49 @@
+import router from "./router.js";
+
+class Note {
+  constructor(title, lastModified, content) {
+    this.title = title;
+    this.lastModified = lastModified;
+    this.content = content;
+  }
+
+  get href() {
+    return `${router.resolve({ name: "note", params: { title: this.title } }).href}`;
+  }
+
+  get lastModifiedAsDate() {
+    return new Date(this.lastModified * 1000);
+  }
+
+  get lastModifiedAsString() {
+    return this.lastModifiedAsDate.toLocaleString();
+  }
+}
+
+class SearchResult extends Note {
+  constructor(searchResult) {
+    super(searchResult.title, searchResult.lastModified);
+    this.score = searchResult.score;
+    this.titleHighlights = searchResult.titleHighlights;
+    this.contentHighlights = searchResult.contentHighlights;
+    this.tagMatches = searchResult.tagMatches;
+  }
+
+  get titleHighlightsOrTitle() {
+    return this.titleHighlights ? this.titleHighlights : this.title;
+  }
+
+  get includesHighlights() {
+    if (
+      this.titleHighlights ||
+      this.contentHighlights ||
+      (this.tagMatches != null && this.tagMatches.length)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
+
+export { Note, SearchResult };
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 778a7d3..f7a5515 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,9 +1,9 @@
 <template>
-  <nav class="flex justify-between">
-    <RouterLink to="/">
-      <Logo :class="{ invisible: hideLogo }"></Logo>
+  <nav class="mb-4 flex justify-between align-top">
+    <RouterLink to="/" v-if="!hideLogo">
+      <Logo></Logo>
     </RouterLink>
-    <div class="flex">
+    <div class="flex grow items-start justify-end">
       <CustomButton
         :iconPath="mdilPlusCircle"
         label="New Note"
@@ -20,7 +20,7 @@ import { RouterLink, useRouter } from "vue-router";
 
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
-import { clearStoredToken } from "../tokenStorage.js"
+import { clearStoredToken } from "../tokenStorage.js";
 
 const router = useRouter();
 
diff --git a/client/router.js b/client/router.js
index 4c14398..6ddb090 100644
--- a/client/router.js
+++ b/client/router.js
@@ -1,3 +1,5 @@
+import * as constants from "./constants.js";
+
 import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
@@ -12,6 +14,13 @@ const router = createRouter({
       path: "/login",
       name: "login",
       component: () => import("./views/LogIn.vue"),
+      props: (route) => ({ [constants.params.redirect]: route.query.redirect }),
+    },
+    {
+      path: "/note/:title",
+      name: "note",
+      component: () => import("./views/Note.vue"),
+      props: true,
     },
   ],
 });
diff --git a/client/views/Home.vue b/client/views/Home.vue
index d5c140c..0d3c85a 100644
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -10,7 +10,9 @@
         >
           RECENTLY MODIFIED
         </p>
-        <CustomButton v-for="note in notes" :label="note.title" />
+        <RouterLink v-for="note in notes" :to="note.href">
+          <CustomButton :label="note.title" />
+        </RouterLink>
       </div>
     </div>
   </div>
@@ -23,10 +25,11 @@ import { getNotes } from "../api.js";
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
 import SearchInput from "../partials/SearchInput.vue";
+import { RouterLink } from "vue-router";
 
 const notes = ref([]);
 
-getNotes("*", "lastModified", "desc", 5).then((response) => {
-  notes.value = response.data;
+getNotes("*", "lastModified", "desc", 5).then((data) => {
+  notes.value = data;
 });
 </script>
diff --git a/client/views/LogIn.vue b/client/views/LogIn.vue
index abd887c..b22c778 100644
--- a/client/views/LogIn.vue
+++ b/client/views/LogIn.vue
@@ -49,7 +49,8 @@ import TextInput from "../components/TextInput.vue";
 import { authTypes } from "../constants.js";
 import { useGlobalStore } from "../globalStore.js";
 import { storeToken } from "../tokenStorage.js";
-import * as constants from "../constants.js";
+
+const props = defineProps({ redirect: String });
 
 const globalStore = useGlobalStore();
 const router = useRouter();
@@ -63,24 +64,24 @@ const rememberMe = ref(false);
 
 function logIn() {
   getToken(username.value, password.value, totp.value)
-    .then((response) => {
-      storeToken(response.data.access_token, rememberMe.value);
-      const redirectPath = route.query[constants.params.redirect];
-      if (redirectPath) {
-        router.push(redirectPath);
+    .then((access_token) => {
+      storeToken(access_token, rememberMe.value);
+      if (props.redirect) {
+        router.push(props.redirect);
       } else {
         router.push({ name: "home" });
       }
     })
-    .catch((error) => {
+    .catch((response) => {
       username.value = "";
       password.value = "";
       totp.value = "";
 
-      if (error.response?.status === 401) {
+      if (response.response?.status === 401) {
         toast.add({
           summary: "Login Failed",
           detail: "Please check your credentials and try again.",
+          severity: "error",
           closable: false,
           life: 5000,
         });
diff --git a/client/views/Note.vue b/client/views/Note.vue
new file mode 100644
index 0000000..97011b2
--- /dev/null
+++ b/client/views/Note.vue
@@ -0,0 +1,9 @@
+<template>
+  {{ title }}
+</template>
+
+<script setup>
+defineProps({
+  title: String,
+});
+</script>