src/pages/Admin/ConnectionsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, inject, onBeforeUnmount } from 'vue';
+import { ref, onMounted, inject, onBeforeUnmount, h } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -12,12 +12,49 @@ import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 
 const { t } = useI18n();
-const jApi = inject('jApi');
+const api = inject('api');
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 
+const filter = {
+    include: [
+        {
+            relation: 'visitUser',
+            scope: {
+                include: [
+                    {
+                        relation: 'visitAccess',
+                        scope: {
+                            fields: ['id', 'agentFk'],
+                            include: [
+                                {
+                                    relation: 'visitAgent',
+                                    scope: {
+                                        fields: [
+                                            'platform',
+                                            'browser',
+                                            'version'
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        relation: 'user',
+                        scope: {
+                            fields: ['id', 'nickname', 'name']
+                        }
+                    }
+                ],
+                fields: ['userFk', 'stamp', 'accessFk']
+            }
+        }
+    ],
+    order: 'lastUpdate DESC'
+};
 const connections = ref([]);
 const loading = ref(false);
 const intervalId = ref(null);
@@ -25,20 +62,28 @@ const intervalId = ref(null);
 const getConnections = async () => {
     try {
         loading.value = true;
-        connections.value = await jApi.query(
+
-            `SELECT vu.userFk userId, vu.stamp, u.nickname, s.lastUpdate,
+        const { data } = await api.get('/userSessions', {
-            a.platform, a.browser, a.version, u.name user
+            params: { filter: JSON.stringify(filter) }
-            FROM userSession s
+        });
-            JOIN visitUser vu ON vu.id = s.userVisitFk
+
-            JOIN visitAccess ac ON ac.id = vu.accessFk
+        if (!data) {
-            JOIN visitAgent a ON a.id = ac.agentFk
+            connections.value = [];
-            JOIN visit v ON v.id = a.visitFk
+            return;
-            JOIN account.user u ON u.id = vu.userFk
+        }
-            ORDER BY lastUpdate DESC`
+
-        );
+        connections.value = data
-        loading.value = false;
+            .map(({ visitUser = {}, ...rest }) => ({
+                ...rest,
+                user: visitUser.user,
+                stamp: visitUser.stamp,
+                visitAgent: visitUser.visitAccess?.visitAgent
+            }))
+            .filter(({ user }) => user);
     } catch (error) {
         console.error('Error getting connections:', error);
+    } finally {
+        loading.value = false;
     }
 };
 
@@ -58,6 +103,13 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => clearInterval(intervalId.value));
+
+const renderAgentDetails = connection => {
+    const agent = connection.visitAgent;
+    return agent?.platform && agent?.browser && agent?.version
+        ? h('span', `${agent.platform} - ${agent.browser} - ${agent.version}`)
+        : null;
+};
 </script>
 
 <template>
@@ -89,11 +141,11 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
             <CardList
                 v-for="(connection, index) in connections"
                 :key="index"
-                :to="{ name: 'accessLog', params: { id: connection.userId } }"
+                :to="{ name: 'accessLog', params: { id: connection.user?.id } }"
             >
                 <template #content>
                     <span class="text-bold q-mb-sm">
-                        {{ connection.nickname }}
+                        {{ connection.user?.nickname }}
                     </span>
                     <span>
                         {{
@@ -107,23 +159,16 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                             )
                         }}</span
                     >
-                    <span
+                    <component :is="renderAgentDetails(connection)" />
-                        v-if="
-                            connection.platform &&
-                            connection.browser &&
-                            connection.version
-                        "
-                    >
-                        {{ connection.platform }} - {{ connection.browser }} -
-                        {{ connection.version }}
-                    </span>
                 </template>
                 <template #actions>
                     <QBtn
                         icon="people"
                         flat
                         rounded
-                        @click.stop.prevent="supplantUser(connection.user)"
+                        @click.stop.prevent="
+                            supplantUser(connection.user?.name)
+                        "
                     >
                         <QTooltip>
                             {{ t('supplantUser') }}