Adds batch removing from albums feature

Signed-off-by: Alexander Saltykov <temp.kroogi@gmail.com>

src/App.vue

@@ -286,10 +286,10 @@ export default defineComponent({
           this.albumsListComponent?.$destroy?.();
           this.albumsListComponent = new Vue(AlbumsList as any);
           this.albumsListComponent.$mount(el);
-          this.albumsListComponent.update(Number(fileInfo.id));
+          this.albumsListComponent.update(fileInfo);
         },
         update(fileInfo) {
-          this.albumsListComponent.update(Number(fileInfo.id));
+          this.albumsListComponent.update(fileInfo);
         },
         destroy() {
           this.albumsListComponent?.$destroy?.();

src/components/AlbumsList.vue

@@ -64,6 +64,7 @@
   
     data: () => ({
       fileid: -1,
+      photo: {} as { id: number, name: string },
       albums: [] as IAlbum[],
       loadingAlbums: false,
     }),
@@ -77,15 +78,15 @@
     },
   
     methods: {
-      update(photoId: number){
-        this.fileid = photoId;
+      update(photo: { id: number, name: string }){
+        this.photo = photo;
         this.loadAlbums();
       },
 
       async loadAlbums() {
         try {
           this.loadingAlbums = true;
-          const res = await axios.get<IAlbum[]>(API.ALBUM_LIST(3, this.fileid));
+          const res = await axios.get<IAlbum[]>(API.ALBUM_LIST(3, this.photo.id));
           this.albums = res.data.filter(album => album.has_file);
         } catch (e) {
           console.error(e);
@@ -95,8 +96,8 @@
       },
   
       handleFileUpdated({ fileid }: { fileid: number }) {
-        if (fileid && this.fileid === fileid) {
-          this.update(this.fileid);
+        if (fileid && this.photo.id === fileid) {
+          this.update(this.photo);
         }
       },
 
@@ -129,7 +130,8 @@
 
       async addToAlbum() {
         (<any>this.$refs.addToAlbumModal).open([{
-          fileid: this.fileid,
+          fileid: this.photo.id,
+          basename: this.photo.name,
         }]);
       },
     },

src/components/modal/AddToAlbumModal.vue

@@ -5,10 +5,10 @@
     </template>
 
     <div class="outer">
-      <AlbumPicker @select="selectAlbums" :photos="photos" />
+      <AlbumPicker @select="updateAlbums" :photos="photos" />
 
       <div v-if="processing">
-        <NcProgressBar :value="Math.round((photosDone * 100) / photos.length)" :error="true" />
+        <NcProgressBar :value="progress" :error="true" />
       </div>
     </div>
   </Modal>
@@ -37,13 +37,16 @@ export default defineComponent({
   data: () => ({
     show: false,
     photos: [] as IPhoto[],
-    photosDone: 0,
+    progress: 0,
     processing: false,
+    processed: new Set<IPhoto>(),
+    photosDone: 0,
+    totalOperations: 0,
   }),
 
   methods: {
     open(photos: IPhoto[]) {
-      this.photosDone = 0;
+      this.progress = 0;
       this.processing = false;
       this.show = true;
       this.photos = photos;
@@ -60,33 +63,34 @@ export default defineComponent({
       this.$emit('close');
     },
 
-    async selectAlbums(albums: IAlbum[]) {
+    async processAlbum(album: IAlbum, action: 'add' | 'remove') {
+      const name = album.name || album.album_id.toString();
+      const gen = action === 'add'
+        ? dav.addToAlbum(album.user, name, this.photos)
+        : dav.removeFromAlbum(album.user, name, this.photos);
+      
+      for await (const fids of gen) {
+        this.photosDone += fids.length;
+        this.photos.forEach((p) => {
+          if (fids.includes(p.fileid)) {
+            this.processed.add(p);
+          }
+        });
+      }
+      this.progress = Math.round((this.photosDone * 100) / this.totalOperations);
+    },
+
+    async updateAlbums(albumsToAddTo: IAlbum[], albumsToRemoveFrom: IAlbum[] = []) {
       if (this.processing) return;
-      const processed = new Set<IPhoto>();
-      const photosDone = new Set<number>();
+      this.processing = true;
+      this.processed = new Set<IPhoto>();
+      this.totalOperations = this.photos.length * (albumsToAddTo.length + albumsToRemoveFrom.length);
 
-      await Promise.all(albums.map(async (album) => { 
-        const name = album.name || album.album_id.toString();
-        const gen = dav.addToAlbum(album.user, name, this.photos);
-        this.processing = true;
-        
-        for await (const fids of gen) {
-          fids.forEach((f) => {
-            if (f) {
-              photosDone.add(f);
-            }
-          });
-          this.photos.forEach((p) => {
-            if (fids.includes(p.fileid)) {
-              processed.add(p);
-            }
-          });
-        }
-        this.photosDone = photosDone.size;
-      }));
-      const n = this.photosDone;
-      this.added(Array.from(processed));
-      showInfo(this.n('memories', '{n} item added to album', '{n} items added to album', n, { n }));
+      await Promise.all(albumsToAddTo.map((album) => this.processAlbum(album, 'add')));
+      await Promise.all(albumsToRemoveFrom.map((album) => this.processAlbum(album, 'remove')));
+      const n = this.processed.size;
+      this.added(Array.from(this.processed));
+      showInfo(this.n('memories', '{n} processed', '{n} processed', n, { n }));
       this.close();
     },
   },

src/components/modal/AlbumPicker.vue

@@ -196,7 +196,7 @@ export default defineComponent({
     },
     
     submit() {
-      this.$emit('select', Array.from(this.selectedAlbums));
+      this.$emit('select', Array.from(this.selectedAlbums), Array.from(this.unselectedAlbums));
     }
   },
 });