From 95648988ef6449d5d7a0da9ce4ec27d1b87d6843 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Wed, 17 May 2023 07:43:53 +0200
Subject: [PATCH] listview component

---
 components.d.ts                            | 11 +++--
 src/App.vue                                |  4 +-
 src/components/{ => Note}/Autocomplete.vue |  0
 src/components/Note/NoteEditor.vue         |  2 +-
 src/components/{ => TopBar}/Hamburger.vue  |  0
 src/components/{ => TopBar}/Logo.vue       |  0
 src/components/ViewModes/ListView.vue      | 54 ++++++++++++++++++++++
 src/components/ViewModes/Mindmap.vue       |  0
 src/components/{ => ViewModes}/Note.vue    |  0
 9 files changed, 65 insertions(+), 6 deletions(-)
 rename src/components/{ => Note}/Autocomplete.vue (100%)
 rename src/components/{ => TopBar}/Hamburger.vue (100%)
 rename src/components/{ => TopBar}/Logo.vue (100%)
 create mode 100644 src/components/ViewModes/ListView.vue
 create mode 100644 src/components/ViewModes/Mindmap.vue
 rename src/components/{ => ViewModes}/Note.vue (100%)

diff --git a/components.d.ts b/components.d.ts
index 62babe5..07e0d9f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,11 +9,14 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Autocomplete: typeof import('./src/components/Autocomplete.vue')['default']
-    Hamburger: typeof import('./src/components/Hamburger.vue')['default']
-    Logo: typeof import('./src/components/Logo.vue')['default']
+    Autocomplete: typeof import('./src/components/Note/Autocomplete.vue')['default']
+    Hamburger: typeof import('./src/components/TopBar/Hamburger.vue')['default']
+    List: typeof import('./src/components/ViewModes/List.vue')['default']
+    ListView: typeof import('./src/components/ViewModes/ListView.vue')['default']
+    Logo: typeof import('./src/components/TopBar/Logo.vue')['default']
+    Mindmap: typeof import('./src/components/ViewModes/Mindmap.vue')['default']
     Modal: typeof import('./src/components/Modal.vue')['default']
-    Note: typeof import('./src/components/Note.vue')['default']
+    Note: typeof import('./src/components/ViewModes/Note.vue')['default']
     NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
     NoteReferences: typeof import('./src/components/Note/NoteReferences.vue')['default']
     NoteToolbar: typeof import('./src/components/Note/NoteToolbar.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index 14b1a7f..725ecb9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,12 +21,14 @@ const sideBarCollapsed = ref(false)
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
       <Note
-        v-if="activeNote"
+        v-if="activeViewMode.name === 'Note' && activeNote"
         :key="activeNote.id"
         :note="activeNote"
         class=""
         @update="(note) => updateNote(note.id, note)"
       />
+      <ListView v-else-if="activeViewMode.name === 'List'" />
+      <ListView v-else-if="activeViewMode.name === 'Mindmap'" />
     </main>
   </div>
 </template>
diff --git a/src/components/Autocomplete.vue b/src/components/Note/Autocomplete.vue
similarity index 100%
rename from src/components/Autocomplete.vue
rename to src/components/Note/Autocomplete.vue
diff --git a/src/components/Note/NoteEditor.vue b/src/components/Note/NoteEditor.vue
index 4cf5993..a13e369 100644
--- a/src/components/Note/NoteEditor.vue
+++ b/src/components/Note/NoteEditor.vue
@@ -14,7 +14,7 @@ import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote, addNote } from '@/composables/useNotes'
-import Autocomplete from '@/components/Autocomplete.vue'
+import Autocomplete from '@/components/Note/Autocomplete.vue'
 
 const props = defineProps<{ note: Note }>()
 
diff --git a/src/components/Hamburger.vue b/src/components/TopBar/Hamburger.vue
similarity index 100%
rename from src/components/Hamburger.vue
rename to src/components/TopBar/Hamburger.vue
diff --git a/src/components/Logo.vue b/src/components/TopBar/Logo.vue
similarity index 100%
rename from src/components/Logo.vue
rename to src/components/TopBar/Logo.vue
diff --git a/src/components/ViewModes/ListView.vue b/src/components/ViewModes/ListView.vue
new file mode 100644
index 0000000..3f9dee0
--- /dev/null
+++ b/src/components/ViewModes/ListView.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table-compact table w-full">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <th>Note title</th>
+          <th>References</th>
+          <th>Modified</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- row 1 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Cy Ganderton</td>
+          <td>Quality Control Specialist</td>
+          <td>Blue</td>
+        </tr>
+        <!-- row 2 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Hart Hagerty</td>
+          <td>Desktop Support Technician</td>
+          <td>Purple</td>
+        </tr>
+        <!-- row 3 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Brice Swyre</td>
+          <td>Tax Accountant</td>
+          <td>Red</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/src/components/ViewModes/Mindmap.vue b/src/components/ViewModes/Mindmap.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Note.vue b/src/components/ViewModes/Note.vue
similarity index 100%
rename from src/components/Note.vue
rename to src/components/ViewModes/Note.vue