scinote-web/app/views/steps/_step.html.erb

<% preview = (defined?(preview) ? preview : false) %>
<% import = (defined?(import) ? import : false) %>
<div class ="step <%= "completed" if step.completed? %>" data-id="<%= step.id %>">
  <div class="panel panel-default">
    <div class="panel-heading step-heading">
      <div class="left-floats">
        <% if !import && !preview && @protocol.my_module %>
          <button data-action="uncomplete-step"
                  data-link-url="<%= toggle_step_state_step_path(step)%>"
                  class="btn icon-btn btn-light toggle-step-complete
                  <%= 'hidden' unless step.completed? %>"
                  <%= 'disabled' if !can_complete_or_checkbox_step?(@protocol) || preview %>>
            <span class="fas fa-check-circle"></span>
          </button>
          <button data-action="complete-step"
                  data-link-url="<%= toggle_step_state_step_path(step)%>"
                  class="btn icon-btn btn-light toggle-step-complete
                  <%= 'hidden' if step.completed? %>"
                  <%= 'disabled' if !can_complete_or_checkbox_step?(@protocol) || preview %>>
            <span class="far fa-check-circle"></span>
          </button>
        <% end %>
        <a class="step-panel-collapse-link"
           href="#step-panel-<%= step.id || step.position %>"
           data-toggle="collapse"
           data-remote="true">
          <span class="fas fa-caret-right"></span>
        </a>

        <span class="step-number"><%= step.position + 1 %>.</span>

        <a class="step-panel-collapse-link step-name-link"
           href="#step-panel-<%= step.id || step.position %>"
           data-toggle="collapse"
           data-remote="true">
          <span class="name-block"><strong><%= step.name %></strong></span>
          <% unless step.new_record? %>
            <span class="delimiter">|</span>
            <span class="author-block"><%= sanitize_input t('protocols.steps.published_on',
                                       timestamp: l(step.created_at, format: :full),
                                       user: h(step.user.full_name)) %></span>
          <% end %>
        </a>
      </div>

      <div class="panel-options pull-right">
        <% if !preview && @protocol.my_module %>
          <button data-action="uncomplete-step"
                  data-link-url="<%= toggle_step_state_step_path(step)%>"
                  class="btn btn-secondary button-step-complete
                  <%= 'hidden' if !step.completed? || !can_complete_or_checkbox_step?(@protocol) || preview %>">
            <span class="fas fa-undo"></span>
            <%= t("protocols.steps.options.uncomplete_title") %>
          </button>
          <button data-action="complete-step"
                  data-link-url="<%= toggle_step_state_step_path(step)%>"
                  class="btn btn-secondary button-step-complete
                  <%= 'hidden' if step.completed? || !can_complete_or_checkbox_step?(@protocol) || preview %>">
            <span class="far fa-check-circle"></span>
            <%= t("protocols.steps.options.complete_title") %>
          </button>
        <% end %>
        <% if (can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol)) && !(preview) %>
          <%= link_to(move_up_step_path(step),
                      class: 'btn btn-light icon-btn',
                      title: t('protocols.steps.options.up_arrow_title'),
                      remote: true,
                      method: :put,
                      data: { action: 'move-step', direction: :up }) do %>
            <span class="fas fa-arrow-up"></span>
          <% end %>
          <%= link_to(move_down_step_path(step),
                      class: 'btn btn-light icon-btn',
                      title: t('protocols.steps.options.down_arrow_title'),
                      remote: true,
                      method: :put,
                      data: { action: 'move-step', direction: :down }) do %>
            <span class="fas fa-arrow-down"></span>
          <% end %>
          <%= link_to(edit_step_path(step),
                      title: t('protocols.steps.options.edit_title'),
                      class: 'btn btn-light icon-btn',
                      remote: true,
                      data: { action: 'edit-step' }) do %>
            <span class="fas fa-pencil-alt"></span>
          <% end %>
          <%= link_to(step_path(step),
                      title: t('protocols.steps.options.delete_title'),
                      method: :delete,
                      class: 'btn btn-light icon-btn',
                      data: { action: 'delete-step', confirm: t('protocols.steps.destroy.confirm', step: step.name) }) do %>
            <span class="fas fa-trash-alt"></span>
          <% end %>
        <% end %>
      </div>
    </div>
    <div class="panel-collapse collapse" id="step-panel-<%= step.id || step.position %>" role="tabpanel">
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-12">
            <% if step.description.blank? %>
              <em><%= t('protocols.steps.no_description') %></em>
            <% else %>
              <div class="ql-editor">
                <%= custom_auto_link(step.tinymce_render(:description),
                                     simple_format: false,
                                     tags: %w(img),
                                     team: current_team) %>
              </div>
            <% end %>
          </div>
        </div>
        <div class="row">
          <% if step.tables.any? %>
            <div class="col-xs-12">
              <hr>
              <% step.tables.each do |table| %>
                <strong>
                  <%= auto_link(simple_format(table.name),
                                      link: :urls,
                                      html: { target: '_blank' }) %>
                </strong>
                <div data-role="hot-table" class="hot-table">
                  <%= hidden_field(table, :contents, value: table.contents_utf_8, class: "hot-contents") %>
                  <div data-role="step-hot-table" class="step-result-hot-table"></div>
                </div>
              <% end %>
            </div>
          <% end %>

          <% if import %>
            <%= render partial: 'steps/attachments/preview_list.html.erb',
                       locals: {  attachments: steps_assets[step.position]} %>
          <% else %>
            <%= render partial: 'steps/attachments/list.html.erb', locals: {  step: step, preview: preview } %>
          <% end %>

          <% unless step.checklists.blank? then %>
            <div class="col-xs-12">
              <hr>
              <% step.checklists.asc.each do |checklist| %>
                <strong><%= custom_auto_link(checklist.name, team: current_team) %></strong>
                <% if checklist.checklist_items.empty? %>
                  </br>
                  <%= t("protocols.steps.empty_checklist") %>
                  </br>
                <% else %>
                  <% ordered_checklist_items(checklist).each do |checklist_item| %>
                    <div class="checkbox" <%= @protocol.in_module? ? "data-action=check-item" : "" %>>
                      <label>
                        <% if @protocol.in_module? %>
                          <input type="checkbox"
                                 value=""
                                 data-link-url="<%=checklistitem_state_step_path(step) %>"
                                 data-id="<%= checklist_item.id %>" <%= "checked" if checklist_item.checked? %> />
                        <% else %>
                          <input type="checkbox"
                                 value=""
                                 disabled="disabled" />
                        <% end %>
                        <%= custom_auto_link(checklist_item.text, team: current_team) %>
                      </label>
                    </div>
                  <% end %>
                <% end %>
              <% end %>
            </div>
          <% end %>
        </div>
        <% unless import %>
          <hr>
          <%= render partial: 'steps/comments.html.erb', locals: {  comments: step.last_comments,
                                                                    comments_count: step.step_comments.count,
                                                                    step: step } %>
        <% end %>
      </div>
    </div>
  </div>
</div>