mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-27 02:04:33 +08:00
Update attachments view, add ordering on FE
This commit is contained in:
Urban Rotnik
parent
a3932cc67f
commit
ee3dc571e1
8 changed files with 225 additions and 31 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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
31
app/views/steps/attachments/_item.html.erb
Normal 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
48
app/views/steps/attachments/_list.html.erb
Normal 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>
|
||||
|
|
@ -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 ↓"
|
||||
sort_old: "Oldest first ↑"
|
||||
sort_atoz: "Name ↓"
|
||||
sort_ztoa: "Name ↑"
|
||||
new:
|
||||
add_step_title: "Add new step"
|
||||
tab_checklists: "Checklists"
|
||||
|
|
|
|||
Loading…
Reference in a new issue