Frontend: Edit album name

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

frontend/src/component/p-album-toolbar.vue

@@ -3,7 +3,28 @@
             ref="form" autocomplete="off" class="p-photo-search p-album-toolbar" accept-charset="UTF-8"
             @submit.prevent="filterChange">
         <v-toolbar flat color="secondary">
-            <v-toolbar-title>{{ album.AlbumName }}</v-toolbar-title>
+            <v-edit-dialog
+                    :return-value.sync="album.AlbumName"
+                    lazy
+                    @save="onSave(album)"
+                    class="p-inline-edit">
+                                        <v-toolbar-title v-if="album.AlbumName">
+                                            {{ album.AlbumName }}
+                                        </v-toolbar-title>
+                <v-toolbar-title v-else>
+                                            <v-icon>edit</v-icon>
+                                        </v-toolbar-title>
+                <template v-slot:input>
+                    <v-text-field
+                            v-model="album.AlbumName"
+                            :rules="[titleRule]"
+                            :label="labels.name"
+                            color="secondary-dark"
+                            single-line
+                            autofocus
+                    ></v-text-field>
+                </template>
+            </v-edit-dialog>
 
             <v-spacer></v-spacer>
 
@@ -38,10 +59,9 @@
                 v-show="searchExpanded">
             <v-card-text>
                 <v-layout row wrap>
-                    <v-flex xs12 pt-2 pl-2 pr-2 pb-0>
-                        <v-text-field flat solo
+                    <v-flex xs12 pa-2>
+                        <v-text-field flat solo hide-details
                                       browser-autocomplete="off"
-                                      single-line
                                       :label="labels.search"
                                       prepend-inner-icon="search"
                                       clearable
@@ -137,7 +157,9 @@
                     country: this.$gettext("Country"),
                     camera: this.$gettext("Camera"),
                     sort: this.$gettext("Sort By"),
+                    name: this.$gettext("Album Name"),
                 },
+                titleRule: v => v.length <= 25 || this.$gettext("Title too long"),
             };
         },
         methods: {
@@ -156,6 +178,9 @@
                 this.filter.q = '';
                 this.filterChange();
             },
+            onSave(album) {
+                album.update().then((a) => window.document.title = `PhotoPrism: ${a.AlbumName}`);
+            },
         }
     };
 </script>

frontend/src/pages/album/photos.vue

@@ -231,8 +231,7 @@
             findAlbum() {
                 this.model.find(this.uuid).then(m => {
                     this.model = m;
-                    this.$config.page.title = this.model.AlbumName;
-                    window.document.title = this.model.AlbumName;
+                    window.document.title = `PhotoPrism: ${this.model.AlbumName}`;
                 });
             },
         },

frontend/src/routes.js

@@ -41,7 +41,7 @@ export default [
         name: "album",
         path: "/albums/:uuid",
         component: AlbumPhotos,
-        meta: {title: ""},
+        meta: {title: "Album"},
     },
     {
         name: "favorites",

internal/api/album.go

@@ -133,7 +133,7 @@ func UpdateAlbum(router *gin.RouterGroup, conf *config.Config) {
 		conf.Db().Save(&m)
 
 		event.Publish("config.updated", event.Data(conf.ClientConfig()))
-		event.Success(fmt.Sprintf("album \"%s\" updated", m.AlbumName))
+		event.Success(fmt.Sprintf("album \"%s\" saved", m.AlbumName))
 
 		c.JSON(http.StatusOK, m)
 	})

internal/api/photo.go

@@ -60,7 +60,7 @@ func UpdatePhoto(router *gin.RouterGroup, conf *config.Config) {
 
 		conf.Db().Save(&m)
 
-		event.Success("photo updated")
+		event.Success("photo saved")
 
 		c.JSON(http.StatusOK, m)
 	})