UX: Show albums in the Info tab of the edit dialog #3095

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

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

@@ -247,7 +247,7 @@
 
               <v-flex xs6 md3 class="pa-2">
                 <v-text-field
-                    v-model="model.FNumber"f
+                  v-model="model.FNumber" f
                   :disabled="disabled"
                   hide-details box flat
                   browser-autocomplete="off"

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

@@ -41,12 +41,6 @@
           </td>
           <td>{{ model.Name }}</td>
         </tr>
-        <tr>
-          <td>
-            <translate>Albums</translate>
-          </td>
-          <td>{{ model.Albums.map(album => album.Title).join(', ') }}</td>
-        </tr>
         <tr v-if="model.OriginalName">
           <td>
             <translate>Original Name</translate>
@@ -77,6 +71,14 @@
           </td>
           <td>{{ model.getDateString() }}</td>
         </tr>
+        <tr v-if="model.Albums && model.Albums.length">
+          <td>
+            <translate>Albums</translate>
+          </td>
+          <td>
+            <a v-for="(m, i) in model.Albums" :key="i" :href="albumUrl(m)" class="primary--text text-link" target="_blank"><span v-if="i > 0">, </span>{{ m.Title }}</a>
+          </td>
+        </tr>
         <tr>
           <td>
             <translate>Quality Score</translate>
@@ -323,6 +325,13 @@ export default {
     openPhoto() {
       this.$viewer.show(Thumb.fromFiles([this.model]), 0);
     },
+    albumUrl(m) {
+      if (!m) {
+        return '#';
+      }
+
+      return this.$router.resolve({ name: 'album', params: { uid: m.UID, slug: 'view' }}).href;
+    },
   },
 };
 </script>

internal/entity/photo.go

@@ -103,7 +103,7 @@ type Photo struct {
 	Cell             *Cell         `gorm:"association_autoupdate:false;association_autocreate:false;association_save_reference:false" json:"Cell" yaml:"-"`
 	Place            *Place        `gorm:"association_autoupdate:false;association_autocreate:false;association_save_reference:false" json:"Place" yaml:"-"`
 	Keywords         []Keyword     `json:"-" yaml:"-"`
-	Albums           []Album       `yaml:"-"`
+	Albums           []Album       `json:"Albums" yaml:"-"`
 	Files            []File        `yaml:"-"`
 	Labels           []PhotoLabel  `yaml:"-"`
 	CreatedBy        string        `gorm:"type:VARBINARY(42);index" json:"CreatedBy,omitempty" yaml:"CreatedBy,omitempty"`