add description editing

assets/js/misc.js

@@ -19,7 +19,7 @@ function formResult({target, detail}) {
     resultEl.innerHTML = response;
     resultEl.classList.remove('hidden');
     formEl.classList.add('hidden');
-    formEl.querySelector('input[type="submit"]').disabled = false;
+    formEl.querySelector('input[type="submit"],button').disabled = false;
   }
 
   for (const element in elements) {

lib/philomena/images.ex

@@ -98,6 +98,12 @@ defmodule Philomena.Images do
     |> Repo.update()
   end
 
+  def update_description(%Image{} = image, attrs) do
+    image
+    |> Image.description_changeset(attrs)
+    |> Repo.update()
+  end
+
   def update_source(%Image{} = image, attribution, attrs) do
     image_changes =
       image

lib/philomena/images/image.ex

@@ -119,6 +119,7 @@ defmodule Philomena.Images.Image do
     |> cast(attrs, [:anonymous, :source_url, :description])
     |> change(first_seen_at: now)
     |> change(attribution)
+    |> validate_length(:description, max: 50_000, count: :bytes)
   end
 
   def image_changeset(image, attrs) do
@@ -170,6 +171,12 @@ defmodule Philomena.Images.Image do
     |> change(processed: true)
   end
 
+  def description_changeset(image, attrs) do
+    image
+    |> cast(attrs, [:description])
+    |> validate_length(:description, max: 50_000, count: :bytes)
+  end
+
   def cache_changeset(image) do
     changeset = change(image)
     image = apply_changes(changeset)

lib/philomena_web/controllers/image/description_controller.ex

@@ -0,0 +1,30 @@
+defmodule PhilomenaWeb.Image.DescriptionController do
+  use PhilomenaWeb, :controller
+
+  alias Philomena.Textile.Renderer
+  alias Philomena.Images.Image
+  alias Philomena.Images
+
+  plug PhilomenaWeb.FilterBannedUsersPlug
+  plug PhilomenaWeb.CanaryMapPlug, update: :edit_description
+  plug :load_and_authorize_resource, model: Image, id_name: "image_id", persisted: true
+
+  def update(conn, %{"image" => image_params}) do
+    image = conn.assigns.image
+
+    case Images.update_description(image, image_params) do
+      {:ok, image} ->
+        Images.reindex_image(image)
+
+        body = Renderer.render_one(%{body: image.description})
+
+        conn
+        |> put_view(PhilomenaWeb.ImageView)
+        |> render("_description.html", layout: false, image: image, body: body)
+
+      {:error, changeset} ->
+        conn
+        |> render("_form.html", layout: false, image: image, changeset: changeset)
+    end
+  end
+end

lib/philomena_web/router.ex

@@ -93,6 +93,7 @@ defmodule PhilomenaWeb.Router do
       resources "/sources", Image.SourceController, only: [:update], singleton: true
       resources "/tag_changes", Image.TagChangeController, only: [:index]
       resources "/source_changes", Image.SourceChangeController, only: [:index]
+      resources "/description", Image.DescriptionController, only: [:update], singleton: true
     end
     scope "/tags", Tag, as: :tag do
       resources "/autocomplete", AutocompleteController, only: [:show], singleton: true

lib/philomena_web/templates/image/_description.html.slime

@@ -0,0 +1,12 @@
+div
+  p
+    = if can?(@conn, :edit_description, @image) do
+      a.button#edit-description href="#" data-click-focus="#description" data-click-hide=".image-description" data-click-show="#description-form" title="Edit description" accessKey="d"
+        i.fa.fa-pencil>
+        ' Description:
+
+    - else
+      ' Description:
+
+  .image-description__text
+    == @body

lib/philomena_web/templates/image/description/_form.html.slime

@@ -0,0 +1,15 @@
+= form_for @changeset, Routes.image_description_path(@conn, :update, @image), [class: "block hidden", id: "description-form", data: [remote: true]], fn f ->
+  = if @changeset.action do
+    .alert.alert-danger
+      p Oops, something went wrong! Please check the errors below.
+
+  = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
+  = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
+
+  .field
+    = textarea f, :description, class: "input input--wide js-toolbar-input", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source."
+  
+  = submit "Save changes", class: "button", autocomplete: "off", data: [disable_with: raw("Saving…")]
+
+  button.button.button--separate-left type="reset" data-click-hide="#description-form" data-click-show=".image-description"
+    ' Cancel

lib/philomena_web/templates/image/show.html.slime

@@ -3,11 +3,8 @@
 
 .layout--narrow
   .image-description
-    div
+    = render PhilomenaWeb.ImageView, "_description.html", image: @image, body: @description, conn: @conn
-      p
+  = render PhilomenaWeb.Image.DescriptionView, "_form.html", image: @image, changeset: @image_changeset, conn: @conn
-        | Description:
-      .image-description__text
-        == @description
 
   = render PhilomenaWeb.ImageView, "_tags.html", image: @image, changeset: @image_changeset, conn: @conn
   = render PhilomenaWeb.ImageView, "_source.html", image: @image, changeset: @image_changeset, conn: @conn

lib/philomena_web/views/image/description_view.ex

@@ -0,0 +1,3 @@
+defmodule PhilomenaWeb.Image.DescriptionView do
+  use PhilomenaWeb, :view
+end