From 13259169319a05ee05a92881dfd34bcdea7a59ba Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Thu, 16 Nov 2023 16:17:10 -0500
Subject: [PATCH] Improved auth redirection, and added PrintableListView.vue

---
 litelist-app/src/router/index.ts             |  5 ++
 litelist-app/src/stores/auth.ts              |  2 +-
 litelist-app/src/views/LoginView.vue         |  2 +
 litelist-app/src/views/PrintableListView.vue | 56 ++++++++++++++++++++
 litelist-app/src/views/SingleListView.vue    | 35 ++----------
 5 files changed, 68 insertions(+), 32 deletions(-)
 create mode 100644 litelist-app/src/views/PrintableListView.vue

diff --git a/litelist-app/src/router/index.ts b/litelist-app/src/router/index.ts
index 9959f63..d6a9c9d 100644
--- a/litelist-app/src/router/index.ts
+++ b/litelist-app/src/router/index.ts
@@ -4,6 +4,7 @@ import ListsView from "@/views/ListsView.vue";
 import {useAuthStore} from "@/stores/auth";
 import SingleListView from "@/views/SingleListView.vue";
 import AdminView from "@/views/AdminView.vue";
+import PrintableListView from "@/views/PrintableListView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -33,6 +34,10 @@ const router = createRouter({
       path: "/lists/:id",
       component: SingleListView
     },
+    {
+      path: "/lists/:id/print",
+      component: PrintableListView
+    },
     {
       path: "/admin",
       component: AdminView
diff --git a/litelist-app/src/stores/auth.ts b/litelist-app/src/stores/auth.ts
index b6a607e..27c322c 100644
--- a/litelist-app/src/stores/auth.ts
+++ b/litelist-app/src/stores/auth.ts
@@ -21,7 +21,7 @@ export const useAuthStore = defineStore("auth", () => {
         token.value = newToken
         localStorage.setItem(LOCAL_STORAGE_KEY, token.value)
         tokenRefreshInterval.value = setInterval(tryRefreshToken, 60000)
-        await router.push("/lists")
+        // await router.push("/lists")
     }
 
     async function logOut() {
diff --git a/litelist-app/src/views/LoginView.vue b/litelist-app/src/views/LoginView.vue
index c882c72..1534a0c 100644
--- a/litelist-app/src/views/LoginView.vue
+++ b/litelist-app/src/views/LoginView.vue
@@ -29,6 +29,7 @@ async function doLogin() {
   try {
     const info = await login(loginModel.value.username, loginModel.value.password)
     await authStore.logIn(info.token, info.user)
+    await router.push("/lists")
   } catch (error: any) {
     console.error(error.message)
   }
@@ -45,6 +46,7 @@ async function doRegister() {
     await register(registerModel.value.username, registerModel.value.email, registerModel.value.password)
     const info = await login(registerModel.value.username, registerModel.value.password)
     await authStore.logIn(info.token, info.user)
+    await router.push("/lists")
   } catch (error: any) {
     console.error(error)
   }
diff --git a/litelist-app/src/views/PrintableListView.vue b/litelist-app/src/views/PrintableListView.vue
new file mode 100644
index 0000000..59075a8
--- /dev/null
+++ b/litelist-app/src/views/PrintableListView.vue
@@ -0,0 +1,56 @@
+<!--
+A "printable" list view that, when opened, immediately triggers the browser's
+print dialog on the page. Users will navigate to this view via "/lists/123/print".
+-->
+<script setup lang="ts">
+import type {Ref} from "vue";
+import type {NoteList} from "@/api/lists";
+import {onMounted, ref} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import {useAuthStore} from "@/stores/auth";
+import {getNoteList} from "@/api/lists";
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const list: Ref<NoteList | null> = ref(null)
+
+onMounted(async () => {
+  let listId: number | null = null
+  if (!Array.isArray(route.params.id)) listId = parseInt(route.params.id)
+  if (!listId) {
+    await router.push("/lists")
+    return
+  }
+
+  list.value = await getNoteList(authStore.token, listId)
+  if (list.value === null) {
+    await router.push("/lists")
+    return
+  }
+
+  setTimeout(window.print, 100)
+})
+</script>
+
+<template>
+  <div v-if="list">
+    <header>
+      <h1 v-text="list.name"></h1>
+      <p v-text="list.description"></p>
+    </header>
+    <main>
+      <div class="note-item" v-for="note in list.notes" :key="note.id">
+        <input type="checkbox" :id="'note-' + note.id"/>
+        <label :for="'note-' + note.id" v-text="note.content"></label>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.note-item {
+  margin: 1rem 0;
+}
+</style>
\ No newline at end of file
diff --git a/litelist-app/src/views/SingleListView.vue b/litelist-app/src/views/SingleListView.vue
index edc0ed5..7b012d7 100644
--- a/litelist-app/src/views/SingleListView.vue
+++ b/litelist-app/src/views/SingleListView.vue
@@ -66,13 +66,14 @@ function toggleCreatingNewNote() {
 
 async function clearList() {
   if (!list.value) return
+  const l: NoteList = list.value
   const dialog = document.getElementById("list-clear-notes-dialog") as HTMLDialogElement
   dialog.showModal()
   const confirmButton = document.getElementById("clear-notes-confirm-button") as HTMLButtonElement
   confirmButton.onclick = async () => {
     dialog.close()
-    await deleteAllNotes(authStore.token, list.value.id)
-    list.value.notes = []
+    await deleteAllNotes(authStore.token, l.id)
+    l.notes = []
   }
   const cancelButton = document.getElementById("clear-notes-cancel-button") as HTMLButtonElement
   cancelButton.onclick = async () => {
@@ -87,32 +88,6 @@ async function createNoteAndRefresh() {
   newNoteText.value = ""
   list.value = await getNoteList(authStore.token, list.value.id)
 }
-
-function printList() {
-  if (!list.value) return
-  const l: NoteList = list.value
-  const header = `<h1>${l.name}</h1>`
-  const description = `<p>${l.description}</p>`
-  let checkboxList = `<div>`
-  for (let i = 0; i < l.notes.length; i++) {
-    const note = l.notes[i]
-    checkboxList += `<input type="checkbox" id="note-${i}"><label for="note-${i}">${note.content}</label><br/>`
-  }
-  checkboxList += `</div>`
-  const w = window.open()
-  const html = `
-<!DOCTYPE HTML>
-<html lang='en'>
-<body>
-${header}
-${description}
-${checkboxList}
-</body>
-</html>
-`
-  w.document.write(html)
-  w.window.print()
-}
 </script>
 
 <template>
@@ -154,9 +129,7 @@ ${checkboxList}
       <em>There are no notes in this list.</em> <button @click="toggleCreatingNewNote()">Add one!</button>
     </p>
 
-    <div class="buttons-list">
-      <button @click="printList()" v-if="list.notes.length > 0">Print this list</button>
-    </div>
+    <RouterLink :to="'/lists/' + list.id + '/print'" target="_blank">Print this list</RouterLink>
 
     <dialog id="list-delete-dialog">
       <form method="dialog">