Fix Client Desig
This commit is contained in:
kevin
parent
d8d2b68421
commit
ce61b79080
48
thanasoft-back/database/seeders/ClientSeeder.php
Normal file
48
thanasoft-back/database/seeders/ClientSeeder.php
Normal 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,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,5 +24,6 @@ class DatabaseSeeder extends Seeder
|
||||
$this->call(ProductCategorySeeder::class);
|
||||
$this->call(EmployeeSeeder::class);
|
||||
$this->call(ThanatopractitionerSeeder::class);
|
||||
$this->call(ClientSeeder::class);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
});
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user