From 81a4924d6b0cb1b75268518ecec7d517e219df96 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Mon, 22 Jan 2024 16:41:10 +0100
Subject: [PATCH] Fix Open menu in attachment preview screen [SCI-9757]

---
 .../content/attachments/open_locally_menu.vue | 46 +++++++++++++------
 .../shared/file_preview/_content.html.erb     |  5 +-
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/app/javascript/vue/shared/content/attachments/open_locally_menu.vue b/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
index 43d1498aa..e89e2d8dc 100644
--- a/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
+++ b/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
@@ -1,21 +1,27 @@
 <template>
   <div class="sn-open-locally-menu">
-    <div v-if="!this.canOpenLocally && (this.attachment.wopi && this.attachment.urls.edit_asset)">
-        <a :href="`${this.attachment.urls.edit_asset}`" target="_blank"
+    <div v-if="!this.canOpenLocally && (this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset)">
+        <a :href="`${this.attachment.attributes.urls.edit_asset}`" target="_blank"
         class="block whitespace-nowrap rounded px-3 py-2.5
                hover:!text-sn-blue hover:no-underline cursor-pointer hover:bg-sn-super-light-grey">
-            {{ this.attachment.wopi_context.button_text }}
+            {{ this.attachment.attributes.wopi_context.button_text }}
         </a>
     </div>
     <div v-else>
         <MenuDropdown
+          v-if="this.menu.length > 1"
           class="ml-auto"
           :listItems="this.menu"
           :btnClasses="`btn btn-light icon-btn !bg-sn-white`"
           :position="'right'"
-          :btnText="'Open in'"
-          @open_locally="openLocally"
+          :btnText="i18n.t('attachments.open_in')"
+          :caret="true"
+          @openLocally="openLocally"
+          @openImageEditor="openImageEditor"
         ></MenuDropdown>
+        <a v-else-if="this.menu.length === 1" class="btn btn-light !bg-sn-white" :href="this.menu[0].url" :target="this.menu[0].target" @click="this[this.menu[0].emit]()">
+          {{ this.menu[0].text }}
+        </a>
     </div>
   </div>
 </template>
@@ -32,23 +38,28 @@ export default {
     data: { type: String, required: true },
   },
   created() {
-    window.openLocallyMenu = this;
-    this.attachment = JSON.parse(this.data);
-  },
-  beforeUnmount() {
-    delete window.openLocallyMenuComponent;
+    this.attachment = { attributes: JSON.parse(this.data) };
+    this.fetchLocalAppInfo();
   },
   computed: {
     menu() {
       const menu = [];
 
-      if (this.attachment.wopi && this.attachment.urls.edit_asset) {
+      if (this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset) {
         menu.push({
-          text: this.attachment.wopi_context.button_text,
-          url: this.attachment.urls.edit_asset,
-          url_target: '_blank',
+          text: this.attachment.attributes.wopi_context.button_text,
+          url: this.attachment.attributes.urls.edit_asset,
+          url_target: '_blank'
         });
       }
+
+      if (this.attachment.attributes.image_editable) {
+        menu.push({
+          text: this.i18n.t('assets.file_preview.edit_in_scinote'),
+          emit: 'openImageEditor'
+        });
+      }
+
       if (this.canOpenLocally) {
         const text = this.localAppName
           ? this.i18n.t('attachments.open_locally_in', { application: this.localAppName })
@@ -56,12 +67,17 @@ export default {
 
         menu.push({
           text,
-          emit: 'open_locally',
+          emit: 'openLocally'
         });
       }
 
       return menu;
     },
   },
+  methods: {
+    openImageEditor() {
+      document.getElementById('editImageButton').click();
+    }
+  }
 };
 </script>
diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb
index 31fd8e0d8..51130f3e5 100644
--- a/app/views/shared/file_preview/_content.html.erb
+++ b/app/views/shared/file_preview/_content.html.erb
@@ -27,7 +27,7 @@
         </button>
 
       <% elsif asset.editable_image? %>
-        <button class="btn btn-light image-edit-button"
+        <button id="editImageButton" class="btn btn-light image-edit-button hidden"
           data-image-id="<%= asset.id %>"
           data-image-name="<%= asset.file_name %>"
           data-image-url="<%= asset_file_url_path(asset) %>"
@@ -38,6 +38,9 @@
           <span class="sn-icon sn-icon-edit"></span>
           <%= t('assets.file_preview.edit_in_scinote') %>
         </button>
+        <div id="openLocallyMenu" data-behaviour="vue">
+          <open-locally-menu data="<%= AssetSerializer.new(asset, scope: { user: current_user }).to_json %>"/>
+        </div>
       <% end %>
     <% end %>
     <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">