admin: Add support for comment search by Thread URL in admin interface

See: - isso-comments#642 - isso-comments#1000
pkvach · May 4, 2024 · bf346d1 · bf346d1
1 parent e3ee8fb
commit bf346d1
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 12 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -11,11 +11,13 @@ New Features
 - Make <code class="language-$lang"> for syntax highlighting (`#998`_, pkvach)
 - Add search for comments by URL in the admin interface (`#1000`_, pkvach)
 - Add CSS variables for better organization and flexibility (`#1001`_, pkvach)
+- Add support for comment search by Thread URL in admin interface (`#1020`_, pkvach)
 
 .. _#966: https://github.com/posativ/isso/pull/966
 .. _#998: https://github.com/isso-comments/isso/pull/998
 .. _#1000: https://github.com/isso-comments/isso/pull/1000
 .. _#1001: https://github.com/isso-comments/isso/pull/1001
+.. _#1020: https://github.com/isso-comments/isso/pull/1020
 
 Breaking Changes
 ^^^^^^^^^^^^^^^^

diff --git a/isso/css/admin.css b/isso/css/admin.css
@@ -176,3 +176,70 @@ a {
     width: 100%;
     margin-top: 1em;
 }
+
+
+.search-tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+}
+
+.search-tooltip-icon {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 50%;
+  background: #fffaf3;
+  font-family: serif;
+  font-weight: bold;
+  text-align: center;
+  color: #000;
+  line-height: 1.1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.search-tooltip .search-tooltip-text {
+  visibility: hidden;
+  width: 370px;
+  background-color: #555;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -185px;
+}
+
+/* Tooltip arrow */
+.search-tooltip .search-tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.search-tooltip .show {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+}
+
+/* Add animation (fade in the tooltip) */
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
diff --git a/isso/db/comments.py b/isso/db/comments.py
@@ -167,7 +167,7 @@ def count_modes(self):
         return dict(comment_count)
 
     def fetchall(self, mode=5, after=0, parent='any', order_by='id',
-                 limit=100, page=0, asc=1, comment_id=None):
+                 limit=100, page=0, asc=1, comment_id=None, thread_uri=None):
         """
         Return comments for admin with :param:`mode`.
         """
@@ -187,6 +187,9 @@ def fetchall(self, mode=5, after=0, parent='any', order_by='id',
         if comment_id:
             sql.append('comments.id = ? ')
             sql_args = [comment_id]
+        elif thread_uri:
+            sql.append('threads.uri = ? ')
+            sql_args = [thread_uri]
         else:
             sql.append('comments.mode = ? ')
             sql_args = [mode]

diff --git a/isso/js/admin.js b/isso/js/admin.js
@@ -125,3 +125,7 @@ function send_edit(com_id, hash, isso_host_script) {
     stop_edit(com_id, true);
 }
 
+function toggleTooltip(tooltipContainer) {
+    const tooltipText = tooltipContainer.querySelector(".search-tooltip-text");
+    tooltipText.classList.toggle("show");
+}
diff --git a/isso/templates/admin.html b/isso/templates/admin.html
@@ -74,8 +74,15 @@ <h2>Administration</h2>
           <div class="search">
             <form action="/admin/" method="get">
               <input type="hidden" name="mode" value="0" />
-              <label>Comment URL
-                <input type="search" class="search__input" name="comment_url" value="{{comment_url}}" spellcheck="false"
+                <label class="search-label">Search by URL
+                  <div class="search-tooltip" onclick="toggleTooltip(this)"><span class="search-tooltip-icon">?</span>
+                    <span class="search-tooltip-text">
+                      Search for comments within threads (e.g. http://example.com/thread) or for specific comments
+                      (e.g. http://example.com/thread#isso-1) by their URL.
+                    </span>
+                  </div>
+                </label>
+                <input type="url" class="search__input" name="comment_search_url" value="{{comment_search_url}}" spellcheck="false"
                   required placeholder="https://example.com/demo/#isso-1" />
               </label>
               <button type="submit" class="search__button">Search</button>

diff --git a/isso/views/comments.py b/isso/views/comments.py
@@ -116,6 +116,22 @@ def get_comment_id_from_url(comment_url):
     return comment_id
 
 
+def get_uri_from_url(url):
+    try:
+        # Parse the URL to extract the URI
+        parsed_url = urlsplit(url)
+    except ValueError:
+        # Handle malformed URL
+        return None
+
+    uri = parsed_url.path
+    if not uri:
+        # Handle missing URI
+        return None
+
+    return uri
+
+
 class API(object):
 
     FIELDS = set(['id', 'parent', 'text', 'author', 'website',
@@ -1411,8 +1427,10 @@ def login(self, env, req):
         Comment ordering
     @apiQuery {Number{0,1}} [asc=0]
         Ascending
-    @apiQuery {String} comment_url
-        Search comment by URL
+    @apiQuery {String} comment_search_url
+        Search comments by URL. Both threads and individual comments are valid.
+        For example, a thread might have a URL like 'http://example.com/thread'
+        and an individual comment might have a URL like 'http://example.com/thread#isso-1'
 
     @apiExample {curl} Listing of published comments:
         curl 'https://comments.example.com/admin/?mode=1&page=0&order_by=modified&asc=1' -b cookie.txt
@@ -1433,12 +1451,16 @@ def admin(self, env, req):
         order_by = req.args.get('order_by', 'created')
         asc = int(req.args.get('asc', 0))
         mode = int(req.args.get('mode', 2))
-        comment_url = req.args.get('comment_url', '')
-
-        # Search for a specific comment by URL
-        if comment_url:
-            comment_id = get_comment_id_from_url(comment_url)
-            comments = self.comments.fetchall(comment_id=comment_id, limit=1) if comment_id else []
+        comment_search_url = req.args.get('comment_search_url', '')
+
+        # Search for comments by URL
+        if comment_search_url:
+            comment_id = get_comment_id_from_url(comment_search_url)
+            uri = get_uri_from_url(comment_search_url)
+            if comment_id or uri:
+                comments = self.comments.fetchall(comment_id=comment_id, thread_uri=uri)
+            else:
+                comments = []
         else:
             comments = self.comments.fetchall(mode=mode, page=page,
                                               limit=page_size,
@@ -1455,7 +1477,7 @@ def admin(self, env, req):
                                conf=self.conf, max_page=max_page,
                                counts=comment_mode_count,
                                order_by=order_by, asc=asc,
-                               comment_url=comment_url,
+                               comment_search_url=comment_search_url,
                                isso_host_script=isso_host_script)
     """
     @api {get} /latest latest