Merge pull request #7156 from aignatov-bio/ai-sci-10296-fix-versions-modal

Fix versions modal [SCI-10296]

app/controllers/protocols_controller.rb

@@ -102,7 +102,7 @@ class ProtocolsController < ApplicationController
 
     @published_versions = @protocol.published_versions_with_original.order(version_number: :desc)
 
-    if @protocol.draft.present?
+    if @protocol.draft.present? || @protocol.initial_draft?
       draft = @protocol.initial_draft? ? @protocol : @protocol.draft
       draft_hash = ProtocolDraftSerializer.new(draft, scope: current_user).as_json
     end

app/javascript/vue/protocol/protocolMetadata.vue

@@ -175,6 +175,7 @@ export default {
     openVersionsModal() {
       this.VersionsModalObject = {
         id: this.protocol.id,
+        name: this.protocol.attributes.name,
         urls: {
           versions_modal: this.protocol.attributes.urls.versions_modal
         }

app/javascript/vue/protocols/modals/versions.vue

@@ -11,6 +11,9 @@
           </h4>
         </div>
         <div class="modal-body">
+          <div v-if="updating" class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-10">
+            <img src="/images/medium/loading.svg" alt="Loading" class="p-4 rounded-xl bg-sn-white" />
+          </div>
           <div class="max-h-[400px] overflow-y-auto">
             <div v-if="draft">
               <div class="flex items-center gap-4">
@@ -38,10 +41,10 @@
                   }}
                 </span>
                 <div class="flex items-center gap-2 ml-auto">
-                  <button v-if="draft.urls.publish" class="btn btn-light" @click="publishDraft">
+                  <button v-if="draft.urls.publish" class="btn btn-light" :disabled="updating" @click="publishDraft">
                     {{ i18n.t('protocols.index.versions.publish') }}
                   </button>
-                  <button v-if="draft.urls.destroy" @click="destroyDraft" class="btn btn-light icon-btn">
+                  <button v-if="draft.urls.destroy" @click="destroyDraft" :disabled="updating" class="btn btn-light icon-btn">
                     <i class="sn-icon sn-icon-delete"></i>
                   </button>
                 </div>
@@ -59,7 +62,7 @@
                 />
             </div>
             <div v-for="version in publishedVersions" :key="version.number">
-              <div class="flex items-center gap-4">
+              <div class="flex items-center gap-4 group min-h-[40px]">
                 <a :href="version.urls.show" class="hover:no-underline cursor-pointer shrink-0">
                   <b>
                     {{ i18n.t('protocols.index.versions.revision', { version: version.number }) }}
@@ -75,10 +78,10 @@
                 </span>
                 <button
                   v-if="version.urls.save_as_draft"
-                  class="btn btn-light icon-btn ml-auto"
+                  class="btn btn-light icon-btn ml-auto tw-hidden group-hover:flex"
                   :title="i18n.t('protocols.index.versions.save_as_draft')"
                   @click="saveAsDraft(version.urls.save_as_draft)"
-                  :disabled="draft"
+                  :disabled="draft || updating"
                 >
                   <i class="sn-icon sn-icon-duplicate"></i>
                 </button>
@@ -117,9 +120,12 @@ import ConfirmationModal from '../../shared/confirmation_modal.vue';
 export default {
   name: 'VersionsModal',
   props: {
-    protocol: Object
+    protocol: {
+      required: true,
+      typr: Object
+    }
   },
-  emits: ['refresh', 'close'],
+  emits: ['refresh', 'close', 'reloadPage', 'redirectToProtocols'],
   mixins: [modalMixin],
   components: {
     SelectDropdown,
@@ -129,7 +135,8 @@ export default {
   data() {
     return {
       draft: null,
-      publishedVersions: []
+      publishedVersions: [],
+      updating: false
     };
   },
   mounted() {
@@ -150,6 +157,8 @@ export default {
     async destroyDraft() {
       const ok = await this.$refs.destroyModal.show();
       if (ok) {
+        if (this.updating) return;
+        this.updating = true;
         axios.post(this.draft.urls.destroy, {
           version_modal: true
         }).then((response) => {
@@ -158,22 +167,33 @@ export default {
           this.$emit('redirectToProtocols');
           this.loadModalData();
           HelperModule.flashAlertMsg(response.data.message, 'success');
+          this.updating = false;
         });
       } else {
         document.body.style.overflow = 'hidden';
       }
     },
     saveAsDraft(url) {
+      if (this.updating) {
+        return;
+      }
+
+      this.updating = true;
       axios.post(url).then((response) => {
         window.location.href = response.data.url;
       }).catch((error) => {
+        this.updating = false;
         HelperModule.flashAlertMsg(error.response.data.error, 'danger');
       });
     },
     publishDraft() {
+      if (this.updating) return;
+      this.updating = true;
+
       axios.post(this.draft.urls.publish).then(() => {
         this.loadModalData();
-        this.$emit('reloadPage');
+        this.$emit('refresh');
+        this.updating = false;
       });
     }
   }

app/javascript/vue/protocols/renderers/versions.vue

@@ -1,23 +1,25 @@
 <template>
-  <div v-if="params.data.urls.show" class="flex items-center gap-2 text-sn-blue">
-    <span class="cursor-pointer"
-          @click.stop="params.dtComponent.$emit('versions', {}, [params.data])"
-          v-if="params.data.nr_of_versions > 0">
-      {{ params.data.nr_of_versions }}
-    </span>
-    <span v-if="params.data.nr_of_versions > 0 && params.data.has_draft">/</span>
-    <a v-if="params.data.has_draft" :href="params.data.urls.show_draft" class="hover:no-underline">
-      {{ i18n.t("protocols.index.table.draft") }}
-    </a>
-  </div>
-  <div v-else class="flex items-center gap-2 text-sn-grey">
-    <span v-if="params.data.nr_of_versions > 0">
-      {{ params.data.nr_of_versions }}
-    </span>
-    <span v-if="params.data.nr_of_versions > 0 && params.data.has_draft">/</span>
-    <span v-if="params.data.has_draft" class="hover:no-underline ">
-      {{ i18n.t("protocols.index.table.draft") }}
-    </span>
+  <div>
+    <div v-if="params.data.urls.show" class="flex items-center gap-2 text-sn-blue">
+      <span class="cursor-pointer"
+            @click.stop="params.dtComponent.$emit('versions', {}, [params.data])"
+            v-if="params.data.nr_of_versions > 0">
+        {{ params.data.nr_of_versions }}
+      </span>
+      <span v-if="params.data.nr_of_versions > 0 && params.data.has_draft">/</span>
+      <a v-if="params.data.has_draft" :href="params.data.urls.show_draft" class="hover:no-underline">
+        {{ i18n.t("protocols.index.table.draft") }}
+      </a>
+    </div>
+    <div v-else class="flex items-center gap-2 text-sn-grey">
+      <span v-if="params.data.nr_of_versions > 0">
+        {{ params.data.nr_of_versions }}
+      </span>
+      <span v-if="params.data.nr_of_versions > 0 && params.data.has_draft">/</span>
+      <span v-if="params.data.has_draft" class="hover:no-underline ">
+        {{ i18n.t("protocols.index.table.draft") }}
+      </span>
+    </div>
   </div>
 </template>
 

app/javascript/vue/protocols/table.vue

@@ -119,7 +119,7 @@ export default {
         sortable: true
       },
       {
-        field: 'versions',
+        field: 'has_draft',
         headerName: this.i18n.t('protocols.index.thead.versions'),
         sortable: true,
         cellRenderer: 'VersionsRenderer',