app/views/content/list/_document_table.html.erb
<%#
Usage:
render partial: 'content/list/document_table', locals: {
content_list: @documents,
content_type: Document,
folders: @folders.pluck(:title, :id),
tags: PageTag.where(page_type: 'Document', page_id: @documents.pluck(:id)).to_a
}
%>
<% if content_list.any? %>
<div class="row">
<div class="col s12 m12 l9">
<table class="z-depth-1 js-content-cards-list document-list-table">
<thead>
<tr>
<th></th>
<th style="width: 60%">Title</th>
<th>Length</th>
<th>Last edited</th>
<th></th>
</tr>
</thead>
<% content_list.each do |document| %>
<tr class="js-content-card-container hoverable" style="cursor: pointer">
<td class="center modal-trigger" data-target="document-info-<%= document.id %>">
<i class="material-icons medium <%= Document.text_color %>"><%= Document.icon %></i>
</td>
<td class="modal-trigger" data-target="document-info-<%= document.id %>">
<div>
<div>
<% if user_signed_in? && document.user == current_user %>
<i class="material-icons left orange-text"
data-content-id="<%= document.id %>"
data-content-class="<%= document.class.name.downcase.pluralize %>">
<%= document.favorite? ? 'star' : 'star_border' %>
</i>
<% else %>
<i class="material-icons left orange-text tooltipped" data-tooltip="This document has been shared with you.">folder_shared</i>
<% end %>
<strong style="font-size: 1.2em" class="js-content-name">
<%= document.title %>
</strong>
<% if document.folder_id %>
in <span class="<%= Folder.text_color %>"><%= document.folder.title %></span>
<% end %>
</div>
<div class="<%= User.text_color %>">
<i class="material-icons left"><%= User.icon %></i>
by <%= document.user.display_name %>
</div>
<% if document.universe %>
<div class="clearfix <%= Universe.text_color %>">
<i class="material-icons left"><%= Universe.icon %></i>
in <%= document.universe.try(:name) || 'Unknown universe' %>
</div>
<% end %>
<% if document.respond_to?(:page_tags) %>
<% page_tags = document.page_tags %>
<% if page_tags.any? %>
<p class="tags-container">
<% page_tags.each do |tag| %>
<span class="new badge <%= params[:tag] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
<% end %>
</p>
<% end %>
<% end %>
</div>
</td>
<td class="modal-trigger" data-target="document-info-<%= document.id %>">
<div>
<i class="material-icons tiny <%= Document.text_color %>" style="position: relative; top: 3px;">spellcheck</i>
<%= number_with_delimiter document.word_count %>
<%= 'word'.pluralize(document.word_count) %>
</div>
<div>
<i class="material-icons tiny <%= Document.text_color %>" style="position: relative; top: 3px;">timer</i>
<%= document.reading_estimate %>
</div>
</td>
<td class="modal-trigger" data-target="document-info-<%= document.id %>">
<span class="tooltipped" data-tooltip="Last edited at <%= document.updated_at.strftime("%m/%d/%Y %H:%M UTC") %>">
<%# document.updated_at == document.created_at ? 'created' : 'updated' %>
<%= time_ago_in_words document.updated_at %> ago
</span>
</td>
<td>
<div><%= link_to 'View', document_path(document), class: "btn btn-flat blue-text" %></div>
<div><%= link_to 'Edit', edit_document_path(document), class: "btn btn-flat green-text", target: '_new' %></div>
</td>
</tr>
<% end %>
</table>
<%# Build info modals %>
<% content_list.each do |document| %>
<div id="document-info-<%= document.id %>" class="modal modal-fixed-footer">
<div class="modal-content">
<h4 class="<%= Document.text_color %>">
<i class="material-icons left large"><%= Document.icon %></i>
<%= document.title %>
<%
if document.favorite?
icon = 'star'
action = 'Unfavorite'
else
icon = 'star_border'
action = 'Favorite'
end
%>
<% if user_signed_in? && document.user == current_user %>
<i class="material-icons right orange-text favorite-button tooltipped"
data-tooltip="<%= action %> this page"
data-content-id="<%= document.id %>"
data-content-class="<%= document.class.name.downcase.pluralize %>">
<%= icon %>
</i>
<% end %>
</h4>
<div class="left">
<div>
<%= link_to document.user, class: "#{User.text_color}" do %>
<i class="material-icons left"><%= User.icon %></i>
by <%= document.user.display_name %>
<% end %>
</div>
<% if document.universe %>
<div class="clearfix">
<%= link_to document.universe, class: "#{Universe.text_color}" do %>
<i class="material-icons left"><%= Universe.icon %></i>
in <%= document.universe.try(:name) || 'Unknown universe' %>
<% end %>
</div>
<% end %>
</div>
<div class="clearfix row">
<%= form_for document, remote: true do |f| %>
<div class="col s12 m12 l4">
<h5>
<i class="material-icons left <%= Folder.text_color %>"><%= Folder.icon %></i>
Folder
</h5>
<% if current_user.can_update?(document) %>
<%=
f.select :folder_id, folders,
{ include_blank: 'No folder' },
{ class: ' autosave-closest-form-on-change' }
%>
<style>
.modal .dropdown-content {
max-height: 350px;
}
</style>
<% else %>
<% if document.folder_id %>
<%= link_to document.folder.title, document.folder, class: "#{Folder.text_color}" %>
<% else %>
Not in a folder
<% end %>
<% end %>
<h5>
<i class="material-icons left <%= Universe.text_color %>"><%= Universe.icon %></i>
Universe
</h5>
<% if current_user.can_update?(document) %>
<%=
f.select :universe_id, @linkables_cache.fetch('Universe', []),
{ include_blank: 'No universe' },
{ class: ' autosave-closest-form-on-change' }
%>
<% else %>
<% if document.universe_id %>
<%= link_to document.universe.name, document.universe, class: "#{Universe.text_color}" %>
<% else %>
Not in a universe
<% end %>
<% end %>
<h5>
<i class="material-icons left <%= Document.text_color %>">info</i>
About
</h5>
<ul>
<li>
<i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
<%= number_with_delimiter document.word_count %>
<%= 'word'.pluralize(document.word_count) %>
</li>
<li>
<i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
<%= document.reading_estimate %>
</li>
<li>
<i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
created <%= time_ago_in_words document.created_at %> ago
</li>
<% if document.created_at != document.updated_at %>
<li>
<i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
last updated <%= time_ago_in_words document.updated_at %> ago
</li>
<% end %>
<li>
<%= link_to document_document_revisions_path(document) do %>
<i class="material-icons tiny" style="position: relative; top: 3px;">content_copy</i>
View revision log
<% end %>
</li>
<li>
<%= link_to plaintext_document_path(document), target: '_blank' do %>
<i class="material-icons tiny" style="position: relative; top: 3px;">title</i>
View in plaintext
<% end %>
</li>
</ul>
</div>
<div class="col s12 m12 l8" style="padding-right: 1em;">
<% if current_user.can_update?(document) %>
<div class="content-field">
<h5>
<i class="material-icons left <%= Document.text_color %>">info</i>
Document synopsis
</h5>
<div class="input-field">
<%= f.text_area :synopsis, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: 'What happens in this document?' %>
<span class="helper-text">Changes will automatically save.</span>
</div>
</div>
<div class="content-field">
<h5>
<i class="material-icons left <%= Document.text_color %>">info</i>
Document notes
</h5>
<div class="input-field">
<%= f.text_area :notes_text, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: "Write as little or as much as you'd like!" %>
<span class="helper-text">Changes will automatically save. These notes will be available while writing.</span>
</div>
</div>
<h5>
<i class="material-icons left <%= Document.text_color %>"><%= PageTag.icon %></i>
Document tags
</h5>
<div class="content-field tags">
<div class="input-field">
<div class="chips chips-autocomplete chips-initial" id="chips-for-<%= document.id %>"></div>
<%=
hidden_field_tag 'field[value]',
document.page_tags.join(PageTag::SUBMISSION_DELIMITER),
class: 'hidden_page_tags_value'
%>
<div class="help-text show-when-focused">
<i class="material-icons tiny"><%= PageTag.icon %></i>
Type and press enter to create a new tag, or click any of the suggested tags below to add it.
</div>
<% if @suggested_page_tags %>
<div class="tags-container show-when-focused">
<% @suggested_page_tags.each do |tag| %>
<%=
link_to '#', class: 'js-add-tag' do
%>
<span class="new badge grey left hoverable" data-badge-caption="<%= tag %>"></span>
<% end %>
<% end %>
</div>
<% end %>
<div class="clearfix"></div>
</div>
</div>
<%= content_for :javascript do %>
function update_hidden_page_tag_value(e) {
var chips = M.Chips.getInstance($(e).parent().find('.chips')).chipsData.map(function (c) {
return c['tag'];
});
var hidden_input = $(e).parent().find('.hidden_page_tags_value');
hidden_input.val(chips.join('<%= PageTag::SUBMISSION_DELIMITER %>'));
// Trigger autosave manually
hidden_input.closest('form').submit();
M.toast({ html: "Saving changes..." });
}
var chips = $('#chips-for-<%= document.id %>').chips({
placeholder: 'Add tags',
secondaryPlaceholder: '+ Tag',
autocompleteOptions: {
data: {
<% tags.pluck(:tag).each do |tag| %>
'<%= tag %>': null,
<% end %>
},
limit: 100,
minLength: 1
},
data: [
<% document.page_tags.pluck(:tag).each do |tag| %>
{tag: '<%= tag %>'},
<% end %>
],
onChipAdd: update_hidden_page_tag_value,
onChipDelete: update_hidden_page_tag_value
});
<% end %>
<% else %>
<h5>Document synopsis</h5>
<% if document.synopsis %>
<%= simple_format ContentFormatterService.show(
text: document.synopsis,
viewing_user: current_user
) %>
<% else %>
<em>None yet</em>
<% end %>
<h5>Document notes</h5>
<% if document.notes_text %>
<%= simple_format ContentFormatterService.show(
text: document.notes_text,
viewing_user: current_user
) %>
<% else %>
<em>None yet</em>
<% end %>
<% if document.page_tags.any? %>
<h5>Document tags</h5>
<%=
render partial: "content/display/attribute_value/tags",
locals: { value: document.page_tags.pluck(:tag), content: document }
%>
<% end %>
<% end %>
</div>
<% end %>
</div>
</div>
<div class="modal-footer">
<% if current_user.can_delete?(document) %>
<%= link_to document_path(document), method: :delete, class: 'red white-text btn hoverable' do %>
<i class="material-icons left">delete</i>
Delete
<% end %>
<% end %>
<% if current_user.can_read?(document) %>
<%= link_to polymorphic_path(document), class: 'blue white-text text-lighten-1 btn hoverable' do %>
<i class="material-icons left"><%= content_type.icon %></i>
View
<% end %>
<% end %>
<% if current_user.can_update?(document) %>
<%= link_to edit_polymorphic_path(document), class: 'green white-text btn hoverable', target: document.is_a?(Document) ? '_blank' : '_self' do %>
<i class="material-icons left"><%= content_type.icon %></i>
Edit
<% end %>
<% end %>
<% if current_user.can_update?(document) %>
<%= link_to analysis_document_path(document), class: 'orange white-text btn left hoverable', target: document.is_a?(Document) ? '_blank' : '_self' do %>
<i class="material-icons left">bar_chart</i>
Analyze
<% end %>
<% end %>
</div>
</div>
<% end %>
</div>
<div class="col s12 m12 l3">
<div class="card" style="margin: 0">
<div class="card-content">
<div class="card-title">Statistics</div>
<ul>
<li>
<i class="material-icons <%= Document.text_color %> left"><%= Document.icon %></i>
<strong><%= number_with_delimiter content_list.count %></strong>
<%= 'document'.pluralize(content_list.count) %>
</li>
<li class="clearfix">
<% total_word_count = content_list.sum { |doc| doc.cached_word_count || 0 } %>
<i class="material-icons <%= Document.text_color %> left">spellcheck</i>
totalling
<strong><%= number_with_delimiter total_word_count %></strong>
<%= 'word'.pluralize(total_word_count) %>
</li>
<% if tags.any? %>
<li class="clearfix">
<br />
<div class="card-title"><small>Tags</small></div>
<div class="tags-container">
<% tags.each do |tag| %>
<%= link_to params.permit(:tag).merge({ tag: tag.slug }) do %>
<span class="new badge <%= Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
<% end %>
<% end %>
</div>
</li>
<% end %>
<% universes = Universe.where(id: content_list.pluck(:universe_id)) %>
<% if universes.any? %>
<li class="clearfix">
<br />
<div class="card-title"><small>Universes</small></div>
<div class="tags-container">
<% universes.each do |universe| %>
<%= link_to universe do %>
<span class="new badge <%= Universe.color %> left" data-badge-caption="<%= universe.name %>"></span>
<% end %>
<% end %>
</div>
</li>
<% end %>
<% authors = User.where(id: content_list.pluck(:user_id)) %>
<% if authors.count > 1 %>
<li class="clearfix">
<br />
<div class="card-title"><small>Authors</small></div>
<div class="tags-container">
<% User.where(id: content_list.pluck(:user_id)).each do |user| %>
<%= link_to user do %>
<span class="new badge <%= User.color %> left" data-badge-caption="<%= user.display_name %>"></span>
<% end %>
<% end %>
</div>
</li>
<% end %>
</ul>
<div class="clearfix"></div>
</div>
</div>
<%= link_to data_documents_path do %>
<div class="card-panel hoverable brown white-text" style="margin: 0">
<i class="material-icons left">lock</i>
See more statistics in your Data Vault
</div>
<% end %>
<%= link_to '#new-folder-modal', class: "#{Folder.color} modal-trigger" do %>
<div class="card-panel hoverable <%= Folder.color %> white-text">
<i class="material-icons left"><%= Folder.icon %></i>
Create a document folder
</div>
<% end %>
</div>
</div>
<% else %>
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="hoverable card center" style="margin: 50px 0; padding: 50px 0; border-bottom: 10px solid <%= Document.hex_color %>">
<h4>
You haven't created any documents
<% if @universe_scope %>in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + "-text" %> universe<% end %>
<% if @folder %>in this folder<% end %>
yet!
</h4>
<h1>
<i class="material-icons <%= Document.text_color %>" style="font-size: 200%">
<%= Document.icon %>
</i>
</h1>
<p>
You can create an unlimited number of documents with no limits on length. Enjoy!
</p>
<br />
<%= link_to "Create your first document", new_document_path({folder: @folder.try(:id)}), target: '_blank', class: "btn #{Document.color}" %>
</div>
</div>
</div>
<% end %>
<style type="text/css">
.document-list-table {
background: white;
}
body.dark .document-list-table {
background: #4D4D4F;
}
</style>