From 2ae03c9852922ff23ce79910ce499bfb8c7644e6 Mon Sep 17 00:00:00 2001
From: Miquel Sabaté Solà <msabate@suse.com>
Date: Tue, 19 Mar 2024 11:19:53 +0100
Subject: thing: improved the UX on the form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "target" field is not autocompleted unless users explicitely
change its value themselves. The autocompletion is built from the
authors last name combo plus the year (which is rather naive, but
effective for most cases).

Moreover, some fields have been moved and the "access" field will only
appear if "url" is set.

Signed-off-by: Miquel Sabaté Solà <msabate@suse.com>
---
 app/views/things/_form.html.erb | 48 +++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

(limited to 'app/views')

diff --git a/app/views/things/_form.html.erb b/app/views/things/_form.html.erb
index 4aa3dc7..11d2230 100644
--- a/app/views/things/_form.html.erb
+++ b/app/views/things/_form.html.erb
@@ -1,7 +1,7 @@
 <%= form_with(model: thing) do |form| %>
   <%= render "layouts/errors", model: thing %>
 
-  <div id="thing_form">
+  <div id="thing_form" data-controller="thing">
     <div class="thing_large">
       <%= form.label :title %>
       <%= form.text_field :title, autofocus: true, autocapitalize: 'on', required: true %>
@@ -9,7 +9,7 @@
 
     <div class="thing_large">
       <%= form.label :authors %>
-      <%= form.text_field :authors, autocapitalize: 'words', required: true %>
+      <%= form.text_field :authors, autocapitalize: 'words', "data-action": "thing#authorsUpdate", required: true %>
       <%= form.check_box :editors %>
       <%= form.label :editors %>
     </div>
@@ -19,11 +19,6 @@
       <%= form.text_field :note, autocapitalize: 'on' %>
     </div>
 
-    <div>
-      <%= form.label :target %>
-      <%= form.text_field :target, autocapitalize: 'on', required: true %>
-    </div>
-
     <div>
       <%= form.label :publisher %>
       <%= form.text_field :publisher, autocapitalize: 'on' %>
@@ -31,25 +26,12 @@
 
     <div>
       <%= form.label :year %>
-      <%= form.number_field :year %>
+      <%= form.number_field :year, "data-action": "thing#yearUpdate" %>
     </div>
 
     <div>
-      <%= form.label :address %>
-      <%= form.text_field :address, autocapitalize: 'on' %>
-    </div>
-
-    <div data-controller="thing">
-      <%= form.label :url do %>
-        <%= I18n.t('activerecord.attributes.thing.url') %>
-        <a id="thing-external-url-id" href="<%= thing.url %>" target="_blank" title="<%= I18n.t('things.go-to') %>" class="<%= 'hidden' if thing.url.blank? %>"><i class="gg-external"></i></a>
-      <% end %>
-      <%= form.text_field :url, "data-action": "thing#updateLink" %>
-    </div>
-
-    <div>
-      <%= form.label :access %>
-      <%= form.date_field :access %>
+      <%= form.label :target %>
+      <%= form.text_field :target, autocapitalize: 'on', "data-action": "thing#cancel", "data-thing-target": "identifier", required: true %>
     </div>
 
     <div>
@@ -67,6 +49,26 @@
       <%= form.number_field :rate, min: 0, max: 10, required: true %>
     </div>
 
+    <div>
+      <%= form.label :address %>
+      <%= form.text_field :address, autocapitalize: 'on' %>
+    </div>
+
+    <div>
+      <%= form.label :url do %>
+        <%= I18n.t('activerecord.attributes.thing.url') %>
+        <a id="thing-external-url-id" href="<%= thing.url %>" target="_blank" title="<%= I18n.t('things.go-to') %>" class="<%= 'hidden' if thing.url.blank? %>"><i class="gg-external"></i></a>
+      <% end %>
+      <%= form.text_field :url, "data-action": "thing#updateLink" %>
+    </div>
+
+    <div>
+      <div id="thing-access-div" class="<%= 'hidden' if thing.url.blank? %>">
+        <%= form.label :access %>
+        <%= form.date_field :access %>
+      </div>
+    </div>
+
     <div>
       <%= form.label :status %>
       <%= form.select :status, options_for_select(Thing.statuses.map { |k, _| [I18n.t("things.status.#{k}"), k] }.sort, thing.status) %>
-- 
cgit v1.2.3