feat(ui): add Created At column to TagList's table

Author: luizhf42

ui/src/components/Tags/TagList.vue

@@ -20,6 +20,12 @@
         >
           {{ item.name }}
         </td>
+        <td
+          class="text-center"
+          data-test="tag-created-at"
+        >
+          {{ formatShortDateTime(item.created_at) }}
+        </td>
         <td class="text-center">
           <v-menu
             location="bottom"
@@ -92,12 +98,17 @@ import TagEdit from "./TagEdit.vue";
 import handleError from "@/utils/handleError";
 import useTagsStore from "@/store/modules/tags";
 import useSnackbar from "@/helpers/snackbar";
+import { formatShortDateTime } from "@/utils/date";
 
 const headers = ref([
   {
     text: "Name",
     value: "name",
   },
+  {
+    text: "Created At",
+    value: "created_at",
+  },
   {
     text: "Actions",
     value: "actions",

ui/tests/components/Tags/TagList.spec.ts

@@ -8,7 +8,20 @@ import { router } from "@/router";
 import { tagsApi } from "@/api/http";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 
-const tags = [{ name: "123x" }, { name: "newtag" }];
+const tags = [
+  {
+    tenant_id: "fake-tenant-data",
+    name: "123x",
+    created_at: "2025-01-01T10:00:00Z",
+    updated_at: "2025-01-01T10:00:00Z",
+  },
+  {
+    tenant_id: "fake-tenant-data",
+    name: "newtag",
+    created_at: "2025-01-02T12:00:00Z",
+    updated_at: "2025-01-02T12:00:00Z",
+  },
+];
 
 describe("Tag List", () => {
   const vuetify = createVuetify();

ui/tests/components/Tags/__snapshots__/TagList.spec.ts.snap

@@ -9,12 +9,14 @@ exports[`Tag List > Renders the component 1`] = `
         <thead class="bg-v-theme-background">
           <tr>
             <th class="text-center" data-test="th-name"><span data-test="th-label">Name</span></th>
+            <th class="text-center" data-test="th-created_at"><span data-test="th-label">Created At</span></th>
             <th class="text-center" data-test="th-actions"><span data-test="th-label">Actions</span></th>
           </tr>
         </thead>
         <tbody data-test="tbody-has-items">
           <tr>
             <td class="text-center" data-test="tag-name">123x</td>
+            <td class="text-center" data-test="tag-created-at">January 1, 2025 10:00 AM</td>
             <td class="text-center"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-plain border rounded bg-v-theme-background" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-7" aria-owns="v-menu-v-7" data-test="tag-list-actions"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                 <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-format-list-bulleted mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                 <!---->
@@ -26,6 +28,7 @@ exports[`Tag List > Renders the component 1`] = `
           </tr>
           <tr>
             <td class="text-center" data-test="tag-name">newtag</td>
+            <td class="text-center" data-test="tag-created-at">January 2, 2025 12:00 PM</td>
             <td class="text-center"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-plain border rounded bg-v-theme-background" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-11" aria-owns="v-menu-v-11" data-test="tag-list-actions"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                 <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-format-list-bulleted mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                 <!---->