@drax/audit-vue 0.38.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@drax/audit-vue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.38.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@drax/crud-front": "^0.38.0",
+    "@drax/crud-share": "^0.38.0"
+  },
+  "peerDependencies": {
+    "pinia": "^2.2.2",
+    "vue": "^3.5.7",
+    "vue-i18n": "^9.14.0",
+    "vuetify": "^3.7.2"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.7.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "typescript": "5.6.3",
+    "vite": "^5.4.3",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.4.0",
+    "vue": "^3.5.3",
+    "vue-tsc": "^2.0.11",
+    "vuetify": "^3.7.1"
+  },
+  "gitHead": "43c90f3c12165e7527edefbc80dd327a59236dd5"
+}

package/src/components/AuditView.vue

@@ -0,0 +1,380 @@
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { IAudit } from '@drax/audit-share'
+
+interface Props {
+  audit: IAudit
+}
+
+const props = defineProps<Props>()
+
+const actionColor = computed(() => {
+  const actionMap: Record<string, string> = {
+    'CREATE': 'success',
+    'UPDATE': 'warning',
+    'DELETE': 'error',
+    'READ': 'info',
+    'EXPORT': 'primary'
+  }
+  return actionMap[props.audit.action] || 'secondary'
+})
+
+const actionIcon = computed(() => {
+  const iconMap: Record<string, string> = {
+    'CREATE': 'mdi-plus-circle',
+    'UPDATE': 'mdi-pencil-circle',
+    'DELETE': 'mdi-delete-circle',
+    'READ': 'mdi-eye-circle',
+    'EXPORT': 'mdi-download-circle'
+  }
+  return iconMap[props.audit.action] || 'mdi-information-circle'
+})
+
+const formattedDate = computed(() => {
+  if (!props.audit.createdAt) return 'N/A'
+  return new Date(props.audit.createdAt).toLocaleString('es-ES', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+})
+
+const hasChanges = computed(() => {
+  return props.audit.changes && props.audit.changes.length > 0
+})
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text)
+}
+</script>
+
+<template>
+  <v-card class="audit-view-card" elevation="2">
+    <!-- Header con acción y fecha -->
+    <v-card-title class="d-flex align-center pa-4 bg-gradient">
+      <v-icon :color="actionColor" size="32" class="mr-3">
+        {{ actionIcon }}
+      </v-icon>
+      <div class="flex-grow-1">
+        <div class="text-h6 font-weight-bold">
+          {{ audit.action }}
+        </div>
+        <div class="text-caption text-medium-emphasis">
+          {{ formattedDate }}
+        </div>
+      </div>
+      <v-chip :color="actionColor" variant="flat" size="small" class="font-weight-bold">
+        {{ audit.entity }}
+      </v-chip>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-6">
+      <!-- Información General -->
+      <div class="mb-8">
+        <div class="section-header mb-4">
+          <v-icon color="primary" class="mr-2">mdi-information</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Información General</span>
+        </div>
+        <v-card variant="outlined" class="pa-4">
+          <div class="info-row mb-4">
+            <span class="info-label">Acción:</span>
+            <v-chip :color="actionColor" variant="tonal" size="small" class="ml-2">
+              {{ audit.action }}
+            </v-chip>
+          </div>
+          <v-divider class="my-3" />
+          <div class="info-row">
+            <span class="info-label">Entidad:</span>
+            <span class="info-value">{{ audit.entity }}</span>
+          </div>
+        </v-card>
+      </div>
+
+      <!-- Información del Usuario -->
+      <div class="mb-8">
+        <div class="section-header mb-4">
+          <v-icon color="primary" class="mr-2">mdi-account-circle</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Usuario</span>
+        </div>
+        <v-card variant="outlined" class="pa-4">
+          <div class="info-row mb-4">
+            <span class="info-label">Nombre de Usuario:</span>
+            <span class="info-value">{{ audit.user.username }}</span>
+          </div>
+          <v-divider class="my-3" />
+          <div class="info-row mb-4">
+            <span class="info-label">Rol:</span>
+            <v-chip size="small" color="primary" variant="tonal" class="ml-2">
+              {{ audit.user.rolName }}
+            </v-chip>
+          </div>
+          <v-divider class="my-3" />
+          <div class="info-row">
+            <span class="info-label">ID de Usuario:</span>
+            <div class="d-flex align-center gap-2 ml-2">
+              <span class="info-value font-monospace text-caption">{{ audit.user.id }}</span>
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(audit.user.id)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </v-card>
+      </div>
+
+      <!-- Información de Conexión -->
+      <div class="mb-8">
+        <div class="section-header mb-4">
+          <v-icon color="info" class="mr-2">mdi-network</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Información de Conexión</span>
+        </div>
+        <v-card variant="outlined" class="pa-4">
+          <div class="info-row mb-4">
+            <span class="info-label">
+              <v-icon size="x-small" class="mr-1">mdi-ip</v-icon>
+              Dirección IP:
+            </span>
+            <div class="d-flex align-center gap-2 ml-2">
+              <v-chip size="small" variant="tonal" color="info">
+                {{ audit.ip }}
+              </v-chip>
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(audit.ip)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </div>
+          <v-divider class="my-3" />
+          <div class="info-row">
+            <span class="info-label">
+              <v-icon size="x-small" class="mr-1">mdi-web</v-icon>
+              User Agent:
+            </span>
+            <span class="info-value text-caption">{{ audit.userAgent }}</span>
+          </div>
+        </v-card>
+      </div>
+
+      <!-- Cambios Realizados -->
+      <div v-if="hasChanges" class="mb-8">
+        <div class="section-header mb-4">
+          <v-icon color="warning" class="mr-2">mdi-file-document-edit</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Cambios Realizados</span>
+          <v-chip size="x-small" color="warning" variant="tonal" class="ml-2">
+            {{ audit.changes?.length }} cambios
+          </v-chip>
+        </div>
+        <v-card variant="outlined" class="overflow-hidden">
+          <v-list lines="three" class="pa-0">
+            <template v-for="(change, index) in audit.changes" :key="index">
+              <v-list-item class="change-item">
+                <template #prepend>
+                  <v-avatar color="warning" size="40" class="font-weight-bold">
+                    <v-icon size="small">mdi-swap-horizontal</v-icon>
+                  </v-avatar>
+                </template>
+                <div class="w-100">
+                  <v-list-item-title class="font-weight-bold text-base mb-3">
+                    Campo: {{ change.field }}
+                  </v-list-item-title>
+                  <div v-if="change.old" class="mb-2">
+                    <span class="info-label">Valor Anterior:</span>
+                    <v-chip
+                      size="small"
+                      color="error"
+                      variant="tonal"
+                      class="font-monospace ml-2 mt-1"
+                    >
+                      <v-icon start size="x-small">mdi-minus</v-icon>
+                      {{ change.old }}
+                    </v-chip>
+                  </div>
+                  <div v-if="change.new">
+                    <span class="info-label">Valor Nuevo:</span>
+                    <v-chip
+                      size="small"
+                      color="success"
+                      variant="tonal"
+                      class="font-monospace ml-2 mt-1"
+                    >
+                      <v-icon start size="x-small">mdi-plus</v-icon>
+                      {{ change.new }}
+                    </v-chip>
+                  </div>
+                </div>
+              </v-list-item>
+              <v-divider v-if="index < audit.changes!.length - 1" />
+            </template>
+          </v-list>
+        </v-card>
+      </div>
+
+      <!-- Detalles Adicionales -->
+      <div v-if="audit.detail" class="mb-8">
+        <div class="section-header mb-4">
+          <v-icon color="info" class="mr-2">mdi-text-box</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Detalles Adicionales</span>
+        </div>
+        <v-card variant="outlined" class="pa-4">
+          <pre class="detail-text">{{ audit.detail }}</pre>
+        </v-card>
+      </div>
+
+      <!-- Información del Tenant -->
+      <div v-if="audit.tenant" class="mb-8">
+        <div class="section-header mb-4">
+          <v-icon color="secondary" class="mr-2">mdi-domain</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Tenant</span>
+        </div>
+        <v-card variant="outlined" class="pa-4">
+          <div class="info-row mb-4">
+            <span class="info-label">Nombre del Tenant:</span>
+            <span class="info-value">{{ audit.tenant.name }}</span>
+          </div>
+          <v-divider class="my-3" />
+          <div class="info-row">
+            <span class="info-label">ID del Tenant:</span>
+            <div class="d-flex align-center gap-2 ml-2">
+              <span class="info-value text-caption font-monospace">{{ audit.tenant.id }}</span>
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(audit.tenant.id)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </v-card>
+      </div>
+
+      <!-- IDs de Sesión y Request -->
+      <div>
+        <div class="section-header mb-4">
+          <v-icon color="grey" class="mr-2">mdi-identifier</v-icon>
+          <span class="text-subtitle-1 font-weight-bold">Identificadores de Sesión</span>
+        </div>
+        <v-card variant="outlined" class="pa-4">
+          <div class="info-row mb-4">
+            <span class="info-label">ID de Auditoría:</span>
+            <div class="d-flex align-center gap-2 ml-2">
+              <span class="info-value text-caption font-monospace">{{ audit._id }}</span>
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(audit._id)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </div>
+          <v-divider class="my-3" />
+          <div v-if="audit.sessionId" class="info-row mb-4">
+            <span class="info-label">ID de Sesión:</span>
+            <div class="d-flex align-center gap-2 ml-2">
+              <span class="info-value text-caption font-monospace">{{ audit.sessionId }}</span>
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(audit.sessionId)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </div>
+          <v-divider class="my-3" />
+          <div v-if="audit.requestId" class="info-row">
+            <span class="info-label">ID de Petición:</span>
+            <div class="d-flex align-center gap-2 ml-2">
+              <span class="info-value text-caption font-monospace">{{ audit.requestId }}</span>
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(audit.requestId)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </v-card>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.audit-view-card {
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.audit-view-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+}
+
+.bg-gradient {
+  background: linear-gradient(135deg, rgb(var(--v-theme-surface-variant)) 0%, rgb(var(--v-theme-surface)) 100%);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 2px solid rgba(var(--v-theme-primary), 0.2);
+}
+
+.info-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.info-label {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: rgb(var(--v-theme-on-surface-variant));
+  text-transform: uppercase;
+}
+
+.info-value {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.detail-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  padding: 0;
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.change-item {
+  transition: background-color 0.2s ease;
+}
+
+.change-item:hover {
+  background-color: rgba(var(--v-theme-surface-variant), 0.5);
+}
+</style>

package/src/cruds/AuditCrud.ts

@@ -0,0 +1,204 @@
+import {EntityCrud} from "@drax/crud-vue";
+import type {
+    IDraxCrudProvider,
+    IEntityCrud,
+    IEntityCrudField,
+    IEntityCrudFilter,
+    IEntityCrudHeader,
+    IEntityCrudPermissions,
+    IEntityCrudRefs,
+    IEntityCrudRules
+} from "@drax/crud-share";
+import {AuditProvider} from "@drax/audit-front";
+
+//Import EntityCrud Refs
+
+class AuditCrud extends EntityCrud implements IEntityCrud {
+
+    static singleton: AuditCrud
+
+    constructor() {
+        super();
+        this.name = 'Audit'
+    }
+
+    static get instance(): AuditCrud {
+        if (!AuditCrud.singleton) {
+            AuditCrud.singleton = new AuditCrud()
+        }
+        return AuditCrud.singleton
+    }
+
+    get permissions(): IEntityCrudPermissions {
+        return {
+            manage: 'audit:manage',
+            view: 'audit:view',
+            create: 'audit:create',
+            update: 'audit:update',
+            delete: 'audit:delete'
+        }
+    }
+
+    get headers(): IEntityCrudHeader[] {
+        return [
+            {title: 'createdAt',key:'createdAt', align: 'start'},
+            {title: 'entity',key:'entity', align: 'start'},
+            {title: 'user',key:'user', align: 'start'},
+            {title: 'action',key:'action', align: 'start'},
+            {title: 'ip',key:'ip', align: 'start'},
+            {title: 'userAgent',key:'userAgent', align: 'start'},
+            {title: 'changes',key:'changes', align: 'start'},
+            {title: 'sessionId',key:'sessionId', align: 'start'},
+            {title: 'requestId',key:'requestId', align: 'start'},
+            {title: 'detail',key:'detail', align: 'start'},
+            {title: 'tenant',key:'tenant', align: 'start'}
+        ]
+    }
+
+    get selectedHeaders(): string[] {
+        return this.headers
+            .filter(header => ['detail','sessionId','requestId','userAgent','ip'].includes(header.key))
+            .map(header => header.key)
+
+    }
+
+    get actionHeaders(): IEntityCrudHeader[] {
+        return [
+            {
+                title: 'action.actions',
+                key: 'actions',
+                sortable: false,
+                align: 'center',
+                minWidth: '190px'
+            },
+        ]
+    }
+
+    get provider(): IDraxCrudProvider<any, any, any> {
+        return AuditProvider.instance
+    }
+
+    get refs(): IEntityCrudRefs {
+        return {}
+    }
+
+    get rules(): IEntityCrudRules {
+        return {
+            entity: [(v: any) => !!v || 'validation.required'],
+            user: [(v: any) => !!v || 'validation.required'],
+            action: [(v: any) => !!v || 'validation.required'],
+            ip: [(v: any) => !!v || 'validation.required'],
+            userAgent: [(v: any) => !!v || 'validation.required'],
+            changes: [],
+            sessionId: [],
+            requestId: [],
+            detail: [],
+            tenant: []
+        }
+    }
+
+    get fields(): IEntityCrudField[] {
+        return [
+            {name: 'entity', type: 'string', label: 'entity', default: ''},
+            {
+                name: 'user',
+                type: 'object',
+                label: 'user',
+                default: {"id": "''", "username": "''", "rolName": "''"},
+                objectFields: [{name: 'id', type: 'string', label: 'id', default: ''},
+                    {name: 'username', type: 'string', label: 'username', default: ''},
+                    {name: 'rolName', type: 'string', label: 'rolName', default: ''}]
+            },
+            {name: 'action', type: 'string', label: 'action', default: ''},
+            {name: 'ip', type: 'string', label: 'ip', default: ''},
+            {name: 'userAgent', type: 'string', label: 'userAgent', default: ''},
+            {
+                name: 'changes',
+                type: 'array.object',
+                label: 'changes',
+                default: [],
+                objectFields: [{name: 'field', type: 'string', label: 'field', default: ''},
+                    {name: 'old', type: 'string', label: 'old', default: ''},
+                    {name: 'new', type: 'string', label: 'new', default: ''}]
+            },
+            {name: 'sessionId', type: 'string', label: 'sessionId', default: ''},
+            {name: 'requestId', type: 'string', label: 'requestId', default: ''},
+            {name: 'detail', type: 'longString', label: 'detail', default: ''},
+            {
+                name: 'tenant',
+                type: 'object',
+                label: 'tenant',
+                default: {"id": "''", "name": "''"},
+                objectFields: [{name: 'id', type: 'string', label: 'id', default: ''},
+                    {name: 'name', type: 'string', label: 'name', default: ''}]
+            }
+        ]
+    }
+
+    get filters(): IEntityCrudFilter[] {
+        return [
+            //{name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
+        ]
+    }
+
+    get isViewable() {
+        return true
+    }
+
+    get isEditable() {
+        return false
+    }
+
+    get isCreatable() {
+        return false
+    }
+
+    get isDeletable() {
+        return false
+    }
+
+    get isExportable() {
+        return true
+    }
+
+    get exportFormats() {
+        return ['CSV', 'JSON']
+    }
+
+    get exportHeaders() {
+        return ['_id']
+    }
+
+    get isImportable() {
+        return false
+    }
+
+    get isColumnSelectable() {
+        return true
+    }
+
+    get isGroupable() {
+        return true
+    }
+
+    get importFormats() {
+        return ['CSV', 'JSON']
+    }
+
+    get dialogFullscreen() {
+        return false
+    }
+
+    get tabs() {
+        return []
+    }
+
+    get menus() {
+        return []
+    }
+
+
+}
+
+export default AuditCrud
+

package/src/index.ts

@@ -0,0 +1,17 @@
+import AuditRoutes from './routes/index'
+import AuditCrudPage from './pages/crud/AuditCrudPage.vue'
+import AuditView from './components/AuditView.vue'
+import AuditCrud from './cruds/AuditCrud'
+
+
+export {
+    //ROUTES
+    AuditRoutes,
+    //PAGES
+    AuditCrudPage,
+    //COMPONENTS
+    AuditView,
+    //CRUD
+    AuditCrud,
+    //I18N
+}

package/src/pages/crud/AuditCrudPage.vue

@@ -0,0 +1,28 @@
+
+<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";
+
+const store = useCrudStore();
+
+</script>
+
+<template>
+  <crud :entity="AuditCrud.instance">
+
+    <template v-slot:item.createdAt="{value}">
+      {{ formatDateTime(value) }}
+    </template>
+
+    <template v-slot:form>
+      <audit-view :audit="store.form"></audit-view>
+    </template>
+  </crud>
+</template>
+
+<style scoped>
+
+</style>
+

package/src/routes/AuditCrudRoute.ts

@@ -0,0 +1,18 @@
+
+import AuditCrudPage from "../pages/crud/AuditCrudPage.vue";
+
+
+const AuditCrudRoute = [
+  {
+    name: 'AuditCrudPage',
+    path: '/crud/audit',
+    component: AuditCrudPage,
+    meta: {
+      auth: true,
+      permission: 'audit:manage',
+    }
+  },
+]
+
+export default AuditCrudRoute
+export { AuditCrudRoute }

package/src/routes/index.ts

@@ -0,0 +1,8 @@
+import {AuditCrudRoute} from "./AuditCrudRoute"
+
+
+const index = [
+    ...AuditCrudRoute
+]
+
+export default index