brasse/Archivum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add LinkDialog and CreateItemDialog components; enhance editor with footnote and include functionalities

Browse Source
This commit is contained in:
Björn Blomberg
2026-04-14 09:18:49 +02:00
parent e89d2c87f0
commit 6a81de8bac
6 changed files with 601 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/components/layout/Sidebar.vue
View File

@@ -2,6 +2,7 @@
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { gql, createFolder, moveDocument } from '@/lib/gql'
import CreateItemDialog from './CreateItemDialog.vue'
const emit = defineEmits<{ close: [] }>()
@@ -70,41 +71,47 @@ function buildTree(docs: DocMeta[], folders: string[]): TreeFolder {
return root
}
async function handleCreateRootFolder() {
const name = prompt('Enter folder name:')
if (!name?.trim()) return
try {
await createFolder(name)
const fData = await gql<{ folders?: string[] }>(`{ folders }`)
allFolders.value = fData.folders ?? []
} catch (err) {
console.error('Failed to create folder:', err)
}
const createDialog = reactive({
isOpen: false,
type: 'document' as 'folder' | 'document',
parentPath: ''
})
function promptCreateRootFolder() {
createDialog.type = 'folder'
createDialog.parentPath = ''
createDialog.isOpen = true
}
async function handleCreateFolder(parentPath: string) {
const name = prompt('Enter folder name:')
if (!name?.trim()) return
try {
const newPath = parentPath ? `${parentPath}/${name}` : name
await createFolder(newPath)
const fData = await gql<{ folders?: string[] }>(`{ folders }`)
allFolders.value = fData.folders ?? []
openFolders[parentPath] = true
} catch (err) {
console.error('Failed to create folder:', err)
}
function promptCreateItem(type: 'folder' | 'document', parentPath: string) {
createDialog.type = type
createDialog.parentPath = parentPath
createDialog.isOpen = true
}
function handleCreateDoc(parentPath: string) {
const title = prompt('Enter document title:')
if (!title?.trim()) return
const slug = parentPath ? `${parentPath}/${title.toLowerCase().replace(/\\s+/g, '-')}` : title.toLowerCase().replace(/\\s+/g, '-')
async function handleDialogConfirm(name: string) {
const { type, parentPath } = createDialog
// store intended initial slug for the /doc/new page to pick up via state or similar
sessionStorage.setItem('newDocSlug', slug)
router.push('/doc/new')
emit('close')
if (type === 'folder') {
try {
const newPath = parentPath ? `${parentPath}/${name}` : name
await createFolder(newPath)
const fData = await gql<{ folders?: string[] }>(`{ folders }`)
allFolders.value = fData.folders ?? []
if (parentPath) openFolders[parentPath] = true
} catch (err) {
console.error('Failed to create folder:', err)
}
} else {
// Document
const slug = parentPath
? `${parentPath}/${name.toLowerCase().replace(/\\s+/g, '-')}`
: name.toLowerCase().replace(/\\s+/g, '-')
sessionStorage.setItem('newDocSlug', slug)
router.push('/doc/new')
emit('close')
}
}
function handleDragStart(e: DragEvent, item: FlatItem) {
@@ -313,16 +320,16 @@ function isActive(slug: string) {
class="absolute right-0 top-full mt-1 w-32 bg-white dark:bg-slate-800 rounded-lg shadow-lg z-50 border border-slate-200 dark:border-slate-700"
>
<button
@click.stop="handleCreateFolder(item.path); showCreateMenu[item.path] = false"
class="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 rounded-t-lg"
@click.stop="promptCreateItem('folder', item.path); showCreateMenu[item.path] = false"
class="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 rounded-t-lg flex items-center gap-2"
>
+ Folder
<span class="text-amber-500">📁</span> Mapp
</button>
<button
@click.stop="handleCreateDoc(item.path); showCreateMenu[item.path] = false"
class="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 rounded-b-lg"
@click.stop="promptCreateItem('document', item.path); showCreateMenu[item.path] = false"
class="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 rounded-b-lg flex items-center gap-2"
>
+ Document
<span class="text-indigo-400">📄</span> Dokument
</button>
</div>
</div>
@@ -355,25 +362,20 @@ function isActive(slug: string) {
<!-- Bottom actions -->
<div class="p-3 border-t border-slate-200 dark:border-slate-700/60 flex flex-col gap-2">
<button
class="w-full btn-secondary text-center text-sm py-1.5 flex items-center justify-center gap-1.5"
@click="handleCreateRootFolder"
class="w-full btn-secondary text-center text-sm py-1.5 flex items-center justify-center gap-2"
@click="promptCreateRootFolder"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
New folder
<span class="text-amber-500">📁</span>
Ny mapp (rot)
</button>
<router-link
to="/doc/new"
class="btn-primary w-full text-center text-sm py-2 flex items-center justify-center gap-1.5"
@click="emit('close')"
<button
class="btn-primary w-full text-center text-sm py-2 flex items-center justify-center gap-2"
@click="promptCreateItem('document', '')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
New document
</router-link>
<span class="text-indigo-200">📝</span>
Nytt dokument (rot)
</button>
<router-link
to="/admin"
@@ -388,5 +390,12 @@ function isActive(slug: string) {
</router-link>
</div>
<!-- Create Dialog (Folder / Document) -->
<CreateItemDialog
:is-open="createDialog.isOpen"
:type="createDialog.type"
@close="createDialog.isOpen = false"
@confirm="handleDialogConfirm"
/>
</div>
</template>