CELDEV-1304 - add PageAttachments recursive app script and vue implementation

celements-admin-frontend/src/conf/routes/index.ts

@@ -1,7 +1,12 @@
 import MediaLib from '@/views/MediaLib.vue';
+import PageAttachments from '@/views/PageAttachments.vue';
 import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: '/MediaLib',
+  },
   {
     path: '/MediaLib',
     name: 'MediaLib',
@@ -10,6 +15,14 @@ const routes: RouteRecordRaw[] = [
       //      requiresAuth: true,
     },
   },
+  {
+    path: '/PageAttachments/:spaceName/:docName',
+    name: 'PageAttachments',
+    component: PageAttachments,
+    meta: {
+      //      requiresAuth: true,
+    },
+  },
 ];
 
 export default routes;

celements-admin-frontend/src/views/PageAttachments.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex h-full w-full overflow-hidden">
+    <div class="flex min-w-0 flex-1 flex-col w-full">
+      <VueFinder
+        id="page_attachments_vuefinder"
+        class="flex-1"
+        :driver="driver"
+        :config="{
+          initialPath: 'attachments://' + spaceName + '/' + docName,
+          persist: false,
+        }"
+        :features="{
+          search: true,
+          preview: true,
+          rename: false,
+          upload: true,
+          delete: true,
+          download: true,
+          newfolder: false,
+          newfile: false,
+          move: false,
+          copy: false,
+          archive: false,
+          unarchive: false,
+          edit: false,
+          fullscreen: false,
+          language: false,
+          history: false,
+          theme: false,
+          pinned: false,
+        }"
+        @select="handleSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useLogger } from '@/utils/logger';
+import { RemoteDriver, VueFinder } from 'vuefinder';
+import type { DirEntry } from 'vuefinder';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const logger = useLogger('VueFinder-Attachments');
+const route = useRoute();
+const spaceName = route.params.spaceName as string;
+const docName = route.params.docName as string;
+
+const selectedFiles = ref<DirEntry[]>([]);
+
+const handleSelect = (files: DirEntry[]) => {
+  selectedFiles.value = files;
+  logger.log('selected files', files);
+};
+
+const driver = new RemoteDriver({
+  baseURL: `/api/attachments/${spaceName}/${docName}`,
+});
+
+const originalGetDownloadUrl = driver.getDownloadUrl.bind(driver);
+driver.getDownloadUrl = (file: DirEntry & { url?: string }) => {
+  if (file && file.url) {
+    return file.url;
+  }
+  return originalGetDownloadUrl(file);
+};
+
+logger.log('driver setup for page attachments');
+</script>

celements-webapp/src/main/webapp/templates/celAppScripts/cel/admin/MediaLib.vm

@@ -1,4 +1,4 @@
-<link rel="stylesheet" media="all" type="text/css" href="$celementsweb.getSkinFile(':celRes/userAdmin/main.css', 'file')" />
+<link rel="stylesheet" media="all" type="text/css" href="$services.celementsweb.getSkinFile(':celRes/userAdmin/main.css', 'file')" />
 #set($jsService = $services.javascript)
 #set($extJsParamSync = $!jsService.createExtJSParam().setAction('file'))
 $!jsService.includeExtJsFile($extJsParamSync.setJsFile(':celJS/tailwind/tailwind.js'))

celements-webapp/src/main/webapp/templates/celAppScripts/cel/admin/PageAttachments++.vm

@@ -0,0 +1,27 @@
+<link rel="stylesheet" media="all" type="text/css" href="$services.celementsweb.getSkinFile(':celRes/userAdmin/main.css', 'file')" />
+#set($jsService = $services.javascript)
+#set($extJsParamSync = $!jsService.createExtJSParam().setAction('file'))
+$!jsService.includeExtJsFile($extJsParamSync.setJsFile(':celJS/tailwind/tailwind.js'))
+$!jsService.includeExtJsFile($extJsParamSync.setJsFile(':celJS/tailwind/tailwind.config.js'))
+
+#set($requestHost = "$!context.getRequest().getHeader('host')")
+#if($requestHost.indexOf('localhost') != -1)
+<script type="module" src="http://localhost:5173/@vite/client"></script>
+<script type="module" src="http://localhost:5173/src/embedded.ts"></script>
+#else
+<link rel="stylesheet" href="/static/assets/embedded.css" />
+<script type="module" src="/static/assets/embedded.js"></script>
+#end
+
+<div class="cel_cell" id="userAdmin">
+  <div class="cel_cell" id="content">
+    <div class="cel_cell" id="titleWrapper">
+      <h1 class="cel_cell">Page Attachments</h1>
+      <div class="cel_cell"><a href="/"><i class="fa fa-xmark"></i></a></div>
+    </div>
+    <cel-admin
+      data-locale="$!{language}"
+      data-local-dev="false"
+    ></cel-admin>
+  </div>
+</div>

celements-webapp/src/main/webapp/templates/celAppScripts/cel/admin/PageAttachments_setup++.vm

@@ -0,0 +1,15 @@
+#set($scriptName = $services.appscript.getScriptNameFromURL())
+#set($parts = $scriptName.split("/"))
+#if($parts.size() >= 5)
+  #set($spaceName = $parts.get(3))
+  #set($docName = $parts.get(4))
+  #set($targetDocRef = $services.reference.create().space($spaceName).doc($docName).build())
+#else
+  #set($targetDocRef = $doc.documentReference)
+#end
+#set($viewLevel = $services.rightsAccess.getEAccessLevel('view'))
+#if($services.rightsAccess.hasAccessLevel($targetDocRef, $viewLevel))
+  #set($overwriteLayoutRef = $services.reference.create().space("SimpleLayout").build())
+#else
+  #set($overwriteRenderDocument = 'celInlineTemplates/login.vm')
+#end

celements-webapp/src/main/webapp/templates/editattachments.vm

@@ -1,2 +1,3 @@
-## Deprecated, attachments should be used in view mode only.
-#template('attachments.vm')
+#set($spaceName = $doc.getSpace())
+#set($docName = $doc.getName())
+$response.sendRedirect("/app/cel/admin/PageAttachments/${spaceName}/${docName}")