Merge pull request #6931 from G-Chubinidze/gc_SCI_9962_9760

Improvements of the SciNote Edit option in "Add-ons" [SCI-9962][SCI-9760]

app/javascript/packs/vue/scinote_edit_download.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import ScinoteEditDownload from '../../vue/shared/scinote_edit_download.vue';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
+
+const app = createApp({});
+app.component('ScinoteEditDownload', ScinoteEditDownload);
+app.config.globalProperties.i18n = window.I18n;
+mountWithTurbolinks(app, '#scinoteEditDownload');

app/javascript/vue/shared/scinote_edit_download.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="buttons">
+    <template v-if="isWindows">
+      <a :href="responseData[0]['url']"
+         class="btn btn-primary new-project-btn"
+         :title="i18n.t('users.settings.account.addons.desktop_app.windows_button')"
+         role="button"
+         data-remote="true"
+         target="_blank">
+        <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
+      </a>
+      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+        {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[0]['version']}) }}
+      </p>
+    </template>
+
+    <template v-else-if="isMac">
+      <a :href="responseData[1]['url']"
+         class="btn btn-primary new-project-btn"
+         :title="i18n.t('users.settings.account.addons.desktop_app.macos_button')"
+         role="button"
+         data-remote="true"
+         target="_blank">
+        <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
+      </a>
+      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+        {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[1]['version']}) }}
+      </p>
+    </template>
+
+    <template v-else>
+      <div class="flex">
+        <div>
+          <a :href="responseData[0]['url']"
+             class="btn btn-primary new-project-btn"
+             :title="i18n.t('users.settings.account.addons.desktop_app.windows_button')"
+             role="button"
+             data-remote="true"
+             target="_blank">
+            <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
+          </a>
+          <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+            {{ i18n.t('users.settings.account.addons.desktop_app.version',
+              { version: this.responseData[0]['version']})
+            }}
+          </p>
+        </div>
+
+        <div class="ml-2">
+          <a :href="responseData[1]['url']"
+             class="btn btn-primary new-project-btn"
+             :title="i18n.t('users.settings.account.addons.desktop_app.macos_button')"
+             role="button"
+             data-remote="true"
+             target="_blank">
+            <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
+          </a>
+          <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+            {{ i18n.t('users.settings.account.addons.desktop_app.version',
+              { version: this.responseData[1]['version']})
+            }}
+          </p>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScinoteEditDownload',
+  props: {
+    data: { type: String, required: true }
+  },
+  data() {
+    return {
+      userAgent: this.data,
+      responseData: {}
+    };
+  },
+  computed: {
+    isWindows() {
+      return /Windows/.test(this.userAgent);
+    },
+    isMac() {
+      return /Mac OS/.test(this.userAgent);
+    }
+  },
+  created() {
+    window.scinoteEditDownload = this;
+    this.fetchData();
+  },
+  beforeUnmount() {
+    delete window.scinoteEditDownloadComponent;
+  },
+  methods: {
+    fetchData() {
+      $.get('https://extras.scinote.net/scinote-edit/latest.json', (result) => {
+        this.responseData = result;
+      });
+    }
+  }
+};
+</script>

app/views/users/settings/account/addons/index.html.erb

@@ -7,58 +7,6 @@
 
     <div>
       <h1 class="addons-title"><%= t('users.settings.account.addons.title') %></h1>
-      <div class="panel panel-default">
-        <div class="panel-body">
-          <div class="row">
-            <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
-              <p class="manuscript-title"><%= t('users.settings.account.addons.desktop_app.title') %></p>
-              <p class="manuscript-description">
-                <span><%= t('users.settings.account.addons..desktop_app.description') %></span>
-              </p><br/>
-              <div class="buttons">
-                <% if @user_agent =~ /Windows/ %>
-                  <%= link_to '#',
-                              class: 'btn btn-primary new-project-btn',
-                              title: t('users.settings.account.addons.desktop_app.windows_button'),
-                              remote: true do %>
-                    <span class="hidden-xs"><%= t('users.settings.account.addons.desktop_app.windows_button') %></span>
-                  <% end %>
-                  <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"><%= t('users.settings.account.addons.desktop_app.version') %> 5.16.5 (24419)</p>
-                <% elsif @user_agent =~ /Mac OS/ %>
-                  <%= link_to '#',
-                              class: 'btn btn-primary new-project-btn',
-                              title: t('users.settings.account.addons.desktop_app.macos_button'),
-                              remote: true do %>
-                    <span class="hidden-xs"><%= t('users.settings.account.addons.desktop_app.macos_button') %></span>
-                  <% end %>
-                  <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"><%= t('users.settings.account.addons.desktop_app.version') %> 5.16.5 (24419)</p>
-                <% else %>
-                  <div class="flex">
-                    <div>
-                      <%= link_to '#',
-                                  class: 'btn btn-primary new-project-btn',
-                                  title: t('users.settings.account.addons.desktop_app.macos_button'),
-                                  remote: true do %>
-                        <span class="hidden-xs"><%= t('users.settings.account.addons.desktop_app.macos_button') %></span>
-                      <% end %>
-                      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);"><%= t('users.settings.account.addons.desktop_app.version') %> 5.16.5 (24419)</p>
-                    </div>
-                    <div class="ml-2">
-                      <%= link_to '#',
-                                  class: 'btn btn-primary new-project-btn ml-2',
-                                  title: t('users.settings.account.addons.desktop_app.windows_button'),
-                                  remote: true do %>
-                        <span class="hidden-xs"><%= t('users.settings.account.addons.desktop_app.windows_button') %></span>
-                      <% end %>
-                      <p class="text-xs mt-1 ml-2" style="color: var(--sn-sleepy-grey);"><%= t('users.settings.account.addons.desktop_app.version') %> 5.16.5 (24419)</p>
-                    </div>
-                  </div>
-                <% end %>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div>
         <h2 class="addons-subtitle" ><%= t('users.settings.account.addons.scinote_addons') %></h2>
         <div data-hook="settings-addons-container">
@@ -68,6 +16,22 @@
         </div>
       </div>
     </div>
+    <br>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <div class="row">
+          <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
+            <p class="manuscript-title"><%= t('users.settings.account.addons.desktop_app.title') %></p>
+            <p class="manuscript-description">
+              <span><%= t('users.settings.account.addons.desktop_app.description') %></span>
+            </p><br/>
+            <div id="scinoteEditDownload" data-behaviour="vue">
+              <scinote-edit-download data="<%= @user_agent %>">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="row printer-settings">
       <div class="col-xs-12 col-sm-12">
         <h2 class="addons-subtitle"><%= t('users.settings.account.addons.label_printers') %></h2>
@@ -117,3 +81,5 @@
   </div>
   <div class="tab-pane tab-pane-settings" role="tabpanel"></div>
 </div>
+
+<%= javascript_include_tag "vue_scinote_edit_download", nonce: true %>

config/initializers/extends.rb

@@ -605,6 +605,8 @@ class Extends
     *.nr-data.net
     www.recaptcha.net/
     www.gstatic.com/recaptcha/
+    extras.scinote.net
+    https://www.scinote.net
   )
 
   if Constants::ASSET_SYNC_URL && EXTERNAL_SERVICES.exclude?(Constants::ASSET_SYNC_URL)

config/locales/en.yml

@@ -2754,11 +2754,11 @@ en:
             description: 'Print labels of custom styles and sizes in seconds flat from your PC or Mac via your Zebra printer connected via USB, Internet or LAN.'
             details: 'Details'
           desktop_app:
-            title: 'SciNote File Editor desktop app'
+            title: 'SciNote Edit'
-            description: 'Download the SciNote File Editor desktop app to automatically edit files using locally installed software'
+            description: 'Download the SciNote Edit desktop app to automatically edit files using locally installed software.'
             macos_button: 'Download for macOS'
             windows_button: 'Download for Windows'
-            version: 'Version'
+            version: 'Version %{version}'
         label_printer:
           fluics_printer: "FLUICS Print: Label printers"
           zebra_printer: 'Zebra label printers'

config/webpack/webpack.config.js

@@ -47,6 +47,7 @@ const entryList = {
   vue_user_preferences: './app/javascript/packs/vue/user_preferences.js',
   vue_components_manage_stock_value_modal: './app/javascript/packs/vue/manage_stock_value_modal.js',
   vue_legacy_datetime_picker: './app/javascript/packs/vue/legacy/datetime_picker.js',
+  vue_scinote_edit_download: './app/javascript/packs/vue/scinote_edit_download.js'
 }
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949