From 669bb3dd486d368e66720ebadfe22b95794268b6 Mon Sep 17 00:00:00 2001
From: Ivan Kljun <ivan@scinote.net>
Date: Wed, 9 Aug 2023 13:58:25 +0200
Subject: [PATCH] Make result content rearrangable (UI needs to be finalised
 and tested with actual data) [SCI-8955]

---
 app/javascript/vue/protocol/container.vue     |  2 +-
 app/javascript/vue/protocol/step.vue          |  2 +-
 app/javascript/vue/results/result.vue         | 66 ++++++++++++++++++-
 .../reorderable_items_modal.vue               |  4 +-
 4 files changed, 68 insertions(+), 6 deletions(-)
 rename app/javascript/vue/{protocol/modals => shared}/reorderable_items_modal.vue (95%)

diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index e9686307f..bee5c4083 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -171,7 +171,7 @@
   import ProtocolMetadata from './protocolMetadata'
   import ProtocolOptions from './protocolOptions'
   import Tinymce from '../shared/tinymce.vue'
-  import ReorderableItemsModal from './modals/reorderable_items_modal.vue'
+  import ReorderableItemsModal from '../shared/reorderable_items_modal.vue'
   import PublishProtocol from './modals/publish_protocol.vue'
 
   import UtilsMixin from '../mixins/utils.js'
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 7a8323e3d..4f19819aa 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -219,7 +219,7 @@
   import deleteStepModal from './modals/delete_step.vue'
   import Attachments from '../shared/content/attachments.vue'
   import clipboardPasteModal from '../shared/content/attachments/clipboard_paste_modal.vue'
-  import ReorderableItemsModal from './modals/reorderable_items_modal.vue'
+  import ReorderableItemsModal from '../shared/reorderable_items_modal.vue'
 
   import UtilsMixin from '../mixins/utils.js'
   import AttachmentsMixin from './mixins/attachments.js'
diff --git a/app/javascript/vue/results/result.vue b/app/javascript/vue/results/result.vue
index fee648ee9..d319bb50f 100644
--- a/app/javascript/vue/results/result.vue
+++ b/app/javascript/vue/results/result.vue
@@ -2,18 +2,80 @@
   <div class="result-wrapper">
     {{ result.id }}
     {{ result.attributes.name }}
+    <button @click="openReorderModal">
+      Open Rearrange Modal
+    </button>
     <hr>
+    <ReorderableItemsModal v-if="reordering"
+      title="Placeholder title for this modal"
+      :items="reorderableElements"
+      @reorder="updateElementOrder"
+      @close="closeReorderModal"
+    />
   </div>
 </template>
 
 <script>
-  import Result from './result.vue';
+  import axios from 'axios';
+  import ReorderableItemsModal from '../shared/reorderable_items_modal.vue'
 
   export default {
     name: 'Results',
-    components: { Result },
     props: {
       result: { type: Object, required: true }
+    },
+    data() {
+      return {
+        reordering: false,
+        elements: []
+      }
+    },
+    components: {
+      ReorderableItemsModal
+    },
+    computed: {
+      reorderableElements() {
+        return this.orderedElements.map((e) => { return { id: e.id, attributes: e.attributes.orderable } })
+      },
+      orderedElements() {
+        return this.elements.sort((a, b) => a.attributes.position - b.attributes.position);
+      },
+      urls() {
+        return this.result.attributes.urls || {}
+      }
+    },
+    methods: {
+      openReorderModal() {
+        this.reordering = true;
+      },
+      closeReorderModal() {
+        this.reordering = false;
+      },
+      updateElementOrder(orderedElements) {
+        orderedElements.forEach((element, position) => {
+          let index = this.elements.findIndex((e) => e.id === element.id);
+          this.elements[index].attributes.position = position;
+        });
+
+        let elementPositions = {
+          result_orderable_element_positions: this.elements.map(
+            (element) => [element.id, element.attributes.position]
+          )
+        };
+
+        axios.post(this.urls.reorder_elements_url, elementPositions, {
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+          }
+        })
+        .then(() => {
+          this.$emit('stepUpdated');
+        })
+        .catch(() => {
+          HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
+        });
+      },
     }
   }
 </script>
diff --git a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue b/app/javascript/vue/shared/reorderable_items_modal.vue
similarity index 95%
rename from app/javascript/vue/protocol/modals/reorderable_items_modal.vue
rename to app/javascript/vue/shared/reorderable_items_modal.vue
index c4acd87eb..c3961cee3 100644
--- a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
+++ b/app/javascript/vue/shared/reorderable_items_modal.vue
@@ -61,8 +61,8 @@
       }
     },
     mounted() {
-      $(this.$refs.modal).modal('show');
-      $(this.$refs.modal).on('hidden.bs.modal', () => {
+      window.$(this.$refs.modal).modal('show');
+      window.$(this.$refs.modal).on('hidden.bs.modal', () => {
         this.close();
       })
     },