marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

listview

Browse Source
This commit is contained in:
Marco Crapts
2023-05-19 19:12:55 +02:00
parent 35b016449a
commit e802ad289c
4 changed files with 104 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Note/NoteToolbar.vue
View File

@@ -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>

120
src/components/ViewModes/ListView.vue
View File

@@ -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>

22
src/components/ViewModes/Note.vue
View File

@@ -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

37
src/composables/useNotes.ts
View File

@@ -10,18 +10,17 @@ export const notes = computed<Note[]>(() => {
return Object.entries(baseNotes)
.map(([, note]) => ({
...note,
wordCount: note.content.split(' ').filter((word) => word.length > 0).length,
wordCount: note.content.split(' ').filter((word) => word.length > 0).length
}))
.sort((a, b) => b.modified - a.modified) as Note[]
})
watch(notes, () => {
if (notes.value.length > 0 && !activeNote.value) setActiveNote(rootNote.value?.id)
if (notes.value.length > 0 && !activeNote.value && activeViewMode.value.name === 'Note')
setActiveNote(rootNote.value?.id)
})
const activeNoteId = ref<string>()
export const activeNote = computed(() =>
notes.value.find((note) => note.id === activeNoteId.value)
)
export const activeNote = computed(() => notes.value.find((note) => note.id === activeNoteId.value))
watch(activeNote, () => {
if (activeNote.value) {
useTitle(`${activeNote.value.title} | Contexted`)
@@ -30,8 +29,7 @@ watch(activeNote, () => {
export const setActiveNote = (noteId: string | undefined) => {
if (noteId) {
activeNoteId.value = noteId
activeViewMode.value =
viewModes.find((mode) => mode.name === 'Note') || viewModes[0]
activeViewMode.value = viewModes.find((mode) => mode.name === 'Note') || viewModes[0]
}
}
@@ -78,9 +76,7 @@ export const findNotes = (query: string): Note[] => {
}
return notes.value.filter((note) => {
const matchTitle = note.title.toLowerCase().includes(query.toLowerCase())
const matchContent = removeMdFromText(note.content)
.toLowerCase()
.includes(query.toLowerCase())
const matchContent = removeMdFromText(note.content).toLowerCase().includes(query.toLowerCase())
return matchTitle || matchContent
})
}
@@ -88,7 +84,7 @@ export const findNotes = (query: string): Note[] => {
export const updateNote = (noteId: string, note: BaseNote) => {
const updatedNote: BaseNote = {
...note,
modified: new Date().getTime(),
modified: new Date().getTime()
}
baseNotes[noteId] = updatedNote
}
@@ -100,7 +96,7 @@ export const addNote = (title: string, content: string, goToNote: boolean = fals
title,
content,
created: new Date().getTime(),
modified: new Date().getTime(),
modified: new Date().getTime()
}
baseNotes[id] = newNote
if (goToNote) setActiveNote(id)
@@ -143,16 +139,14 @@ export const notesRelations = computed(() => {
.map((noteRelations, _, notesRelations): NoteRelations => {
const from = [...notesRelations]
.map((noteRelation) =>
noteRelation.to
.filter((toId) => toId === noteRelations.id)
.map(() => noteRelation.id)
noteRelation.to.filter((toId) => toId === noteRelations.id).map(() => noteRelation.id)
)
.reduce((arr, elem) => arr.concat(elem), [])
.filter((value, index, self) => self.indexOf(value) === index)
return {
id: noteRelations.id,
to: noteRelations.to,
from,
from
}
})
.reduce((notes, { id, to, from }) => {
@@ -161,3 +155,14 @@ export const notesRelations = computed(() => {
}, {} as NotesRelations)
return relations
})
export function getNoteReferences(note: Note) {
const relations = notesRelations.value[note.id]
return relations
? (relations.from || [])
.map((noteId) => {
return notes.value.find((note) => note.id === noteId)
})
.filter((note): note is Note => note !== undefined)
: []
}