scinote-web/app/javascript/vue/shared/content/attachments/open_locally_menu.vue

<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" 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 }}
        </a>
    </div>
    <div v-else>
        <MenuDropdown
          class="ml-auto"
          :listItems="this.menu"
          :btnClasses="`btn btn-light icon-btn !bg-sn-white`"
          :position="'right'"
          :btnText="'Open in'"
          @open_locally="openLocally"
        ></MenuDropdown>
    </div>
  </div>
</template>

<script>
  import OpenLocallyMixin from './mixins/open_locally.js'
  import MenuDropdown from '../../menu_dropdown.vue'

  export default {
    name: 'OpenLocallyMenu',
    mixins: [OpenLocallyMixin],
    components: { MenuDropdown },
    props: {
      data: { type: String, required: true }
    },
    created() {
      window.openLocallyMenu = this;
      this.attachment = JSON.parse(this.data)
    },
    beforeUnmount() {
      delete window.openLocallyMenuComponent;
    },
    computed: {
      menu() {
        let menu = [];

        if (this.attachment.wopi && this.attachment.urls.edit_asset) {
          menu.push({
            text: this.attachment.wopi_context.button_text,
            url: this.attachment.urls.edit_asset,
            url_target: '_blank'
          })
        }
        if (this.canOpenLocally) {
          const text = this.localAppName
            ? this.i18n.t('attachments.open_locally_in', { application: this.localAppName })
            : this.i18n.t('attachments.open_locally')

          menu.push({
            text: text,
            emit: 'open_locally'
          })
        }

        return menu;
      }
    }
  }
</script>