tristan
660c3787fd
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [x] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #27 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
93 lines
3.4 KiB
Vue
93 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
|
|
const page = ref(1)
|
|
const perPage = ref(10)
|
|
const filtreNom = ref('')
|
|
const filtreVille = ref<string | number | null>(null)
|
|
|
|
const columns = [
|
|
{ key: 'nom', label: 'Nom' },
|
|
{ key: 'prenom', label: 'Prénom' },
|
|
{ key: 'ville', label: 'Ville' },
|
|
{ key: 'montant', label: 'Montant' },
|
|
]
|
|
|
|
const allItems = [
|
|
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
|
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
|
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
|
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
|
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
|
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
|
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
|
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
|
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
|
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
|
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
|
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
|
{ id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
|
|
{ id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
|
|
{ id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
|
|
]
|
|
|
|
const filteredItems = computed(() => {
|
|
return allItems.filter((item) => {
|
|
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
|
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
|
return true
|
|
})
|
|
})
|
|
|
|
const paginatedItems = computed(() => {
|
|
const start = (page.value - 1) * perPage.value
|
|
return filteredItems.value.slice(start, start + perPage.value)
|
|
})
|
|
|
|
function onRowClick(item: Record<string, unknown>) {
|
|
alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<div class="rounded-lg border p-6">
|
|
<h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
|
|
<MalioDataTable
|
|
:columns="columns"
|
|
:items="paginatedItems"
|
|
:total-items="filteredItems.length"
|
|
v-model:page="page"
|
|
v-model:per-page="perPage"
|
|
@row-click="onRowClick"
|
|
>
|
|
<template #header-nom>
|
|
<input
|
|
v-model="filtreNom"
|
|
type="text"
|
|
placeholder="Nom"
|
|
class="w-full border-0 border-b border-black bg-transparent px-0 py-1 outline-none text-[20px]"
|
|
>
|
|
</template>
|
|
|
|
<template #header-ville>
|
|
<select
|
|
:value="filtreVille ?? ''"
|
|
class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-[20px] outline-none"
|
|
@change="filtreVille = ($event.target as HTMLSelectElement).value || null"
|
|
>
|
|
<option value="">Ville</option>
|
|
<option value="Paris">Paris</option>
|
|
<option value="Lyon">Lyon</option>
|
|
<option value="Marseille">Marseille</option>
|
|
</select>
|
|
</template>
|
|
|
|
<template #cell-montant="{ item }">
|
|
<strong>{{ item.montant }} €</strong>
|
|
</template>
|
|
</MalioDataTable>
|
|
</div>
|
|
</div>
|
|
</template>
|