Add toggling fields in translation form

lib/outlook/articles/article.ex

@@ -12,6 +12,7 @@ defmodule Outlook.Articles.Article do
     field :language, :string, default: "EN"
     field :title, :string
     field :url, :string
+    field :remarks, :string
     belongs_to :author, Author
     has_many :translations, Translation, on_delete: :delete_all
 
@@ -21,7 +22,7 @@ defmodule Outlook.Articles.Article do
   @doc false
   def changeset(article, attrs) do
     article
-    |> cast(attrs, [:title, :content, :url, :language, :date, :author_id])
+    |> cast(attrs, [:title, :content, :url, :language, :date, :author_id, :remarks])
     |> validate_required([:title, :content, :url, :language, :date, :author_id])
     |> foreign_key_constraint(:author_id)
   end

lib/outlook/translations/translation.ex

@@ -15,6 +15,7 @@ defmodule Outlook.Translations.Translation do
     field :public_content, :string
     field :title, :string
     field :unauthorized, :boolean, default: false
+    field :remarks, :string
     belongs_to :user, User
     belongs_to :article, Article
 
@@ -24,7 +25,7 @@ defmodule Outlook.Translations.Translation do
   @doc false
   def changeset(translation, attrs) do
     translation
-    |> cast(attrs, [:language, :title, :teaser, :date, :public, :unauthorized, :article_id, :public_content])
+    |> cast(attrs, [:language, :title, :teaser, :date, :public, :unauthorized, :article_id, :public_content, :remarks])
     |> cast(attrs, [:content])
     |> validate_required([:language, :title, :content, :date, :public, :unauthorized, :article_id])
     |> unique_constraint([:language, :article_id],

lib/outlook_web/live/article_live/form_component.ex

@@ -26,6 +26,7 @@ defmodule OutlookWeb.ArticleLive.FormComponent do
         <.input field={{f, :language}} type="select" label="language"
             options={Application.get_env(:outlook,:deepl)[:source_langs]} />
         <.input field={{f, :date}} type="datetime-local" label="date" />
+        <.input field={{f, :remarks}} type="textarea" label="remarks" class="h-28" />
         <:actions>
           <.button phx-disable-with="Saving...">Save Article</.button>
         </:actions>

lib/outlook_web/live/article_live/show.html.heex

@@ -40,6 +40,10 @@
   <a href="#" class="hide-link" phx-click={JS.remove_class("show-boundary", to: ".article")}>hide boundaries</a>
   <.render_doc tree={@article_content} />
 </div>
+<div class="my-4">
+  <div>Remarks:</div>
+  <%= @article.remarks |> tidy_raw %>
+</div>
 <div class="h-10" />
 
 <.link class="text-sm font-semibold" navigate={~p"/translations/new?article_id=#{@article.id}"}>New Translation</.link>

lib/outlook_web/live/translation_live/form_component.ex

@@ -14,6 +14,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
           <:subtitle>Use this form to manage translation records in your database.</:subtitle>
         </.header>
 
+        <div phx-click={JS.toggle(to: ".more-fields")} class="cursor-pointer">more/less fields</div>
         <.simple_form
           :let={f}
           for={@changeset}
@@ -23,14 +24,19 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
           phx-submit="save"
         >
           <.input field={{f, :article_id}} type="hidden" />
-          <.input field={{f, :language}} type="select" label="language"
-              options={Application.get_env(:outlook,:deepl)[:target_langs]} />
+          <div class="more-fields">
+            <.input field={{f, :language}} type="select" label="language"
+                options={Application.get_env(:outlook,:deepl)[:target_langs]} />
+          </div>
           <.input field={{f, :title}} type="text" label="title" />
-          <.input field={{f, :teaser}} type="textarea" label="teaser" class="h-28" />
-          <.input field={{f, :date}} type="datetime-local" label="date" />
-          <div class="flex items-center justify-between">
-            <.input field={{f, :public}} type="checkbox" label="public" />
-            <.input field={{f, :unauthorized}} type="checkbox" label="unauthorized" />
+          <div class="more-fields">
+            <.input field={{f, :teaser}} type="textarea" label="teaser" class="h-28" />
+            <.input field={{f, :date}} type="datetime-local" label="date" />
+            <div class="flex items-center justify-between">
+              <.input field={{f, :public}} type="checkbox" label="public" />
+              <.input field={{f, :unauthorized}} type="checkbox" label="unauthorized" />
+            </div>
+            <.input field={{f, :remarks}} type="textarea" label="remarks" class="h-28" />
           </div>
           <input type="hidden" id="continue_edit" name="continue_edit" value="false" />
           <input type="hidden" id="publish" name="publish" value="false" />

lib/outlook_web/live/translation_live/show.html.heex

@@ -11,11 +11,12 @@
 <.list>
   <:item title="Language"><%= @translation.language %></:item>
   <:item title="Title"><%= @translation.title %></:item>
-  <:item title="Teaser"><%= @translation.teaser %></:item>
+  <:item title="Teaser"><%= @translation.teaser |> tidy_raw %></:item>
   <%!-- <:item title="Content"><%= @translation.content %></:item> --%>
   <:item title="Date"><%= @translation.date %></:item>
   <:item title="Public"><%= @translation.public %></:item>
   <:item title="Unauthorized"><%= @translation.unauthorized %></:item>
+  <:item title="Remarks"><%= @translation.remarks |> tidy_raw %></:item>
 </.list>
 
 <div class="article show_status">

priv/repo/migrations/20230504144912_add_remarks_to_translations.exs

@@ -0,0 +1,9 @@
+defmodule Outlook.Repo.Migrations.AddRemarksToTranslations do
+  use Ecto.Migration
+
+  def change do
+    alter table(:translations) do
+      add :remarks, :text
+    end
+  end
+end

priv/repo/migrations/20230504155139_add_remarks_to_articles.exs

@@ -0,0 +1,9 @@
+defmodule Outlook.Repo.Migrations.AddRemarksToArticles do
+  use Ecto.Migration
+
+  def change do
+    alter table(:articles) do
+      add :remarks, :text
+    end
+  end
+end