universal_table/app/views/admin/universal_tables/show.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "universal_table/universal-table" %>
<% end %>
<style>
  .hidden_entry{
    background-color: grey;
  }
</style>
<form class="form-search" action="<%= admin_universal_table_path(@table) %>" method="get">
  <input type="text" name="q" class="input-large search-query" placeholder="Search from text or editor columns">
  <button type="submit" class="btn btn-primary">Search</button>
  <% if params[:q].present? %>
    <a href="<%= admin_universal_table_path(@table) %>" class="btn btn-info">Reset</a>
  <% end %>
</form>

<div id="data-table" class="ut-table">
  <table class="table main-list">
    <thead>
      <tr class="sort-header">
        <th width="15">
          <%= t(:status) %>
          <div class="status hide" id="entry-status">
            <a href="" class="toggle_entries" data-status="hide"><%= t(:hide) %></a>
            <a href="" class="toggle_entries" data-status="show"><%= t(:show) %></a>
          </div>
        </th>
        <% @table_fields.each do |field| %>
          <%
          sort = field.to_s.include?('.') ? field.to_s.split('.')[1] : field.to_s
          active = params[:sort].eql? sort
          order = active ? (["asc", "desc"]-[params[:order]]).first : "asc"
          arrow = (order.eql? "desc") ? "<b class='icons-arrow-up-3'></b>" : "<b class='icons-arrow-down-4'></b>"
          klass = field.eql?(:title) ? "span5" : "span2"
          th_data = "<a href='?sort=#{sort}&order=#{order}'>#{field} #{active ? arrow : ""}</a>"
          %>
          <th class='<%= klass %> <%= active ? "active" : "" %>'><%= th_data.html_safe %></th>
        <% end %>
      </tr>
    </thead>
    <tbody>
    <% can_edit = can_edit_or_delete?(@table) %> 
    <% @entries.each do |entry| %>
      <tr id="tr_entry_<%= entry.id.to_s %>" class="<%= entry.is_hidden? ? 'hidden_entry' : '' %>">
        <td><input class="hide-toggle" type="checkbox" value="<%= entry.id.to_s %>" /></td>
      <% @columns.each_with_index do |column, index| %>
        <% ce = entry.column_entries.where(:table_column_id => column.id).first rescue nil %>
        <td>
          <% if !ce.nil? %>
            <% case ce.type %>
            <% when "text" %>
              <%= ce.text %>
            <% when "integer" %>
              <%= ce.number %>
            <% when "editor" %>
              <%= ce.content.html_safe rescue "" %>
            <% when "image" %>
              <div class="image-expander">
                <% if !ce.image.nil? %>
                  <a href="<%= ce.image.url %>" target="_blank"><img src="<%= ce.image.thumb.url %>" class="image-preview" /></a>
                <% end %>
              </div>
            <% when "date" %>
              <%= format_date(ce.date, column.date_format) %> 
            <% when "period" %>
              <% if !ce.period_from.nil? %>
                <%= format_date(ce.period_from, column.date_format) %> ~ <%= format_date(ce.period_to, column.date_format)  %> 
              <% end %>
            <% when "file" %>
              <% locale = I18n.locale.to_s %>
              <ol>
                <% ce.column_entry_files.desc(:sort_number).each do |entry_file| %>
                  <% next unless entry_file.choose_lang_display(locale) %>
                  <% if entry_file.file.content_type.start_with?('audio/') %>
                    <%= entry_file.get_file_title %>
                    <a class="voice-player" data-content="<%= entry_file.file.url %>" href="" title="播放讀音"><i class="fa fa-play" aria-hidden="true"></i></a>
                  <% else %>
                    <li><%= link_to entry_file.get_file_title, entry_file.file.url, target: "_blank" %></li>
                  <% end %>
                <% end %>
              </ol>
            <% end %>
          <% else %>
            &nbsp;
          <% end %>
          <% if index == 0 && can_edit %>
            <div class="quick-edit">
              <ul class="nav nav-pills">
                <li><a href="<%= admin_universal_table_edit_entry_path(:universal_table_id=> entry.to_param, :page => params[:page]) %>"><%= t(:edit) %></a></li>
                <li><a href="<%= admin_universal_table_delete_entry_path(entry.id) %>" class="delete text-error" data-method="delete" data-confirm="Are you sure?"><%= t(:delete_) %></a></li>
              </ul>
            </div>
          <% end %>
        </td>
      <% end %>
      </tr>
    <% end %>
    </tbody>
  </table>
</div>


<div class="bottomnav clearfix">
  <%= content_tag :div, paginate(@entries), class: "pagination pagination-centered" %>
  <div class="action pull-right">
    <a href="<%= admin_universal_table_new_entry_path(@table) %>" class="btn btn-primary" role="button" data-toggle="modal">Add Entry</a>
  </div>
</div>

<script>
let audio;
$(".voice-player").on("click", function(){
  let status = $(this).attr('status');
  if (audio) {
    audio.pause();
    audio.currentTime = 0;
  }

  if (status == 'playing') {
    $(this).attr('status', '');
    $(this).find('i').removeClass('fa-pause');
    $(this).find('i').addClass('fa-play');
  } else {
    let mp3_url = $(this).attr('data-content');
    let _this = $(this);
    audio = new Audio(mp3_url);
    audio.play();
    audio.onended = function() {
      _this.attr('status', '');
      _this.find('i').removeClass('fa-pause');
      _this.find('i').addClass('fa-play');
    };
    $(this).find('i').removeClass('fa-play');
    $(this).find('i').addClass('fa-pause');
    $(this).attr('status', 'playing');
  }
  return false;
})
$(".hide-toggle").on("click", function(){
  var count = $(".hide-toggle:checked").length;
  if(count > 0){
    $("#entry-status").removeClass("hide")
  }else{
    $("#entry-status").addClass("hide")
  }
})
$(".toggle_entries").on("click", function(){
  let checkedValues = $('.hide-toggle:checked').map(function() {
    return $(this).val();
  }).get();
  let status = $(this).data("status");
  $.ajax({
    url: "/admin/universal_tables/toggle_entries",
    method: "post",
    data: {"ids": checkedValues, "status": status},
    type: "json"
  }).done(function(){
    if(status == "hide"){
      $('.hide-toggle:checked').parents("tr").addClass("hidden_entry");
    }else{
      $('.hide-toggle:checked').parents("tr").removeClass("hidden_entry");
    }
  })
  return false;
})
</script>