feat : creation du composant datatable (WIP)

This commit is contained in:
2026-02-18 14:54:18 +01:00
parent c229d0ab62
commit 32fe51caaa
20 changed files with 287 additions and 64 deletions

View File

@@ -1,21 +1,60 @@
<template>
<div class="mt-6">
<table class="min-w-full border border-slate-300">
<thead class="bg-slate-100 uppercase tracking-wide">
<div class="mt-6 mx-[6px]">
<table class="w-full border border-slate-300 table-fixed">
<thead class="bg-slate-100 capitalize tracking-wide">
<tr>
<th
v-for="column in normalizedColumns"
:key="column.key"
class="border border-slate-300 px-3 py-2 text-left"
class="border border-slate-300 px-2 py-1"
>
<span>{{ column.label }}</span>
<div class="flex flex-col gap-1">
<UiSelect
v-if="column.isSearchable && column.type === 'selectTypeReception'"
v-model="searchValues[column.key]"
:placeholder="column.label"
select-class="w-full !text-sm !py-1"
:options="[
{ value: '__all__', label: 'Tous' },
...receptionTypes.map((type) => ({
value: type.label,
label: type.label
}))
]"
/>
<UiSelect
v-else-if="column.isSearchable && column.type === 'selectTypeShipment'"
v-model="searchValues[column.key]"
:placeholder="column.label"
select-class="w-full !text-sm !py-1"
:options="[
{ value: '__all__', label: 'Tous' },
...shipmentTypes.map((type) => ({
value: type.label,
label: type.label
}))
]"
/>
<div v-else-if="column.isSearchable" class="relative">
<UiTextInput
v-model="searchValues[column.key]"
:placeholder="column.label"
input-class="min-w-full !text-sm !py-1 !pr-7"
/>
<Icon
name="gg:search"
class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-slate-400"
/>
</div>
<span v-else>{{ column.label }}</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-if="loading">
<td
class="border border-slate-300 px-3 py-2 text-left text-slate-500"
class="border border-slate-300 px-2 py-2 whitespace-pre-line"
:colspan="normalizedColumns.length || 1"
>
Chargement...
@@ -32,6 +71,7 @@
<template v-else>
<tr
v-for="(row, rowIndex) in displayedRows"
class="hover:bg-primary-500 hover:bg-opacity-15"
:key="rowIndex"
:class="props.rowClickable ? 'cursor-pointer' : ''"
@click="props.rowClickable ? onRowClick(row) : null"
@@ -39,7 +79,7 @@
<td
v-for="column in normalizedColumns"
:key="column.key"
class="border border-slate-300 px-2 py-2 whitespace-pre-line"
class="border border-slate-300 px-2 py-2 whitespace-pre-line "
>
{{ formatColumnValue(row, column) }}
</td>
@@ -89,14 +129,21 @@
</template>
<script setup lang="ts">
import {Row,ColumnConfig, AnyCollection, PaginationItem }from '~/services/datatable'
import {useApi} from "~/composables/useApi";
import {Row, ColumnConfig, AnyCollection, PaginationItem} from '~/services/dto/datatable-data'
import {useApi} from '~/composables/useApi'
import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
import {getReceptionTypeList} from '~/services/reception-type'
import type {ShipmentTypeData} from "~/services/dto/shipment-data";
import {getShipmentTypeList} from "~/services/shipment-type";
const api = useApi()
const receptionTypes = ref<ReceptionTypeData[]>([])
const shipmentTypes = ref<ShipmentTypeData[]>([])
const loading = ref(false)
const currentPage = ref(1)
const rows = ref<Row[]>([])
const total = ref(0)
const searchValues = reactive<Record<string, string>>({})
const isNestedMode = computed(() => Boolean(props.responsePath))
const effectiveTotal = computed(() => total.value)
const emit = defineEmits<{
@@ -118,7 +165,6 @@ const props = withDefaults(defineProps<{
itemsPerPage: 10,
rowClickable: true
})
const displayedRows = computed<Row[]>(() => {
if (!isNestedMode.value) return rows.value
@@ -126,13 +172,19 @@ const displayedRows = computed<Row[]>(() => {
const endIndex = startIndex + props.itemsPerPage
return rows.value.slice(startIndex, endIndex)
})
onMounted(async () => {
receptionTypes.value = await getReceptionTypeList()
shipmentTypes.value = await getShipmentTypeList()
})
const normalizedColumns = computed(() => {
if (props.columns.length > 0) {
return props.columns.map((column) => ({
key: column.key,
label: column.label ?? column.key,
format: column.format
format: column.format,
isSearchable: column.isSearchable ?? false,
type: column.type
}))
}
@@ -148,7 +200,7 @@ const normalizedColumns = computed(() => {
}))
})
const totalPages = computed(() => Math.max(1, Math.ceil(effectiveTotal.value / props.itemsPerPage)),)
const totalPages = computed(() => Math.max(1, Math.ceil(effectiveTotal.value / props.itemsPerPage)))
function getVisiblePages(page: number, lastPage: number): number[] {
const candidates = new Set([1, page - 1, page, page + 1, lastPage])
@@ -170,6 +222,7 @@ function insertEllipses(sortedPages: number[]): PaginationItem[] {
}
return items
}
const paginationItems = computed<PaginationItem[]>(() => {
const pages = getVisiblePages(currentPage.value, totalPages.value)
return insertEllipses(pages)
@@ -193,7 +246,21 @@ watch(
}
await loadPage()
},
{ immediate: true }
{immediate: true}
)
let timeout: ReturnType<typeof setTimeout>
watch(
() => ({...searchValues}),
() => {
clearTimeout(timeout)
timeout = setTimeout(() => {
currentPage.value = 1
if (!isNestedMode.value) loadPage()
}, 750)
},
{deep: true}
)
watch(
@@ -211,9 +278,54 @@ watch(
currentPage.value = totalPages.value
}
},
{ immediate: true }
{immediate: true}
)
function buildDateInterval(value: string): { after: string; before: string } | null {
const trimmed = value.trim()
// YYYY
if (/^\d{4}$/.test(trimmed)) {
const year = Number(trimmed)
return {
after: `${year}-01-01`,
before: `${year + 1}-01-01`
}
}
// YYYY-MM
if (/^\d{4}-\d{2}$/.test(trimmed)) {
const [year, month] = trimmed.split('-').map(Number)
const nextMonth = month === 12 ? 1 : month + 1
const nextYear = month === 12 ? year + 1 : year
return {
after: `${year}-${String(month).padStart(2, '0')}-01`,
before: `${nextYear}-${String(nextMonth).padStart(2, '0')}-01`
}
}
// YYYY-MM-DD
if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) {
const date = new Date(`${trimmed}T00:00:00`)
const nextDay = new Date(date)
nextDay.setDate(date.getDate() + 1)
const yyyy = nextDay.getFullYear()
const mm = String(nextDay.getMonth() + 1).padStart(2, '0')
const dd = String(nextDay.getDate()).padStart(2, '0')
return {
after: trimmed,
before: `${yyyy}-${mm}-${dd}`
}
}
return null
}
// Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
async function loadPage(): Promise<void> {
if (!props.url) {
@@ -236,11 +348,36 @@ async function loadPage(): Promise<void> {
total.value = rows.value.length
return
}
const searchQuery: Record<string, string> = {}
for (const column of normalizedColumns.value) {
if (!column.isSearchable) continue
const rawValue = searchValues[column.key] ?? ''
const raw = rawValue === '__all__' ? '' : rawValue.trim()
if (!raw) continue
const paramBase = column.key
if (column.type === 'date') {
const interval = buildDateInterval(raw)
if (interval) {
searchQuery[`${paramBase}[after]`] = interval.after
searchQuery[`${paramBase}[before]`] = interval.before
}
continue
}
searchQuery[paramBase] = raw
}
const requestQuery: Record<string, unknown> = {
...props.query,
...searchQuery,
page: currentPage.value,
itemsPerPage: props.itemsPerPage
itemsPerPage: props.itemsPerPage,
}
const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {

View File

@@ -18,7 +18,7 @@
</template>
<script setup lang="ts">
import type {ColumnConfig, Row} from "~/services/datatable";
import type {ColumnConfig, Row} from "~/services/dto/datatable-data";
const router = useRouter()

View File

@@ -48,7 +48,7 @@
import {computed, reactive, ref, watch} from "vue"
import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
import type {ColumnConfig, Row} from "~/services/datatable"
import type {ColumnConfig, Row} from "~/services/dto/datatable-data"
import {useAuthStore} from "~/stores/auth"
definePageMeta({layout: "default"})

View File

@@ -24,7 +24,7 @@
</template>
<script setup lang="ts">
import type { ColumnConfig, Row } from "~/services/datatable"
import type { ColumnConfig, Row } from "~/services/dto/datatable-data"
import { formatAddresses } from "~/utils/datatable-formatters"
import { useAuthStore } from "~/stores/auth"
@@ -34,7 +34,7 @@ const router = useRouter()
const auth = useAuthStore()
const columns: ColumnConfig[] = [
{ key: "name", label: "Nom" },
{ key: "name", label: "Nom", isSearchable:true},
{ key: "phone", label: "Téléphone" },
{ key: "email", label: "Email" },
{ key: "addresses", label: "Adresses", format: formatAddresses },

View File

@@ -48,7 +48,7 @@
import {computed, reactive, ref, watch} from "vue"
import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
import type {ColumnConfig, Row} from "~/services/datatable"
import type {ColumnConfig, Row} from "~/services/dto/datatable-data"
import {useAuthStore} from "~/stores/auth"
definePageMeta({layout: "default"})

View File

@@ -24,7 +24,7 @@
</template>
<script setup lang="ts">
import type { ColumnConfig, Row } from "~/services/datatable"
import type { ColumnConfig, Row } from "~/services/dto/datatable-data"
import {formatAddresses} from "~/utils/datatable-formatters"
import { useAuthStore } from "~/stores/auth"
@@ -34,7 +34,7 @@ const router = useRouter()
const auth = useAuthStore()
const columns: ColumnConfig[] = [
{ key: "name", label: "Nom" },
{ key: "name", label: "Nom", isSearchable:true },
{ key: "email", label: "Mail" },
{ key: "addresses", label: "Adresses", format: formatAddresses },
]

View File

@@ -25,7 +25,7 @@ definePageMeta({
})
import {ROLE} from "~/utils/constants";
import type {ColumnConfig, Row} from "~/services/datatable";
import type {ColumnConfig, Row} from "~/services/dto/datatable-data";
import {formatRoleLabels} from "~/utils/datatable-formatters";
const router = useRouter()

View File

@@ -5,12 +5,12 @@
<card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
<card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
<card-link label="PLAN DE SITE" link="/" iconName="material-symbols:warehouse-outline-rounded" />
<card-link link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
<card-link label="" link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
<template #label>
Réceptions<br>EN ATTENTE
</template>
</card-link>
<card-link link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container">
<card-link label="" link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container">
<template #label>
EXPÉDITIONS<br>EN ATTENTE
</template>
@@ -18,7 +18,7 @@
<card-link label="CASES" link="/" iconName="material-symbols:bottom-sheets-outline" />
<card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
<card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
<card-link link="/" iconName="mdi:cow">
<card-link label="" link="/" iconName="mdi:cow">
<template #label>
PASSEPORT<br>DU BOVIN
</template>

View File

@@ -7,6 +7,7 @@
<UiDataTable
:columns="columns"
url="receptions"
class="ps-20"
:query="{ isValid: true }"
@row-click="goToReception"
/>
@@ -22,13 +23,14 @@ type ReceptionRow = {
const router = useRouter()
const columns = [
{key: 'identificationNumber', label: 'Numero'},
{key: 'receptionDate', label: 'Date de livraison'},
{key: 'supplier', label: 'Fournisseur'},
{key: 'address.fullAddress', label: 'Adresse'},
{key: 'receptionType', label: 'Type'},
{key: 'weights', label: 'Poids', format: formatWeights}
{ key: 'identificationNumber', label: 'Numero', isSearchable:true },
{ key: 'receptionDate', label: 'Date de livraison', isSearchable: true, type: 'date' },
{ key: 'supplier.name', label: 'Fournisseur', isSearchable: true },
{ key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
{ key: 'receptionType.label', label: 'Type', isSearchable: true, type:'selectTypeReception' },
{ key: 'weights', label: 'Poids', format: formatWeights }
]
const goToReception = (row: ReceptionRow) => {
const id = Number(row?.id)
if (!Number.isFinite(id)) return

View File

@@ -1,9 +1,7 @@
<template>
<div class="flex items-center justify-between">
<div class="flex items-center gap-10">
<div class="flex items-center justify-start gap-10">
<Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
<h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions en attente</h1>
</div>
</div>
<UiDataTable
:columns="columns"
@@ -19,11 +17,11 @@ const router = useRouter()
const columns = [
{key: 'supplier', label: 'Fournisseur'},
{key: 'address.fullAddress', label: 'Adresse'},
{key: 'receptionType', label: 'Type'},
{key: 'carrier', label: 'Transporteur'},
{key: 'licensePlate', label: 'Immatriculation'},
{key: 'supplier.name', label: 'Fournisseur', isSearchable:true},
{ key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
{key: 'carrier.name', label: 'Transporteur', isSearchable:true},
{key: 'receptionType.label', label: 'Type', isSearchable:true, type:'selectTypeReception'},
{key: 'licensePlate', label: 'Immatriculation', isSearchable:true, type:'licensePlate'},
]

View File

@@ -17,10 +17,10 @@ import {formatBovinShipments, formatWeights} from "~/utils/datatable-formatters"
const router = useRouter()
const columns = [
{key: 'identificationNumber', label: 'Numero'},
{key: 'shipmentDate', label: 'Date de livraison'},
{key: 'customer', label: 'Client'},
{key: 'address.fullAddress', label: 'Adresse'},
{key: 'identificationNumber', label: 'Numero',isSearchable:true},
{key: 'shipmentDate', label: 'Date de livraison',isSearchable:true, type:'date'},
{key: 'customer.name', label: 'Client',isSearchable:true},
{key: 'address.fullAddress', label: 'Adresse',isSearchable:true},
{key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
{key: 'weights', label: 'Poids', format: formatWeights}
]

View File

@@ -19,11 +19,11 @@ import {formatBovinShipments} from "~/utils/datatable-formatters";
const router = useRouter()
const columns = [
{key: 'customer', label: 'Client'},
{key: 'address.fullAddress', label: 'Adresse'},
{key: 'bovinShipments', label: 'Type d\'expéditions', format:formatBovinShipments},
{key: 'carrier', label: 'Transporteur'},
{key: 'Plate', label: 'Immatriculation'},
{key: 'customer.name', label: 'Client', isSearchable:true},
{key: 'address.fullAddress', label: 'Adresse', isSearchable:true},
{key: 'carrier.name', label: 'Transporteur', isSearchable:true},
{key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
{key: 'licencePlate', label: 'Immatriculation', isSearchable:true},
]
type ReceptionRow = {

View File

@@ -4,6 +4,8 @@ export type ColumnConfig = {
key: string
label?: string
format?: (value: unknown, row: Row) => string
isSearchable?: boolean
type?: string
}
type HydraCollection<T> = {
'hydra:member': T[]

View File

@@ -11,13 +11,18 @@ export const formatBovinShipments = (value: unknown): string => {
export const formatWeights = (value: unknown): string => {
if (!Array.isArray(value) || value.length === 0) return '-'
return value
.map((item: any) => {
const type = item?.type === 'tare' ? 'Poids à vide': item?.type === 'gross' ? 'Poids à plein': (item?.type ?? 'Poids')
const weight = item?.weight ?? '-'
return `${type}: ${weight}`
})
.join('\n ')
let gross = 0
let tare = 0
for (const item of value as Array<{ type?: string; weight?:
unknown }>) {
const w = Number(item.weight)
if (!Number.isFinite(w)) continue
if (item.type === 'gross') gross += w
else if (item.type === 'tare') tare += w
}
return `${gross - tare} kg`
}
export const formatRoleLabels = (

View File

@@ -0,0 +1,39 @@
<?php
declare(strict_types=1);
namespace DoctrineMigrations;
use Doctrine\DBAL\Schema\Schema;
use Doctrine\Migrations\AbstractMigration;
/**
* Auto-generated Migration: Please modify to your needs!
*/
final class Version20260218093842 extends AbstractMigration
{
public function getDescription(): string
{
return '';
}
public function up(Schema $schema): void
{
// this up() migration is auto-generated, please modify it to your needs
$this->addSql('ALTER TABLE address ADD full_address VARCHAR(400)');
$this->addSql('DROP INDEX idx_7049f4507be036fc');
$this->addSql('DROP INDEX uniq_weight_shipment_type');
$this->addSql('DROP INDEX uniq_weight_reception_type');
$this->addSql('ALTER INDEX idx_weight_shipment RENAME TO IDX_7CD55417BE036FC');
}
public function down(Schema $schema): void
{
// this down() migration is auto-generated, please modify it to your needs
$this->addSql('ALTER TABLE address DROP full_address');
$this->addSql('CREATE INDEX idx_7049f4507be036fc ON bovin_shipment (shipment_id)');
$this->addSql('CREATE UNIQUE INDEX uniq_weight_shipment_type ON weight (shipment_id, type)');
$this->addSql('CREATE UNIQUE INDEX uniq_weight_reception_type ON weight (reception_id, type)');
$this->addSql('ALTER INDEX idx_7cd55417be036fc RENAME TO idx_weight_shipment');
}
}

View File

@@ -16,6 +16,7 @@ use Symfony\Component\Serializer\Attribute\Groups;
#[ORM\Entity]
#[ORM\Table(name: 'address')]
#[ORM\HasLifecycleCallbacks]
#[ApiResource(
operations: [
new Get(
@@ -66,6 +67,10 @@ class Address
#[Groups(['address:read', 'supplier:read', 'reception:read', 'customer:read', 'shipment:read', 'address:write'])]
private string $city = '';
#[ORM\Column(length: 400)]
#[Groups(['address:read', 'supplier:read', 'reception:read', 'customer:read', 'shipment:read', 'address:write'])]
private string $fullAddress = '';
#[ORM\Column(name: 'country_code', length: 2)]
#[Groups(['address:read', 'supplier:read', 'customer:read', 'address:write'])]
private string $countryCode = '';
@@ -165,16 +170,21 @@ class Address
return $this;
}
#[Groups(['address:read', 'supplier:read', 'reception:read', 'shipment:read', 'customer:read'])]
public function getFullAddress(): string
{
$parts = array_filter([
$this->street,
$this->street2,
trim(sprintf('%s %s', $this->postalCode, $this->city)),
]);
return $this->fullAddress;
}
return implode(', ', $parts);
#[ORM\PrePersist]
#[ORM\PreUpdate]
public function updateFullAddress(): void
{
$this->fullAddress = trim(sprintf(
'%s %s %s',
$this->street ?? '',
$this->postalCode ?? '',
$this->city ?? ''
));
}
/**

View File

@@ -4,6 +4,8 @@ declare(strict_types=1);
namespace App\Entity;
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiProperty;
use ApiPlatform\Metadata\ApiResource;
use ApiPlatform\Metadata\Get;
@@ -17,6 +19,9 @@ use Symfony\Component\Serializer\Attribute\Groups;
#[ORM\Entity]
#[ORM\Table(name: 'customer')]
#[ApiFilter(SearchFilter::class, properties: [
'name' => 'ipartial',
])]
#[ApiResource(
operations: [
new Get(

View File

@@ -5,6 +5,7 @@ declare(strict_types=1);
namespace App\Entity;
use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
use ApiPlatform\Doctrine\Orm\Filter\DateFilter;
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiProperty;
@@ -30,7 +31,15 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
#[ORM\HasLifecycleCallbacks]
#[ORM\Table(name: 'reception')]
#[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
#[ApiFilter(SearchFilter::class, properties: ['licensePlate' => 'exact'])]
#[ApiFilter(SearchFilter::class, properties: [
'identificationNumber' => 'ipartial',
'supplier.name' => 'ipartial',
'carrier.name' => 'ipartial',
'licensePlate' => 'ipartial',
'receptionType.label' => 'ipartial',
'address.fullAddress' => 'ipartial',
])]
#[ApiFilter(DateFilter::class, properties: ['receptionDate'])]
#[ApiResource(
operations: [
new Get(

View File

@@ -5,6 +5,8 @@ declare(strict_types=1);
namespace App\Entity;
use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
use ApiPlatform\Doctrine\Orm\Filter\DateFilter;
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiProperty;
use ApiPlatform\Metadata\ApiResource;
@@ -29,6 +31,15 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
#[ORM\HasLifecycleCallbacks]
#[ORM\Table(name: 'shipment')]
#[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
#[ApiFilter(SearchFilter::class, properties: [
'identificationNumber' => 'ipartial',
'customer.name' => 'ipartial',
'carrier.name' => 'ipartial',
'licencePlate' => 'ipartial',
'bovinShipments' => 'ipartial',
'address.fullAddress' => 'ipartial',
])]
#[ApiFilter(DateFilter::class, properties: ['receptionDate'])]
#[ApiResource(
operations: [
new Get(

View File

@@ -4,6 +4,8 @@ declare(strict_types=1);
namespace App\Entity;
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiProperty;
use ApiPlatform\Metadata\ApiResource;
use ApiPlatform\Metadata\Get;
@@ -17,6 +19,9 @@ use Symfony\Component\Serializer\Attribute\Groups;
#[ORM\Entity]
#[ORM\Table(name: 'supplier')]
#[ApiFilter(SearchFilter::class, properties: [
'name' => 'ipartial',
])]
#[ApiResource(
operations: [
new Get(