Add spinner to the delete/undelete buttons in the Submission list

Author: sadiqkhoja

src/components/submission/list.vue

@@ -36,7 +36,7 @@ except according to the terms contained in the LICENSE file.
       <submission-table v-show="odata.dataExists && odata.value.length !== 0 && odata.removedCount < odata.value.length"
         ref="table" :project-id="projectId" :xml-form-id="xmlFormId"
         :draft="draft" :fields="selectedFields"
-        :deleted="deleted"
+        :deleted="deleted" :awaiting-deleted-responses="awaitingDeletedResponses"
         @review="reviewModal.show({ submission: $event })"
         @delete="showDelete"
         @restore="showRestore"/>
@@ -218,6 +218,8 @@ export default {
       confirmDelete: true,
       // state that indicates whether we need to show restore confirmation dialog
       confirmRestore: true,
+
+      awaitingDeletedResponses: new Set()
     };
   },
   computed: {
@@ -388,6 +390,7 @@ export default {
       const [{ __id: instanceId }, confirm] = event;
 
       if (this.deleteModal.state) this.deleteModal.awaitingResponse = true;
+      this.awaitingDeletedResponses.add(instanceId);
 
       this.request({
         method: 'DELETE',
@@ -396,6 +399,7 @@ export default {
         .then(() => {
           this.deleteModal.hide();
           this.deletedSubmissionCount.value += 1;
+          this.awaitingDeletedResponses.delete(instanceId);
 
           this.alert.success(this.$t('alert.deleted'));
           if (confirm != null) this.confirmDelete = confirm;
@@ -419,12 +423,14 @@ export default {
         })
         .catch(() => {
           this.deleteModal.awaitingResponse = false;
+          this.awaitingDeletedResponses.delete(instanceId);
         });
     },
     requestRestore(e) {
       const [{ __id: instanceId }, confirm] = e;
 
       if (this.restoreModal.state) this.restoreModal.awaitingResponse = true;
+      this.awaitingDeletedResponses.add(instanceId);
 
       this.request({
         method: 'POST',
@@ -433,6 +439,7 @@ export default {
         .then(() => {
           this.restoreModal.hide();
           this.deletedSubmissionCount.value -= 1;
+          this.awaitingDeletedResponses.delete(instanceId);
 
           this.alert.success(this.$t('alert.restored'));
           if (confirm != null) this.confirmRestore = confirm;
@@ -456,6 +463,7 @@ export default {
         })
         .catch(() => {
           this.restoreModal.awaitingResponse = false;
+          this.awaitingDeletedResponses.delete(instanceId);
         });
     }
   }

src/components/submission/metadata-row.vue

@@ -31,7 +31,7 @@ except according to the terms contained in the LICENSE file.
         <button v-if="verbs.has('submission.delete')" type="button"
           class="delete-button btn btn-default"
           :aria-label="$t('action.delete')" v-tooltip.aria-label>
-          <span class="icon-trash"></span>
+          <span class="icon-trash"></span><spinner :state="awaitingResponse"/>
         </button>
         <template v-if="verbs.has('submission.update')">
           <button type="button" class="review-button btn btn-default"
@@ -66,8 +66,9 @@ except according to the terms contained in the LICENSE file.
         <template v-if="verbs.has('submission.delete')">
           <button type="button"
           class="restore-button btn btn-default"
+          :aria-disabled="awaitingResponse"
           :aria-label="$t('action.restore')" v-tooltip.aria-label>
-          <span class="icon-recycle"></span>
+          <span class="icon-recycle"></span><spinner :state="awaitingResponse"/>
         </button>
       </template>
       </div>
@@ -81,10 +82,11 @@ import DateTime from '../date-time.vue';
 import useReviewState from '../../composables/review-state';
 import useRoutes from '../../composables/routes';
 import { apiPaths } from '../../util/request';
+import Spinner from '../spinner.vue';
 
 export default {
   name: 'SubmissionMetadataRow',
-  components: { DateTime },
+  components: { DateTime, Spinner },
   props: {
     projectId: {
       type: String,
@@ -110,7 +112,8 @@ export default {
     verbs: {
       type: Set,
       required: true
-    }
+    },
+    awaitingResponse: Boolean
   },
   setup() {
     const { reviewStateIcon } = useReviewState();

src/components/submission/table.vue

@@ -31,7 +31,7 @@ except according to the terms contained in the LICENSE file.
 
     <template #data-frozen="{ data, index }">
       <submission-metadata-row :project-id="projectId" :xml-form-id="xmlFormId"
-        :draft="draft" :submission="data" :deleted="deleted"
+        :draft="draft" :submission="data" :deleted="deleted" :awaiting-response="awaitingDeletedResponses?.has(data.__id)"
         :row-number="odata.originalCount - index" :verbs="project.verbs"/>
     </template>
     <template #data-scrolling="{ data }">
@@ -69,7 +69,8 @@ defineProps({
     default: false
   },
   draft: Boolean,
-  fields: Array
+  fields: Array,
+  awaitingDeletedResponses: Object
 });
 const emit = defineEmits(['review', 'delete', 'restore']);
 

test/components/submission/list.spec.js

@@ -845,6 +845,20 @@ describe('SubmissionList', () => {
           })
           .respondWithProblem());
 
+      it('shows spinner', () =>
+        delAndCheck()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .delete-button').trigger('click');
+            component.getComponent(SubmissionDelete).props().state.should.be.false;
+          })
+          .beforeAnyResponse(component => {
+            component.find('.delete-button .spinner').classes().should.contain('active');
+          })
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.find('.delete-button .spinner').classes().should.not.contain('active');
+          }));
+
       it('shows the correct alert', () =>
         delAndCheck()
           .request(component =>
@@ -1069,6 +1083,20 @@ describe('SubmissionList', () => {
           })
           .respondWithProblem());
 
+      it('shows spinner', () =>
+        restoreAndCheck()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .restore-button').trigger('click');
+            component.getComponent(SubmissionDelete).props().state.should.be.false;
+          })
+          .beforeAnyResponse(component => {
+            component.find('.restore-button .spinner').classes().should.contain('active');
+          })
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.find('.restore-button .spinner').classes().should.not.contain('active');
+          }));
+
       it('shows the correct alert', () =>
         restoreAndCheck()
           .request(component =>