From 698da7f8b7556c364b6edc9d57f3717885575888 Mon Sep 17 00:00:00 2001
From: Thelonius Kort <tnt@users.noreply.github.com>
Date: Thu, 4 May 2023 18:14:44 +0200
Subject: [PATCH] Add toggling fields in translation form

---
 .../live/translation_live/form_component.ex   | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/lib/outlook_web/live/translation_live/form_component.ex b/lib/outlook_web/live/translation_live/form_component.ex
index 45c347a..1b358ac 100644
--- a/lib/outlook_web/live/translation_live/form_component.ex
+++ b/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,16 +24,20 @@ 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]} />
-          <.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, :language}} type="select" label="language"
+                options={Application.get_env(:outlook,:deepl)[:target_langs]} />
+          </div>
+          <.input field={{f, :title}} type="text" label="title" />
+          <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 field={{f, :remarks}} type="textarea" label="remarks" class="h-28" />
           <input type="hidden" id="continue_edit" name="continue_edit" value="false" />
           <input type="hidden" id="publish" name="publish" value="false" />
           <:actions>