Connections view

src/pages/Admin/ConnectionsView.vue

@@ -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,36 @@ 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,
-            a.platform, a.browser, a.version, u.name user
-            FROM userSession s
-            JOIN visitUser vu ON vu.id = s.userVisitFk
-            JOIN visitAccess ac ON ac.id = vu.accessFk
-            JOIN visitAgent a ON a.id = ac.agentFk
-            JOIN visit v ON v.id = a.visitFk
-            JOIN account.user u ON u.id = vu.userFk
-            ORDER BY lastUpdate DESC`
-        );
-        loading.value = false;
+
+        const { data } = await api.get('/userSessions', {
+            params: { filter: JSON.stringify(filter) }
+        });
+
+        if (!data) {
+            connections.value = [];
+            return;
+        }
+
+        const formattedConnections = data
+            .map(connection => {
+                const { visitUser = {}, ...rest } = connection;
+
+                const { visitAccess, user, stamp } = visitUser;
+                const { visitAgent } = visitAccess || {};
+
+                return {
+                    ...rest,
+                    user,
+                    stamp,
+                    visitAgent
+                };
+            })
+            .filter(connection => connection.user);
+        connections.value = formattedConnections;
     } catch (error) {
         console.error('Error getting connections:', error);
+    } finally {
+        loading.value = false;
     }
 };
 
@@ -89,11 +142,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>
                         {{
@@ -109,13 +162,14 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                     >
                     <span
                         v-if="
-                            connection.platform &&
-                            connection.browser &&
-                            connection.version
+                            connection.visitAgent?.platform &&
+                            connection.visitAgent?.browser &&
+                            connection.visitAgent?.version
                         "
                     >
-                        {{ connection.platform }} - {{ connection.browser }} -
-                        {{ connection.version }}
+                        {{ connection.visitAgent?.platform }} -
+                        {{ connection.visitAgent?.browser }} -
+                        {{ connection.visitAgent?.version }}
                     </span>
                 </template>
                 <template #actions>
@@ -123,7 +177,9 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                         icon="people"
                         flat
                         rounded
-                        @click.stop.prevent="supplantUser(connection.user)"
+                        @click.stop.prevent="
+                            supplantUser(connection.user?.name)
+                        "
                     >
                         <QTooltip>
                             {{ t('supplantUser') }}