@drax/audit-vue 0.39.1 → 0.42.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.39.1",
+  "version": "0.42.2",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,8 +24,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/crud-front": "^0.39.0",
-    "@drax/crud-share": "^0.39.0"
+    "@drax/crud-front": "^0.42.2",
+    "@drax/crud-share": "^0.42.2"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -62,5 +62,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "f765e15e64c21dca72b8d4a8d2d6279c7fdb32d5"
+  "gitHead": "6b4f9f50a8e3f0fbdaff7ec913356834a4e2c0b5"
 }

package/src/components/AuditDashboard.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {DashboardView} from "@drax/dashboard-vue"
+import {auditDashboard} from "../dashboards/AuditDashboard"
+import {ref} from "vue"
+import { VDateInput } from 'vuetify/labs/VDateInput'
+import type {IDashboardBase, IDashboardCard} from "@drax/dashboard-share";
+
+const today = new Date()
+today.setHours(23, 59, 59, 999)
+const firstDayOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1)
+const filters = ref([
+  {field: "createdAt", operator:"gte", value: firstDayOfCurrentMonth},
+  {field: "createdAt", operator:"lte", value: today},
+    ]
+)
+
+const ad = ref<IDashboardBase>(auditDashboard)
+
+ad.value.cards?.forEach((card:IDashboardCard) => {
+  card.filters = filters.value
+})
+
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="6">
+        <v-date-input v-model="filters[0].value" label="From"></v-date-input>
+      </v-col>
+      <v-col cols="6">
+        <v-date-input v-model="filters[1].value" label="To"></v-date-input>
+      </v-col>
+
+
+    </v-row>
+    <dashboard-view :dashboard="ad"></dashboard-view>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/AuditView.vue

@@ -3,14 +3,32 @@
   <!-- BLOQUE DE ATRIBUTOS EN COLUMNA -->
   <div class="text-body-2 mt-3">
 
+    <div
+        v-if="audit.createdAt"
+        class="mb-1 audit-row"
+    >
+      <strong class="audit-label">{{ t('audit.field.createdAt') }}:</strong>
+      <span>{{ formatDateTime(audit.createdAt) }}</span>
+    </div>
+
     <div class="mb-1 audit-row">
-      <strong class="audit-label">{{ t('audit.field.action') }}:</strong>
-      <span>{{ audit.action }}</span>
+      <strong class="audit-label">{{ t('audit.field.user') }}:</strong>
+      <span>{{ audit.user.username }}</span> <span v-if="audit.user.rolName"><{{ audit.user.rolName }}></span> <span>(ID {{
+        audit.user.id
+      }})</span>
     </div>
 
     <div class="mb-1 audit-row">
       <strong class="audit-label">{{ t('audit.field.entity') }}:</strong>
-      <span>{{ audit.entity }}</span>
+      <span>{{ te(audit?.entity?.toLowerCase() + '.entity') ? t(audit?.entity.toLowerCase() + '.entity') : audit?.entity }}</span>
+    </div>
+
+    <div class="mb-1 audit-row">
+      <strong class="audit-label">{{ t('audit.field.action') }}:</strong>
+      <span>
+
+          {{ te('audit.action.'+audit.action) ? t('audit.action.'+audit.action) : audit.action }}
+      </span>
     </div>
 
     <div class="mb-1 audit-row">
@@ -19,12 +37,7 @@
     </div>
 
 
-    <div class="mb-1 audit-row">
-      <strong class="audit-label">{{ t('audit.field.user') }}:</strong>
-      <span>{{ audit.user.username }}</span> <span v-if="audit.user.rolName"><{{ audit.user.rolName }}></span> <span>(ID {{
-        audit.user.id
-      }})</span>
-    </div>
+
 
     <div
         v-if="audit.apiKey?.id"
@@ -70,13 +83,7 @@
       <span>{{ audit.requestId }}</span>
     </div>
 
-    <div
-        v-if="audit.createdAt"
-        class="mb-1 audit-row"
-    >
-      <strong class="audit-label">{{ t('audit.field.createdAt') }}:</strong>
-      <span>{{ formatDateTime(audit.createdAt) }}</span>
-    </div>
+
 
 
   </div>
@@ -173,7 +180,7 @@ interface IAudit {
   updatedAt?: string
 }
 
-const {t} = useI18n()
+const {t, te} = useI18n()
 
 defineProps<{
   audit: IAudit

package/src/cruds/AuditCrud.ts

@@ -105,6 +105,7 @@ class AuditCrud extends EntityCrud implements IEntityCrud {
                 name: 'user',
                 type: 'object',
                 label: 'user',
+                refDisplay:'username',
                 default: {"id": "''", "username": "''", "rolName": "''"},
                 objectFields: [{name: 'id', type: 'string', label: 'id', default: ''},
                     {name: 'username', type: 'string', label: 'username', default: ''},

package/src/dashboards/AuditDashboard.ts

@@ -0,0 +1,73 @@
+import type {IDashboardBase} from "@drax/dashboard-share";
+import AuditCrud from "../cruds/AuditCrud";
+
+const auditDashboard: IDashboardBase = {
+    identifier: "audit",
+    title: "Audit Dashboard",
+    cards: [
+        {
+            entity: 'Audit',
+            type: "groupBy",
+            entityInstance: AuditCrud.instance,
+            title: "User Entity Action",
+            filters: [],
+            layout:{
+                cols: 12, sm: 12, md: 12, lg: 12, cardVariant: "outlined", height: 400
+            },
+            groupBy: {
+                fields: ["user", "entity", "action"],
+                dateFormat: "day",
+                render: "table"
+            }
+        },
+        {
+            entity: 'Audit',
+            type: "groupBy",
+            entityInstance: AuditCrud.instance,
+            title: "User Audits",
+            filters: [],
+            layout:{
+                cols: 12, sm: 12, md: 4, lg: 4, cardVariant: "outlined", height: 400
+            },
+            groupBy: {
+                fields: ["user"],
+                dateFormat: "day",
+                render: "pie"
+            }
+        },
+        {
+            entity: 'Audit',
+            type: "groupBy",
+            entityInstance: AuditCrud.instance,
+            title: "Entity Audits",
+            filters: [],
+            layout:{
+                cols: 12, sm: 12, md: 4, lg: 4, cardVariant: "outlined", height: 400
+            },
+            groupBy: {
+                fields: ["entity"],
+                dateFormat: "day",
+                render: "pie"
+            }
+        },
+        {
+            entity: 'Audit',
+            type: "groupBy",
+            entityInstance: AuditCrud.instance,
+            title: "Action Audits",
+            filters: [],
+            layout:{
+                cols: 12, sm: 12, md: 4, lg: 4, cardVariant: "outlined", height: 400
+            },
+            groupBy: {
+                fields: ["action"],
+                dateFormat: "day",
+                render: "pie"
+            }
+        },
+
+    ]
+}
+
+export {auditDashboard}
+export default auditDashboard;

package/src/pages/crud/AuditCrudDashboardPage.vue

@@ -0,0 +1,73 @@
+
+<script setup lang="ts">
+import AuditCrud from '../../cruds/AuditCrud'
+import {Crud, useCrudStore} from "@drax/crud-vue";
+import {formatDateTime} from "@drax/common-front"
+import AuditView from "../../components/AuditView.vue";
+import {ref} from "vue";
+import AuditDashboard from "../../components/AuditDashboard.vue";
+import {useI18n} from "vue-i18n";
+
+const {t, te} = useI18n();
+const store = useCrudStore();
+const tabSelected = ref('crud');
+
+</script>
+
+<template>
+    <v-tabs v-model="tabSelected">
+      <v-tab value="crud">
+        {{ t('audit.crud') }}
+      </v-tab>
+      <v-tab value="dashboard">
+        {{ t('audit.dashboard') }}
+      </v-tab>
+    </v-tabs>
+
+    <v-tabs-window v-model="tabSelected">
+      <v-tabs-window-item value="crud">
+        <crud :entity="AuditCrud.instance">
+
+          <template v-slot:item.createdAt="{value}">
+            {{ formatDateTime(value) }}
+          </template>
+
+          <template v-slot:item.user="{value}">
+           {{ value.username }} ({{value.rolName}})
+          </template>
+
+          <template v-slot:item.tenant="{value}">
+            {{ value?.name }}
+          </template>
+
+          <template v-slot:item.action="{value}">
+            {{ te('audit.action.'+value) ? t('audit.action.'+value) : value }}
+          </template>
+
+          <template v-slot:item.changes="{value}">
+            <div v-if="value && value.length > 0" class="changes-container">
+              <div v-for="(change, index) in value" :key="index" class="change-item">
+                <span class="field-name">{{ change.field }}:</span>
+                <span class="old-value">{{ change.old }}</span>
+                <span class="arrow">→</span>
+                <span class="new-value">{{ change.new }}</span>
+              </div>
+            </div>
+            <span v-else class="no-changes">Sin cambios</span>
+          </template>
+
+          <template v-slot:form>
+            <audit-view :audit="store.form"></audit-view>
+          </template>
+        </crud>
+      </v-tabs-window-item>
+
+      <v-tabs-window-item value="dashboard">
+         <audit-dashboard></audit-dashboard>
+      </v-tabs-window-item>
+    </v-tabs-window>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/crud/AuditCrudPage.vue

@@ -3,8 +3,11 @@
 import AuditCrud from '../../cruds/AuditCrud'
 import {Crud, useCrudStore} from "@drax/crud-vue";
 import {formatDateTime} from "@drax/common-front"
+import {EntityCombobox} from "@drax/crud-vue"
 import AuditView from "../../components/AuditView.vue";
+import {useI18n} from "vue-i18n";
 
+const {t, te} = useI18n();
 const store = useCrudStore();
 
 </script>
@@ -12,18 +15,38 @@ const store = useCrudStore();
 <template>
   <crud :entity="AuditCrud.instance">
 
+    <template v-slot:filter.entity="{filterIndex}">
+     <entity-combobox
+         v-model="store.filters[filterIndex].value"
+         :clearable="true"
+         density="compact"
+         variant="outlined"
+         hide-details
+         disable-rules
+         prepend-inner-icon="mdi-equal"
+     />
+    </template>
+
     <template v-slot:item.createdAt="{value}">
       {{ formatDateTime(value) }}
     </template>
 
     <template v-slot:item.user="{value}">
-     {{ value.username }} ({{value.rolName}})
+      {{ value.username }} ({{value.rolName}})
     </template>
 
     <template v-slot:item.tenant="{value}">
       {{ value?.name }}
     </template>
 
+    <template v-slot:item.action="{value}">
+      {{ te('audit.action.'+value) ? t('audit.action.'+value) : value }}
+    </template>
+
+    <template v-slot:item.entity="{value}">
+      {{ te(value?.toLowerCase() + '.entity') ? t(value.toLowerCase() + '.entity') : value }}
+    </template>
+
     <template v-slot:item.changes="{value}">
       <div v-if="value && value.length > 0" class="changes-container">
         <div v-for="(change, index) in value" :key="index" class="change-item">

package/src/routes/AuditCrudRoute.ts

@@ -1,5 +1,6 @@
 
 import AuditCrudPage from "../pages/crud/AuditCrudPage.vue";
+import AuditCrudDashboardPage from "../pages/crud/AuditCrudDashboardPage.vue";
 
 
 const AuditCrudRoute = [
@@ -12,6 +13,15 @@ const AuditCrudRoute = [
       permission: 'audit:manage',
     }
   },
+  {
+    name: 'AuditCrudDashboardPage',
+    path: '/crud/audit-ds',
+    component: AuditCrudDashboardPage,
+    meta: {
+      auth: true,
+      permission: 'audit:manage',
+    }
+  },
 ]
 
 export default AuditCrudRoute