From 4303d832533a4b133fbd10dc4e08155f52b30a11 Mon Sep 17 00:00:00 2001
From: Floorb <132411956+Neetpone@users.noreply.github.com>
Date: Thu, 5 Aug 2021 10:26:43 -0400
Subject: [PATCH] Tag autocomplete.

---
 api/tags_autocomplete.php | 18 ++++++++++++++++++
 theme/bulma/main.php      | 33 +++++++++++++++++----------------
 2 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 api/tags_autocomplete.php

diff --git a/api/tags_autocomplete.php b/api/tags_autocomplete.php
new file mode 100644
index 0000000..cc32c31
--- /dev/null
+++ b/api/tags_autocomplete.php
@@ -0,0 +1,18 @@
+<?php
+define('IN_PONEPASTE', 1);
+
+require_once(__DIR__ . '/../includes/common.php');
+require_once(__DIR__ . '/../includes/Tag.class.php');
+
+header('Content-Type: application/json');
+
+if (empty($_GET['tag'])) {
+    die(json_encode(['error' => true, 'message' => 'No tag name provided']));
+}
+
+$tag_name = Tag::cleanTagName($_GET['tag']);
+$tag_name = str_replace('%', '', $tag_name); /* get rid of MySQL LIKE wildcards */
+
+$results = $conn->query('SELECT name FROM tags WHERE name LIKE ?', [$tag_name . '%']);
+
+echo json_encode($results->fetchAll());
diff --git a/theme/bulma/main.php b/theme/bulma/main.php
index f288ae4..e0030c6 100644
--- a/theme/bulma/main.php
+++ b/theme/bulma/main.php
@@ -25,15 +25,25 @@
     });
 </script>
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
+    function setupTagsInput() {
         const tagsInput = document.getElementById('tags-with-source');
         new BulmaTagsInput(tagsInput, {
-            autocomplete: {
-                <!-- Json to be completed -->
-                source: "",
-            }
+           source: async function(value) {
+                    // Value equal input value
+                    // We can then use it to request data from external API
+                    return await fetch("/api/tags_autocomplete.php?tag=" + encodeURIComponent(value))
+                        .then(function(response) {
+                            return response.json();
+                        });
+                }
         });
-    }, false);
+    }
+
+    if (document.readyState !== 'loading') {
+        setupTagsInput();
+    } else {
+        document.addEventListener('DOMContentLoaded', setupTagsInput);
+    }
 </script>
 <main class="bd-main">
     <div class="bd-side-background"></div>
@@ -237,19 +247,15 @@
                         <div class='row is-full'>
                             <div class="columns">
                                 <div class="column">
-
-
                                     <div class="field">
                                         <label class="label">Tags</label>
                                         <div class="control">
                                             <input id="tags-with-source" name="tag_input" class="input" data-max-tags="10"
-                                                   data-max-chars="40" type="text" data-item-text="name"
+                                                   data-max-chars="40" type="text" data-item-text="name" data-item-value="name"
                                                    data-case-sensitive="false" placeholder="10 Tags Maximum"
                                                    value="<?php echo (isset($_POST['tag_input'])) ? $_POST['tag_input'] : ''; // Pre-populate if we come here on an error" ?>">
                                         </div>
                                     </div>
-
-
                                 </div>
                             </div>
                         </div>
@@ -420,12 +426,7 @@
         </div>
         <?php } ?>
     </div>
-    </div>
-
-    </div>
-    </div>
 </main>
-</div>
 
 <script>
     function roundToTwo(num) {