album: refactor add modal

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/SelectionManager.vue

@@ -34,7 +34,7 @@
 
     <!-- Selection Modals -->
     <FaceMoveModal ref="faceMoveModal" @moved="deletePhotos" :updateLoading="updateLoading" />
-    <AddToAlbumModal ref="addToAlbumModal" @added="clearSelection" />
+    <AddToAlbumModal ref="addToAlbumModal" @change="clearSelection" />
     <MoveToFolderModal ref="moveToFolderModal" @moved="refresh" />
   </div>
 </template>

src/components/modal/AddToAlbumModal.vue

@@ -5,9 +5,9 @@
     </template>
 
     <div class="outer">
-      <AlbumPicker @select="updateAlbums" :photos="photos" />
+      <AlbumPicker @select="update" :photos="photos" :disabled="!!opsTotal" />
 
-      <div v-if="processing">
+      <div class="progress-bar" v-if="opsTotal">
         <NcProgressBar :value="progress" :error="true" />
       </div>
     </div>
@@ -37,60 +37,54 @@ export default defineComponent({
   data: () => ({
     show: false,
     photos: [] as IPhoto[],
-    progress: 0,
+    opsDone: 0,
-    processing: false,
+    opsTotal: 0,
-    processed: new Set<IPhoto>(),
-    photosDone: 0,
-    totalOperations: 0,
   }),
 
+  computed: {
+    progress(): number {
+      return Math.min(this.opsTotal ? Math.round((this.opsDone * 100) / this.opsTotal) : 100, 100);
+    },
+  },
+
   methods: {
     open(photos: IPhoto[]) {
-      this.progress = 0;
-      this.processing = false;
-      this.show = true;
       this.photos = photos;
-    },
+      this.show = true;
-
+      this.opsTotal = 0;
-    added(photos: IPhoto[]) {
-      this.$emit('added', photos);
     },
 
     close() {
-      this.photos = [];
-      this.processing = false;
       this.show = false;
+      this.photos = [];
+      this.opsTotal = 0;
       this.$emit('close');
     },
 
-    async processAlbum(album: IAlbum, action: 'add' | 'remove') {
+    async update(selection: IAlbum[], deselection: IAlbum[]) {
-      const name = album.name || album.album_id.toString();
+      if (this.opsTotal) return;
-      const gen = action === 'add'
+
-        ? dav.addToAlbum(album.user, name, this.photos)
+      // Total number of DAV calls (ugh DAV)
-        : dav.removeFromAlbum(album.user, name, this.photos);
+      this.opsTotal = this.photos.length * (selection.length + deselection.length);
-      
+
-      for await (const fids of gen) {
+      // Add the photos to the selected albums
-        this.photosDone += fids.length;
+      for (const album of selection) {
-        this.photos.forEach((p) => {
+        for await (const fids of dav.addToAlbum(album.user, album.name, this.photos)) {
-          if (fids.includes(p.fileid)) {
+          this.opsDone += fids.filter((f) => f).length;
-            this.processed.add(p);
+        }
-          }
-        });
       }
-      this.progress = Math.round((this.photosDone * 100) / this.totalOperations);
-    },
 
-    async updateAlbums(albumsToAddTo: IAlbum[], albumsToRemoveFrom: IAlbum[] = []) {
+      // Remove the photos from the deselected albums
-      if (this.processing) return;
+      for (const album of deselection) {
-      this.processing = true;
+        for await (const fids of dav.removeFromAlbum(album.user, album.name, this.photos)) {
-      this.processed = new Set<IPhoto>();
+          this.opsDone += fids.filter((f) => f).length;
-      this.totalOperations = this.photos.length * (albumsToAddTo.length + albumsToRemoveFrom.length);
+        }
+      }
 
-      await Promise.all(albumsToAddTo.map((album) => this.processAlbum(album, 'add')));
+      const n = this.photos.length;
-      await Promise.all(albumsToRemoveFrom.map((album) => this.processAlbum(album, 'remove')));
+      showInfo(this.n('memories', '{n} photo updated', '{n} photos updated', n, { n }));
-      const n = this.processed.size;
+
-      this.added(Array.from(this.processed));
+      this.$emit('change');
-      showInfo(this.n('memories', '{n} processed', '{n} processed', n, { n }));
       this.close();
     },
   },
@@ -101,4 +95,8 @@ export default defineComponent({
 .outer {
   margin-top: 15px;
 }
+
+.progress-bar {
+  margin-top: 10px;
+}
 </style>

src/components/modal/AlbumCollaborators.vue

@@ -159,7 +159,7 @@ type Collaborator = {
 };
 
 export default defineComponent({
-  name: 'AddToAlbumModal',
+  name: 'AlbumCollaborators',
   components: {
     Magnify,
     Close,

src/components/modal/AlbumPicker.vue

@@ -43,7 +43,8 @@
 
     <div class="actions">
       <NcButton
-        :aria-label="t('memories', 'Create a new album.')"
+        :aria-label="t('memories', 'Create new album.')"
+        :disabled="disabled"
         class="new-album-button"
         type="tertiary"
         @click="showAlbumCreationForm = true"
@@ -55,7 +56,13 @@
       </NcButton>
 
       <div class="submit-btn-wrapper">
-        <NcButton :aria-label="t('memories', 'Save')" class="new-album-button" type="primary" @click="submit">
+        <NcButton
+          class="new-album-button"
+          type="primary"
+          :aria-label="t('memories', 'Save changes')"
+          :disabled="disabled"
+          @click="submit"
+        >
           {{ t('memories', 'Save changes') }}
         </NcButton>
         <span class="remove-notice" v-if="deselection.size > 0">
@@ -107,6 +114,12 @@ export default defineComponent({
       type: Array as PropType<IPhoto[]>,
       required: true,
     },
+
+    /** Disable controls */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     AlbumForm,
@@ -180,6 +193,8 @@ export default defineComponent({
     },
 
     toggleAlbumSelection(album: IAlbum) {
+      if (this.disabled) return;
+
       if (this.selection.has(album)) {
         this.selection.delete(album);