listview

src/components/Note/NoteToolbar.vue

@@ -23,9 +23,7 @@ const emit = defineEmits<{
         </template>
         <template #default>Are you sure you want to delete this note?</template>
         <template #actions="{ close }">
-          <button class="btn-primary btn-sm btn mr-1" @click="emit('delete', close)">
-            Delete note
-          </button>
+          <button class="btn-primary btn-sm btn" @click="emit('delete', close)">Delete note</button>
           <button class="btn-sm btn" @click="close">Close</button>
         </template>
       </Modal>
@@ -35,12 +33,10 @@ const emit = defineEmits<{
             <i class="fas fa-fw fa-sitemap" />
           </button>
         </template>
-        <template #default>
-          Are you sure you want to set this note as root note?
-        </template>
+        <template #default>Are you sure you want to set this note as root note?</template>
         <template #actions="{ close }">
           <button class="btn-sm btn" @click="close">Close</button>
-          <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot', close)">
+          <button class="btn-primary btn-sm btn" @click="emit('setRoot', close)">
             Set current note as root
           </button>
         </template>

src/components/ViewModes/ListView.vue

@@ -1,70 +1,102 @@
 <script setup lang="ts">
-const rows = [
-  {
-    noteTitle: 'Cy Ganderton',
-    references: 'Quality Control Specialist',
-    modified: 'Blue'
-  },
-  {
-    noteTitle: 'Hart Hagerty',
-    references: 'Desktop Support Technician',
-    modified: 'Purple',
-    rootNote: true
-  },
-  {
-    noteTitle: 'Brice Swyre',
-    references: 'Tax Accountant',
-    modified: 'Red'
-  }
-].map((row) => ({
-  ...row,
-  selected: false
-}))
+import { getNoteReferences, setActiveNote, findNotes, deleteNote } from '@/composables/useNotes'
+import { formatDate } from '@/utils/helpers'
 
-const checkedRows = ref<{ [key: string]: Boolean }>({})
+const notesWithReferences = computed(() => {
+  return findNotes(filter.value).map((note) => ({
+    ...note,
+    references: getNoteReferences(note)
+  }))
+})
 
-const toggleRow = (row: any) => {
-  if (!row.rootNote) checkedRows.value[row.noteTitle] = !checkedRows.value[row.noteTitle]
+const selectedNotes = ref<{ [key: string]: Boolean }>({})
+const countSelectedNotes = computed(
+  () => Object.entries(selectedNotes.value).filter(([, selected]) => Boolean(selected)).length
+)
+
+const toggleRow = (note: Note) => {
+  if (!note.isRoot) selectedNotes.value[note.id] = !selectedNotes.value[note.id]
+}
+
+const filter = ref('')
+
+const deleteSelectedNotes = (closeModal: () => void) => {
+  closeModal()
+  const notesToDelete = Object.entries(selectedNotes.value)
+    .filter(([, selected]) => Boolean(selected))
+    .map(([id]) => id)
+  notesToDelete.forEach((noteId) => deleteNote(noteId))
+  selectedNotes.value = {}
 }
 </script>
 <template>
-  <div class="overflow-x-auto">
+  <div class="flex flex-col gap-2 overflow-x-auto">
+    <div class="flex items-center gap-2">
+      <div class="flex items-center">
+        <span class="whitespace-nowrap">
+          {{ notesWithReferences.length }} {{ notesWithReferences.length === 1 ? 'note' : 'notes' }}
+        </span>
+        <template v-if="countSelectedNotes > 0">
+          <span class="mx-1">|</span>
+          <div class="whitespace-nowrap font-semibold">{{ countSelectedNotes }} selected</div>
+        </template>
+      </div>
+      <Modal v-if="countSelectedNotes > 0">
+        <template #activator="{ open }">
+          <button class="btn-toolbar btn-sm btn" @click="open">Delete</button>
+        </template>
+        <template #default>Are you sure you want to delete the selected notes?</template>
+        <template #actions="{ close }">
+          <button class="btn-primary btn-sm btn" @click="deleteSelectedNotes(close)">
+            Delete selected notes
+          </button>
+          <button class="btn-sm btn" @click="close">Close</button>
+        </template>
+      </Modal>
+      <input
+        type="text"
+        placeholder="Start typing to filter"
+        class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
+        v-model="filter"
+      />
+    </div>
     <table class="table-compact table w-full">
       <thead>
         <tr>
-          <th>
-            <!-- <label>
-              <input
-                type="checkbox"
-                class="checkbox-primary checkbox checkbox-sm border-secondary"
-              />
-            </label> -->
-          </th>
+          <th class="w-[48px]"></th>
           <th>Note title</th>
-          <th>References</th>
-          <th>Modified</th>
+          <th class="w-[100px]">References</th>
+          <th class="w-[150px]">Modified</th>
         </tr>
       </thead>
       <tbody>
         <tr
-          v-for="row in rows"
-          :key="row.noteTitle"
+          v-for="note in notesWithReferences"
+          :key="note.id"
           class="hover hover:cursor-pointer"
-          @click="toggleRow(row)"
+          @click="setActiveNote(note.id)"
         >
-          <th>
+          <th @click.stop="toggleRow(note)" class="text-center">
             <label>
               <input
                 type="checkbox"
                 class="checkbox-primary checkbox checkbox-sm border-secondary"
-                v-model="checkedRows[row.noteTitle]"
-                :disabled="row.rootNote"
+                :checked="Boolean(selectedNotes[note.id])"
+                :disabled="note.isRoot"
               />
             </label>
           </th>
-          <td>{{ row.noteTitle }}</td>
-          <td>{{ row.references }}</td>
-          <td>{{ row.modified }}</td>
+          <td>
+            <i class="fas fa-fw fa-home mr-1 text-secondary" v-if="note.isRoot" />
+            {{ note.title }}
+          </td>
+          <td>
+            <div class="badge" v-if="note.references.length > 0">
+              <i data-v-41bbc26f="" class="fas fa-fw fa-sign-out-alt mr-1"></i>
+              {{ note.references.length }}
+            </div>
+          </td>
+          <td>{{ formatDate(note.modified) }}</td>
         </tr>
       </tbody>
     </table>

src/components/ViewModes/Note.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { formatDate } from '@/utils/helpers'
 import {
-  notes,
   activeNote,
-  notesRelations,
   deleteNote,
   rootNote,
   setRootNote,
   setActiveNote,
+  getNoteReferences
 } from '@/composables/useNotes'
 
 const props = defineProps<{
@@ -29,16 +28,7 @@ const updateNoteContent = (content: string) => {
   emit('update', updatedNote)
 }
 
-const references = computed<Note[]>(() => {
-  const relations = notesRelations.value[props.note.id]
-  return relations
-    ? (relations.from || [])
-        .map((noteId) => {
-          return notes.value.find((note) => note.id === noteId)
-        })
-        .filter((note): note is Note => note !== undefined)
-    : []
-})
+const references = computed<Note[]>(() => getNoteReferences(props.note))
 
 const del = async (closeModal: () => Promise<Boolean>) => {
   await closeModal()
@@ -52,18 +42,14 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
 }
 </script>
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex h-full flex-col">
     <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
       <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
         ></i>
-        <input
-          type="text"
-          class="flex-grow bg-transparent py-1 outline-none"
-          v-model="noteTitle"
-        />
+        <input type="text" class="flex-grow bg-transparent py-1 outline-none" v-model="noteTitle" />
       </template>
     </NoteToolbar>
     <NoteEditor