refactor : merge Inventory_frontend submodule into frontend/ directory
Merges the full git history of Inventory_frontend into the monorepo under frontend/. Removes the submodule in favor of a unified repo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
234
frontend/app/pages/activity-log.vue
Normal file
234
frontend/app/pages/activity-log.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<main class="container mx-auto px-6 py-10 space-y-8">
|
||||
<header>
|
||||
<h1 class="text-3xl font-semibold text-base-content">Journal d'activité</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
Historique des modifications sur l'ensemble des pièces, produits et composants.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="card border border-base-200 bg-base-100 shadow-sm">
|
||||
<div class="card-body space-y-4">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:rows="entries"
|
||||
:loading="loading"
|
||||
:pagination="paginationState"
|
||||
:show-per-page="true"
|
||||
:show-counter="true"
|
||||
:expandable="true"
|
||||
:expanded-keys="expandedIds"
|
||||
:can-expand="canExpandRow"
|
||||
row-key="id"
|
||||
empty-message="Aucune activité enregistrée."
|
||||
no-results-message="Aucune activité ne correspond à vos filtres."
|
||||
@update:current-page="table.handlePageChange"
|
||||
@update:per-page="table.handlePerPageChange"
|
||||
@toggle-expand="toggleExpanded"
|
||||
>
|
||||
<template #toolbar>
|
||||
<div class="flex items-center gap-2">
|
||||
<label
|
||||
class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
|
||||
for="activity-entity-type"
|
||||
>
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
id="activity-entity-type"
|
||||
v-model="entityTypeFilter"
|
||||
class="select select-bordered select-sm"
|
||||
@change="table.handleFilterChange"
|
||||
>
|
||||
<option value="">Tous</option>
|
||||
<option value="piece">Pièce</option>
|
||||
<option value="product">Produit</option>
|
||||
<option value="composant">Composant</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<label
|
||||
class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
|
||||
for="activity-action"
|
||||
>
|
||||
Action
|
||||
</label>
|
||||
<select
|
||||
id="activity-action"
|
||||
v-model="actionFilter"
|
||||
class="select select-bordered select-sm"
|
||||
@change="table.handleFilterChange"
|
||||
>
|
||||
<option value="">Toutes</option>
|
||||
<option value="create">Création</option>
|
||||
<option value="update">Modification</option>
|
||||
<option value="delete">Suppression</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell-createdAt="{ row }">
|
||||
<span class="whitespace-nowrap">{{ formatHistoryDate(row.createdAt) }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-action="{ row }">
|
||||
<span
|
||||
class="badge badge-sm"
|
||||
:class="actionBadgeClass(row.action)"
|
||||
>
|
||||
{{ historyActionLabel(row.action) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #cell-entityType="{ row }">
|
||||
<span class="badge badge-ghost badge-sm">
|
||||
{{ entityTypeLabel(row.entityType) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #cell-entity="{ row }">
|
||||
<NuxtLink
|
||||
v-if="row.action !== 'delete'"
|
||||
:to="entityEditLink(row)"
|
||||
class="link link-hover link-primary"
|
||||
>
|
||||
{{ row.entityName || 'Sans nom' }}
|
||||
</NuxtLink>
|
||||
<span v-else class="text-base-content/50 line-through">
|
||||
{{ row.entityName || 'Sans nom' }}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.entityRef"
|
||||
class="text-xs text-base-content/50 ml-1"
|
||||
>
|
||||
({{ row.entityRef }})
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #cell-author="{ row }">
|
||||
{{ row.actor?.label || '—' }}
|
||||
</template>
|
||||
|
||||
<template #row-expanded="{ row }">
|
||||
<div class="space-y-1 text-sm">
|
||||
<div
|
||||
v-for="diffEntry in historyDiffEntries(row, globalFieldLabels)"
|
||||
:key="diffEntry.field"
|
||||
class="flex gap-2"
|
||||
>
|
||||
<span class="font-medium min-w-[10rem]">{{ diffEntry.label }} :</span>
|
||||
<span class="text-error line-through">{{ diffEntry.fromLabel }}</span>
|
||||
<span>→</span>
|
||||
<span class="text-success">{{ diffEntry.toLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, type Ref } from 'vue'
|
||||
import DataTable from '~/components/common/DataTable.vue'
|
||||
import { useActivityLog } from '~/composables/useActivityLog'
|
||||
import type { ActivityLogEntry } from '~/composables/useActivityLog'
|
||||
import { useDataTable } from '~/composables/useDataTable'
|
||||
import {
|
||||
historyActionLabel,
|
||||
formatHistoryDate,
|
||||
historyDiffEntries,
|
||||
} from '~/shared/utils/historyDisplayUtils'
|
||||
|
||||
const { entries, total, loading, loadActivityLog } = useActivityLog()
|
||||
|
||||
const table = useDataTable(
|
||||
{ fetchData: fetchLog },
|
||||
{
|
||||
defaultSort: 'createdAt',
|
||||
defaultDirection: 'desc',
|
||||
defaultPerPage: 50,
|
||||
persistToUrl: true,
|
||||
extraParams: {
|
||||
entityType: { default: '' },
|
||||
action: { default: '' },
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const entityTypeFilter = table.filters.entityType as Ref<string>
|
||||
const actionFilter = table.filters.action as Ref<string>
|
||||
|
||||
const entriesOnPage = computed(() => entries.value.length)
|
||||
const paginationState = table.pagination(total, entriesOnPage)
|
||||
|
||||
const columns = [
|
||||
{ key: 'createdAt', label: 'Date' },
|
||||
{ key: 'action', label: 'Action' },
|
||||
{ key: 'entityType', label: 'Type' },
|
||||
{ key: 'entity', label: 'Entité' },
|
||||
{ key: 'author', label: 'Auteur' },
|
||||
]
|
||||
|
||||
const expandedIds = reactive(new Set<string>())
|
||||
|
||||
const toggleExpanded = (id: string) => {
|
||||
if (expandedIds.has(id)) expandedIds.delete(id)
|
||||
else expandedIds.add(id)
|
||||
}
|
||||
|
||||
const canExpandRow = (row: any) =>
|
||||
row.diff !== null && row.diff !== undefined && Object.keys(row.diff).length > 0
|
||||
|
||||
function fetchLog() {
|
||||
loadActivityLog({
|
||||
page: table.currentPage.value,
|
||||
itemsPerPage: table.itemsPerPage.value,
|
||||
entityType: entityTypeFilter.value || undefined,
|
||||
action: actionFilter.value || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
const ENTITY_TYPE_LABELS: Record<string, string> = {
|
||||
piece: 'Pièce',
|
||||
product: 'Produit',
|
||||
composant: 'Composant',
|
||||
}
|
||||
|
||||
const entityTypeLabel = (type: string) => ENTITY_TYPE_LABELS[type] ?? type
|
||||
|
||||
const ENTITY_EDIT_ROUTES: Record<string, string> = {
|
||||
piece: '/pieces',
|
||||
product: '/product',
|
||||
composant: '/component',
|
||||
}
|
||||
|
||||
const entityEditLink = (entry: ActivityLogEntry) => {
|
||||
const base = ENTITY_EDIT_ROUTES[entry.entityType] ?? ''
|
||||
return base ? `${base}/${entry.entityId}/edit` : '#'
|
||||
}
|
||||
|
||||
const actionBadgeClass = (action: string) => {
|
||||
if (action === 'create') return 'badge-success'
|
||||
if (action === 'delete') return 'badge-error'
|
||||
return 'badge-warning'
|
||||
}
|
||||
|
||||
const globalFieldLabels: Record<string, string> = {
|
||||
name: 'Nom',
|
||||
reference: 'Référence',
|
||||
prix: 'Prix',
|
||||
supplierPrice: 'Prix fournisseur',
|
||||
typePiece: 'Type de pièce',
|
||||
typeProduct: 'Type de produit',
|
||||
typeComposant: 'Type de composant',
|
||||
product: 'Produit',
|
||||
productIds: 'Produits',
|
||||
constructeurIds: 'Fournisseurs',
|
||||
structure: 'Structure',
|
||||
}
|
||||
|
||||
onMounted(fetchLog)
|
||||
</script>
|
||||
Reference in New Issue
Block a user