Customise administrate

We've added some custom field types for dragonfly images,
text fields and markdown fields.

app/dashboards/category_dashboard.rb

@@ -1,4 +1,5 @@
 require "administrate/base_dashboard"
+require "administrate/fields/colour"
 
 class CategoryDashboard < Administrate::BaseDashboard
   READ_ONLY_ATTRIBUTES = [
@@ -14,16 +15,16 @@ class CategoryDashboard < Administrate::BaseDashboard
   # which determines how the attribute is displayed
   # on pages throughout the dashboard.
   ATTRIBUTE_TYPES = {
-    photos: Field::HasMany,
     id: Field::Number,
     name: Field::String,
+    slug: Field::String,
     description: Field::String,
     created_at: Field::DateTime,
     updated_at: Field::DateTime,
-    photo_id: Field::Number,
+    # photo_id: Field::Number,
-    base_colour: Field::String,
+    base_colour: Field::Colour,
     sort: Field::Number,
-    slug: Field::String,
+    photos: Field::HasMany,
   }
 
   # TABLE_ATTRIBUTES
@@ -31,7 +32,7 @@ class CategoryDashboard < Administrate::BaseDashboard
   #
   # By default, it's limited to four items to reduce clutter on index pages.
   # Feel free to remove the limit or customize the returned array.
-  TABLE_ATTRIBUTES = ATTRIBUTE_TYPES.keys.first(4)
+  TABLE_ATTRIBUTES = %i(base_colour name description photos)
 
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.

app/dashboards/page_dashboard.rb

@@ -1,4 +1,5 @@
 require "administrate/base_dashboard"
+require "administrate/fields/markdown"
 
 class PageDashboard < Administrate::BaseDashboard
   READ_ONLY_ATTRIBUTES = [
@@ -17,7 +18,7 @@ class PageDashboard < Administrate::BaseDashboard
     id: Field::Number,
     name: Field::String,
     title: Field::String,
-    content: Field::String,
+    content: Field::Markdown,
     created_at: Field::DateTime,
     updated_at: Field::DateTime,
   }

app/dashboards/photo_dashboard.rb

@@ -14,20 +14,19 @@ class PhotoDashboard < Administrate::BaseDashboard
   # which determines how the attribute is displayed
   # on pages throughout the dashboard.
   ATTRIBUTE_TYPES = {
-    categories: Field::HasMany,
+    title: Field::String,
+    image: Field::Image,
+    description: Field::String,
+    taken_at: Field::DateTime,
     id: Field::Number,
     flickr_url: Field::String,
     created_at: Field::DateTime,
     updated_at: Field::DateTime,
-    title: Field::String,
-    description: Field::String,
     sort: Field::Number,
     featured: Field::Boolean,
     enabled: Field::Boolean,
-    taken_at: Field::DateTime,
     views: Field::Number,
-    image_uid: Field::String,
+    categories: Field::HasMany,
-    image_name: Field::String,
   }
 
   # TABLE_ATTRIBUTES
@@ -35,7 +34,7 @@ class PhotoDashboard < Administrate::BaseDashboard
   #
   # By default, it's limited to four items to reduce clutter on index pages.
   # Feel free to remove the limit or customize the returned array.
-  TABLE_ATTRIBUTES = ATTRIBUTE_TYPES.keys.first(4)
+  TABLE_ATTRIBUTES = %i(image title taken_at views)
 
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.

app/views/admin/photos/_form.html.erb

@@ -0,0 +1,28 @@
+<%= form_for([Administrate::NAMESPACE, @page.resource], class: "form") do |f| %>
+  <% if @page.resource.errors.any? %>
+    <div id="error_explanation">
+      <h2>
+        <%= pluralize(@page.resource.errors.count, "error") %>
+        prohibited this <%= @page.resource_name %> from being saved:
+      </h2>
+
+      <ul>
+        <% @page.resource.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="form-inputs">
+    <% @page.attributes.each do |attribute| -%>
+      <div class="form-field form-field--<%= attribute.html_class %>">
+        <%= render_field attribute, f: f %>
+      </div>
+    <% end -%>
+  </div>
+
+  <div class="form-actions">
+    <%= f.submit %>
+  </div>
+<% end %>

app/views/admin/photos/_table.html.erb

@@ -0,0 +1,54 @@
+<table>
+  <thead>
+    <tr>
+      <% table_presenter.attribute_types.each do |attr_name, attr_type| %>
+        <th class="cell-label cell-label--<%= attr_type.html_class %>
+          cell-label--<%= table_presenter.ordered_html_class(attr_name) %>
+        ">
+        <%= link_to(params.merge(
+          table_presenter.order_params_for(attr_name)
+        )) do %>
+            <%= attr_name.to_s.titleize %>
+
+            <% if table_presenter.ordered_by?(attr_name) %>
+              <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= table_presenter.ordered_html_class(attr_name) %>">
+                <%= inline_svg("administrate/sort_arrow.svg") %>
+              </span>
+            <% end %>
+          <% end %>
+        </th>
+      <% end %>
+      <th colspan="2"></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% resources.each do |resource| %>
+      <tr class="table__row"
+          role="link"
+          tabindex="0"
+          data-url="<%= polymorphic_path([Administrate::NAMESPACE, resource]) -%>"
+          >
+        <% table_presenter.attributes_for(resource).each do |attribute| %>
+          <td class="cell-data cell-data--<%= attribute.html_class %>">
+            <%= render_field attribute %>
+          </td>
+        <% end %>
+
+        <td><%= link_to(
+          t("administrate.actions.edit"),
+          [:edit, Administrate::NAMESPACE, resource],
+          class: "action-edit",
+        ) %></td>
+
+        <td><%= link_to(
+          t("administrate.actions.destroy"),
+          [Administrate::NAMESPACE, resource],
+          class: "table__action--destroy",
+          method: :delete,
+          data: { confirm: t("administrate.actions.confirm") }
+        ) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

app/views/admin/photos/edit.html.erb

@@ -0,0 +1,8 @@
+<% content_for(:title) { "Edit #{@page.page_title}" } %>
+
+<header class="header">
+  <h1 class="header-heading"><%= content_for(:title) %></h1>
+  <%= link_to "Show #{@page.resource}", [Administrate::NAMESPACE, @page.resource], class: "button" %>
+</header>
+
+<%= render "form" %>

app/views/admin/photos/index.html.erb

@@ -0,0 +1,32 @@
+<% content_for(:title) { @page.resource_name.pluralize.titleize } %>
+
+<% content_for(:search) do %>
+  <form class="search">
+    <span class="search__icon">
+      <%= inline_svg "administrate/search.svg" %>
+    </span>
+    <input
+      type="text"
+      name="search"
+      class="search__input"
+      placeholder="Search"
+      value="<%= @search_term %>"
+    />
+    <span class="search__hint">
+      Press enter to search
+    </span>
+  </form>
+<% end %>
+
+<header class="header">
+  <h1 class="header-heading"><%= content_for(:title) %></h1>
+  <%= link_to(
+    "New #{@page.resource_name.titleize.downcase}",
+    [:new, Administrate::NAMESPACE, @page.resource_name],
+    class: "button",
+  ) %>
+</header>
+
+<%= render "table", table_presenter: @page, resources: @resources %>
+
+<%= paginate @resources %>

app/views/admin/photos/new.html.erb

@@ -0,0 +1,8 @@
+<% content_for(:title) { "New #{@page.resource_name.titleize}" } %>
+
+<header class="header">
+  <h1 class="header-heading"><%= content_for(:title) %></h1>
+  <%= link_to 'Back', @page.resource_name.pluralize, class: "button" %>
+</header>
+
+<%= render 'form' %>

app/views/admin/photos/show.html.erb

@@ -0,0 +1,19 @@
+<% content_for(:title) { @page.page_title } %>
+
+<header class="header">
+  <h1 class="header-heading"><%= content_for(:title) %></h1>
+  <%= link_to(
+    "Edit",
+    [:edit, Administrate::NAMESPACE, @page.resource],
+    class: "button",
+  ) %>
+</header>
+
+<dl>
+  <% @page.attributes.each do |attribute| %>
+    <dt class="attribute-label"><%= attribute.name.titleize %></dt>
+
+    <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+        ><%= render_field attribute %></dd>
+  <% end %>
+</dl>

app/views/fields/colour/_form.html.erb

@@ -0,0 +1,2 @@
+<%= f.label field.attribute %>
+<%= f.color_field field.attribute, style: 'height: 2.35em; width: 5em;' %>

app/views/fields/colour/_index.html.erb

@@ -0,0 +1,2 @@
+<%= content_tag :div, nil,
+  style: "height: 1.5em; width: 1.5em; background-color: #{field.data}" %>

app/views/fields/colour/_show.html.erb

@@ -0,0 +1,2 @@
+<%= content_tag :span, field.data,
+  style: "color: white; padding: 0.2em 0.5em; background-color: #{field.data}" %>

app/views/fields/image/_form.html.erb

@@ -0,0 +1,3 @@
+<%= f.label field.attribute %>
+<%= image_tag field.data.thumb('32x32#').url, alt: nil if field.data.present? %>
+<%= f.file_field field.attribute %>

app/views/fields/image/_index.html.erb

@@ -0,0 +1 @@
+<%= image_tag field.data.thumb('50x50#').url, alt: nil %>

app/views/fields/image/_show.html.erb

@@ -0,0 +1 @@
+<%= image_tag field.data.thumb('400x400').url %>

app/views/fields/markdown/_form.html.erb

@@ -0,0 +1,2 @@
+<%= f.label field.attribute %>
+<%= f.text_area field.attribute %>

app/views/fields/markdown/_index.html.erb

@@ -0,0 +1 @@
+<%= field.truncate %>

app/views/fields/markdown/_show.html.erb

@@ -0,0 +1 @@
+<%= field.rendered %>

app/views/fields/text/_form.html.erb

@@ -0,0 +1,2 @@
+<%= f.label field.attribute %>
+<%= f.text_area field.attribute %>

app/views/fields/text/_index.html.erb

@@ -0,0 +1 @@
+<%= field.truncate %>

app/views/fields/text/_show.html.erb

@@ -0,0 +1 @@
+<%= field.data %>

lib/administrate/fields/colour.rb

@@ -0,0 +1,6 @@
+module Administrate
+  module Field
+    class Colour < Administrate::Field::Base
+    end
+  end
+end

lib/administrate/fields/markdown.rb

@@ -0,0 +1,15 @@
+module Administrate
+  module Field
+    class Markdown < Administrate::Field::Base
+      def rendered
+        renderer.render(data).html_safe
+      end
+
+      private
+
+      def renderer
+        Redcarpet::Markdown.new(Redcarpet::Render::HTML, extensions: {})
+      end
+    end
+  end
+end

lib/administrate/fields/text.rb

@@ -0,0 +1,6 @@
+module Administrate
+  module Field
+    class Text < Administrate::Field::Base
+    end
+  end
+end