root/New-Thanasoft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Client Desig

Browse Source
This commit is contained in:
kevin 2026-04-22 10:17:47 +03:00
parent d8d2b68421
commit ce61b79080
7 changed files with 376 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
thanasoft-back/database/seeders/ClientSeeder.php Normal file
View File

@ -0,0 +1,48 @@
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\Client;
use App\Models\User;
use Faker\Factory as Faker;
class ClientSeeder extends Seeder
{
public function run(): void
{
$faker = Faker::create('fr_FR');
// Récupérer des users existants (optionnel)
$users = User::pluck('id')->toArray();
for ($i = 0; $i < 20; $i++) {
Client::create([
'name' => $faker->company,
'vat_number' => 'FR' . $faker->numberBetween(10000000000, 99999999999),
'siret' => $faker->numberBetween(10000000000000, 99999999999999),
'email' => $faker->unique()->companyEmail,
'phone' => $faker->phoneNumber,
'billing_address_line1' => $faker->streetAddress,
'billing_address_line2' => $faker->optional()->secondaryAddress,
'billing_postal_code' => $faker->postcode,
'billing_city' => $faker->city,
'billing_country_code' => 'FR',
'group_id' => null, // ou random si tu veux
'notes' => $faker->optional()->sentence,
'is_active' => $faker->boolean(90),
'is_parent' => false,
'parent_id' => null,
'client_category_id' => $faker->numberBetween(1, 5),
'user_id' => 1,
'avatar' => null,
]);
}
}
}

1
thanasoft-back/database/seeders/DatabaseSeeder.php
View File

@ -24,5 +24,6 @@ class DatabaseSeeder extends Seeder
$this->call(ProductCategorySeeder::class);
$this->call(EmployeeSeeder::class);
$this->call(ThanatopractitionerSeeder::class);
$this->call(ClientSeeder::class);
}
}

13
thanasoft-front/src/components/Organism/CRM/ClientPresentation.vue
View File

@ -36,12 +36,7 @@ import { storeToRefs } from "pinia";
const router = useRouter();
const clientStore = useClientStore();
// Use storeToRefs to keep reactivity for pagination if it was passed as a prop,
// but since we are using the store directly for actions, we can also extract it here if needed.
// However, the common pattern is that the parent view passes the data.
// Let's check where clientData comes from. It comes from props.
const emit = defineEmits(["pushDetails"]);
const emit = defineEmits(["pushDetails", "deleteClient"]);
const props = defineProps({
clientData: {
@ -74,7 +69,10 @@ const deleteClient = (client) => {
};
const onPageChange = (page) => {
clientStore.fetchClients({ page: page, per_page: props.pagination.per_page });
clientStore.fetchClients({
page,
per_page: props.pagination.per_page,
});
};
const onPerPageChange = (perPage) => {
@ -84,7 +82,6 @@ const onPerPageChange = (perPage) => {
const onSearch = (query) => {
clientStore.fetchClients({
page: 1,
per_page: props.pagination.per_page,
search: query,
});
};

588
thanasoft-front/src/components/molecules/Tables/CRM/ClientTable.vue
View File

@ -1,101 +1,54 @@
<template>
<div class="table-container">
<!-- Top Controls (Search & Per Page) -->
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex align-items-center">
<select
class="form-select form-select-sm me-2"
style="width: 80px"
:value="pagination.per_page"
@change="onPerPageChange"
>
<option :value="5">5</option>
<option :value="10">10</option>
<option :value="15">15</option>
<option :value="20">20</option>
<option :value="50">50</option>
</select>
<span class="text-secondary text-xs font-weight-bold"
>éléments par page</span
>
</div>
<div class="d-flex align-items-center">
<div class="input-group">
<span class="input-group-text text-body"
><i class="fas fa-search" aria-hidden="true"></i
></span>
<input
type="text"
class="form-control form-control-sm"
placeholder="Rechercher..."
@input="onSearch"
/>
</div>
</div>
</div>
<!-- Loading State -->
<div v-if="loading" class="loading-container">
<div class="loading-spinner">
<div class="spinner-border text-primary" role="status">
<div class="spinner-border text-success loading-spinner-circle" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
<div class="loading-content">
<!-- Skeleton Rows -->
<div class="table-responsive">
<table class="table table-flush">
<thead class="thead-light">
<tr>
<th>Commercial</th>
<th>Client</th>
<th>Address</th>
<th>Categories</th>
<th>Référence</th>
<th>Catégorie</th>
<th>Commercial</th>
<th>Adresse</th>
<th>Contact</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="i in skeletonRows" :key="i" class="skeleton-row">
<!-- Commercial Column Skeleton -->
<td>
<div class="d-flex align-items-center">
<div class="skeleton-checkbox"></div>
<div class="skeleton-text short ms-2"></div>
</div>
</td>
<!-- Client Name Column Skeleton -->
<td>
<div class="d-flex align-items-center">
<div class="skeleton-avatar"></div>
<div class="skeleton-text medium ms-2"></div>
</div>
</td>
<!-- Address Column Skeleton -->
<td>
<div class="skeleton-text long"></div>
<div class="skeleton-text short"></div>
</td>
<!-- Categories Column Skeleton -->
<td>
<div class="d-flex align-items-center">
<div class="skeleton-icon"></div>
<div class="skeleton-text medium ms-2"></div>
</div>
</td>
<!-- Contact Column Skeleton -->
<td>
<div class="skeleton-text long"></div>
</td>
<td>
<div class="skeleton-text long"></div>
</td>
<td>
<div class="contact-info">
<div class="skeleton-text long mb-1"></div>
<div class="skeleton-text medium"></div>
</div>
</td>
<!-- Status Column Skeleton -->
<td>
<div class="d-flex align-items-center">
<div class="skeleton-icon"></div>
@ -109,15 +62,15 @@
</div>
</div>
<!-- Data State -->
<div v-else class="table-responsive">
<table id="contact-list" class="table table-flush">
<table id="client-list" class="table table-flush">
<thead class="thead-light">
<tr>
<th>Commercial</th>
<th>Client</th>
<th>Address</th>
<th>Categories</th>
<th>Référence</th>
<th>Catégorie</th>
<th>Commercial</th>
<th>Adresse</th>
<th>Contact</th>
<th>Status</th>
<th>Action</th>
@ -125,38 +78,23 @@
</thead>
<tbody>
<tr v-for="client in data" :key="client.id">
<!-- Commercial Column -->
<td>
<div class="d-flex align-items-center">
<soft-checkbox />
<p class="text-xs font-weight-bold ms-2 mb-0">
{{ client.commercial }}
</p>
</div>
</td>
<!-- Client Name Column -->
<td class="font-weight-bold">
<div class="d-flex align-items-center">
<soft-avatar
:img="getRandomAvatar()"
:img="client.avatar_url || getRandomAvatar()"
size="xs"
class="me-2"
alt="user image"
alt="client image"
circular
/>
<span>{{ client.name }}</span>
</div>
</td>
<!-- Address Column (Shortened) -->
<td class="text-xs font-weight-bold">
<span class="my-2 text-xs">{{
getShortAddress(client.billing_address)
}}</span>
<span class="my-2 text-xs">{{ getClientReference(client) }}</span>
</td>
<!-- Categories Column -->
<td class="text-xs font-weight-bold">
<div class="d-flex align-items-center">
<soft-button
@ -169,58 +107,71 @@
aria-hidden="true"
></i>
</soft-button>
<span>{{ client.type_label }}</span>
<span>{{ client.type_label || "Non renseigné" }}</span>
</div>
</td>
<td class="text-xs font-weight-bold">
{{ client.commercial || "N/A" }}
</td>
<td class="text-xs font-weight-bold">
<div class="address-info">
<div>{{ getAddressLine(client.billing_address) }}</div>
<div class="text-xs text-muted">
{{ getShortAddress(client.billing_address) }}
</div>
</div>
</td>
<!-- Contact Column -->
<td class="text-xs font-weight-bold">
<div class="contact-info">
<div class="text-xs text-secondary">{{ client.email }}</div>
<div class="text-xs">{{ client.phone }}</div>
<div class="text-xs text-secondary">{{ client.email || "N/A" }}</div>
<div class="text-xs">{{ client.phone || "N/A" }}</div>
</div>
</td>
<!-- Status Column -->
<td class="text-xs font-weight-bold">
<div class="d-flex align-items-center">
<div class="d-flex flex-column">
<soft-button
:color="client.is_active ? 'success' : 'danger'"
v-if="client.is_active"
color="success"
variant="outline"
class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
class="btn-sm"
>
<i
:class="client.is_active ? 'fas fa-check' : 'fas fa-times'"
aria-hidden="true"
></i>
<i class="fas fa-check me-1"></i>
Actif
</soft-button>
<soft-button
v-else
color="danger"
variant="outline"
class="btn-sm"
>
<i class="fas fa-times me-1"></i>
Inactif
</soft-button>
<span>{{ client.is_active ? "Active" : "Inactive" }}</span>
</div>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<!-- View Button -->
<soft-button
color="info"
variant="outline"
title="View Client"
title="Voir le client"
:data-client-id="client.id"
class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
@click="emit('view', client.id)"
>
<i class="fas fa-eye" aria-hidden="true"></i>
</soft-button>
<!-- Delete Button -->
<soft-button
color="danger"
variant="outline"
title="Delete Client"
title="Supprimer le client"
:data-client-id="client.id"
class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
@click="emit('delete', client.id)"
>
<i class="fas fa-trash" aria-hidden="true"></i>
</soft-button>
@ -231,72 +182,72 @@
</table>
</div>
<!-- Pagination Footer -->
<div
v-if="!loading && data.length > 0"
class="d-flex justify-content-between align-items-center mt-3 px-3"
v-if="!loading && data.length > 0 && (pagination?.last_page || 1) > 1"
class="d-flex justify-content-between align-items-center mt-3 px-3 flex-wrap gap-3"
>
<div class="text-xs text-secondary font-weight-bold">
Affichage de {{ pagination.from }} à {{ pagination.to }} sur
{{ pagination.total }} clients
Affichage de {{ safeFrom }} à {{ safeTo }} sur
{{ pagination.total || data.length }} clients
</div>
<nav aria-label="Page navigation">
<nav aria-label="Pagination clients">
<ul class="pagination pagination-sm pagination-success mb-0">
<li
class="page-item"
:class="{ disabled: pagination.current_page === 1 }"
:class="{ disabled: (pagination.current_page || 1) === 1 }"
>
<a
class="page-link"
href="#"
aria-label="Previous"
@click.prevent="changePage(pagination.current_page - 1)"
@click.prevent="changePage((pagination.current_page || 1) - 1)"
>
<span aria-hidden="true"
><i class="fa fa-angle-left" aria-hidden="true"></i
></span>
<span aria-hidden="true">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</li>
<li
v-for="page in displayedPages"
:key="page"
:key="`page-${page}`"
class="page-item"
:class="{ active: pagination.current_page === page }"
:class="{
active: (pagination.current_page || 1) === page,
disabled: page === '...'
}"
>
<a class="page-link" href="#" @click.prevent="changePage(page)">{{
page
}}</a>
<a class="page-link" href="#" @click.prevent="changePage(page)">
{{ page }}
</a>
</li>
<li
class="page-item"
:class="{
disabled: pagination.current_page === pagination.last_page,
disabled: (pagination.current_page || 1) === (pagination.last_page || 1)
}"
>
<a
class="page-link"
href="#"
aria-label="Next"
@click.prevent="changePage(pagination.current_page + 1)"
@click.prevent="changePage((pagination.current_page || 1) + 1)"
>
<span aria-hidden="true"
><i class="fa fa-angle-right" aria-hidden="true"></i
></span>
<span aria-hidden="true">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Empty State -->
<div v-if="!loading && data.length === 0" class="empty-state">
<div class="empty-icon">
<i class="fas fa-users fa-3x text-muted"></i>
</div>
"
<h5 class="empty-title">Aucun client trouvé</h5>
<p class="empty-text text-muted">
Aucun client à afficher pour le moment.
@ -306,22 +257,14 @@
</template>
<script setup>
import { computed } from "vue";
import SoftCheckbox from "@/components/SoftCheckbox.vue";
import { ref, onMounted, watch, onUnmounted, computed } from "vue";
import { DataTable } from "simple-datatables";
import SoftButton from "@/components/SoftButton.vue";
import SoftAvatar from "@/components/SoftAvatar.vue";
import { defineProps, defineEmits } from "vue";
import debounce from "lodash/debounce";
const emit = defineEmits([
"view",
"delete",
"page-change",
"per-page-change",
"search-change",
]);
const emit = defineEmits(["view", "delete", "page-change", "per-page-change"]);
// Sample avatar images
import img1 from "@/assets/img/team-2.jpg";
import img2 from "@/assets/img/team-1.jpg";
import img3 from "@/assets/img/team-3.jpg";
@ -331,6 +274,8 @@ import img6 from "@/assets/img/ivana-squares.jpg";
const avatarImages = [img1, img2, img3, img4, img5, img6];
const dataTableInstance = ref(null);
const props = defineProps({
data: {
type: Array,
@ -357,64 +302,104 @@ const props = defineProps({
},
});
// Calculate displayed page numbers
const displayedPages = computed(() => {
const total = props.pagination.last_page;
const current = props.pagination.current_page;
const total = Number(props.pagination?.last_page) || 1;
const current = Number(props.pagination?.current_page) || 1;
if (total <= 1) {
return [1];
}
const delta = 2;
const range = [];
for (
let i = Math.max(2, current - delta);
i <= Math.min(total - 1, current + delta);
i++
let page = Math.max(2, current - delta);
page <= Math.min(total - 1, current + delta);
page++
) {
range.push(i);
range.push(page);
}
if (current - delta > 2) {
range.unshift("...");
}
if (current + delta < total - 1) {
range.push("...");
}
range.unshift(1);
if (total > 1) {
range.push(total);
}
return range.filter(
(val, index, self) =>
val !== "..." || (val === "..." && self[index - 1] !== "...")
(value, index, self) =>
value !== "..." || (value === "..." && self[index - 1] !== "...")
);
});
// Methods
const changePage = (page) => {
if (page !== "..." && page >= 1 && page <= props.pagination.last_page) {
emit("page-change", page);
const safeFrom = computed(() => {
if (props.pagination?.from) {
return props.pagination.from;
}
};
const onPerPageChange = (event) => {
const newPerPage = parseInt(event.target.value);
emit("per-page-change", newPerPage);
};
if (!props.pagination?.total || props.data.length === 0) {
return 0;
}
const onSearch = debounce((event) => {
emit("search-change", event.target.value);
}, 300);
return (
((Number(props.pagination.current_page) || 1) - 1) *
(Number(props.pagination.per_page) || 10) +
1
);
});
const safeTo = computed(() => {
if (props.pagination?.to) {
return props.pagination.to;
}
if (!props.pagination?.total || props.data.length === 0) {
return 0;
}
return Math.min(
(Number(props.pagination.current_page) || 1) *
(Number(props.pagination.per_page) || 10),
Number(props.pagination.total) || 0
);
});
const getRandomAvatar = () => {
const randomIndex = Math.floor(Math.random() * avatarImages.length);
return avatarImages[randomIndex];
};
const getClientReference = (client) => {
return client.vat_number || client.siret || "N/A";
};
const getAddressLine = (address) => {
if (!address) return "Adresse indisponible";
return (
address.line1 ||
address.line2 ||
address.full_address ||
"Adresse indisponible"
);
};
const getShortAddress = (address) => {
if (!address) return "N/A";
// Return just city and postal code for brevity
return `${address.postal_code} ${address.city}`;
const parts = [address.postal_code, address.city, address.country_code].filter(
Boolean
);
return parts.length > 0 ? parts.join(" ") : "N/A";
};
const getCategoryColor = (type) => {
@ -432,8 +417,88 @@ const getCategoryIcon = (type) => {
Particulier: "fas fa-user",
Association: "fas fa-users",
};
return icons[type] || "fas fa-circle";
return icons[type] || "fas fa-tag";
};
const handleTableClick = (event) => {
const button = event.target.closest("button");
if (!button) return;
const clientId = button.getAttribute("data-client-id");
if (!clientId) return;
if (
button.title === "Supprimer le client" ||
button.querySelector(".fa-trash")
) {
emit("delete", clientId);
} else if (
button.title === "Voir le client" ||
button.querySelector(".fa-eye")
) {
emit("view", clientId);
}
};
const initializeDataTable = () => {
if (dataTableInstance.value) {
dataTableInstance.value.destroy();
dataTableInstance.value = null;
}
const dataTableEl = document.getElementById("client-list");
if (dataTableEl) {
dataTableInstance.value = new DataTable(dataTableEl, {
searchable: true,
fixedHeight: true,
paging: false,
perPage: Number(props.pagination?.per_page) || 10,
perPageSelect: false,
});
dataTableEl.addEventListener("click", handleTableClick);
}
};
const changePage = (page) => {
if (
page !== "..." &&
page >= 1 &&
page <= (Number(props.pagination?.last_page) || 1) &&
page !== Number(props.pagination?.current_page)
) {
emit("page-change", page);
}
};
watch(
() => props.data,
() => {
if (!props.loading) {
setTimeout(() => {
initializeDataTable();
}, 100);
}
},
{ deep: true }
);
onUnmounted(() => {
const dataTableEl = document.getElementById("client-list");
if (dataTableEl) {
dataTableEl.removeEventListener("click", handleTableClick);
}
if (dataTableInstance.value) {
dataTableInstance.value.destroy();
}
});
onMounted(() => {
if (!props.loading && props.data.length > 0) {
initializeDataTable();
}
});
</script>
<style scoped>
@ -444,31 +509,30 @@ const getCategoryIcon = (type) => {
.loading-container {
position: relative;
min-height: 260px;
}
.loading-spinner {
position: absolute;
top: 20px;
right: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.loading-spinner-circle {
width: 2.25rem;
height: 2.25rem;
border-width: 0.28em;
}
.loading-content {
opacity: 0.7;
opacity: 0.55;
pointer-events: none;
}
.skeleton-row {
animation: pulse 1.5s ease-in-out infinite;
}
.skeleton-checkbox {
width: 18px;
height: 18px;
border-radius: 3px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
animation: none;
}
.skeleton-avatar {
@ -529,6 +593,7 @@ const getCategoryIcon = (type) => {
margin: 0 auto;
}
.address-info,
.contact-info {
line-height: 1.2;
}
@ -537,19 +602,6 @@ const getCategoryIcon = (type) => {
font-size: 0.75rem;
}
/* Animations */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
@ -559,13 +611,7 @@ const getCategoryIcon = (type) => {
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.loading-spinner {
top: 10px;
right: 10px;
}
.skeleton-text.long {
width: 80px;
}
@ -574,162 +620,4 @@ const getCategoryIcon = (type) => {
width: 60px;
}
}
.skeleton-icon.small {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
</style>
<style scoped>
.table-container {
position: relative;
min-height: 200px;
}
.loading-container {
position: relative;
}
.loading-spinner {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
}
.loading-content {
opacity: 0.7;
pointer-events: none;
}
.skeleton-row {
animation: pulse 1.5s ease-in-out infinite;
}
.skeleton-checkbox {
width: 18px;
height: 18px;
border-radius: 3px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
.skeleton-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
.skeleton-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
.skeleton-text {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
border-radius: 4px;
height: 12px;
}
.skeleton-text.short {
width: 40px;
}
.skeleton-text.medium {
width: 80px;
}
.skeleton-text.long {
width: 120px;
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
}
.empty-icon {
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-title {
margin-bottom: 0.5rem;
color: #6c757d;
}
.empty-text {
max-width: 300px;
margin: 0 auto;
}
.contact-info {
line-height: 1.2;
}
.text-xs {
font-size: 0.75rem;
}
/* Animations */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.loading-spinner {
top: 10px;
right: 10px;
}
.skeleton-text.long {
width: 80px;
}
.skeleton-text.medium {
width: 60px;
}
}
.skeleton-icon.small {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
</style>

24
thanasoft-front/src/components/molecules/client/ClientInfoTab.vue
View File

@ -244,7 +244,7 @@
maxlength="255"
/>
<p v-else class="form-control-static text-sm">
{{ client.billing_address_line1 || "-" }}
{{ client.billing_address?.line1 || "-" }}
</p>
<div
v-if="errors.billing_address_line1"
@ -265,7 +265,7 @@
maxlength="255"
/>
<p v-else class="form-control-static text-sm">
{{ client.billing_address_line2 || "-" }}
{{ client.billing_address?.line2 || "-" }}
</p>
<div
v-if="errors.billing_address_line2"
@ -286,7 +286,7 @@
maxlength="20"
/>
<p v-else class="form-control-static text-sm">
{{ client.billing_postal_code || "-" }}
{{ client.billing_address?.postal_code || "-" }}
</p>
<div
v-if="errors.billing_postal_code"
@ -307,7 +307,7 @@
maxlength="191"
/>
<p v-else class="form-control-static text-sm">
{{ client.billing_city || "-" }}
{{ client.billing_address?.city || "-" }}
</p>
<div v-if="errors.billing_city" class="invalid-feedback d-block">
{{ errors.billing_city }}
@ -325,7 +325,7 @@
maxlength="2"
/>
<p v-else class="form-control-static text-sm">
{{ client.billing_country_code || "-" }}
{{ client.billing_address?.country_code || "-" }}
</p>
<div
v-if="errors.billing_country_code"
@ -412,6 +412,8 @@ const formData = reactive({
});
const startEdit = () => {
const billingAddress = props.client.billing_address || {};
isEditing.value = true;
Object.assign(formData, {
name: props.client.name || "",
@ -419,11 +421,11 @@ const startEdit = () => {
siret: props.client.siret || "",
email: props.client.email || "",
phone: props.client.phone || "",
billing_address_line1: props.client.billing_address_line1 || "",
billing_address_line2: props.client.billing_address_line2 || "",
billing_postal_code: props.client.billing_postal_code || "",
billing_city: props.client.billing_city || "",
billing_country_code: props.client.billing_country_code || "FR", // Valeur par défaut
billing_address_line1: billingAddress.line1 || "",
billing_address_line2: billingAddress.line2 || "",
billing_postal_code: billingAddress.postal_code || "",
billing_city: billingAddress.city || "",
billing_country_code: billingAddress.country_code || "FR",
group_id: props.client.group_id || null,
notes: props.client.notes || "",
is_active:
@ -606,7 +608,7 @@ const saveChanges = async () => {
try {
isEditing.value = false;
emit("client-updated", formData);
emit("client-updated", prepareFormData());
} catch (error) {
console.error("Erreur lors de la mise à jour:", error);
if (error.response && error.response.data && error.response.data.errors) {

61
thanasoft-front/src/stores/clientStore.ts
View File

@ -6,7 +6,6 @@ import type {
Client,
CreateClientPayload,
UpdateClientPayload,
ClientListResponse,
} from "@/services/client";
import { Contact } from "@/services/contact";
@ -18,6 +17,16 @@ export const useClientStore = defineStore("client", () => {
const error = ref<string | null>(null);
const searchResults = ref<Client[]>([]);
const contacts_client = ref<Contact[]>([]);
const filters = ref<{
page: number;
per_page: number;
search?: string;
is_active?: boolean;
group_id?: number;
}>({
page: 1,
per_page: 10,
});
// Pagination state
const pagination = ref({
@ -25,6 +34,8 @@ export const useClientStore = defineStore("client", () => {
last_page: 1,
per_page: 10,
total: 0,
from: 0,
to: 0,
});
// Getters
@ -80,10 +91,33 @@ export const useClientStore = defineStore("client", () => {
last_page: Number(getValue(meta.last_page)) || 1,
per_page: Number(getValue(meta.per_page)) || 10,
total: Number(getValue(meta.total)) || 0,
from: Number(getValue(meta.from)) || 0,
to: Number(getValue(meta.to)) || 0,
};
filters.value = {
...filters.value,
page: pagination.value.current_page,
per_page: pagination.value.per_page,
};
}
};
const setFilters = (params?: {
page?: number;
per_page?: number;
search?: string;
is_active?: boolean;
group_id?: number;
}) => {
filters.value = {
...filters.value,
...params,
page: params?.page ?? filters.value.page ?? 1,
per_page: params?.per_page ?? filters.value.per_page ?? 10,
};
};
/**
* Fetch all clients with optional pagination and filters
*/
@ -98,7 +132,21 @@ export const useClientStore = defineStore("client", () => {
setError(null);
try {
const response = await ClientService.getAllClients(params);
setFilters(params);
const requestParams = Object.fromEntries(
Object.entries(filters.value).filter(
([, value]) => value !== undefined && value !== null && value !== ""
)
) as {
page?: number;
per_page?: number;
search?: string;
is_active?: boolean;
group_id?: number;
};
const response = await ClientService.getAllClients(requestParams);
setClients(response.data);
if (response.meta) {
setPagination(response.meta);
@ -166,7 +214,6 @@ export const useClientStore = defineStore("client", () => {
setError(null);
try {
const response = await ClientService.updateClient(payload);
const updatedClient = response.data;
@ -227,7 +274,6 @@ export const useClientStore = defineStore("client", () => {
* Search clients
*/
const searchClients = async (query: string, exactMatch: boolean = false) => {
setLoading(true);
error.value = null;
@ -375,6 +421,12 @@ export const useClientStore = defineStore("client", () => {
last_page: 1,
per_page: 10,
total: 0,
from: 0,
to: 0,
};
filters.value = {
page: 1,
per_page: 10,
};
};
@ -394,6 +446,7 @@ export const useClientStore = defineStore("client", () => {
getError,
getClientById,
getPagination,
filters,
// Actions
fetchClients,

14
thanasoft-front/src/views/pages/CRM/Clients.vue
View File

@ -4,16 +4,19 @@
:loading-data="clientStore.loading"
:pagination="clientStore.getPagination"
@push-details="goDetails"
@delete-client="handleDeleteClient"
/>
</template>
<script setup>
import ClientPresentation from "@/components/Organism/CRM/ClientPresentation.vue";
import { useClientStore } from "@/stores/clientStore";
import { useNotificationStore } from "@/stores/notification";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const clientStore = useClientStore();
const router = useRouter();
const notificationStore = useNotificationStore();
onMounted(async () => {
await clientStore.fetchClients();
@ -27,4 +30,15 @@ const goDetails = (id) => {
},
});
};
const handleDeleteClient = async (clientId) => {
try {
await clientStore.deleteClient(Number(clientId));
await clientStore.fetchClients();
notificationStore.deleted("Client");
} catch (error) {
console.error("Error deleting client:", error);
notificationStore.error("Erreur", "Impossible de supprimer le client");
}
};
</script>