Merge pull request #6973 from ivanscinote/SCI-9993-ik

Fix status API request and thumbnail buttons in SciNote Edit [SCI-9993]

app/javascript/vue/shared/content/attachments/context_menu.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="asset-context-menu" ref="menu">
+  <div class="asset-context-menu"
+       ref="menu"
+       @mouseenter="fetchLocalAppInfo"
+  >
     <a  class="marvinjs-edit-button hidden"
         v-if="attachment.attributes.asset_type == 'marvinjs' && attachment.attributes.urls.marvin_js_start_edit"
         ref="marvinjsEditButton"

app/javascript/vue/shared/content/attachments/mixins/open_locally.js

@@ -15,11 +15,6 @@ export default {
         this.attachment.attributes.asset_type !== 'marvinjs'
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.fetchLocalAppInfo();
-    });
-  },
   methods: {
     async fetchLocalAppInfo() {
       try {

app/javascript/vue/shared/content/attachments/thumbnail.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="attachment-container asset"
        :data-asset-id="attachment.id"
-       @mouseover="showOptions = true"
+       @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
+       v-click-outside="handleClickOutsideThumbnail"
   >
     <a  :class="{ hidden: showOptions }"
         :href="attachment.attributes.urls.blob"
@@ -44,14 +45,15 @@
       </div>
       <div class="absolute bottom-4 w-[184px] grid grid-cols-[repeat(4,_2.5rem)] justify-between">
         <MenuDropdown
-            v-if="showOptions && multipleOpenOptions.length > 1"
-            @open_locally="openLocally"
-            @open_scinote_editor="openScinoteEditor"
+            v-if="multipleOpenOptions.length > 1"
             :listItems="multipleOpenOptions"
             :btnClasses="'btn btn-light icon-btn thumbnail-action-btn'"
             :position="'left'"
             :btnIcon="'sn-icon sn-icon-open'"
             :title="i18n.t('attachments.thumbnail.buttons.open')"
+            @menu-visibility-changed="handleMenuVisibilityChange"
+            @open_locally="openLocally"
+            @open_scinote_editor="openScinoteEditor"
         ></MenuDropdown>
         <a class="btn btn-light icon-btn thumbnail-action-btn"
            v-else-if="canOpenLocally"
@@ -167,6 +169,7 @@ import MoveAssetModal from '../modal/move.vue';
 import NoPredefinedAppModal from '../modal/no_predefined_app_modal.vue';
 import MoveMixin from './mixins/move.js';
 import OpenLocallyMixin from './mixins/open_locally.js';
+import { vOnClickOutside } from '@vueuse/components';
 
 export default {
   name: 'thumbnailAttachment',
@@ -196,6 +199,9 @@ export default {
       showNoPredefinedAppModal: false
     };
   },
+  directives: {
+    'click-outside': vOnClickOutside
+  },
   computed: {
     multipleOpenOptions() {
       const options = [];
@@ -258,10 +264,25 @@ export default {
         this.showOptions = false;
       }
     },
-    handleMenuVisibilityChange(newValue) {
-      this.isMenuOpen = newValue;
-      this.showOptions = newValue;
+    async handleMouseEnter() {
+      await this.fetchLocalAppInfo();
+      this.showOptions = true;
+    },
+    handleMenuVisibilityChange({ isMenuOpen, showOptions }) {
+      if (isMenuOpen !== null) {
+        this.isMenuOpen = isMenuOpen;
       }
+      if (showOptions !== null) {
+        this.showOptions = showOptions;
+      }
+    },
+    handleClickOutsideThumbnail(event) {
+      const isClickInsideModal = event.target.closest('.modal');
+      if (!isClickInsideModal) {
+        this.showOptions = false;
+        this.isMenuOpen = false;
+      }
+    },
   }
 };
 </script>

app/javascript/vue/shared/menu_dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative" v-if="listItems.length > 0" v-click-outside="closeMenuAndEmit">
+  <div class="relative" v-if="listItems.length > 0" v-click-outside="closeMenu">
     <button
       ref="openBtn"
       :class="btnClasses"
@@ -93,9 +93,10 @@ export default {
   },
   watch: {
     showMenu(newValue) {
-      if (newValue) {
-        this.$emit('menu-visibility-changed', newValue);
-      }
+      this.$emit('menu-visibility-changed', {
+        isMenuOpen: newValue,
+        showOptions: newValue ? true : null
+      });
 
       if (this.showMenu) {
         this.openUp = false;
@@ -116,14 +117,6 @@ export default {
     closeMenu() {
       this.showMenu = false;
     },
-    closeMenuAndEmit(event) {
-      const isClickInsideModal = event.target.closest('.modal');
-
-      if (!isClickInsideModal) {
-        this.showMenu = false;
-        this.$emit('menu-visibility-changed', false);
-      }
-    },
     handleClick(event, item) {
       if (!item.url) {
         event.preventDefault();