make Notes closable

Backend/.gitignore

@@ -5,4 +5,5 @@ debug.log
 credentials.txt
 sqlite3.lib
 db.sqlite
+db.sqlite-*
 data/Studium

Frontend/src/components/IlTypes.ts

@@ -1,5 +1,3 @@
-
-
 export enum IlNodeType {
   Forum,
   Folder,

Frontend/src/components/Ilias.vue

@@ -14,7 +14,7 @@
   </div>
 
   <div class="right-0 top-0 fixed">
-    <UpdateIcon :updating="updating" @click.native="update"></UpdateIcon>
+    <UpdateIcon :updating="updating" @click="update"></UpdateIcon>
   </div>
   <div
     class="fixed h-full w-full flex justify-center items-center top-0 bg-main bg-opacity-50"

Frontend/src/components/Notes.vue

@@ -1,31 +1,37 @@
 <template>
-  <div class="h-full flex flex-col p-3">
+  <div class="h-full flex flex-col p-4 pt-2">
     <div>
       <button
         v-for="note in notes"
         :key="note.course"
         class="p-1 mr-2 border-accent border-b rounded focus:outline-none select-none cursor-pointer"
         :class="{ 'bg-light-main': active.uri == note.uri }"
-        @click="active = note"
       >
-        {{ note.course }}
+        <span @click="active = note"> {{ note.course }} </span>
+
+        <mdi-close
+          class="inline-block hover:text-accent"
+          @click="
+            () => {
+              hide_note(note.uri);
+            }
+          "
+        />
       </button>
       <codicon-chrome-minimize
         class="inline-block float-right mt-2 text-accent hover:bg-light-main cursor-pointer"
         @click="reset_note"
       />
     </div>
     <textarea
-      class="bg-light-main mt-3 flex-grow rounded p-2 overflow-y-auto"
+      class="bg-light-main mt-2 flex-grow rounded p-2 overflow-y-auto"
       v-model="active.body"
       placeholder="Notizen"
     ></textarea>
   </div>
 </template>
 
 <script>
-import axios from "axios";
-import { ref } from "vue";
 import { useNotes } from "./compositions";
 
 const mock_nodes = [
@@ -37,14 +43,22 @@ export default {
   name: "Notes",
 
   async setup(props) {
-    const { activate_note, reset_note, active, get_notes } = useNotes();
+    const {
+      activate_note,
+      reset_note,
+      active,
+      get_notes,
+      hide_note,
+    } = useNotes();
 
     let notes = await get_notes();
 
     return {
       reset_note,
       active,
       notes,
+      hide_note,
+      reset_note,
     };
   },
 };

Frontend/src/components/UpdateIcon.vue

@@ -24,7 +24,7 @@
 import { ref } from "vue";
 
 export default {
-  name: "Notes",
+  name: "Update Icon",
   props: {
     updating: Boolean,
   },

Frontend/src/components/compositions.ts

@@ -10,19 +10,24 @@ export function useVisibility() {
 }
 
 
-let notes = ref([] as Note[])
+let all_notes = ref([] as Note[])
 let active = ref(undefined as Note | undefined)
+let visible_notes = ref([] as String[]); // TODO: Make this a set
 
 export interface Note {
   body: string,
   uri: string,
   course: string,
 }
 
+let notes = computed(() => {
+  return all_notes.value.filter((a) => visible_notes.value.find((uri) => uri == a.uri))
+})
+
 let loaded = false
 async function get_notes() {
   if (!loaded) {
-    notes.value.push(...(await fetch_notes()).map((note: Note) => new Proxy(note, handler)));
+    all_notes.value.push(...(await fetch_notes()).map((note: Note) => new Proxy(note, handler)));
     loaded = true
     return notes
   }
@@ -38,7 +43,6 @@ let handler = {
     if (timeout) {
       clearTimeout(timeout)
     }
-    console.log("update for", obj.course)
     timeout = setTimeout(() => {
       update_note(obj)
     }, 750)
@@ -51,7 +55,7 @@ let handler = {
 
 async function activate_note(node: IlNode) {
   await get_notes() // make sure notes from server are loaded
-  const note = notes.value.find((note) => note.uri == node.uri);
+  const note = all_notes.value.find((note) => note.uri == node.uri);
   if (!note) {
     let new_note = new Proxy({
       uri: node.uri,
@@ -61,23 +65,40 @@ async function activate_note(node: IlNode) {
 
     let resp = await create_note(new_note)
     if (resp.status == 201) {
-      notes.value.push(new_note)
+      all_notes.value.push(new_note)
+      visible_notes.value.push(new_note.uri)
       active.value = new_note
     }
   } else {
     active.value = note
+    visible_notes.value.push(node.uri)
   }
 }
 const reset_note = () => {
   active.value = undefined
 }
 
+const hide_note = (note_uri: string) => {
+  const index = visible_notes.value.indexOf(note_uri);
+  visible_notes.value.splice(index, 1)
+
+  if (note_uri == active.value?.uri) {
+    if (notes.value.length > 0) {
+      active.value = notes.value[0]
+    } else {
+      active.value = undefined
+    }
+  }
+}
+
+
 export function useNotes() {
   return {
     activate_note,
     reset_note,
     active,
-    get_notes
+    get_notes,
+    hide_note
   }
 }