Nextcloud: add unfriend button for delete contacts inside contact page

appinfo/.env

@@ -0,0 +1 @@
+

appinfo/routes.php

@@ -79,7 +79,10 @@
 		['name' => 'app#invitationsGenerate', 'url' => '/invitations/generate', 'verb' => 'GET'],
 		['name' => 'app#contactsAccept', 'url' => '/contacts/accept', 'verb' => 'POST'],
 		['name' => 'app#contactsFindUsers', 'url' => '/contacts/users', 'verb' => 'GET'],
-
+
+		// contacts routes
+		['name' => 'contacts#deleteContact', 'url' => '/contact/deleteContact', 'verb' => 'POST'],
+
 		// page routes
 		['name' => 'page#get_internal_metrics', 'url' => '/internal_metrics', 'verb' => 'GET'],
 		['name' => 'page#get_metrics', 'url' => '/metrics', 'verb' => 'GET'],

css/style.css

@@ -269,6 +269,11 @@
    width: 45% !important;
    border-bottom: 1px solid var(--color-placeholder-light);
 }
+.contacts-table tbody tr td:nth-child(4){
+   width: 5% !important;
+   border-bottom: 1px solid var(--color-placeholder-light);
+   text-align: center;
+}
 .contacts-profile-img{
    height: 35px;
    margin: 2.5px 0px;

js/contacts.js

@@ -46,12 +46,22 @@ document.addEventListener("DOMContentLoaded", function(event) {
                                 <td>
                                     <p class="username-provider">${username}@${provider}</p>
                                 </td>
+                                <td>
+                                    <button type="button" class="deleteContact" data-username="${username}" data-idp="${idp}">Unfriend</button>
+                                </td>
                             </tr>
                     `;
                 }
                 var element = document.getElementById("show_result");
                 element.innerHTML = result;
 
+                var button = $(".deleteContact");
+                button.each(function( index , ele) {
+                    ele.addEventListener("click", function() {
+                        deleteContact($(this).data('idp'),$(this).data('username'));
+                    });
+                });
+
                 $('#show_result').show();
             }
         }
@@ -87,9 +97,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     const searchInput = document.getElementById('contact-search-input');
     const inputHandler = function(e) {
         const value = e.target.value;
-        if(value.length > 0){
             loadData(value);
-        }
       }
 
       function debounce(callback, wait) {
@@ -147,13 +155,13 @@ document.addEventListener("DOMContentLoaded", function(event) {
                 if(token.hasOwnProperty(tokenData)) {
                     console.log(tokenData);
                     if(tokenData === 'accepted_users') {
-                        let accepted_users = token.accepted_users
-                        var result = ''; 
-                        for(accept in accepted_users) {
-                            const displayName = accepted_users[accept].display_name;
-                            const username = accepted_users[accept].id.opaque_id;
-                            const idp = accepted_users[accept].id.idp;
-                            const provider = new URL(idp).host;
+                        let acceptedUsers = JSON.parse(response);
+                        let result = '';
+                        for(i in acceptedUsers) {
+                            var displayName = acceptedUsers[i].display_name;
+                            var username = acceptedUsers[i].id.opaque_id;
+                            var idp = acceptedUsers[i].id.idp;
+                            var provider =  (idp.startsWith("http") ? new URL(idp).host : idp);
                             result += `
                                     <tr>
                                         <td style="border-radius:100%">
@@ -163,15 +171,24 @@ document.addEventListener("DOMContentLoaded", function(event) {
                                             <p class="displayname">${displayName}</p>
                                         </td>  
                                         <td>
-                                            <p class="username-provider">${username}</p>
+                                            <p class="username-provider">${username}@${provider}</p>
+                                        </td>
+                                        <td>
+                                            <button type="button" class="deleteContact" data-username="${username}" data-idp="${idp}">Unfriend</button>
                                         </td>
                                     </tr>
                             `;
                         }
-
                         var element = document.getElementById("show_result");
                         element.innerHTML = result;
 
+                        var button = $(".deleteContact");
+                        button.each(function( index , ele) {
+                            ele.addEventListener("click", function() {
+                            deleteContact($(this).data('idp'),$(this).data('username'));
+                            });
+                        });
+
                         $('#show_result').show();
                     }else{
                         const result = `
@@ -193,4 +210,22 @@ document.addEventListener("DOMContentLoaded", function(event) {
             //alert('The token is invalid')
         });
     }
-});
+    function deleteContact(idp,username){
+        var baseUrl = OC.generateUrl('/apps/sciencemesh');
+        var data = 'idp=' + encodeURIComponent(idp) + '&username=' + encodeURIComponent(username);
+        $.ajax({
+            url: baseUrl + '/contact/deleteContact',
+            type: 'POST',
+			contentType: 'application/x-www-form-urlencoded',
+            data:data
+        }).done(function (response) {
+            if (response === '' || response === false) {
+                console.log('failed');
+            }else{
+                console.log(response);
+            }
+        }).fail(function (response, code) {
+            alert('The token is invalid')
+        });
+    }
+});

lib/Controller/AppController.php

@@ -154,20 +154,25 @@ public function contactsAccept() {
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
 	 */
+
 	public function contactsFindUsers($searchToken = "") {
 		$find_users_json = $this->httpClient->findAcceptedUsers($this->userId);
 
 		$find_users = json_decode($find_users_json, false);
-
+		$return_users = array();
 		if(strlen($searchToken) > 0){
-			for($i = count($find_users->accepted_users); $i >= 0 ; $i--){
-				if(!str_contains($find_users->accepted_users[$i]->display_name, $searchToken)){
-					array_splice($find_users->accepted_users, $i, 1);
+			if(!empty($find_users)){
+				for($i = count($find_users); $i >= 0 ; $i--){
+					if(str_contains($find_users[$i]->display_name, $searchToken) and !is_null($find_users[$i])){
+						$return_users[] = $find_users[$i];
+					}
 				}
 			}
+		}else{
+			$return_users = json_decode($find_users_json, false);
 		}
-		
-		return new TextPlainResponse(json_encode($find_users), Http::STATUS_OK);
+
+		return new TextPlainResponse(json_encode($return_users), Http::STATUS_OK);
 	}
 
 

lib/Controller/ContactsController.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace OCA\ScienceMesh\Controller;
+
+use OCP\IRequest;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\TextPlainResponse;
+use OCP\AppFramework\Controller;
+use OCA\ScienceMesh\RevaHttpClient;
+use OCA\ScienceMesh\Plugins\ScienceMeshGenerateTokenPlugin;
+use OCA\ScienceMesh\Plugins\ScienceMeshAcceptTokenPlugin;
+use OCA\ScienceMesh\Controller\RevaController;
+
+class ContactsController extends Controller {
+
+    public function deleteContact() {
+      error_log('contact '.$_POST['username'].' is deleted');
+      return new TextPlainResponse(true, Http::STATUS_OK);
+    }
+}

templates/contacts.php

@@ -19,6 +19,7 @@
 							<tr>
 								<td colspan="2">Name</td>
 								<td>Open Cloud Mesh Address</td>
+								<td></td>
 							</tr>
 						</thead>
 						<tbody id="show_result">