Upload: Pre-select current album in dialog #3644

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

frontend/src/component/album/toolbar.vue

@@ -33,10 +33,12 @@
         <v-icon>get_app</v-icon>
       </v-btn>
 
-      <v-btn v-if="settings.view === 'cards'" icon class="action-view-list" :title="$gettext('Toggle View')" @click.stop="setView('list')">
+      <v-btn v-if="settings.view === 'cards'" icon class="action-view-list" :title="$gettext('Toggle View')"
+             @click.stop="setView('list')">
         <v-icon>view_list</v-icon>
       </v-btn>
-      <v-btn v-else-if="settings.view === 'list'" icon class="action-view-mosaic" :title="$gettext('Toggle View')" @click.stop="setView('mosaic')">
+      <v-btn v-else-if="settings.view === 'list'" icon class="action-view-mosaic" :title="$gettext('Toggle View')"
+             @click.stop="setView('mosaic')">
         <v-icon>view_comfy</v-icon>
       </v-btn>
       <v-btn v-else icon class="action-view-cards" :title="$gettext('Toggle View')" @click.stop="setView('cards')">
@@ -68,7 +70,8 @@
 
     <p-share-dialog :show="dialog.share" :model="album" @upload="webdavUpload"
                     @close="dialog.share = false"></p-share-dialog>
-    <p-share-upload-dialog :show="dialog.upload" :items="{albums: album.getId()}" :model="album" @cancel="dialog.upload = false"
+    <p-share-upload-dialog :show="dialog.upload" :items="{albums: album.getId()}" :model="album"
+                           @cancel="dialog.upload = false"
                            @confirm="dialog.upload = false"></p-share-upload-dialog>
     <p-album-edit-dialog :show="dialog.edit" :album="album" @close="dialog.edit = false"></p-album-edit-dialog>
   </v-form>
@@ -77,34 +80,40 @@
 import Event from "pubsub-js";
 import Notify from "common/notify";
 import download from "common/download";
-import { T } from "common/vm";
+import {T} from "common/vm";
 
 export default {
   name: 'PAlbumToolbar',
   props: {
     album: {
       type: Object,
-      default: () => {},
+      default: () => {
+      },
     },
     filter: {
       type: Object,
-      default: () => {},
+      default: () => {
+      },
     },
     updateFilter: {
       type: Function,
-      default: () => {},
+      default: () => {
+      },
     },
     updateQuery: {
       type: Function,
-      default: () => {},
+      default: () => {
+      },
     },
     settings: {
       type: Object,
-      default: () => {},
+      default: () => {
+      },
     },
     refresh: {
       type: Function,
-      default: () => {},
+      default: () => {
+      },
     },
   },
   data() {
@@ -167,7 +176,7 @@ export default {
       this.dialog.upload = true;
     },
     showUpload() {
-      Event.publish("dialog.upload");
+      Event.publish("dialog.upload", {albums: [this.album]});
     },
     expand() {
       this.searchExpanded = !this.searchExpanded;

frontend/src/component/navigation.vue

@@ -664,7 +664,7 @@
       <span v-else>{{ config.legalInfo }}</span>
     </div>
     <p-reload-dialog :show="reload.dialog" @close="reload.dialog = false"></p-reload-dialog>
-    <p-upload-dialog :show="upload.dialog" @cancel="upload.dialog = false"
+    <p-upload-dialog :show="upload.dialog" :data="upload.data" @cancel="upload.dialog = false"
                      @confirm="upload.dialog = false"></p-upload-dialog>
     <p-photo-edit-dialog :show="edit.dialog" :selection="edit.selection" :index="edit.index" :album="edit.album"
                          @close="edit.dialog = false"></p-photo-edit-dialog>
@@ -734,6 +734,7 @@ export default {
       },
       upload: {
         dialog: false,
+        data: {},
       },
       edit: {
         dialog: false,
@@ -777,7 +778,14 @@ export default {
     this.subscriptions.push(Event.subscribe('index', this.onIndex));
     this.subscriptions.push(Event.subscribe('import', this.onIndex));
     this.subscriptions.push(Event.subscribe("dialog.reload", () => this.reload.dialog = true));
-    this.subscriptions.push(Event.subscribe("dialog.upload", () => this.upload.dialog = true));
+    this.subscriptions.push(Event.subscribe("dialog.upload", (ev, data) => {
+      if(data) {
+        this.upload.data = data;
+      } else {
+        this.upload.data = {};
+      }
+      this.upload.dialog = true;
+    }));
     this.subscriptions.push(Event.subscribe("dialog.edit", (ev, data) => {
       if (!this.edit.dialog) {
         this.edit.dialog = true;

frontend/src/dialog/upload.vue

@@ -99,6 +99,10 @@ export default {
   name: 'PUploadDialog',
   props: {
     show: Boolean,
+    data: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -130,6 +134,15 @@ export default {
       this.reset();
       this.review = this.$config.feature("review");
       this.safe = !this.$config.get("uploadNSFW");
+
+      // Set currently selected albums.
+      if (this.data && Array.isArray(this.data.albums)) {
+        this.selectedAlbums = this.data.albums;
+      } else {
+        this.selectedAlbums = [];
+      }
+
+      // Fetch albums from backend.
       this.findAlbums("");
     }
   },