From 2bc9a00c4704cfef2152a90d5dfbb0602183ae0b Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 18 Jun 2025 17:06:54 +0200
Subject: [PATCH] Implement client username display in myextension: add
 getClientUsername method to retrieve usernames for clients and update the UI
 to show usernames instead of client IDs in the table.

---
 static/js/index.js               | 5 +++++
 templates/myextension/index.html | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/static/js/index.js b/static/js/index.js
index 0843dd6..43ae843 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -140,6 +140,11 @@ window.app = Vue.createApp({
       return date.toLocaleDateString() + ' ' + date.toLocaleTimeString('en-US', { hour12: false })
     },
 
+    getClientUsername(clientId) {
+      const client = this.dcaClients.find(c => c.id === clientId)
+      return client ? (client.username || client.user_id.substring(0, 8) + '...') : clientId
+    },
+
 
     // Configuration Methods
     async getLamassuConfig() {
diff --git a/templates/myextension/index.html b/templates/myextension/index.html
index 0128ac8..86a7d8b 100644
--- a/templates/myextension/index.html
+++ b/templates/myextension/index.html
@@ -175,7 +175,8 @@
           <template v-slot:body="props">
             <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.field == 'amount'">${ formatCurrency(col.value) }</div>
+                <div v-if="col.field == 'client_id'">${ getClientUsername(col.value) }</div>
+                <div v-else-if="col.field == 'amount'">${ formatCurrency(col.value) }</div>
                 <div v-else-if="col.field == 'status'">
                   <q-badge :color="col.value === 'confirmed' ? 'green' : 'orange'">
                     ${ col.value }