From 2bbc30e48dd443ba5da5f18005ac8056e58bee31 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sun, 13 Oct 2024 11:51:55 +1100
Subject: [PATCH] Add frontend search input

---
 links/templates/links/link_list.html | 77 +++++++++++++++++++++++-----
 locale/zh_Hans/LC_MESSAGES/django.po | 40 +++++++++------
 new_theme/static/css/dist/styles.css | 38 ++++++++++++++
 new_theme/static/js/navbar.js        | 10 +---
 4 files changed, 127 insertions(+), 38 deletions(-)

diff --git a/links/templates/links/link_list.html b/links/templates/links/link_list.html
index 2b7ad70..54d47c4 100644
--- a/links/templates/links/link_list.html
+++ b/links/templates/links/link_list.html
@@ -22,14 +22,24 @@
   </div>
 
   <div class="bg-white shadow-md rounded-lg overflow-hidden">
-    <div class="flex justify-between items-center p-6 bg-gray-50 border-b border-gray-200">
-      <h1 class="text-2xl font-bold text-gray-800">{% trans "Link List" %}</h1>
-      <a href="{% url 'link_create' %}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded inline-flex items-center">
-        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-        </svg>
-        {% trans "Create New Link" %}
-      </a>
+    <div class="p-6 bg-gray-50 border-b border-gray-200">
+      <h1 class="text-2xl font-bold text-gray-800 mb-4">{% trans "Link List" %}</h1>
+      <div class="flex items-center justify-between mb-4">
+        <div class="relative w-64">
+          <input type="text" id="filter-input" placeholder="{% trans 'Search links...' %}" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+          <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </div>
+        <a href="{% url 'link_create' %}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded inline-flex items-center transition duration-150 ease-in-out">
+          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+          </svg>
+          {% trans "Create New Link" %}
+        </a>
+      </div>
     </div>
 
     <form method="post" action="{% url 'delete_selected' %}">
@@ -104,9 +114,9 @@
               <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">{% trans "Actions" %}</th>
             </tr>
           </thead>
-          <tbody class="bg-white divide-y divide-gray-200">
+          <tbody class="bg-white divide-y divide-gray-200" id="links-table-body">
             {% for link in links %}
-              <tr>
+              <tr class="link-row">
                 <td class="px-6 py-4 whitespace-nowrap">
                   <input type="checkbox" name="selected_links" value="{{ link.id }}" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                 </td>
@@ -155,10 +165,49 @@
   </div>
 
   <script>
-    document.getElementById('select-all').addEventListener('change', function() {
-      var checkboxes = document.getElementsByName('selected_links');
-      for (var checkbox of checkboxes) {
-        checkbox.checked = this.checked;
+    document.addEventListener('DOMContentLoaded', function() {
+
+      const searchInput = document.getElementById('filter-input');
+      const rows = document.querySelectorAll('.link-row');
+      const tbody = document.getElementById('links-table-body');
+
+
+      if (searchInput) {
+
+        function performSearch() {
+          const searchTerm = searchInput.value.toLowerCase().trim();
+          let visibleCount = 0;
+
+          rows.forEach((row, index) => {
+            const aliasElement = row.querySelector('td:nth-child(2) a');
+            if (aliasElement) {
+              const alias = aliasElement.textContent.toLowerCase();
+              const shouldShow = alias.includes(searchTerm);
+              row.style.display = shouldShow ? '' : 'none';
+              if (shouldShow) visibleCount++;
+            } else {
+              console.error(`第 ${index + 1} 行没有找到别名元素`);
+            }
+          });
+
+
+          const noResultsRow = document.getElementById('no-results-row');
+          if (visibleCount === 0) {
+            if (!noResultsRow) {
+              const newRow = document.createElement('tr');
+              newRow.id = 'no-results-row';
+              newRow.innerHTML = `<td colspan="8" class="px-6 py-4 whitespace-nowrap text-center text-gray-500">{% trans "No matching links found" %}</td>`;
+              tbody.appendChild(newRow);
+            }
+          } else if (noResultsRow) {
+            noResultsRow.remove();
+          }
+        }
+
+        // 使用 'keyup' 事件
+        searchInput.addEventListener('keyup', performSearch);
+      } else {
+        console.error('未找到搜索输入框');
       }
     });
   </script>
diff --git a/locale/zh_Hans/LC_MESSAGES/django.po b/locale/zh_Hans/LC_MESSAGES/django.po
index 0192b13..55be422 100644
--- a/locale/zh_Hans/LC_MESSAGES/django.po
+++ b/locale/zh_Hans/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-10-08 07:10-0500\n"
+"POT-Creation-Date: 2024-10-12 19:49-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -924,7 +924,7 @@ msgstr ""
 
 #: 3.12/lib/python3.12/site-packages/django/forms/formsets.py:499
 #: links/templates/links/link_confirm_delete.html:30
-#: links/templates/links/link_list.html:139
+#: links/templates/links/link_list.html:149
 msgid "Delete"
 msgstr "删除"
 
@@ -1609,13 +1609,13 @@ msgstr "链接详情"
 
 #: links/templates/links/link_confirm_delete.html:17
 #: links/templates/links/link_detail.html:33
-#: links/templates/links/link_list.html:46
+#: links/templates/links/link_list.html:56
 msgid "Alias"
 msgstr "别名"
 
 #: links/templates/links/link_confirm_delete.html:18
 #: links/templates/links/link_detail.html:50
-#: links/templates/links/link_list.html:66
+#: links/templates/links/link_list.html:76
 msgid "Original URL"
 msgstr "原始URL"
 
@@ -1634,18 +1634,18 @@ msgid "Go to link"
 msgstr ""
 
 #: links/templates/links/link_detail.html:26
-#: links/templates/links/link_list.html:138
+#: links/templates/links/link_list.html:148
 #: links/templates/links/search.html:27
 msgid "Edit"
 msgstr "编辑"
 
 #: links/templates/links/link_detail.html:41
-#: links/templates/links/link_list.html:86
+#: links/templates/links/link_list.html:96
 msgid "Created At"
 msgstr "创建时间"
 
 #: links/templates/links/link_detail.html:45
-#: links/templates/links/link_list.html:96
+#: links/templates/links/link_list.html:106
 msgid "Updated At"
 msgstr "更新时间"
 
@@ -1671,7 +1671,7 @@ msgstr ""
 
 #: links/templates/links/link_detail.html:120
 #: links/templates/links/link_list.html:15
-#: links/templates/links/link_list.html:76
+#: links/templates/links/link_list.html:86
 msgid "Clicks"
 msgstr "点击次数"
 
@@ -1688,7 +1688,7 @@ msgid "Edit Link"
 msgstr "编辑链接"
 
 #: links/templates/links/link_form.html:14
-#: links/templates/links/link_list.html:31
+#: links/templates/links/link_list.html:40
 msgid "Create New Link"
 msgstr "创建新链接"
 
@@ -1696,7 +1696,7 @@ msgstr "创建新链接"
 msgid ""
 "Link type is used for redirecting to an external URL. Use this when you want "
 "to create a short alias for a long URL."
-msgstr ""
+msgstr "链接类型用于重定向到外部URL。当您想为长URL创建一个短别名时，请使用此选项。"
 
 #: links/templates/links/link_form.html:38
 msgid ""
@@ -1726,27 +1726,37 @@ msgstr "暂无热门链接"
 msgid "Link List"
 msgstr "链接列表"
 
-#: links/templates/links/link_list.html:56
+#: links/templates/links/link_list.html:29
+#, fuzzy
+#| msgid "Search aliases..."
+msgid "Search links..."
+msgstr "搜索别名..."
+
+#: links/templates/links/link_list.html:66
 msgid "Type"
 msgstr "链接类型"
 
-#: links/templates/links/link_list.html:104
+#: links/templates/links/link_list.html:114
 msgid "Actions"
 msgstr "操作"
 
-#: links/templates/links/link_list.html:140
+#: links/templates/links/link_list.html:150
 #: links/templates/links/search.html:26
 msgid "Details"
 msgstr "详情"
 
-#: links/templates/links/link_list.html:145
+#: links/templates/links/link_list.html:155
 msgid "No links available"
 msgstr "暂无可用链接"
 
-#: links/templates/links/link_list.html:152
+#: links/templates/links/link_list.html:162
 msgid "Delete Selected"
 msgstr "删除选中项"
 
+#: links/templates/links/link_list.html:199
+msgid "No matching links found"
+msgstr ""
+
 #: links/templates/links/search.html:5 templates/base.html:71
 msgid "Advanced Search"
 msgstr "高级搜索"
diff --git a/new_theme/static/css/dist/styles.css b/new_theme/static/css/dist/styles.css
index c15b55c..32e2688 100644
--- a/new_theme/static/css/dist/styles.css
+++ b/new_theme/static/css/dist/styles.css
@@ -600,6 +600,10 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -628,6 +632,11 @@ video {
   position: sticky;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -761,6 +770,10 @@ video {
   height: 1rem;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -789,6 +802,14 @@ video {
   width: 12rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1165,6 +1186,10 @@ video {
   padding-bottom: 1.25rem;
 }
 
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1259,6 +1284,11 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1378,6 +1408,10 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1481,6 +1515,10 @@ video {
   border-color: rgb(165 180 252 / var(--tw-border-opacity));
 }
 
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
diff --git a/new_theme/static/js/navbar.js b/new_theme/static/js/navbar.js
index c3d8fcf..aa0934b 100644
--- a/new_theme/static/js/navbar.js
+++ b/new_theme/static/js/navbar.js
@@ -1,17 +1,12 @@
-console.log('navbar.js is being executed');
+
 
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('DOMContentLoaded event fired in navbar.js');
 
     const moreMenuButton = document.getElementById('more-menu-button');
     const moreMenuDropdown = document.getElementById('more-menu-dropdown');
     const languageSelectorButton = document.getElementById('language-selector-button');
     const languageOptions = document.getElementById('language-options');
 
-    console.log('moreMenuButton:', moreMenuButton);
-    console.log('moreMenuDropdown:', moreMenuDropdown);
-    console.log('languageSelectorButton:', languageSelectorButton);
-    console.log('languageOptions:', languageOptions);
 
     function toggleDropdown(button, dropdown) {
         button.addEventListener('click', function(e) {
@@ -45,13 +40,10 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // 处理语言选择
     const languageForm = document.getElementById('language-form');
-    console.log('languageForm:', languageForm);
     if (languageForm) {
         const languageButtons = languageForm.querySelectorAll('button[name="language"]');
-        console.log('languageButtons:', languageButtons);
         languageButtons.forEach(button => {
             button.addEventListener('click', function() {
-                console.log('Language changed');
                 languageForm.submit();
             });
         });