Photos: Refactor link from the Files tab to the file folder #2926

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/src/css/rtl.css

@@ -39,3 +39,13 @@
     margin-left: -6px;
     margin-right: 6px;
 }
+
+#photoprism .v-btn.v-btn--depressed.v-btn--small .v-icon--right {
+    font-size: 16px;
+    margin-left: 8px;
+}
+
+#photoprism .v-btn.v-btn--depressed.v-btn--small .v-icon--left {
+    font-size: 16px;
+    margin-right: 8px;
+}

frontend/src/dialog/album/edit.vue

@@ -86,7 +86,7 @@
                 >
                 </v-checkbox>
               </v-flex>
-              <v-flex v-if="featExperimental && featPrivate" sm3 pa-2>
+              <v-flex v-if="experimental && featPrivate" sm3 pa-2>
                 <v-checkbox
                     v-model="model.Private"
                     :disabled="disabled"
@@ -134,8 +134,8 @@ export default {
   },
   data() {
     return {
-      featExperimental: this.$config.get("experimental") && !this.$config.ce(),
       featPrivate: this.$config.feature("private"),
+      experimental: this.$config.get("experimental") && !this.$config.ce(),
       disabled: !this.$config.allow("albums", "manage"),
       model: new Album(),
       growDesc: false,

frontend/src/dialog/photo/edit/files.vue

@@ -66,10 +66,11 @@
                                    @click.stop.prevent="showDeleteDialog(file)">
                               <translate>Delete</translate>
                             </v-btn>
-                            <v-btn v-if="file.Primary" small depressed dark color="primary-button"
+                            <v-btn v-if="experimental && file.Primary" small depressed dark color="primary-button"
                                    class="btn-action action-open-folder"
-                                   :href="getFolderUri(file)">
-                              <translate>Open folder</translate>
+                                   :href="folderUrl(file)" target="_blank">
+                              <translate>Folder</translate>
+                              <v-icon :right="!rtl" :left="rtl" dark size="20">open_in_new</v-icon>
                             </v-btn>
                           </td>
                         </tr>
@@ -306,8 +307,10 @@ export default {
       features: this.$config.settings().features,
       config: this.$config.values,
       readonly: this.$config.get("readonly"),
+      experimental: this.$config.get("experimental"),
       options: options,
       busy: false,
+      rtl: this.$rtl,
       listColumns: [
         {
           text: this.$gettext('Primary'),
@@ -356,11 +359,15 @@ export default {
     openFile(file) {
       this.$viewer.show([Thumb.fromFile(this.model, file)], 0);
     },
-    getFolderUri(file) {
-      const fileName = file.Name;
-      const folder = fileName.substring(0, fileName.lastIndexOf('/'));
+    folderUrl(m) {
+      if (!m) {
+        return '#';
+      }
 
-      return(this.config.baseUri + '/library/index/files/' + folder);
+      const name = m.Name;
+      const path = name.substring(0, name.lastIndexOf('/'));
+
+      return this.$router.resolve({ path: '/index/files/' + path }).href;
     },
     downloadFile(file) {
       Notify.success(this.$gettext("Downloading…"));

frontend/src/model/folder.js

@@ -132,6 +132,7 @@ export class Folder extends RestModel {
     if (!path || path[0] !== "/") {
       path = "/" + path;
     }
+
     return this.search(RootOriginals + path, params);
   }
 
@@ -143,8 +144,12 @@ export class Folder extends RestModel {
     if (!path || path[0] !== "/") {
       path = "/" + path;
     }
+
+    // Escape ":" in URL path.
+    path = path.replaceAll(":", "%3A");
+
     return Api.get(this.getCollectionResource() + path, options).then((response) => {
-      let folders = response.data.folders;
+      let folders = response.data.folders ? response.data.folders : [];
       let files = response.data.files ? response.data.files : [];
 
       let count = folders.length + files.length;

frontend/src/page/albums.vue

@@ -172,7 +172,7 @@
                   <v-icon color="white" class="select-off">star_border</v-icon>
                 </v-btn>
 
-                <v-btn v-if="canManage && featExperimental && featPrivate && album.Private"
+                <v-btn v-if="canManage && experimental && featPrivate && album.Private"
                        :ripple="false"
                        icon flat absolute
                        class="input-private"
@@ -301,12 +301,12 @@ export default {
 
     return {
       searchExpanded: false,
+      experimental: this.$config.get("experimental") && !this.$config.ce(),
       canUpload: this.$config.allow("files", "upload") && features.upload,
       canShare: this.$config.allow("albums", "share") && features.share,
       canManage: this.$config.allow("albums", "manage"),
       canEdit: this.$config.allow("albums", "update"),
       config: this.$config.values,
-      featExperimental: this.$config.get("experimental") && !this.$config.ce(),
       featShare: features.share,
       featPrivate: features.private,
       categories: categories,

frontend/src/page/library/browse.vue

@@ -172,6 +172,7 @@ export default {
       this.lastFilter = {};
       this.routeName = this.$route.name;
       this.path = this.$route.params.pathMatch;
+
       this.search();
     }
   },

pkg/clean/path.go

@@ -22,7 +22,7 @@ func Path(s string) string {
 		}
 
 		switch r {
-		case '~', '\\', ':', '|', '"', '?', '*', '<', '>', '{', '}':
+		case '~', '\\', '|', '"', '?', '*', '<', '>', '{', '}':
 			return -1
 		default:
 			return r
@@ -38,7 +38,7 @@ func UserPath(dir string) string {
 		return dir
 	}
 
-	dir = strings.Trim(path.Clean(Path(strings.ReplaceAll(dir, "\\", "/"))), "./ \\*%#~?|<>:")
+	dir = strings.Trim(path.Clean(Path(strings.ReplaceAll(dir, "\\", "/"))), "./ \\*%#~?|<>")
 
 	if strings.Contains(dir, "/.") || strings.Contains(dir, "..") || strings.Contains(dir, "//") {
 		return ""