metadata: make basename clickable

Signed-off-by: Varun Patil <radialapps@gmail.com>

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- **Feature**: Support showing full file path in sidebar ([#173](https://github.com/pulsejet/memories/issues/173))
+- **Feature**: View file in folder on clicking name in sidebar
 - **Fix**: Support for transcoding MKV files.
 
 ## [v5.4.1] - 2023-08-20

lib/Controller/ImageController.php

@@ -180,11 +180,10 @@ class ImageController extends GenericApiController
         int $id,
         bool $basic = false,
         bool $current = false,
-        bool $filename = false,
         bool $tags = false,
         string $clusters = ''
     ): Http\Response {
-        return Util::guardEx(function () use ($id, $basic, $current, $filename, $tags, $clusters) {
+        return Util::guardEx(function () use ($id, $basic, $current, $tags, $clusters) {
             $file = $this->fs->getUserFile($id);
 
             // Get the image info
@@ -205,6 +204,14 @@ class ImageController extends GenericApiController
             // Allow these ony for logged in users
             $user = $this->userSession->getUser();
             if (null !== $user) {
+                { // Get the path of the file if in current user's files
+                    $path = $file->getPath();
+                    $parts = explode('/', $path);
+                    if (\count($parts) > 3 && $parts[1] === $user->getUID()) {
+                        $info['filename'] = $path;
+                    }
+                }
+
                 // Get list of tags for this file
                 if ($tags) {
                     $info['tags'] = $this->getTags($id);
@@ -215,14 +222,6 @@ class ImageController extends GenericApiController
                     $info['current'] = Exif::getExifFromFile($file);
                 }
 
-                // Get the path of the file for the current user
-                if ($filename) {
-                    $parts = explode('/', $file->getPath());
-                    if (\count($parts) > 3 && $parts[1] === $user->getUID()) {
-                        $info['filename'] = '/'.implode('/', \array_slice($parts, 3));
-                    }
-                }
-
                 // Get clusters for this file
                 if ($clusters) {
                     $clist = [];

src/components/Metadata.vue

@@ -162,7 +162,12 @@ export default defineComponent({
           title: this.imageInfoTitle,
           subtitle: this.imageInfoSub,
           icon: ImageIcon,
-          href: utils.truthy(this.baseInfo, 'filename') ? dav.viewInFolderUrl(this.baseInfo) : undefined,
+          href: this.filepath
+            ? dav.viewInFolderUrl({
+                fileid: this.fileid!,
+                filename: this.filepath,
+              })
+            : undefined,
         });
       }
 
@@ -293,7 +298,21 @@ export default defineComponent({
 
     /** Image info */
     imageInfoTitle(): string | null {
-      return this.baseInfo.filename ?? this.baseInfo.basename;
+      if (this.config.sidebar_filepath && this.filepath) {
+        return this.filepath;
+      }
+
+      return this.baseInfo.basename;
+    },
+
+    /** Path to file excluding user directory */
+    filepath(): string | null {
+      if (utils.truthy(this.baseInfo, 'filename')) {
+        // "/admin/files/Photos/Camera/20230821_135017.jpg" => "Photos/..."
+        return this.baseInfo.filename.split('/').slice(3).join('/');
+      }
+
+      return null;
     },
 
     imageInfoSub(): string[] {
@@ -390,10 +409,9 @@ export default defineComponent({
 
       // get tags if enabled
       const tags = this.config.systemtags_enabled ? 1 : undefined;
-      const filename = this.config.sidebar_filepath ? 1 : undefined;
 
       // get image info
-      const url = API.Q(utils.getImageInfoUrl(photo), { tags, clusters, filename });
+      const url = API.Q(utils.getImageInfoUrl(photo), { tags, clusters });
       const res = await this.guardState(axios.get<IImageInfo>(url));
       if (!res) return null;
 

src/services/dav/other.ts

@@ -19,9 +19,15 @@ export async function viewInFolder(photo: IPhoto) {
 /**
  * Gets the view in folder url for the given file.
  */
-export function viewInFolderUrl(file: { filename: string; fileid: number }) {
+export function viewInFolderUrl({ filename, fileid }: { filename: string; fileid: number }) {
+  // ensure dirPath starts with a slash
+  let dirPath = dirname(filename);
+  if (!dirPath.startsWith('/')) {
+    dirPath = `/${dirPath}`;
+  }
+
   return generateUrl(`/apps/files/?dir={dirPath}&scrollto={fileid}&openfile={fileid}`, {
-    dirPath: dirname(file.filename),
-    fileid: file.fileid,
+    fileid,
+    dirPath,
   });
 }