From 060b668765d5bb00eba52b977a6ba34db774c734 Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@gmail.com>
Date: Thu, 14 Mar 2024 12:56:21 +0200
Subject: [PATCH] Present data in table.Add and test action.

---
 webroot/css/co-grouper-plugin.css |  8 ++++
 webroot/js/groups-table.js        | 29 +++++++++++---
 webroot/js/page/UserManager.js    | 64 ++++++++++++++++++++++++-------
 webroot/js/pagecount.js           |  6 ++-
 4 files changed, 87 insertions(+), 20 deletions(-)

diff --git a/webroot/css/co-grouper-plugin.css b/webroot/css/co-grouper-plugin.css
index 4736499..9b1cebf 100644
--- a/webroot/css/co-grouper-plugin.css
+++ b/webroot/css/co-grouper-plugin.css
@@ -327,4 +327,12 @@ a.list-group-item-action:hover .fa {
     right: 38px;
     bottom: 10px;
     margin-right: -26px;
+}
+
+.grouper_groups #co-loading span,
+.grouper_groups #co-loading-redirect span,
+.grouper_groups .co-loading-mini span {
+    animation: 1.2s linear infinite both loading;
+    background-color: var(--teal);
+    display: inline-block;
 }
\ No newline at end of file
diff --git a/webroot/js/groups-table.js b/webroot/js/groups-table.js
index 49fe26a..89ba9fd 100644
--- a/webroot/js/groups-table.js
+++ b/webroot/js/groups-table.js
@@ -6,7 +6,10 @@ export default {
         Table
     ],
     data() {},
-    computed: {
+    methods: {
+        groupStatus(status) {
+            return status === 'T' ? 'Enabled' : 'Disabled'
+        }
     },
     created() {},
     template: /*html*/`
@@ -25,9 +28,10 @@ export default {
                     </td>
                     <td v-if="columns.indexOf('role') > -1">&mdash;</td>
                     <td v-if="columns.indexOf('description') > -1">{{ group.description || txt.descrZeroState }}</td>
-                    <td v-if="columns.indexOf('status') > -1">{{ group.enabled && group.enabled === 'T' ? 'Enabled' : 'Disabled' }}</td>
+                    <td v-if="columns.indexOf('status') > -1">{{ groupStatus(group?.enabled) }}</td>
                     <td>
                         <span class="d-flex flex-row justify-content-center align-items-center" v-if="!group.loading">
+                            <!-- My memberships view(Join or leave Group) -->
                             <template v-if="showOptAction(group)">
                                 <button
                                     v-if="$attrs.onJoinGroup"
@@ -43,11 +47,10 @@ export default {
                                     @click="$emit('leaveGroup', group)"
                                     class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="button"
                                     :disabled="group.loading">
-                                    {{ txt.leave }}
-                                    &nbsp;
-                                    <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
+                                    {{ txt.leave }}<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
                                 </button>
                             </template>
+                            <!-- Show group members -->
                             <button 
                                 v-if="$attrs.onShowSubscribers"
                                 class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
@@ -55,7 +58,21 @@ export default {
                                 :data-id="encodeURIComponent(group.name)"
                                 :data-name="group.displayExtension">{{ txt.members }}<em class="material-icons mt-0 ml-1" aria-hidden="true">group</em>
                             </button>
-                            <a v-if="grouper && owner" :href="grouperUrl + group.uuid" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
+                            <!-- Remove from Group i manage -->
+                            <button 
+                                v-if="$attrs.onRemoveUser"
+                                class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="button"
+                                @click="$emit('removeUser', group)"
+                                :disabled="group.loading"
+                                :data-id="encodeURIComponent(group.name)"
+                                :data-name="group.displayExtension">
+                                    {{ txt.remove }}<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
+                            </button>
+                            <!-- -->
+                            <a v-if="grouper && owner" :href="grouperUrl + group.uuid"
+                                                       target="_blank"
+                                                       class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap"
+                                                       role="button">
                                 {{ txt.grouper }} &nbsp;
                                 <em class="material-icons mt-0 ml-1" aria-hidden="true">link</em>
                             </a>
diff --git a/webroot/js/page/UserManager.js b/webroot/js/page/UserManager.js
index 7d9cd80..256f868 100644
--- a/webroot/js/page/UserManager.js
+++ b/webroot/js/page/UserManager.js
@@ -17,17 +17,51 @@ export default {
     data() {
       return {
           loading: false,
-          result: [],
+          results: [],
+          user: {},
+          rowLoading: false,
+          searched: false
       }
     },
     inject: ['api', 'txt'],
     methods: {
-        dummy() {
-          console.log('hi from dummy')
+        reset() {
+            this.searched = false
+            // If you are in the middle of a row action we do not want to clear
+            // the results because we are breaking the user experience
+            if(!this.rowLoading) {
+                this.results = []
+            }
+        },
+        async removeUser(group) {
+            const {name, displayExtension} = group;
+            const { identifier: id, label: username, email } = this.user;
+            // This will trigger the inline loader
+            group.loading = true;
+            this.rowLoading = true;
+            const resp = await fetch(`${this.api.remove}?group=${(name)}&userId=${id}`, {
+                method: "DELETE",
+                headers: {
+                    "Accept": "application/json"
+                }
+            });
+            if (resp.ok) {
+                this.subscribers = [];
+                await this.findGroupsForManagedUser(this.user);
+                generateFlash(`${username ?? email} ${this.txt.removeSubscriberSuccess} ${(displayExtension)}`, 'success');
+            } else {
+                this.disabled = [ ...this.disabled, id ];
+                generateFlash(this.txt.removeSubscriberError, 'error');
+                let errorResponse = await resp.json();
+                generateFlash(`${errorResponse.message}`, 'error');
+            }
         },
-        async findManagedUsers(user) {
-            const { identifier: id, label } = user;
-            this.loading = true;
+        async findGroupsForManagedUser(user) {
+            this.user = user
+            // Reset
+            this.reset()
+            const { identifier: id } = user;
+            this.loading = !this.rowLoading && true;
             const resp = await fetch(`${this.api.managing}?memberid=${id}`, {
                 headers: {
                     "Accept": "application/json",
@@ -35,31 +69,35 @@ export default {
                 method: "GET"
             });
             if (resp.ok) {
-                this.result = await resp.json();
-                console.log('result', this.result)
-                generateFlash(`${id} has ${this.result.length} ${this.txt.memberships}`, 'success');
+                this.results = await resp.json();
+                generateFlash(`${id} has ${this.results.length} ${this.txt.memberships}`, 'success');
             } else {
                 let errorResponse = await resp.json();
                 generateFlash(`${errorResponse.message}`, 'error');
             }
 
+            this.searched = true;
             this.loading = false;
         }
     },
     template: /*html*/`
-        <autocomplete @callback="(item) => findManagedUsers(item)"
+        <autocomplete @callback="(item) => findGroupsForManagedUser(item)"
                       icon="search"
-                      action="findManagedUsers"
+                      action="findGroupsForManagedUser"
                       :activeBtn="loading"
                       />
         <loader :active="loading"></loader>
         <pagination :records="results">
             <template v-slot:paginated="paginated">
-                <page-count :first="paginated.start" :last="paginated.end" :total="paginated.total"></page-count>
+                <page-count :first="paginated.start"
+                            :last="paginated.end"
+                            :searched="searched"
+                            :total="paginated.total"></page-count>
                 <groups-table
                     :groups="paginated.records"
                     :columns="['name', 'description', 'action']"
-                    @remove-group="dummy()"></groups-table>
+                    @remove-user="removeUser">
+                </groups-table>
             </template>
         </pagination>
     `
diff --git a/webroot/js/pagecount.js b/webroot/js/pagecount.js
index 1b41421..5f9c83e 100644
--- a/webroot/js/pagecount.js
+++ b/webroot/js/pagecount.js
@@ -11,12 +11,16 @@ export default {
         total: {
             type: Number,
             default: 100
+        },
+        searched: {
+            type: Boolean,
+            default: true
         }
     },
     inject: ['txt'],
     template: /*html*/`
         <div class="counter d-flex justify-content-start align-items-center rounded-0">
-            <div class="pagination-element pagination-counter muted">
+            <div v-if="searched" class="pagination-element pagination-counter muted">
                 <template  v-if="total > 0">
                 Viewing {{first}}-{{last}} of {{total}}
                 </template>