Merge pull request #5945 from ivanscinote/SCI-8955-result-content-rearange

Make result content rearrangable [SCI-8955]

app/javascript/vue/protocol/container.vue

@@ -167,7 +167,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'

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'

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>

app/javascript/vue/shared/reorderable_items_modal.vue

@@ -61,8 +61,8 @@
       }
     },
     mounted() {
-      $(this.$refs.modal).modal('show');
+      window.$(this.$refs.modal).modal('show');
-      $(this.$refs.modal).on('hidden.bs.modal', () => {
+      window.$(this.$refs.modal).on('hidden.bs.modal', () => {
         this.close();
       })
     },