Friend filter

Added filter for finding a specific friend on friends page.
agorafoundation · Nov 12, 2023 · f4f26e5 · f4f26e5
1 parent 5e7ab51
commit f4f26e5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/client/agora/public/js/dashboard.js b/client/agora/public/js/dashboard.js
@@ -1187,6 +1187,22 @@ function getOffset( el ) {
     };
 }
 
+const friendsContainer = document.querySelectorAll( '#friend-card' );
+
+function filterFriends( searchTerm ){
+
+    for ( const friend of friendsContainer ){
+
+        const friendCard = friend.outerText.toLowerCase();
+
+        if ( friendCard.includes( searchTerm.toLowerCase() ) ){
+            friend.style.display = 'block';
+        } else {
+            friend.style.display = 'none';
+        }
+    }
+}
+
 function deleteFriend( friendshipId ) {
     if (confirm( "Are you sure you want to remove this friend?") == true){
         fetch( "/api/v1/auth/friends/deleteFriend", {

diff --git a/client/agora/views/friends/partials/gallery/control-bar.ejs b/client/agora/views/friends/partials/gallery/control-bar.ejs
@@ -6,8 +6,8 @@
             </div> -->
             <div class='col-md-4'>
                 <!--Search bar-->
-                <input id="topic-search" class="card-search form-control" placeholder="Search"
-                    oninput="queryTopics(document.getElementById('topic-search').value, topicArr) " />
+                <input id="friend-search" class="card-search form-control" placeholder="Search Friends"
+                    oninput="filterFriends( this.value ) " />
             </div>
 
             <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Dashboard Tools">

diff --git a/client/agora/views/friends/partials/gallery/grid-template.ejs b/client/agora/views/friends/partials/gallery/grid-template.ejs
@@ -4,7 +4,7 @@
     <% if (friends.length > 0) { %>
       <% friends.forEach((friend) => { %>
         <!-- Friend Card -->
-        <div class="col mb-3 align-items-stretch gallery-col query-countable a-friend" id="friend-card-<%= friend.friendship_id %>">
+        <div class="col mb-3 align-items-stretch gallery-col query-countable a-friend" id="friend-card">
           <div class="card h-100" id="f-gv-<%= friend.friendship_id %>" data-id="<%= friend.friendship_id %>" onmouseover="toggleMoreOptionsOn(id)" onmouseout="toggleMoreOptionsOff(id)">
             <div class="dropdown dropbtn trigger1 trigger2 grid-options" id="f-gv-option-<%= friend.friendship_id %>" data-id="<%= friend.friendship_id %>" style="visibility: hidden">
               <img src="/assets/img/buttons/more-options.png" class="dropbtn" />