Switched to one apply button for both comparison and multi file select

Author: be-smith

webapp/src/components/CollapsibleComparisonFileSelect.vue

@@ -28,7 +28,7 @@
             :exclude-file-ids="excludeFileIds"
           />
         </div>
-        <div class="form-row mt-2 mb-3">
+        <div v-if="showApplyButton" class="form-row mt-2 mb-3">
           <button class="btn btn-primary btn-sm" @click="applySelection">
             {{ applyButtonText }}
           </button>
@@ -81,6 +81,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showApplyButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update:modelValue", "apply"],
   data() {
@@ -90,8 +94,24 @@ export default {
     };
   },
   watch: {
-    modelValue(newVal) {
-      this.internalFileModel = newVal.slice();
+    modelValue: {
+      handler(newVal) {
+        // Avoid triggering the internalFileModel watcher when syncing from parent
+        if (JSON.stringify(newVal) !== JSON.stringify(this.internalFileModel)) {
+          this.internalFileModel = newVal.slice();
+        }
+      },
+      deep: true,
+    },
+    internalFileModel: {
+      handler(newVal, oldVal) {
+        // Emit changes immediately when showApplyButton is false
+        // Only emit if the value actually changed
+        if (!this.showApplyButton && JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.$emit("update:modelValue", newVal.slice());
+        }
+      },
+      deep: true,
     },
   },
   mounted() {

webapp/src/components/datablocks/CycleBlock.vue

@@ -31,18 +31,18 @@
         @update:modelValue="onFileSelectionChange"
       />
     </div>
-    <div class="form-row mt-2">
-      <button class="btn btn-primary btn-sm" @click="applyFileSelection">Apply Selection</button>
-    </div>
     <CollapsibleComparisonFileSelect
       v-model="comparisonFileModel"
       :item_id="item_id"
       :block_id="block_id"
       :extensions="blockInfo.attributes.accepted_file_extensions"
       :exclude-file-ids="file_ids"
       :initially-expanded="comparisonFileModel.length > 0"
-      @apply="applyComparisonFiles"
+      :show-apply-button="false"
     />
+    <div class="form-row mt-2">
+      <button class="btn btn-primary btn-sm" @click="applyAllSelections">Apply Changes</button>
+    </div>
     <div>
       <div class="form-row">
         <div class="input-group form-inline">
@@ -452,14 +452,11 @@ export default {
     },
 
     /**
-     * Apply the currently staged file selection
-     * Used by the "Apply Selection" button
+     * Apply all pending changes (file selection and comparison files)
+     * Used by the consolidated "Apply Changes" button
      */
-    applyFileSelection() {
+    applyAllSelections() {
       this.updateFileIds();
-      this.updateBlock();
-    },
-    applyComparisonFiles() {
       this.comparison_file_ids = this.pending_comparison_file_ids.slice();
       this.updateBlock();
     },