Add WOPI icons/buttons to files

app/helpers/file_icons_helper.rb

@@ -0,0 +1,60 @@
+module FileIconsHelper
+  def wopi_file?(asset)
+    file_ext = asset.file_file_name.split('.').last
+    %w(doc docx xls xlsx ppt pptx).include?(file_ext)
+  end
+
+  # For showing next to file
+  def file_extension_icon(asset)
+    file_ext = asset.file_file_name.split('.').last
+    if %w(doc docx).include?(file_ext)
+      image_link = 'office/Word-docx_20x20x32.png'
+    elsif %w(xls xlsx).include?(file_ext)
+      image_link = 'office/Excel-xlsx_20x20x32.png'
+    elsif %w(ppt pptx).include?(file_ext)
+      image_link = 'office/PowerPoint-pptx_20x20x32.png'
+    end
+
+    if image_link
+      image_tag image_link
+    else
+      ''
+    end
+  end
+
+  # For showing in view/edit buttons (WOPI)
+  def file_application_icon(asset)
+    file_ext = asset.file_file_name.split('.').last
+    if %w(doc docx).include?(file_ext)
+      image_link = 'office/Word-color_16x16x32.png'
+    elsif %w(xls xlsx).include?(file_ext)
+      image_link = 'office/Excel-color_16x16x32.png'
+    elsif %w(ppt pptx).include?(file_ext)
+      image_link = 'office/PowerPoint-Color_16x16x32.png'
+    end
+
+    if image_link
+      image_tag image_link
+    else
+      ''
+    end
+  end
+
+  # Shows correct WOPI application text (Word Online/Excel ..)
+  def wopi_button_text(asset, action)
+    file_ext = asset.file_file_name.split('.').last
+    if %w(doc docx).include?(file_ext)
+      app = 'Word Online'
+    elsif %w(xls xlsx).include?(file_ext)
+      app = 'Excel Online'
+    elsif %w(ppt pptx).include?(file_ext)
+      app = 'PowerPoint Online'
+    end
+
+    if action == 'view'
+      t('result_assets.wopi_open_file', app: app)
+    elsif action == 'edit'
+      t('result_assets.wopi_edit_file', app: app)
+    end
+  end
+end

app/views/result_assets/_edit.html.erb

@@ -3,7 +3,10 @@
     <%= f.text_field :name, style: "margin-top: 10px;" %><br />
     <%= f.fields_for :asset do |ff| %>
       <span><strong><%=t "result_assets.edit.uploaded_asset" %></strong></span>
-      <p style="margin: 10px;"><%= ff.object.file_file_name %></p>
+      <p style="margin: 10px;">
+        <%= file_extension_icon(ff.object) %>
+        <%= ff.object.file_file_name %>
+      </p>
       <%= ff.file_field :file %>
     <% end %>
     <hr>

app/views/results/_result_asset.html.erb

@@ -1,16 +1,36 @@
 <% if can_view_or_download_result_assets(result.my_module) %>
   <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} do %>
     <%= image_tag(preview_asset_path result.asset) if result.asset.is_image? %>
-    <p><%= truncate(result.asset.file_file_name, length: 50) %></p>
+		<% if wopi_file?(result.asset) %>
+			<p style='display: inline-block'>
+				<%= file_extension_icon(result.asset) %>
+				<%= truncate(result.asset.file_file_name, length: 50) %>
+			</p>
+		<% else %>
+			<p><%= truncate(result.asset.file_file_name, length: 50) %></p>
+		<% end %>
   <% end %>
   <% if result.asset.can_perform_action("view") %>
-    <%= link_to "View", view_asset_url(id: result.asset) %>
+		<%= link_to view_asset_url(id: result.asset),
+								class: 'btn btn-default btn-sm',
+								style: 'display: inline-block'	do %>
+      <%= file_application_icon(result.asset) %>
+			<%= wopi_button_text(result.asset, 'view') %>
+		<% end %>
   <% end %>
   <% if can_edit_result_asset_in_module(result.my_module) &&
       result.asset.can_perform_action("edit") %>
-    <%= link_to "Edit", edit_asset_url(id: result.asset) %>
+		<%= link_to edit_asset_url(id: result.asset),
+								class: 'btn btn-default btn-sm',
+							  style: 'display: inline-block'	do %>
+			<%= file_application_icon(result.asset) %>
+			<%= wopi_button_text(result.asset, 'edit') %>
+		<% end %>
   <% end %>
 <% else %>
   <%= image_tag(preview_asset_path result.asset) if result.asset.is_image? %>
-  <p><%= result.asset.file_file_name %></p>
+  <p>
+    <%= file_extension_icon(result.asset) %>
+    <%= truncate(result.asset.file_file_name, length: 50) %>
+  </p>
 <% end %>

app/views/steps/_form_assets.html.erb

@@ -15,11 +15,17 @@
       <% if can_view_or_download_step_assets(@protocol) %>
         <%= link_to download_asset_path(ff.object), data: {no_turbolink: true} do %>
           <%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
-          <p><%= ff.object.file_file_name %></p>
+          <p>
+            <%= file_extension_icon(ff.object) %>
+            <%= ff.object.file_file_name %>
+          </p>
         <% end %>
       <% else %>
         <%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
-        <p><%= ff.object.file_file_name %></p>
+        <p>
+          <%= file_extension_icon(ff.object) %>
+          <%= ff.object.file_file_name %>
+        </p>
       <% end %>
     <% else %>
       <%= ff.file_field :file %>

app/views/steps/_step.html.erb

@@ -71,21 +71,41 @@
                       <% if asset.file_present %>
                         <%= link_to download_asset_path(asset), data: {no_turbolink: true, id: true, status: "asset-present"} do %>
                           <%= image_tag preview_asset_path(asset) if asset.is_image? %>
-                          <p><%= truncate(asset.file_file_name, length: 50) %></p>
+                          <% if wopi_file?(asset) %>
+                            <p style='display: inline-block'>
+                              <%= file_extension_icon(asset) %>
+                              <%= truncate(asset.file_file_name, length: 50) %>
+                            </p>
+                          <% else %>
+                            <p><%= truncate(asset.file_file_name, length: 50) %></p>
+                          <% end %>
                         <% end %>
                         <% if asset.can_perform_action("view") %>
-                          <%= link_to "View", view_asset_url(id: asset) %>
+                          <%= link_to view_asset_url(id: asset),
+                                      class: 'btn btn-default btn-sm',
+                                      style: 'display: inline-block'	do %>
+                            <%= file_application_icon(asset) %>
+                            <%= wopi_button_text(asset, 'view') %>
+                          <% end %>
                         <% end %>
                         <% if can_edit_step_in_protocol(@protocol) &&
                               asset.can_perform_action("edit") %>
-                          <%= link_to "Edit", edit_asset_url(id: asset) %>
+                          <%= link_to edit_asset_url(id: asset),
+                                      class: 'btn btn-default btn-sm',
+                                      style: 'display: inline-block'	do %>
+                            <%= file_application_icon(asset) %>
+                            <%= wopi_button_text(asset, 'edit') %>
+                          <% end %>
                         <% end %>
                       <% else %>
                         <%= asset_loading_span(asset) %>
                       <% end %>
                     <% else %>
                       <%= image_tag preview_asset_path(asset) if asset.is_image? %>
-                      <p><%= truncate(asset.file_file_name, length: 50) %></p>
+                      <p>
+                        <%= file_extension_icon(asset) %>
+                        <%= truncate(asset.file_file_name, length: 50) %>
+                      </p>
                     <% end %>
                   </li>
                 <% end %>

config/locales/en.yml

@@ -847,6 +847,8 @@ en:
       error_flash: "Couldn't archive file result. Someone is editing that file."
     destroy:
       success_flash: "File result successfully deleted."
+    wopi_open_file: "Open in %{app}"
+    wopi_edit_file: "Edit in %{app}"
 
   result_tables:
     new: