frontend: add tooltips to date columns

USA-RedDragon · Nov 20, 2024 · e2eea9c · e2eea9c
1 parent 06455f0
commit e2eea9c
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 9 deletions.
diff --git a/internal/http/frontend/src/components/LastHeardTable.vue b/internal/http/frontend/src/components/LastHeardTable.vue
@@ -33,7 +33,7 @@
   >
     <Column field="start_time" header="Time">
       <template #body="slotProps">
-        <span v-if="!slotProps.data.active">{{
+        <span v-if="!slotProps.data.active" v-tooltip="slotProps.data.start_time.toString()">{{
           slotProps.data.start_time.fromNow()
         }}</span>
         <span v-else>Active</span>

diff --git a/internal/http/frontend/src/components/PeerTable.vue b/internal/http/frontend/src/components/PeerTable.vue
@@ -77,9 +77,9 @@
       </template>
     </Column>
     <Column field="created_at" header="Created">
-      <template #body="slotProps">{{
+      <template #body="slotProps"><span v-tooltip="slotProps.data.created_at.toString()">{{
         slotProps.data.created_at.fromNow()
-      }}</template>
+      }}</span></template>
     </Column>
     <template #expansion="slotProps">
       <PVButton

diff --git a/internal/http/frontend/src/components/RepeaterTable.vue b/internal/http/frontend/src/components/RepeaterTable.vue
@@ -222,9 +222,9 @@
     </Column>
     <Column field="hotspot" header="Hotspot"></Column>
     <Column field="created_at" header="Created">
-      <template #body="slotProps">{{
+      <template #body="slotProps"><span v-tooltip="slotProps.data.created_at.toString()">{{
         slotProps.data.created_at.fromNow()
-      }}</template>
+      }}</span></template>
     </Column>
     <template #expansion="slotProps">
       <PVButton

diff --git a/internal/http/frontend/src/components/TalkgroupTable.vue b/internal/http/frontend/src/components/TalkgroupTable.vue
@@ -128,9 +128,9 @@
       </template>
     </Column>
     <Column field="created_at" header="Created">
-      <template #body="slotProps">{{
+      <template #body="slotProps"><span v-tooltip="slotProps.data.created_at.toString()">{{
         slotProps.data.created_at.fromNow()
-      }}</template>
+      }}</span></template>
     </Column>
     <template
       v-if="this.$props.admin || this.$props.owner"

diff --git a/internal/http/frontend/src/components/UserTable.vue b/internal/http/frontend/src/components/UserTable.vue
@@ -101,9 +101,9 @@
       v-if="!this.$props.approval"
     ></Column>
     <Column field="created_at" header="Created">
-      <template #body="slotProps">{{
+      <template #body="slotProps"><span v-tooltip="slotProps.data.created_at.toString()">{{
         slotProps.data.created_at.fromNow()
-      }}</template>
+      }}</span></template>
     </Column>
     <template #expansion="slotProps">
       <PVButton

diff --git a/internal/http/frontend/src/main.js b/internal/http/frontend/src/main.js
@@ -27,6 +27,7 @@ import DialogService from 'primevue/dialogservice';
 import ConfirmationService from 'primevue/confirmationservice';
 import Toast from 'primevue/toast';
 import ConfirmDialog from 'primevue/confirmdialog';
+import Tooltip from 'primevue/tooltip';
 
 import App from './App.vue';
 import router from './router';
@@ -51,6 +52,7 @@ app.use(PrimeVue);
 
 app.component('PVToast', Toast);
 app.component('ConfirmDialog', ConfirmDialog);
+app.directive('tooltip', Tooltip);
 
 features.getFeatures().then(() => {
   app.use(router(features));