From 6c28618fbe5be934f9fa1da682531bb5e2787e9f Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Thu, 20 Apr 2023 00:02:02 +0200
Subject: [PATCH] metadata: New formatting of the add metadata form

---
 public/js/metadata.js       | 10 ++++++++--
 templates/metadata.html.php | 16 +++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/js/metadata.js b/public/js/metadata.js
index 06f9303..9cf40b1 100644
--- a/public/js/metadata.js
+++ b/public/js/metadata.js
@@ -119,10 +119,16 @@ var createEventsListener = function() {
     document.getElementById('form_metadata_add').addEventListener('submit', function(e) {
         let formData = new FormData(this);
         addMetadata(formData.get('metadata_key'), "");
+        this.classList.add('invisible');
+        setTimeout(function() { document.getElementById('form_metadata_add').classList.remove('invisible'); }, 400);
         this.reset();
         e.preventDefault();
-    })
-
+    });
+    document.getElementById('input_metadata_value').addEventListener('focus', function(e) {
+        if(document.getElementById('input_metadata_key').value) {
+            document.querySelector('#form_metadata_add button').click();
+        }
+    });
     document.addEventListener('click', function (event) {
         if (event.target.closest(".delete-metadata")) {
             deleteMetadata(event.target)
diff --git a/templates/metadata.html.php b/templates/metadata.html.php
index 06925d3..13054d5 100644
--- a/templates/metadata.html.php
+++ b/templates/metadata.html.php
@@ -55,11 +55,17 @@
                     <h3>Liste des métadonnées du PDF</h3>
                     <div id="form-metadata-container">
                     </div>
-                    <form id="form_metadata_add">
-                    <div class="input-group mt-3">
-                      <input name="metadata_key" type="text" class="form-control" placeholder="Ma nouvelle metadonnée" required aria-label="Recipient's username">
-                      <button class="btn btn-outline-secondary" type="submit">Ajouter</button>
-                    </div>
+                    <form id="form_metadata_add" class="position-relative">
+                        <hr class="text-muted mt-4 mb-3" />
+                        <div class="mb-3">
+                            <label class="form-label text-muted" for="input_metadata_key">Ajouter une nouvelle métadonnée</label>
+                            <div class="form-floating">
+                              <input id="input_metadata_key" name="metadata_key" type="text" class="form-control" required value="" style="border-bottom-right-radius: 0;  border-bottom-left-radius: 0;">
+                              <label>Clé</label>
+                            </div>
+                            <input id="input_metadata_value" readonly="readonly" style="border-top: 0; border-top-right-radius: 0;  border-top-left-radius: 0;" name="metadata_value" type="text" class="form-control bg-light opacity-50" value="" placeholder="Valeur" style="border-bottom-right-radius: 0;  border-bottom-left-radius: 0;">
+                        </div>
+                        <button type="submit" type="button" class="btn btn-outline-secondary float-end"><i class="bi bi-plus-circle"></i> Ajouter</button>
                     </form>
                 </div>
         </div>