169 lines
4.2 KiB
Vue
169 lines
4.2 KiB
Vue
<template>
|
|
<div class="card mt-4">
|
|
<div class="table-responsive">
|
|
<table id="client-group-list" class="table table-flush">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Description</th>
|
|
<th>Date de création</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="group in data" :key="group.id">
|
|
<!-- Name -->
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<soft-checkbox class="me-2" />
|
|
<p class="text-sm font-weight-bold ms-2 mb-0">
|
|
{{ group.name }}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Description -->
|
|
<td class="text-sm">
|
|
<span class="text-secondary">
|
|
{{ group.description || "Aucune description" }}
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Created At -->
|
|
<td class="text-sm font-weight-bold">
|
|
<span class="my-2 text-xs">{{
|
|
formatDate(group.created_at)
|
|
}}</span>
|
|
</td>
|
|
|
|
<!-- Actions -->
|
|
<td class="text-xs font-weight-bold">
|
|
<div class="d-flex align-items-center">
|
|
<button
|
|
class="btn btn-link text-secondary mb-0 px-2"
|
|
:data-id="group.id"
|
|
data-action="view"
|
|
title="Voir le groupe"
|
|
>
|
|
<i class="fas fa-eye text-xs" aria-hidden="true"></i>
|
|
</button>
|
|
<button
|
|
class="btn btn-link text-secondary mb-0 px-2"
|
|
:data-id="group.id"
|
|
data-action="edit"
|
|
title="Modifier le groupe"
|
|
>
|
|
<i class="fas fa-edit text-xs" aria-hidden="true"></i>
|
|
</button>
|
|
<button
|
|
class="btn btn-link text-danger mb-0 px-2"
|
|
:data-id="group.id"
|
|
data-action="delete"
|
|
title="Supprimer le groupe"
|
|
>
|
|
<i class="fas fa-trash text-xs" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
watch,
|
|
onUnmounted,
|
|
defineProps,
|
|
defineEmits,
|
|
} from "vue";
|
|
import { DataTable } from "simple-datatables";
|
|
import SoftCheckbox from "@/components/SoftCheckbox.vue";
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["view", "edit", "delete"]);
|
|
|
|
const dataTableInstance = ref(null);
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return "-";
|
|
const options = {
|
|
day: "numeric",
|
|
month: "short",
|
|
year: "numeric",
|
|
};
|
|
return new Date(dateString).toLocaleDateString("fr-FR", options);
|
|
};
|
|
|
|
const initializeDataTable = () => {
|
|
const table = document.getElementById("client-group-list");
|
|
if (!table) return;
|
|
|
|
if (dataTableInstance.value) {
|
|
dataTableInstance.value.destroy();
|
|
}
|
|
|
|
dataTableInstance.value = new DataTable(table, {
|
|
searchable: true,
|
|
fixedHeight: false,
|
|
perPage: 10,
|
|
});
|
|
|
|
// Event delegation for action buttons
|
|
table.addEventListener("click", (event) => {
|
|
const btn = event.target.closest("button");
|
|
if (!btn) return;
|
|
|
|
const id = btn.getAttribute("data-id");
|
|
const action = btn.getAttribute("data-action");
|
|
|
|
if (id && action) {
|
|
if (action === "view") {
|
|
emit("view", parseInt(id));
|
|
} else if (action === "edit") {
|
|
emit("edit", parseInt(id));
|
|
} else if (action === "delete") {
|
|
emit("delete", parseInt(id));
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (props.data && props.data.length > 0) {
|
|
initializeDataTable();
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => props.data,
|
|
(newData) => {
|
|
if (newData && newData.length > 0) {
|
|
setTimeout(() => {
|
|
initializeDataTable();
|
|
}, 100);
|
|
}
|
|
}
|
|
);
|
|
|
|
onUnmounted(() => {
|
|
if (dataTableInstance.value) {
|
|
dataTableInstance.value.destroy();
|
|
}
|
|
});
|
|
</script>
|