Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sebastian
|
75f696f9a9 |
@@ -1,50 +0,0 @@
|
||||
name: Build Test
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Retrieve Server Install Action
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/action-server-install
|
||||
ref: main
|
||||
path: action-server-install
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install Server
|
||||
uses: ./action-server-install
|
||||
with:
|
||||
install-php: 'false'
|
||||
install-node: 'true'
|
||||
php-version: '8.5'
|
||||
node-version: '24'
|
||||
server-path: './server'
|
||||
|
||||
- name: Install Documents Manager
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/documents_manager
|
||||
ref: main
|
||||
path: server/modules/documents_manager
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Checkout Pull Request
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: ${{ github.repository }}
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
path: server/modules/documents
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
working-directory: server/modules/documents
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
working-directory: server/modules/documents
|
||||
@@ -1,50 +0,0 @@
|
||||
name: JS Unit Tests
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Retrieve Server Install Action
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/action-server-install
|
||||
ref: main
|
||||
path: action-server-install
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install Server
|
||||
uses: ./action-server-install
|
||||
with:
|
||||
install-php: 'false'
|
||||
install-node: 'true'
|
||||
php-version: '8.5'
|
||||
node-version: '24'
|
||||
server-path: './server'
|
||||
|
||||
- name: Install Documents Manager
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/documents_manager
|
||||
ref: main
|
||||
path: server/modules/documents_manager
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Checkout Pull Request
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: ${{ github.repository }}
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
path: server/modules/documents
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
working-directory: server/modules/documents
|
||||
|
||||
- name: Run tests
|
||||
run: npm run test:unit
|
||||
working-directory: server/modules/documents
|
||||
@@ -25,17 +25,11 @@ jobs:
|
||||
tools: composer:v2
|
||||
|
||||
- name: Install Renovate
|
||||
run: |
|
||||
npm install --global --no-audit --fund=false \
|
||||
--prefix "${{ runner.temp }}/renovate-npm" \
|
||||
--cache "${{ runner.temp }}/renovate-npm-cache" \
|
||||
renovate
|
||||
"${{ runner.temp }}/renovate-npm/bin/renovate" --version
|
||||
run: npm install -g renovate
|
||||
|
||||
- name: Run Renovate
|
||||
env:
|
||||
RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
|
||||
RENOVATE_PLATFORM: gitea
|
||||
RENOVATE_ENDPOINT: https://git.ktrix.dev/api/v1
|
||||
run: |
|
||||
"${{ runner.temp }}/renovate-npm/bin/renovate" ${{ gitea.repository }}
|
||||
run: renovate ${{ gitea.repository }}
|
||||
+4
-2
@@ -12,10 +12,12 @@ node_modules/
|
||||
/static/
|
||||
|
||||
# Backend development
|
||||
/vendor/
|
||||
/lib/vendor/
|
||||
coverage/
|
||||
*.cache
|
||||
phpunit.xml.cache
|
||||
.phpunit.result.cache
|
||||
.php-cs-fixer.cache
|
||||
.phpstan.cache
|
||||
.phpactor/
|
||||
|
||||
# Editors
|
||||
|
||||
Generated
-18
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"_readme": [
|
||||
"This file locks the dependencies of your project to a known state",
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "af70f170d61e4218f6e8d296b529b109",
|
||||
"packages": [],
|
||||
"packages-dev": [],
|
||||
"aliases": [],
|
||||
"minimum-stability": "stable",
|
||||
"stability-flags": {},
|
||||
"prefer-stable": false,
|
||||
"prefer-lowest": false,
|
||||
"platform": {},
|
||||
"platform-dev": {},
|
||||
"plugin-api-version": "2.6.0"
|
||||
}
|
||||
Generated
+414
-2513
File diff suppressed because it is too large
Load Diff
+4
-12
@@ -10,16 +10,12 @@
|
||||
"dev": "vite build --mode development --config vite.config.ts",
|
||||
"watch": "vite build --mode development --watch --config vite.config.ts",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"test": "vitest run --config tests/js/vitest.config.ts",
|
||||
"test:unit": "vitest run --config tests/js/vitest.config.ts",
|
||||
"test:watch": "vitest watch --config tests/js/vitest.config.ts",
|
||||
"test:coverage": "vitest run --coverage --config tests/js/vitest.config.ts"
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"pinia": "^4.0.0",
|
||||
"pinia": "^3.0.0",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^5.0.0",
|
||||
"vue-router": "^4.5.1",
|
||||
"vuetify": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -27,10 +23,6 @@
|
||||
"@vue/tsconfig": "^0.9.0",
|
||||
"typescript": "~6.0.0",
|
||||
"vite": "^8.0.0",
|
||||
"vue-tsc": "^3.0.5",
|
||||
"@vitest/coverage-v8": "^4.1.6",
|
||||
"@vue/test-utils": "^2.4.10",
|
||||
"jsdom": "^30.0.0",
|
||||
"vitest": "^4.1.6"
|
||||
"vue-tsc": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import type { ServiceObject } from '@DocumentsManager/models/service'
|
||||
|
||||
const display = useDisplay()
|
||||
const isMobile = computed(() => display.mdAndDown.value)
|
||||
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
activeProviderId: string
|
||||
activeServiceId: string
|
||||
services: ServiceObject[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
'navigate-home': []
|
||||
'select-service': [service: ServiceObject]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
:model-value="modelValue"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
:permanent="!isMobile"
|
||||
:temporary="isMobile"
|
||||
width="280"
|
||||
class="files-sidebar"
|
||||
>
|
||||
<div class="pa-4">
|
||||
<v-list density="compact" nav>
|
||||
<v-list-subheader>Quick Access</v-list-subheader>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-home"
|
||||
title="Home"
|
||||
@click="emit('navigate-home')"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-clock-outline"
|
||||
title="Recent"
|
||||
disabled
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-star-outline"
|
||||
title="Starred"
|
||||
disabled
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-trash-can-outline"
|
||||
title="Trash"
|
||||
disabled
|
||||
/>
|
||||
</v-list>
|
||||
|
||||
<v-divider class="my-4" />
|
||||
|
||||
<v-list density="compact" nav>
|
||||
<v-list-subheader>Storage</v-list-subheader>
|
||||
<v-list-item
|
||||
v-for="service in services"
|
||||
:key="`${service.provider}:${String(service.identifier ?? '')}`"
|
||||
prepend-icon="mdi-harddisk"
|
||||
:title="service.label || String(service.identifier ?? 'Unnamed Service')"
|
||||
:subtitle="service.provider"
|
||||
:active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
|
||||
@click="emit('select-service', service)"
|
||||
/>
|
||||
|
||||
<div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
|
||||
No storage services available.
|
||||
</div>
|
||||
</v-list>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.files-sidebar {
|
||||
border-right: 1px solid rgb(var(--v-border-color)) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.files-sidebar-empty {
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import type { ViewMode } from '@/types'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -18,6 +19,9 @@ const emit = defineEmits<{
|
||||
'new-folder': []
|
||||
}>()
|
||||
|
||||
const display = useDisplay()
|
||||
const isMobile = computed(() => display.mdAndDown.value)
|
||||
|
||||
const searchModel = computed({
|
||||
get: () => props.searchQuery,
|
||||
set: (value: string) => emit('update:searchQuery', value)
|
||||
@@ -30,19 +34,15 @@ const viewModeModel = computed({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-toolbar elevation="0" density="compact" class="files-toolbar">
|
||||
<v-app-bar elevation="0" density="compact" class="files-toolbar">
|
||||
<template #prepend>
|
||||
<v-btn
|
||||
icon="mdi-menu"
|
||||
variant="text"
|
||||
<v-app-bar-nav-icon
|
||||
v-if="isMobile"
|
||||
@click="emit('toggle-sidebar')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-toolbar-title class="d-flex align-center">
|
||||
<v-icon size="24" color="primary" class="mr-2">mdi-folder-multiple</v-icon>
|
||||
<span class="text-subtitle-1 font-weight-bold">Files</span>
|
||||
</v-toolbar-title>
|
||||
<v-app-bar-title>Files</v-app-bar-title>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
@@ -55,7 +55,6 @@ const viewModeModel = computed({
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
hide-details
|
||||
single-line
|
||||
clearable
|
||||
class="files-toolbar-search mx-4"
|
||||
/>
|
||||
|
||||
@@ -123,7 +122,7 @@ const viewModeModel = computed({
|
||||
<span class="d-none d-sm-inline">New Folder</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,189 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import type { ServiceObject } from '@DocumentsManager/models/service'
|
||||
|
||||
const display = useDisplay()
|
||||
const isMobile = computed(() => display.mdAndDown.value)
|
||||
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
activeProviderId: string
|
||||
activeServiceId: string
|
||||
services: ServiceObject[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
'navigate-home': []
|
||||
'select-service': [service: ServiceObject]
|
||||
'new-folder': []
|
||||
'open-file-picker': []
|
||||
'open-folder-picker': []
|
||||
}>()
|
||||
|
||||
// Settings placeholder (no settings dialog exists for this module yet)
|
||||
const showSettingsDialog = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
:model-value="modelValue"
|
||||
contained
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
:permanent="modelValue && !isMobile"
|
||||
:temporary="isMobile"
|
||||
width="280"
|
||||
class="files-sidebar"
|
||||
>
|
||||
<div class="pa-3">
|
||||
<!-- Primary action -->
|
||||
<v-menu>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-btn
|
||||
block
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
prepend-icon="mdi-plus"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="mb-4 justify-start"
|
||||
v-bind="menuProps"
|
||||
>
|
||||
New
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact">
|
||||
<v-list-item @click="emit('new-folder')">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-folder-plus</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>New Folder</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="emit('open-file-picker')">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-file-upload</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Upload Files</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="emit('open-folder-picker')">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-folder-upload</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Upload Folder</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- Quick Access -->
|
||||
<div class="d-flex align-center mb-1 px-1">
|
||||
<v-icon icon="mdi-star" size="14" class="mr-2 text-medium-emphasis" />
|
||||
<span class="sidebar-section-label">Quick Access</span>
|
||||
</div>
|
||||
<v-divider class="mb-2" />
|
||||
<v-list density="compact" nav class="pa-0">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-home"
|
||||
title="Home"
|
||||
rounded="lg"
|
||||
@click="emit('navigate-home')"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-clock-outline"
|
||||
title="Recent"
|
||||
rounded="lg"
|
||||
disabled
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-star-outline"
|
||||
title="Starred"
|
||||
rounded="lg"
|
||||
disabled
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-trash-can-outline"
|
||||
title="Trash"
|
||||
rounded="lg"
|
||||
disabled
|
||||
/>
|
||||
</v-list>
|
||||
|
||||
<div class="my-3"></div>
|
||||
|
||||
<!-- Storage -->
|
||||
<div class="d-flex align-center mb-1 px-1">
|
||||
<v-icon icon="mdi-harddisk" size="14" class="mr-2 text-medium-emphasis" />
|
||||
<span class="sidebar-section-label">Storage</span>
|
||||
</div>
|
||||
<v-divider class="mb-2" />
|
||||
<v-list density="compact" nav class="pa-0">
|
||||
<v-list-item
|
||||
v-for="service in services"
|
||||
:key="`${service.provider}:${String(service.identifier ?? '')}`"
|
||||
prepend-icon="mdi-harddisk"
|
||||
:title="service.label || String(service.identifier ?? 'Unnamed Service')"
|
||||
:subtitle="service.provider"
|
||||
:active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
|
||||
rounded="lg"
|
||||
@click="emit('select-service', service)"
|
||||
/>
|
||||
|
||||
<div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
|
||||
No storage services available.
|
||||
</div>
|
||||
</v-list>
|
||||
</div>
|
||||
|
||||
<!-- Pinned utility footer -->
|
||||
<template #append>
|
||||
<v-divider />
|
||||
<div class="pa-2">
|
||||
<v-btn
|
||||
block
|
||||
variant="text"
|
||||
size="small"
|
||||
prepend-icon="mdi-cog"
|
||||
class="justify-start text-medium-emphasis"
|
||||
@click="showSettingsDialog = true"
|
||||
>
|
||||
Settings
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Settings placeholder dialog -->
|
||||
<v-dialog v-model="showSettingsDialog" max-width="480">
|
||||
<v-card>
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon icon="mdi-cog" size="small" class="mr-2" />
|
||||
Files Settings
|
||||
</v-card-title>
|
||||
<v-card-text class="text-medium-emphasis">
|
||||
No settings are available for this module yet.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn variant="text" @click="showSettingsDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.files-sidebar {
|
||||
border-right: 1px solid rgb(var(--v-border-color)) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||
}
|
||||
|
||||
.files-sidebar-empty {
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
export { default as NewFolderDialog } from './NewFolderDialog.vue'
|
||||
export { default as RenameDialog } from './RenameDialog.vue'
|
||||
export { default as DeleteConfirmDialog } from './DeleteConfirmDialog.vue'
|
||||
export { default as UploadDialog } from './UploadDialog.vue'
|
||||
@@ -0,0 +1 @@
|
||||
export { default as FileEditorDialog } from './FileEditorDialog.vue'
|
||||
@@ -0,0 +1,20 @@
|
||||
// Layout components
|
||||
export { default as FilesToolbar } from './FilesToolbar.vue'
|
||||
export { default as FilesSidebar } from './FilesSidebar.vue'
|
||||
export { default as FilesBreadcrumbs } from './FilesBreadcrumbs.vue'
|
||||
export { default as FilesEmptyState } from './FilesEmptyState.vue'
|
||||
export { default as FilesDragOverlay } from './FilesDragOverlay.vue'
|
||||
export { default as FilesInfoPanel } from './FilesInfoPanel.vue'
|
||||
export { default as FileActionsMenu } from './FileActionsMenu.vue'
|
||||
|
||||
// View components
|
||||
export * from './views'
|
||||
|
||||
// Dialog components
|
||||
export * from './dialogs'
|
||||
|
||||
// Viewer
|
||||
export * from './viewer'
|
||||
|
||||
// Editor
|
||||
export * from './editor'
|
||||
@@ -1,48 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* Thin Documents-side adapter that drops the media_viewer module's hover
|
||||
* popover onto a file item. Resolves the popover from the integration store
|
||||
* and builds a generic MediaItem from the entity; the popover anchors to its
|
||||
* parent element via `activator="parent"`.
|
||||
*/
|
||||
import { computed, defineAsyncComponent } from 'vue'
|
||||
import { useIntegrationStore } from '@KTXC'
|
||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||
|
||||
const props = defineProps<{
|
||||
entity: EntityObject
|
||||
/** Same resolver the fullscreen dialog uses (returns a GET URL string). */
|
||||
source: (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
expand: [entity: EntityObject]
|
||||
}>()
|
||||
|
||||
const integrationStore = useIntegrationStore()
|
||||
|
||||
const popoverComponent = computed(() => {
|
||||
// Integration ids are prefixed with the module handle (e.g. 'media_viewer.popover').
|
||||
const entry = integrationStore.getItems('media_viewer').find(i => i.id.endsWith('.popover'))
|
||||
return entry?.component
|
||||
? defineAsyncComponent(entry.component as () => Promise<unknown>)
|
||||
: null
|
||||
})
|
||||
|
||||
const item = computed(() => ({
|
||||
id: String(props.entity.identifier ?? ''),
|
||||
title: props.entity.properties.label ?? String(props.entity.identifier ?? ''),
|
||||
mime: props.entity.properties.mime ?? '',
|
||||
meta: { collection: props.entity.collection ? String(props.entity.collection) : null },
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="popoverComponent"
|
||||
v-if="popoverComponent"
|
||||
:item="item"
|
||||
:source="source"
|
||||
@expand="emit('expand', entity)"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,293 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||
import { useFileViewer } from '@/composables'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
entity: EntityObject | null
|
||||
/** All files in the current folder, used for prev/next navigation */
|
||||
allEntities: EntityObject[]
|
||||
/** Converts an entity into a URL usable as an img/video src */
|
||||
getUrl: (entityId: string, collectionId: string | null) => string
|
||||
/** Called to trigger a browser download of an entity */
|
||||
downloadEntity: (entityId: string, collectionId: string | null) => void
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
/** Request the parent to switch to a different entity */
|
||||
'navigate': [entity: EntityObject]
|
||||
}>()
|
||||
|
||||
const fileViewer = useFileViewer()
|
||||
|
||||
// ── Derived state ──────────────────────────────────────────────────────────
|
||||
|
||||
const url = computed(() => {
|
||||
if (!props.entity) return ''
|
||||
return props.getUrl(
|
||||
String(props.entity.identifier ?? ''),
|
||||
props.entity.collection ? String(props.entity.collection) : null,
|
||||
)
|
||||
})
|
||||
|
||||
const mime = computed(() => props.entity?.properties.mime ?? '')
|
||||
|
||||
const viewer = computed(() => {
|
||||
if (!mime.value) return null
|
||||
return fileViewer.findViewer(mime.value)
|
||||
})
|
||||
|
||||
// Wrap the raw () => import() factory in defineAsyncComponent so Vue
|
||||
// actually resolves it instead of rendering the Promise as text.
|
||||
const viewerComponent = computed(() => {
|
||||
if (!viewer.value?.component) return null
|
||||
return defineAsyncComponent(viewer.value.component as () => Promise<unknown>)
|
||||
})
|
||||
|
||||
const filename = computed(
|
||||
() => props.entity?.properties.label ?? String(props.entity?.identifier ?? ''),
|
||||
)
|
||||
|
||||
const currentIndex = computed(() => {
|
||||
if (!props.entity) return -1
|
||||
return props.allEntities.findIndex(e => e.identifier === props.entity!.identifier)
|
||||
})
|
||||
|
||||
const hasPrev = computed(() => currentIndex.value > 0)
|
||||
const hasNext = computed(() => currentIndex.value < props.allEntities.length - 1)
|
||||
|
||||
// Viewer component may take a moment to load; track async state
|
||||
const viewerLoading = ref(false)
|
||||
|
||||
watch(() => props.entity, () => {
|
||||
viewerLoading.value = false
|
||||
})
|
||||
|
||||
// ── Navigation ──────────────────────────────────────────────────────────────
|
||||
|
||||
function navigatePrev() {
|
||||
if (!hasPrev.value) return
|
||||
emit('navigate', props.allEntities[currentIndex.value - 1])
|
||||
}
|
||||
|
||||
function navigateNext() {
|
||||
if (!hasNext.value) return
|
||||
emit('navigate', props.allEntities[currentIndex.value + 1])
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function handleDownload() {
|
||||
if (!props.entity) return
|
||||
props.downloadEntity(
|
||||
String(props.entity.identifier ?? ''),
|
||||
props.entity.collection ? String(props.entity.collection) : null,
|
||||
)
|
||||
}
|
||||
|
||||
// ── Keyboard shortcuts ──────────────────────────────────────────────────────
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (!props.modelValue) return
|
||||
if (e.key === 'ArrowLeft') { e.preventDefault(); navigatePrev() }
|
||||
else if (e.key === 'ArrowRight') { e.preventDefault(); navigateNext() }
|
||||
else if (e.key === 'Escape') { e.preventDefault(); close() }
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', handleKeydown))
|
||||
onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog
|
||||
:model-value="modelValue"
|
||||
fullscreen
|
||||
transition="dialog-bottom-transition"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
>
|
||||
<div class="viewer-shell">
|
||||
|
||||
<!-- ── Toolbar ─────────────────────────────────────────────────── -->
|
||||
<div class="viewer-toolbar">
|
||||
<v-btn icon="mdi-close" variant="text" @click="close" />
|
||||
|
||||
<span class="viewer-filename text-truncate">{{ filename }}</span>
|
||||
|
||||
<div class="viewer-toolbar-actions">
|
||||
<span v-if="allEntities.length > 1" class="viewer-counter text-caption text-medium-emphasis mr-2">
|
||||
{{ currentIndex + 1 }} / {{ allEntities.length }}
|
||||
</span>
|
||||
<v-btn
|
||||
icon="mdi-download"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Download"
|
||||
@click="handleDownload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Content area ───────────────────────────────────────────── -->
|
||||
<div class="viewer-content">
|
||||
|
||||
<!-- Prev arrow -->
|
||||
<div class="viewer-nav viewer-nav--prev">
|
||||
<v-btn
|
||||
v-if="hasPrev"
|
||||
icon="mdi-chevron-left"
|
||||
variant="elevated"
|
||||
size="large"
|
||||
@click="navigatePrev"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Viewer / fallback -->
|
||||
<div class="viewer-stage">
|
||||
<template v-if="entity">
|
||||
<!-- Registered viewer component -->
|
||||
<Suspense v-if="viewer">
|
||||
<template #default>
|
||||
<component
|
||||
:is="viewerComponent"
|
||||
:url="url"
|
||||
:entity="entity"
|
||||
:mime="mime"
|
||||
class="viewer-component"
|
||||
/>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<div class="viewer-loading">
|
||||
<v-progress-circular indeterminate color="primary" />
|
||||
</div>
|
||||
</template>
|
||||
</Suspense>
|
||||
|
||||
<!-- No viewer registered for this type -->
|
||||
<div v-else class="viewer-no-preview">
|
||||
<v-icon size="64" color="grey-lighten-1">mdi-file-question-outline</v-icon>
|
||||
<p class="text-h6 mt-4">No preview available</p>
|
||||
<p class="text-body-2 text-medium-emphasis mb-6">
|
||||
{{ mime || 'Unknown file type' }}
|
||||
</p>
|
||||
<v-btn
|
||||
prepend-icon="mdi-download"
|
||||
variant="tonal"
|
||||
@click="handleDownload"
|
||||
>
|
||||
Download file
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Next arrow -->
|
||||
<div class="viewer-nav viewer-nav--next">
|
||||
<v-btn
|
||||
v-if="hasNext"
|
||||
icon="mdi-chevron-right"
|
||||
variant="elevated"
|
||||
size="large"
|
||||
@click="navigateNext"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.viewer-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.viewer-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
min-height: 56px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.viewer-filename {
|
||||
flex: 1;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.viewer-toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.viewer-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prev/Next nav columns */
|
||||
.viewer-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Main stage */
|
||||
.viewer-stage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viewer-component {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.viewer-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* No-preview fallback */
|
||||
.viewer-no-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.viewer-nav {
|
||||
width: 40px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as FileViewerDialog } from './FileViewerDialog.vue'
|
||||
@@ -3,21 +3,17 @@ import { computed } from 'vue'
|
||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
|
||||
import FileActionsMenu from '@/components/FileActionsMenu.vue'
|
||||
import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
|
||||
import { FileActionsMenu } from '@/components'
|
||||
|
||||
type ItemWithType = {
|
||||
item: CollectionObject | EntityObject
|
||||
type: 'collection' | 'entity'
|
||||
}
|
||||
|
||||
type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||
|
||||
const props = defineProps<{
|
||||
collections: CollectionObject[]
|
||||
entities: EntityObject[]
|
||||
selectedIds: Set<string>
|
||||
previewSource?: PreviewSource
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -109,13 +105,6 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
|
||||
@show-details="emit('show-details', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FilePreviewPopover
|
||||
v-if="previewSource"
|
||||
:entity="(wrapped.item as EntityObject)"
|
||||
:source="previewSource"
|
||||
@expand="emit('open', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
||||
@@ -2,16 +2,12 @@
|
||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
|
||||
import FileActionsMenu from '@/components/FileActionsMenu.vue'
|
||||
import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
|
||||
|
||||
type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||
import { FileActionsMenu } from '@/components'
|
||||
|
||||
defineProps<{
|
||||
collections: CollectionObject[]
|
||||
entities: EntityObject[]
|
||||
selectedIds: Set<string>
|
||||
previewSource?: PreviewSource
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -77,13 +73,6 @@ const emit = defineEmits<{
|
||||
<v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
|
||||
<div class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
|
||||
<div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
|
||||
|
||||
<FilePreviewPopover
|
||||
v-if="previewSource"
|
||||
:entity="entity"
|
||||
:source="previewSource"
|
||||
@expand="emit('open', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,21 +3,17 @@ import { computed } from 'vue'
|
||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
|
||||
import FileActionsMenu from '@/components/FileActionsMenu.vue'
|
||||
import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
|
||||
import { FileActionsMenu } from '@/components'
|
||||
|
||||
type ItemWithType = {
|
||||
item: CollectionObject | EntityObject
|
||||
type: 'collection' | 'entity'
|
||||
}
|
||||
|
||||
type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||
|
||||
const props = defineProps<{
|
||||
collections: CollectionObject[]
|
||||
entities: EntityObject[]
|
||||
selectedIds: Set<string>
|
||||
previewSource?: PreviewSource
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -94,13 +90,6 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
|
||||
@show-details="emit('show-details', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FilePreviewPopover
|
||||
v-if="previewSource"
|
||||
:entity="(wrapped.item as EntityObject)"
|
||||
:source="previewSource"
|
||||
@expand="emit('open', $event)"
|
||||
/>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as FilesGridView } from './FilesGridView.vue'
|
||||
export { default as FilesListView } from './FilesListView.vue'
|
||||
export { default as FilesDetailsView } from './FilesDetailsView.vue'
|
||||
@@ -5,9 +5,11 @@
|
||||
export { useFileManager } from './useFileManager'
|
||||
export { useFileSelection } from './useFileSelection'
|
||||
export { useFileUpload } from './useFileUpload'
|
||||
export { useFileViewer } from './useFileViewer'
|
||||
export { useFileEditor } from './useFileEditor'
|
||||
|
||||
export type { UseFileManagerOptions } from './useFileManager'
|
||||
export type { UseFileSelectionOptions } from './useFileSelection'
|
||||
export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'
|
||||
export type { UseFileViewerReturn } from './useFileViewer'
|
||||
export type { UseFileEditorReturn } from './useFileEditor'
|
||||
|
||||
@@ -241,8 +241,8 @@ export function useFileManager(options: UseFileManagerOptions) {
|
||||
|
||||
// Initialize - fetch providers, services, and initial nodes if autoFetch
|
||||
const initialize = async () => {
|
||||
await providersStore.list([currentProviderId()])
|
||||
await servicesStore.list()
|
||||
await providersStore.list()
|
||||
await servicesStore.list({ [currentProviderId()]: true })
|
||||
if (autoFetch) {
|
||||
await refresh()
|
||||
}
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* useFileViewer — resolves which registered viewer can handle a given MIME type.
|
||||
*
|
||||
* Other modules register viewers at the `documents_file_viewer` integration
|
||||
* point by including an entry in their `integrations.ts`:
|
||||
*
|
||||
* ```ts
|
||||
* documents_file_viewer: [{
|
||||
* id: 'my_viewer',
|
||||
* meta: { mimeTypes: ['application/pdf'] },
|
||||
* component: () => import('./components/MyViewer.vue'),
|
||||
* }]
|
||||
* ```
|
||||
*
|
||||
* Viewer components receive the props: `url: string`, `entity: EntityObject`, `mime: string`.
|
||||
*/
|
||||
|
||||
import { useIntegrationStore } from '@KTXC'
|
||||
import type { EntityObject } from '@DocumentsManager/models/entity'
|
||||
|
||||
const INTEGRATION_POINT = 'documents_file_viewer'
|
||||
|
||||
function mimeMatchesPattern(mime: string, pattern: string): boolean {
|
||||
if (pattern.endsWith('/*')) {
|
||||
// e.g. 'image/*' matches 'image/png', 'image/jpeg', …
|
||||
return mime.startsWith(pattern.slice(0, -1))
|
||||
}
|
||||
return mime === pattern
|
||||
}
|
||||
|
||||
function viewerMatchesMime(
|
||||
mime: string,
|
||||
mimeTypes?: string[],
|
||||
mimePatterns?: string[],
|
||||
): boolean {
|
||||
if (mimeTypes?.includes(mime)) return true
|
||||
if (mimePatterns) {
|
||||
for (const pattern of mimePatterns) {
|
||||
if (mimeMatchesPattern(mime, pattern)) return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export function useFileViewer() {
|
||||
const integrationStore = useIntegrationStore()
|
||||
|
||||
/**
|
||||
* Returns the highest-priority registered viewer that can handle `mime`,
|
||||
* or `null` if none is found.
|
||||
*/
|
||||
function findViewer(mime: string) {
|
||||
// getItems() already returns items sorted by priority (ascending)
|
||||
const viewers = integrationStore.getItems(INTEGRATION_POINT)
|
||||
for (const viewer of viewers) {
|
||||
if (
|
||||
viewerMatchesMime(
|
||||
mime,
|
||||
viewer.meta?.mimeTypes as string[] | undefined,
|
||||
viewer.meta?.mimePatterns as string[] | undefined,
|
||||
)
|
||||
) {
|
||||
return viewer
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* Convenience: returns true if any registered viewer can open this entity.
|
||||
*/
|
||||
function canOpen(entity: EntityObject): boolean {
|
||||
const mime = entity.properties.mime
|
||||
if (!mime) return false
|
||||
return findViewer(mime) !== null
|
||||
}
|
||||
|
||||
return { findViewer, canOpen }
|
||||
}
|
||||
|
||||
export type UseFileViewerReturn = ReturnType<typeof useFileViewer>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch, nextTick, defineAsyncComponent } from 'vue'
|
||||
import { ref, computed, onMounted, watch, nextTick } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useModuleStore, useIntegrationStore } from '@KTXC'
|
||||
import { useModuleStore } from '@KTXC'
|
||||
import { useFileManager, useFileSelection, useFileUpload, useFileEditor } from '@/composables'
|
||||
import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
|
||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||
@@ -10,27 +10,29 @@ import { ServiceObject } from '@DocumentsManager/models/service'
|
||||
import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
|
||||
|
||||
// Components
|
||||
import FilesToolbar from '@/components/FilesToolbar.vue'
|
||||
import Sidebar from '@/components/Sidebar.vue'
|
||||
import FilesBreadcrumbs from '@/components/FilesBreadcrumbs.vue'
|
||||
import FilesEmptyState from '@/components/FilesEmptyState.vue'
|
||||
import FilesDragOverlay from '@/components/FilesDragOverlay.vue'
|
||||
import FilesInfoPanel from '@/components/FilesInfoPanel.vue'
|
||||
import FilesGridView from '@/components/views/FilesGridView.vue'
|
||||
import FilesListView from '@/components/views/FilesListView.vue'
|
||||
import FilesDetailsView from '@/components/views/FilesDetailsView.vue'
|
||||
import FileEditorDialog from '@/components/editor/FileEditorDialog.vue'
|
||||
import NewFolderDialog from '@/components/dialogs/NewFolderDialog.vue'
|
||||
import RenameDialog from '@/components/dialogs/RenameDialog.vue'
|
||||
import DeleteConfirmDialog from '@/components/dialogs/DeleteConfirmDialog.vue'
|
||||
import UploadDialog from '@/components/dialogs/UploadDialog.vue'
|
||||
import {
|
||||
FilesToolbar,
|
||||
FilesSidebar,
|
||||
FilesBreadcrumbs,
|
||||
FilesEmptyState,
|
||||
FilesDragOverlay,
|
||||
FilesInfoPanel,
|
||||
FilesGridView,
|
||||
FilesListView,
|
||||
FilesDetailsView,
|
||||
FileViewerDialog,
|
||||
FileEditorDialog,
|
||||
NewFolderDialog,
|
||||
RenameDialog,
|
||||
DeleteConfirmDialog,
|
||||
UploadDialog,
|
||||
} from '@/components'
|
||||
|
||||
// Check if file manager is available
|
||||
const display = useDisplay()
|
||||
const isMobile = computed(() => display.mdAndDown.value)
|
||||
|
||||
const moduleStore = useModuleStore()
|
||||
const integrationStore = useIntegrationStore()
|
||||
const isFileManagerAvailable = computed(() => {
|
||||
return moduleStore.has('documents_manager') || moduleStore.has('DocumentsManager')
|
||||
})
|
||||
@@ -96,45 +98,9 @@ const uploadPreparationMessage = ref('Preparing uploads...')
|
||||
const uploadPreparationProcessedCount = ref(0)
|
||||
const uploadPreparationTotalCount = ref(0)
|
||||
|
||||
// Viewer state — the media viewer dialog is provided by the media_viewer module
|
||||
// and resolved from the integration store so Documents does not import it.
|
||||
interface ViewerItem {
|
||||
id: string
|
||||
title: string
|
||||
mime: string
|
||||
size?: number | null
|
||||
meta?: Record<string, unknown>
|
||||
}
|
||||
|
||||
// Viewer state
|
||||
const viewerEntity = ref<EntityObject | null>(null)
|
||||
const showViewer = ref(false)
|
||||
const viewerIndex = ref(0)
|
||||
|
||||
const mediaViewerDialog = computed(() => {
|
||||
// Integration ids are prefixed with the module handle (e.g. 'media_viewer.dialog').
|
||||
const entry = integrationStore.getItems('media_viewer').find(i => i.id.endsWith('.dialog'))
|
||||
return entry?.component ? defineAsyncComponent(entry.component as () => Promise<unknown>) : null
|
||||
})
|
||||
|
||||
const viewerItems = computed<ViewerItem[]>(() =>
|
||||
sortedItems.value.entities.map(entityToViewerItem),
|
||||
)
|
||||
|
||||
function entityToViewerItem(entity: EntityObject): ViewerItem {
|
||||
return {
|
||||
id: String(entity.identifier ?? ''),
|
||||
title: entity.properties.label ?? String(entity.identifier ?? ''),
|
||||
mime: entity.properties.mime ?? '',
|
||||
meta: { collection: entity.collection ? String(entity.collection) : null },
|
||||
}
|
||||
}
|
||||
|
||||
function resolveViewerSource(item: ViewerItem): string {
|
||||
return fileManager.getEntityUrl(item.id, (item.meta?.collection as string | null) ?? null)
|
||||
}
|
||||
|
||||
function downloadViewerItem(item: ViewerItem): void {
|
||||
fileManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
|
||||
}
|
||||
|
||||
// Editor state
|
||||
const fileEditorComposable = useFileEditor()
|
||||
@@ -197,9 +163,7 @@ async function queueFolderUploads(
|
||||
|
||||
function handleOpenItem(item: CollectionObject | EntityObject) {
|
||||
if (item instanceof EntityObject) {
|
||||
const id = String(item.identifier ?? '')
|
||||
const idx = viewerItems.value.findIndex(m => m.id === id)
|
||||
viewerIndex.value = idx >= 0 ? idx : 0
|
||||
viewerEntity.value = item
|
||||
showViewer.value = true
|
||||
} else {
|
||||
// Folders: navigate into them when opened via double-click / action
|
||||
@@ -208,6 +172,10 @@ function handleOpenItem(item: CollectionObject | EntityObject) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleViewerNavigate(entity: EntityObject) {
|
||||
viewerEntity.value = entity
|
||||
}
|
||||
|
||||
function handleEditItem(item: CollectionObject | EntityObject) {
|
||||
if (item instanceof EntityObject && fileEditorComposable.canEdit(item)) {
|
||||
editorEntity.value = item
|
||||
@@ -742,16 +710,13 @@ onMounted(async () => {
|
||||
<FilesDragOverlay :visible="isDragOver" />
|
||||
|
||||
<!-- Sidebar -->
|
||||
<Sidebar
|
||||
<FilesSidebar
|
||||
v-model="sidebarVisible"
|
||||
:active-provider-id="activeProviderId"
|
||||
:active-service-id="activeServiceId"
|
||||
:services="availableServices"
|
||||
@navigate-home="fileManager.navigateToRoot()"
|
||||
@select-service="handleServiceSelect"
|
||||
@new-folder="showNewFolderDialog = true"
|
||||
@open-file-picker="openFilePicker"
|
||||
@open-folder-picker="openFolderPicker"
|
||||
/>
|
||||
|
||||
<!-- Main Area -->
|
||||
@@ -782,7 +747,6 @@ onMounted(async () => {
|
||||
:collections="sortedItems.collections"
|
||||
:entities="sortedItems.entities"
|
||||
:selected-ids="selectedIds"
|
||||
:preview-source="resolveViewerSource"
|
||||
@item-click="handleItemClick"
|
||||
@open="handleOpenItem"
|
||||
@edit="handleEditItem"
|
||||
@@ -798,7 +762,6 @@ onMounted(async () => {
|
||||
:collections="sortedItems.collections"
|
||||
:entities="sortedItems.entities"
|
||||
:selected-ids="selectedIds"
|
||||
:preview-source="resolveViewerSource"
|
||||
@item-click="handleItemClick"
|
||||
@open="handleOpenItem"
|
||||
@edit="handleEditItem"
|
||||
@@ -814,7 +777,6 @@ onMounted(async () => {
|
||||
:collections="sortedItems.collections"
|
||||
:entities="sortedItems.entities"
|
||||
:selected-ids="selectedIds"
|
||||
:preview-source="resolveViewerSource"
|
||||
@item-click="handleItemClick"
|
||||
@open="handleOpenItem"
|
||||
@edit="handleEditItem"
|
||||
@@ -894,17 +856,14 @@ onMounted(async () => {
|
||||
@close="handleUploadDialogClose"
|
||||
/>
|
||||
|
||||
<!-- File Viewer (provided by the media_viewer module) -->
|
||||
<component
|
||||
:is="mediaViewerDialog"
|
||||
v-if="mediaViewerDialog"
|
||||
<!-- File Viewer -->
|
||||
<FileViewerDialog
|
||||
v-model="showViewer"
|
||||
:items="viewerItems"
|
||||
:index="viewerIndex"
|
||||
:source="resolveViewerSource"
|
||||
:download="downloadViewerItem"
|
||||
:navigation="true"
|
||||
@update:index="viewerIndex = $event"
|
||||
:entity="viewerEntity"
|
||||
:all-entities="sortedItems.entities"
|
||||
:get-url="fileManager.getEntityUrl"
|
||||
:download-entity="fileManager.downloadEntity"
|
||||
@navigate="handleViewerNavigate"
|
||||
/>
|
||||
|
||||
<!-- File Editor -->
|
||||
@@ -935,8 +894,7 @@ onMounted(async () => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
height: 100vh;
|
||||
padding: 48px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
@@ -950,22 +908,19 @@ onMounted(async () => {
|
||||
.files-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
height: 100vh;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.files-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.files-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
@@ -973,7 +928,6 @@ onMounted(async () => {
|
||||
|
||||
.files-workspace {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
@@ -981,7 +935,6 @@ onMounted(async () => {
|
||||
|
||||
.files-browser-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
+1
-2
@@ -4,8 +4,7 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
name: 'documents',
|
||||
path: '/',
|
||||
component: () => import('@/pages/Main.vue'),
|
||||
meta: { layout: 'fixed' },
|
||||
component: () => import('@/pages/FilesPage.vue')
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -118,8 +118,8 @@ export const useDocumentsStore = defineStore('documentsStore', () => {
|
||||
const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
|
||||
|
||||
async function initialize() {
|
||||
await providersStore.list([activeProviderId.value])
|
||||
await servicesStore.list()
|
||||
await providersStore.list()
|
||||
await servicesStore.list({ [activeProviderId.value]: true })
|
||||
await refresh()
|
||||
}
|
||||
|
||||
|
||||
@@ -28,3 +28,23 @@ export interface ContextMenuAction {
|
||||
disabled?: boolean
|
||||
divider?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Shape of an item registered at the `documents_file_viewer` integration point.
|
||||
* Stored under `meta` so it fits inside a standard `ModuleIntegrationItem`.
|
||||
*/
|
||||
export interface DocumentViewerMeta {
|
||||
/** Exact MIME type matches, e.g. ['application/pdf'] */
|
||||
mimeTypes?: string[]
|
||||
/** Glob-style patterns, e.g. ['image/*', 'video/*'] */
|
||||
mimePatterns?: string[]
|
||||
}
|
||||
|
||||
export interface DocumentViewerItem {
|
||||
id: string
|
||||
label?: string
|
||||
priority?: number
|
||||
meta: DocumentViewerMeta
|
||||
/** Async factory returning the Vue viewer component */
|
||||
component: () => Promise<unknown>
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
|
||||
describe('Basic Tests', () => {
|
||||
it('should perform basic assertion', () => {
|
||||
expect(true).toBe(true)
|
||||
})
|
||||
|
||||
it('should test array operations', () => {
|
||||
const array = ['foo', 'bar', 'baz']
|
||||
|
||||
expect(array).toHaveLength(3)
|
||||
expect(array).toContain('bar')
|
||||
expect(array[0]).toBe('foo')
|
||||
})
|
||||
|
||||
it('should test string operations', () => {
|
||||
const string = 'Hello, World!'
|
||||
|
||||
expect(string).toContain('World')
|
||||
expect(string.length).toBe(13)
|
||||
})
|
||||
|
||||
it('should test object operations', () => {
|
||||
const obj = { foo: 'bar', count: 42 }
|
||||
|
||||
expect(obj).toHaveProperty('foo')
|
||||
expect(obj.foo).toBe('bar')
|
||||
expect(obj.count).toBeGreaterThan(40)
|
||||
})
|
||||
})
|
||||
@@ -1,33 +0,0 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { defineConfig, configDefaults } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '../../src'),
|
||||
'@KTXC': path.resolve(__dirname, '../../../../core/src'),
|
||||
},
|
||||
},
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||
root: fileURLToPath(new URL('../../', import.meta.url)),
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json', 'html'],
|
||||
exclude: [
|
||||
'node_modules/',
|
||||
'tests/',
|
||||
'**/*.d.ts',
|
||||
'**/*.config.*',
|
||||
'**/dist/**',
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
+11
-10
@@ -1,19 +1,20 @@
|
||||
{
|
||||
"extends": "../../tsconfig.app.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@KTXC/*": ["../../core/src/*"],
|
||||
"@DocumentsManager/*": ["../documents_manager/src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"../documents_manager/src/**/*.ts",
|
||||
"../../core/src/**/*.ts"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@KTXC": ["../../core/src/shared/index.ts"],
|
||||
"@KTXC/*": ["../../core/src/*"],
|
||||
"@DocumentsManager/*": ["../documents_manager/src/*"]
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user