notebook/app/views/documents/components/_smart_sidebar.html.erb

<%# Generate reference sidebars -- todo this is hella slow %>
<% if current_user.on_premium_plan? %>
  <% @linked_entities.each do |entity| %>
    <% linked_entity = entity.entity %>
    <% entity_class = linked_entity.class %>
    <% next unless linked_entity.present? %>

    <% serialized_entity = ContentSerializer.new(linked_entity) %>

    <ul id="quick-reference-<%= entity.entity_type %>-<%= entity.entity_id %>" class="sidenav quick-reference-sidenav">
      <li>
        <div class="user-view">
          <div class="background">
            <%= image_tag "card-headers/#{entity.entity_type.downcase.pluralize}.jpg", width: '100%' %>
          </div>
          <a href="#name">
            <h1 class="white-text name bordered-text">
              <i class="material-icons <%= entity_class.color %>-text left">
                <%= entity_class.icon %>
              </i>
              <%= linked_entity.name %>
            </h1>
          </a>
          <a href="#email">
            <span class="white-text description bordered-text">
              <%= truncate linked_entity.description %>
            </span>
          </a>
        </div>
      </li>

      <li><a href="#" class="subheader">Quick-reference</a></li>

      <% serialized_entity.data[:categories].each do |serialized_category| %>
        <% next if serialized_category[:label].downcase == 'gallery' %>
        <% next if serialized_category[:label].downcase == 'contributors' %>
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <li class="bold waves-effect">
              <a class="collapsible-header" tabindex="0">
                <i class="material-icons left"><%= serialized_category[:icon] %></i>
                <%= serialized_category[:label] %>
                <i class="material-icons chevron">chevron_right</i>
              </a>
              <div class="collapsible-body reference-fields-container">
                <ul class="reference-fields-list selectable">
                  <% any_filled_in_fields = false %>
                  <% serialized_category[:fields].each do |serialized_field| %>
                    <% next unless serialized_field[:value].present? %>
                    <% any_filled_in_fields = true %>
                    <li>
                      <a href="#" class="subheader"><%= serialized_field[:label] %></a>
                    </li>

                    <% if serialized_field[:type] == "text_area" %>
                      <li><%= serialized_field[:value] %></li>
                    <% elsif serialized_field[:type] == "link" %>
                      <% serialized_field[:value].each do |related_page| %>
                        <li>
                          <%= link_to related_page do %>
                            <i class="material-icons <%= related_page.class.color %>-text left">
                              <%= related_page.class.icon %>
                            </i>
                            <%= related_page.name %>
                          <% end %>
                        </li>
                      <% end %>
                    <% elsif serialized_field[:type] == "name" %>
                      <li><%= serialized_field[:value] %></li>

                    <% elsif serialized_field[:type] == "universe" %>
                      <li>
                        <%= link_to serialized_entity.universe do %>
                          <i class="material-icons <%= Universe.color %>-text left"><%= Universe.icon %></i>
                          <%= serialized_entity.universe.name %>
                        <% end %>
                      </li>
                    <% end %>
                  <% end %>

                  <% if !any_filled_in_fields %>
                    <li>Nothing has been answered in this category... yet!</li>
                  <% end %>
                </ul>
              </div>
            </li>
          </ul>
        </li>
      <% end %>

      <li class="divider"></li>
      <li><a href="#" class="subheader">Actions</a></li>

      <li>
        <%= link_to polymorphic_path(linked_entity), class: "blue-text", target: '_new' do %>
          <i class="material-icons left <%= entity_class.color %>-text"><%= entity_class.icon %></i>
          View <%= linked_entity.name %>
        <% end %>
      </li>
      <li>
        <%= link_to edit_polymorphic_path(linked_entity), class: "green-text" do %>
          <i class="material-icons left <%= entity_class.color %>-text"><%= entity_class.icon %></i>
          Edit <%= linked_entity.name %>
        <% end %>
      </li>
      <li>
        <%= link_to destroy_entity_document_path(entity), class: "red-text" do %>
          <i class="material-icons left <%= entity_class.color %>-text">delete</i>
          Remove this quick reference
        <% end %>
      </li>
    </ul>
  <% end %>
<% end %>

<div class="smart-sidebar hide-on-med-and-down">
  <div class="entities-container">
    <div class="grey-text center">Metadata</div>
    <a href="#document-notes-modal"
        class="hoverable modal-trigger entity-trigger white-text <%= Document.color %>"
        data-target="document-notes-modal">
      <i class="material-icons small left">
        <%= Document.icon %>
      </i>
      Document notes
    </a>

    <% if current_user.on_premium_plan? %>
      <div class="grey-text center">Quick reference</div>
      <% @linked_entities.each do |entity| %>
        <% entity_class = entity.entity_type.constantize %>
        <% linked_entity = entity.entity %>
        <% next unless linked_entity.present? %>

        <a href="#"
            class="hoverable entity-trigger sidenav-trigger white-text <%= entity_class.color %>"
            data-target="quick-reference-<%= entity.entity_type %>-<%= entity.entity_id %>">
          <i class="material-icons small left">
            <%= entity_class.icon %>
          </i>
          <%= entity.linked_name_if_possible %>
        </a>
      <% end %>

      <a href="#"
          class="hoverable entity-trigger white-text orange js-link-entity">
        <i class="material-icons small left">add
        </i>
        Add a page
      </a>
    <% end %>
  </div>
</div>

<%# todo this could be a partial with configurable title/text and reused on analysis page %>
<div id="entity-link-modal" class="modal">
  <div class="modal-content">
    <h4>Add a quick reference</h4>
    <p>
      Select the page below you'd like to link to this document. 
      You can then click it at any time to quickly view that page without leaving your document.
    </p>
    <%= form_with url: link_entity_documents_path, method: :post, authenticity_token: false do |f| %>
      <%= f.hidden_field :document_id,          value: document.id %>
      <%= f.hidden_field :document_analysis_id, value: -1 %>
      <%= f.hidden_field :document_entity_id,   value: -1 %>
      <%= f.hidden_field :entity_type,          value: nil %>
      <%= f.hidden_field :entity_id,            value: nil %>

      <% @current_user_content.each do |content_type, content_list| %>
        <% content_type_class = content_type.constantize %>
        <% next if content_type == 'Document' %>
        <h5><%= content_type.pluralize %></h5>
        <ul class="collection">
          <% content_list.sort_by(&:name).each do |content| %>
            <a href="#" 
               class="<%= content_type_class.color %>-text js-link-entity-selection" 
               data-id="<%= content.id %>"
               data-type="<%= content_type %>">
              <li class="collection-item hoverable">
                <i class="material-icons left"><%= content_type_class.icon %></i>
                <%= content.name %>
                <span class="secondary-content">
                  <i class="material-icons">link</i>
                </span>
              </li>
            </a>
          <% end %>
        </ul>
      <% end %>
    <% end %>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
  </div>
</div>

<div id="document-notes-modal" class="modal modal-fixed-footer">
  <%= form_for(document, remote: true, html: { id: 'document-notes-form' }) do |f| %>
    <div class="modal-content">
      <h4>
        <i class="material-icons medium <%= Document.color %>-text left">
          <%= Document.icon %>
        </i>
        Document notes
      </h4>
      <p class="grey-text">This field will automatically expand as you write.</p>
      <%= f.text_area :notes_text, class: 'materialize-textarea', placeholder: "Write as little or as much as you'd like!", style: 'min-height: 400px; border: 1px solid #ccc; padding: 10px;' %>
      <p class="grey-text">
        <strong>To save your notes, please click "Save Changes" below.</strong>
        Closing this dialog will preserve your unsaved changes until you refresh the page, but to keep your notes you must save them!
      </p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Ignore changes</a>
      <%= link_to 'Save changes', "#", onclick: '$("form#document-notes-form").submit()', class: 'modal-close waves-effect waves-green btn-flat lighten-3 ' + Document.color %>
    </div>
  <% end %>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $('.js-link-entity').click(function () {
      $('#entity-link-modal').modal('open');
      return false;
    });

    $('.js-link-entity-selection').click(function () {
      var entity = $(this);
      var form   = $(this).closest('form');

      form.find('input[name=entity_id]').val(entity.data('id'));
      form.find('input[name=entity_type]').val(entity.data('type'));
      form.submit();
    });
  });
</script>