scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 23:16:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update attachments view, add ordering on FE

Browse source
This commit is contained in:
Urban Rotnik 2019-04-09 10:00:56 +02:00
parent a3932cc67f
commit ee3dc571e1
8 changed files with 225 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/protocols/steps.js.erb
View file

@ -671,7 +671,17 @@
Comments.initDeleteComments("#steps");
}
// On init
// Reorder attachments
global.reorderAttachments = function reorderAtt(stepId, sortType) {
var label_value = $("#dd-att-step-" + stepId + "> .dropdown-menu > li > a[data-order=" + sortType + "]").html();
$("#dd-att-step-" + stepId + "-label").html(label_value);
$('#att-' + stepId + ' a.file-preview-link').each(function(){
var elm = $(this)
elm.css('order', elm.attr('data-order-' + sortType));
})
}
// On init
initCallBacks();
initHandsOnTable($(document));
expandAllSteps();

91
app/assets/stylesheets/steps.scss
View file

@ -83,4 +83,95 @@
}
}
.attacments{
display: flex;
flex-wrap: wrap;
}
.attachment-placeholder {
height: 277px;
width: 216px;
border-radius: 5px;
background-color: $color-white;
margin: 3px;
color: $color-silver-chalice;
a {
color: inherit;
}
&:hover{
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.18);
}
.attachment-thumbnail {
height: 160px;;
width: 113px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
margin: 16px auto 5px auto;
text-align: center;
overflow: hidden;
img {
max-height: 100%;
}
i.fas{
font-size: 100px;
line-height: 160px;
}
}
.no-shadow {
box-shadow: 0 0 0 0 rgba(0,0,0,0.15);
}
.attachment-label {
height: 39px;
width: 190px;
color: #40A1D7;
font-family: Lato;
font-size: 16px;
line-height: 18px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
.spencer-bonnet-modif {
height: 45px;
width: 149px;
color: $color-silver-chalice;
font-family: Lato;
font-size: 12px;
line-height: 15px;
text-align: center;
margin: 0 auto;
}
}
.attachments-order{
display: inline-block;
}
.attachments-actions{
color: $color-silver-chalice;
.drag_n_drop_label{
font-size: 14px;
line-height: 32px;
}
.btn-default{
border: 0;
margin-left: 10px;
color: inherit;
&:hover{
background: inherit;
}
}
}

4
app/helpers/my_modules_helper.rb
View file

@ -11,6 +11,10 @@ module MyModulesHelper
step.assets.order(:file_updated_at)
end
def az_ordered_assets_index(step, asset_id)
step.assets.order('LOWER(file_file_name)').pluck(:id).index(asset_id)
end
def number_of_samples(my_module)
my_module.samples.count
end

22
app/views/assets/wopi/_create_wopi_file_button.html.erb
View file

@ -1,11 +1,11 @@
<%= link_to create_wopi_file_path,
class: 'btn btn-default create-wopi-file-btn',
target: '_blank',
title: 'Create_new_file',
data: {
'id': element_id,
'type': element_type,
} do %>
<%= image_tag 'office/office-online-logo.svg' %>
<%= t('assets.create_wopi_file.button_text') %>
<% end %>
<%= link_to create_wopi_file_path,
class: 'btn btn-default create-wopi-file-btn',
target: '_blank',
title: 'Create_new_file',
data: { 'id': element_id, 'type': element_type, } do %>
<span class="btn btn-default new-asset-upload-button">
<span class="fas fa-file-medical new-asset-upload-icon"></span>
<%=t 'assets.create_wopi_file.button_text' %>
</span>
<% end %>

41
app/views/steps/_step.html.erb
View file

@ -26,8 +26,6 @@
<% if can_manage_protocol_in_module?(@protocol) ||
can_manage_protocol_in_repository?(@protocol) %>
<%= render partial: "/assets/wopi/create_wopi_file_button.html.erb",
locals: { element_id: step.id, element_type: 'Step' } %>
<a data-action="move-step"
class="btn btn-link"
href="<%= move_up_step_path(step, format: :json) %>"
@ -39,7 +37,7 @@
href="<%= move_down_step_path(step, format: :json) %>"
title="<%= t("protocols.steps.options.down_arrow_title") %>"
data-remote="true">
<span class="fas fa-arrow-down"></a>
<span class="fas fa-arrow-down"></span></a>
<a data-action="edit-step"
class="btn btn-link help_tooltips"
title="<%= t("protocols.steps.options.edit_title") %>"
@ -47,11 +45,11 @@
data-remote="true"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.step_edit') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.step_edit') %>" >
<span class="fas fa-pencil-alt">
<span class="fas fa-pencil-alt"></span>
</a>
<%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-link",
data: {action: "delete-step", confirm: t("protocols.steps.destroy.confirm", step: step.name)}) do %>
<span class="fas fa-trash-alt">
<span class="fas fa-trash-alt"></span>
<% end %>
<% end %>
</div>
@ -112,19 +110,26 @@
</div>
<% end %>
<% assets = ordered_assets(step) %>
<% unless assets.blank? then %>
<div class="col-xs-12">
<strong><%= t("protocols.steps.files") %></strong>
<ul>
<% assets.each do |asset| %>
<li>
<%= render partial: "shared/asset_link", locals: { asset: asset, display_image_tag: true }, formats: :html %>
</li>
<% end %>
</ul>
</div>
<% end %>
<%# assets = ordered_assets(step) %>
<%# unless assets.blank? then %>
<!-- <div class="col-xs-12">-->
<!-- <strong><%#= t("protocols.steps.files", count: assets.count) %></strong>-->
<!-- <ul>-->
<%# assets.each do |asset| %>
<!-- <li>-->
<%#= render partial: "shared/asset_link", locals: { asset: asset, display_image_tag: true }, formats: :html %>
<!-- </li>-->
<%# end %>
<!-- </ul>-->
<!-- </div>-->
<%# end %>
<%= render partial: 'steps/attachments/list',
locals: { step: step } %>
<% unless step.checklists.blank? then %>
<div class="col-xs-12">

31
app/views/steps/attachments/_item.html.erb Normal file
View file

@ -0,0 +1,31 @@
<% image_preview = asset.is_image? ? asset.url(:medium) : nil %>
<%= link_to download_asset_path(asset),
class: 'file-preview-link',
id: "modal_link#{asset.id}",
style: "order: #{ assets_count - i }",
data: { no_turbolink: true, id: true, status: 'asset-present',
'preview-url': asset_file_preview_path(asset),
'order-atoz': az_ordered_assets_index(step, asset.id),
'order-ztoa': assets_count - az_ordered_assets_index(step, asset.id),
'order-old': i,
'order-new': assets_count - i,
} do %>
<div class="attachment-placeholder pull-left">
<div class="attachment-thumbnail <%= image_preview ? '' : 'no-shadow' %> %>">
<% if image_preview %>
<%= image_tag image_preview %>
<% else %>
<i class="fas fa-image"></i>
<% end %>
</div>
<div class="attachment-label"><%= truncate(asset.file_file_name,
length: Constants::FILENAME_TRUNCATION_LENGTH) %></div>
<div class="spencer-bonnet-modif">
Modified: <%= l(asset.updated_at, format: :full_date) %> <br>
<%= number_to_human_size(asset.file.size) %>
</div>
</div>
<% end %>

48
app/views/steps/attachments/_list.html.erb Normal file
View file

@ -0,0 +1,48 @@
<% assets = ordered_assets step %>
<hr>
<div class="col-xs-12">
<h4>
<%= t("protocols.steps.files", count: assets.count) %>
</h4>
</div>
<div class="col-xs-12 attachments-actions">
<div class="col-md-4 drag_n_drop_label">
<%#=t 'assets.drag_n_drop.label_html' %>
</div>
<div class="col-md-8">
<div class="attachemnts-header pull-right">
<%= render partial: "/assets/wopi/create_wopi_file_button.html.erb",
locals: { element_id: step.id, element_type: 'Step' } %>
<!-- <span class="btn btn-default new-asset-upload-button">-->
<!-- <span class="fas fa-file-upload new-asset-upload-icon"></span>-->
<%#=t 'assets.drag_n_drop.browse_label' %>
<!-- </span>-->
<div class="dropdown attachments-order" id="dd-att-step-<%= step.id %>">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="dd-att-step-<%= step.id %>-label"><%= t('protocols.steps.attachments.sort_new').html_safe %></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="sortMenu">
<% ["new", "old", "atoz", "ztoa"].each do |sort| %>
<li>
<a data-order="<%= sort %>" onClick="reorderAttachments('<%= step.id %>', '<%= sort %>')">
<%= t('protocols.steps.attachments.sort_' + sort ).html_safe %></a>
</li>
<%#= t('protocols.steps.attachments.sorting.new') %>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 attacments" id="att-<%= step.id %>">
<% assets.each_with_index do |asset, i| %>
<%= render partial: 'steps/attachments/item',
locals: { asset: asset, i: i, assets_count: assets.count, step: step } %>
<% end %>
</div>
<hr>

7
config/locales/en.yml
View file

@ -1734,7 +1734,7 @@ en:
comments_tab: "Comments"
no_description: "This step has no description."
tables: "Tables"
files: "Files"
files: "Attachments (%{count})"
empty_checklist: "No items"
comment_title: "%{user} at %{time}:"
options:
@ -1748,6 +1748,11 @@ en:
duplicate_title: "Duplicate step"
complete_title: "Complete Step"
uncomplete_title: "Uncomplete Step"
attachments:
sort_new: "Newest first &#8595;"
sort_old: "Oldest first &#8593;"
sort_atoz: "Name &#8595;"
sort_ztoa: "Name &#8593;"
new:
add_step_title: "Add new step"
tab_checklists: "Checklists"