119 lines
3.4 KiB
Vue
119 lines
3.4 KiB
Vue
<template>
|
|
<div v-if="loading" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="error" class="text-center py-5 text-danger">
|
|
{{ error }}
|
|
</div>
|
|
<div v-else-if="clientGroup" class="container-fluid py-4">
|
|
<div class="row">
|
|
<div class="col-lg-8 mx-auto">
|
|
<div class="card mb-4">
|
|
<div class="card-header pb-0">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6>Détails du groupe</h6>
|
|
<div>
|
|
<soft-button
|
|
color="secondary"
|
|
variant="outline"
|
|
class="me-2"
|
|
@click="goBack"
|
|
>
|
|
Retour
|
|
</soft-button>
|
|
<soft-button
|
|
color="info"
|
|
variant="gradient"
|
|
@click="handleEdit"
|
|
>
|
|
Modifier
|
|
</soft-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<h6 class="text-sm text-uppercase text-muted">Nom</h6>
|
|
<p class="text-lg font-weight-bold">{{ clientGroup.name }}</p>
|
|
</div>
|
|
<div class="col-md-12 mb-3">
|
|
<h6 class="text-sm text-uppercase text-muted">Description</h6>
|
|
<p class="text-sm">
|
|
{{ clientGroup.description || "Aucune description" }}
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="text-sm text-uppercase text-muted">
|
|
Date de création
|
|
</h6>
|
|
<p class="text-sm">{{ formatDate(clientGroup.created_at) }}</p>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="text-sm text-uppercase text-muted">
|
|
Dernière modification
|
|
</h6>
|
|
<p class="text-sm">{{ formatDate(clientGroup.updated_at) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, defineProps } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useClientGroupStore } from "@/stores/clientGroupStore";
|
|
import SoftButton from "@/components/SoftButton.vue";
|
|
|
|
const props = defineProps({
|
|
groupId: {
|
|
type: [String, Number],
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const router = useRouter();
|
|
const clientGroupStore = useClientGroupStore();
|
|
const clientGroup = ref(null);
|
|
const loading = ref(true);
|
|
const error = ref(null);
|
|
|
|
onMounted(async () => {
|
|
loading.value = true;
|
|
try {
|
|
const fetchedGroup = await clientGroupStore.fetchClientGroup(props.groupId);
|
|
clientGroup.value = fetchedGroup;
|
|
} catch (e) {
|
|
error.value = "Impossible de charger le groupe.";
|
|
console.error(e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
|
|
const goBack = () => {
|
|
router.back();
|
|
};
|
|
|
|
const handleEdit = () => {
|
|
router.push(`/clients/groups/${props.groupId}/edit`);
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return "-";
|
|
return new Date(dateString).toLocaleDateString("fr-FR", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
};
|
|
</script>
|