feat : creation du composant datatable (WIP)
This commit is contained in:
@@ -1,21 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mt-6">
|
<div class="mt-6 mx-[6px]">
|
||||||
<table class="min-w-full border border-slate-300">
|
<table class="w-full border border-slate-300 table-fixed">
|
||||||
<thead class="bg-slate-100 uppercase tracking-wide">
|
<thead class="bg-slate-100 capitalize tracking-wide">
|
||||||
<tr>
|
<tr>
|
||||||
<th
|
<th
|
||||||
v-for="column in normalizedColumns"
|
v-for="column in normalizedColumns"
|
||||||
:key="column.key"
|
: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>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-if="loading">
|
<tr v-if="loading">
|
||||||
<td
|
<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"
|
:colspan="normalizedColumns.length || 1"
|
||||||
>
|
>
|
||||||
Chargement...
|
Chargement...
|
||||||
@@ -32,6 +71,7 @@
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<tr
|
<tr
|
||||||
v-for="(row, rowIndex) in displayedRows"
|
v-for="(row, rowIndex) in displayedRows"
|
||||||
|
class="hover:bg-primary-500 hover:bg-opacity-15"
|
||||||
:key="rowIndex"
|
:key="rowIndex"
|
||||||
:class="props.rowClickable ? 'cursor-pointer' : ''"
|
:class="props.rowClickable ? 'cursor-pointer' : ''"
|
||||||
@click="props.rowClickable ? onRowClick(row) : null"
|
@click="props.rowClickable ? onRowClick(row) : null"
|
||||||
@@ -39,7 +79,7 @@
|
|||||||
<td
|
<td
|
||||||
v-for="column in normalizedColumns"
|
v-for="column in normalizedColumns"
|
||||||
:key="column.key"
|
: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) }}
|
{{ formatColumnValue(row, column) }}
|
||||||
</td>
|
</td>
|
||||||
@@ -89,14 +129,21 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {Row,ColumnConfig, AnyCollection, PaginationItem }from '~/services/datatable'
|
import {Row, ColumnConfig, AnyCollection, PaginationItem} from '~/services/dto/datatable-data'
|
||||||
import {useApi} from "~/composables/useApi";
|
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 api = useApi()
|
||||||
|
const receptionTypes = ref<ReceptionTypeData[]>([])
|
||||||
|
const shipmentTypes = ref<ShipmentTypeData[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
const rows = ref<Row[]>([])
|
const rows = ref<Row[]>([])
|
||||||
const total = ref(0)
|
const total = ref(0)
|
||||||
|
const searchValues = reactive<Record<string, string>>({})
|
||||||
const isNestedMode = computed(() => Boolean(props.responsePath))
|
const isNestedMode = computed(() => Boolean(props.responsePath))
|
||||||
const effectiveTotal = computed(() => total.value)
|
const effectiveTotal = computed(() => total.value)
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -118,7 +165,6 @@ const props = withDefaults(defineProps<{
|
|||||||
itemsPerPage: 10,
|
itemsPerPage: 10,
|
||||||
rowClickable: true
|
rowClickable: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const displayedRows = computed<Row[]>(() => {
|
const displayedRows = computed<Row[]>(() => {
|
||||||
if (!isNestedMode.value) return rows.value
|
if (!isNestedMode.value) return rows.value
|
||||||
|
|
||||||
@@ -126,13 +172,19 @@ const displayedRows = computed<Row[]>(() => {
|
|||||||
const endIndex = startIndex + props.itemsPerPage
|
const endIndex = startIndex + props.itemsPerPage
|
||||||
return rows.value.slice(startIndex, endIndex)
|
return rows.value.slice(startIndex, endIndex)
|
||||||
})
|
})
|
||||||
|
onMounted(async () => {
|
||||||
|
receptionTypes.value = await getReceptionTypeList()
|
||||||
|
shipmentTypes.value = await getShipmentTypeList()
|
||||||
|
|
||||||
|
})
|
||||||
const normalizedColumns = computed(() => {
|
const normalizedColumns = computed(() => {
|
||||||
if (props.columns.length > 0) {
|
if (props.columns.length > 0) {
|
||||||
return props.columns.map((column) => ({
|
return props.columns.map((column) => ({
|
||||||
key: column.key,
|
key: column.key,
|
||||||
label: column.label ?? 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[] {
|
function getVisiblePages(page: number, lastPage: number): number[] {
|
||||||
const candidates = new Set([1, page - 1, page, page + 1, lastPage])
|
const candidates = new Set([1, page - 1, page, page + 1, lastPage])
|
||||||
@@ -170,6 +222,7 @@ function insertEllipses(sortedPages: number[]): PaginationItem[] {
|
|||||||
}
|
}
|
||||||
return items
|
return items
|
||||||
}
|
}
|
||||||
|
|
||||||
const paginationItems = computed<PaginationItem[]>(() => {
|
const paginationItems = computed<PaginationItem[]>(() => {
|
||||||
const pages = getVisiblePages(currentPage.value, totalPages.value)
|
const pages = getVisiblePages(currentPage.value, totalPages.value)
|
||||||
return insertEllipses(pages)
|
return insertEllipses(pages)
|
||||||
@@ -193,7 +246,21 @@ watch(
|
|||||||
}
|
}
|
||||||
await loadPage()
|
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(
|
watch(
|
||||||
@@ -211,9 +278,54 @@ watch(
|
|||||||
currentPage.value = totalPages.value
|
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
|
// Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
|
||||||
async function loadPage(): Promise<void> {
|
async function loadPage(): Promise<void> {
|
||||||
if (!props.url) {
|
if (!props.url) {
|
||||||
@@ -236,11 +348,36 @@ async function loadPage(): Promise<void> {
|
|||||||
total.value = rows.value.length
|
total.value = rows.value.length
|
||||||
return
|
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> = {
|
const requestQuery: Record<string, unknown> = {
|
||||||
...props.query,
|
...props.query,
|
||||||
|
...searchQuery,
|
||||||
page: currentPage.value,
|
page: currentPage.value,
|
||||||
itemsPerPage: props.itemsPerPage
|
itemsPerPage: props.itemsPerPage,
|
||||||
}
|
}
|
||||||
|
|
||||||
const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {
|
const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type {ColumnConfig, Row} from "~/services/datatable";
|
import type {ColumnConfig, Row} from "~/services/dto/datatable-data";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
import {computed, reactive, ref, watch} from "vue"
|
import {computed, reactive, ref, watch} from "vue"
|
||||||
import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
|
import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
|
||||||
import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
|
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"
|
import {useAuthStore} from "~/stores/auth"
|
||||||
|
|
||||||
definePageMeta({layout: "default"})
|
definePageMeta({layout: "default"})
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 { formatAddresses } from "~/utils/datatable-formatters"
|
||||||
import { useAuthStore } from "~/stores/auth"
|
import { useAuthStore } from "~/stores/auth"
|
||||||
|
|
||||||
@@ -34,7 +34,7 @@ const router = useRouter()
|
|||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
|
|
||||||
const columns: ColumnConfig[] = [
|
const columns: ColumnConfig[] = [
|
||||||
{ key: "name", label: "Nom" },
|
{ key: "name", label: "Nom", isSearchable:true},
|
||||||
{ key: "phone", label: "Téléphone" },
|
{ key: "phone", label: "Téléphone" },
|
||||||
{ key: "email", label: "Email" },
|
{ key: "email", label: "Email" },
|
||||||
{ key: "addresses", label: "Adresses", format: formatAddresses },
|
{ key: "addresses", label: "Adresses", format: formatAddresses },
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
import {computed, reactive, ref, watch} from "vue"
|
import {computed, reactive, ref, watch} from "vue"
|
||||||
import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
|
import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
|
||||||
import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
|
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"
|
import {useAuthStore} from "~/stores/auth"
|
||||||
|
|
||||||
definePageMeta({layout: "default"})
|
definePageMeta({layout: "default"})
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 {formatAddresses} from "~/utils/datatable-formatters"
|
||||||
import { useAuthStore } from "~/stores/auth"
|
import { useAuthStore } from "~/stores/auth"
|
||||||
|
|
||||||
@@ -34,7 +34,7 @@ const router = useRouter()
|
|||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
|
|
||||||
const columns: ColumnConfig[] = [
|
const columns: ColumnConfig[] = [
|
||||||
{ key: "name", label: "Nom" },
|
{ key: "name", label: "Nom", isSearchable:true },
|
||||||
{ key: "email", label: "Mail" },
|
{ key: "email", label: "Mail" },
|
||||||
{ key: "addresses", label: "Adresses", format: formatAddresses },
|
{ key: "addresses", label: "Adresses", format: formatAddresses },
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ definePageMeta({
|
|||||||
})
|
})
|
||||||
|
|
||||||
import {ROLE} from "~/utils/constants";
|
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";
|
import {formatRoleLabels} from "~/utils/datatable-formatters";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|||||||
@@ -5,12 +5,12 @@
|
|||||||
<card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
|
<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="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 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>
|
<template #label>
|
||||||
Réceptions<br>EN ATTENTE
|
Réceptions<br>EN ATTENTE
|
||||||
</template>
|
</template>
|
||||||
</card-link>
|
</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>
|
<template #label>
|
||||||
EXPÉDITIONS<br>EN ATTENTE
|
EXPÉDITIONS<br>EN ATTENTE
|
||||||
</template>
|
</template>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
<card-link label="CASES" link="/" iconName="material-symbols:bottom-sheets-outline" />
|
<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="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 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>
|
<template #label>
|
||||||
PASSEPORT<br>DU BOVIN
|
PASSEPORT<br>DU BOVIN
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<UiDataTable
|
<UiDataTable
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
url="receptions"
|
url="receptions"
|
||||||
|
class="ps-20"
|
||||||
:query="{ isValid: true }"
|
:query="{ isValid: true }"
|
||||||
@row-click="goToReception"
|
@row-click="goToReception"
|
||||||
/>
|
/>
|
||||||
@@ -22,13 +23,14 @@ type ReceptionRow = {
|
|||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const columns = [
|
const columns = [
|
||||||
{key: 'identificationNumber', label: 'Numero'},
|
{ key: 'identificationNumber', label: 'Numero', isSearchable:true },
|
||||||
{key: 'receptionDate', label: 'Date de livraison'},
|
{ key: 'receptionDate', label: 'Date de livraison', isSearchable: true, type: 'date' },
|
||||||
{key: 'supplier', label: 'Fournisseur'},
|
{ key: 'supplier.name', label: 'Fournisseur', isSearchable: true },
|
||||||
{key: 'address.fullAddress', label: 'Adresse'},
|
{ key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
|
||||||
{key: 'receptionType', label: 'Type'},
|
{ key: 'receptionType.label', label: 'Type', isSearchable: true, type:'selectTypeReception' },
|
||||||
{key: 'weights', label: 'Poids', format: formatWeights}
|
{ key: 'weights', label: 'Poids', format: formatWeights }
|
||||||
]
|
]
|
||||||
|
|
||||||
const goToReception = (row: ReceptionRow) => {
|
const goToReception = (row: ReceptionRow) => {
|
||||||
const id = Number(row?.id)
|
const id = Number(row?.id)
|
||||||
if (!Number.isFinite(id)) return
|
if (!Number.isFinite(id)) return
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-start gap-10">
|
||||||
<div class="flex items-center gap-10">
|
|
||||||
<Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
|
<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>
|
<h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions en attente</h1>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<UiDataTable
|
<UiDataTable
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
@@ -19,11 +17,11 @@ const router = useRouter()
|
|||||||
|
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{key: 'supplier', label: 'Fournisseur'},
|
{key: 'supplier.name', label: 'Fournisseur', isSearchable:true},
|
||||||
{key: 'address.fullAddress', label: 'Adresse'},
|
{ key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
|
||||||
{key: 'receptionType', label: 'Type'},
|
{key: 'carrier.name', label: 'Transporteur', isSearchable:true},
|
||||||
{key: 'carrier', label: 'Transporteur'},
|
{key: 'receptionType.label', label: 'Type', isSearchable:true, type:'selectTypeReception'},
|
||||||
{key: 'licensePlate', label: 'Immatriculation'},
|
{key: 'licensePlate', label: 'Immatriculation', isSearchable:true, type:'licensePlate'},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -17,10 +17,10 @@ import {formatBovinShipments, formatWeights} from "~/utils/datatable-formatters"
|
|||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const columns = [
|
const columns = [
|
||||||
{key: 'identificationNumber', label: 'Numero'},
|
{key: 'identificationNumber', label: 'Numero',isSearchable:true},
|
||||||
{key: 'shipmentDate', label: 'Date de livraison'},
|
{key: 'shipmentDate', label: 'Date de livraison',isSearchable:true, type:'date'},
|
||||||
{key: 'customer', label: 'Client'},
|
{key: 'customer.name', label: 'Client',isSearchable:true},
|
||||||
{key: 'address.fullAddress', label: 'Adresse'},
|
{key: 'address.fullAddress', label: 'Adresse',isSearchable:true},
|
||||||
{key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
|
{key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
|
||||||
{key: 'weights', label: 'Poids', format: formatWeights}
|
{key: 'weights', label: 'Poids', format: formatWeights}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -19,11 +19,11 @@ import {formatBovinShipments} from "~/utils/datatable-formatters";
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{key: 'customer', label: 'Client'},
|
{key: 'customer.name', label: 'Client', isSearchable:true},
|
||||||
{key: 'address.fullAddress', label: 'Adresse'},
|
{key: 'address.fullAddress', label: 'Adresse', isSearchable:true},
|
||||||
{key: 'bovinShipments', label: 'Type d\'expéditions', format:formatBovinShipments},
|
{key: 'carrier.name', label: 'Transporteur', isSearchable:true},
|
||||||
{key: 'carrier', label: 'Transporteur'},
|
{key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
|
||||||
{key: 'Plate', label: 'Immatriculation'},
|
{key: 'licencePlate', label: 'Immatriculation', isSearchable:true},
|
||||||
]
|
]
|
||||||
|
|
||||||
type ReceptionRow = {
|
type ReceptionRow = {
|
||||||
|
|||||||
@@ -4,6 +4,8 @@ export type ColumnConfig = {
|
|||||||
key: string
|
key: string
|
||||||
label?: string
|
label?: string
|
||||||
format?: (value: unknown, row: Row) => string
|
format?: (value: unknown, row: Row) => string
|
||||||
|
isSearchable?: boolean
|
||||||
|
type?: string
|
||||||
}
|
}
|
||||||
type HydraCollection<T> = {
|
type HydraCollection<T> = {
|
||||||
'hydra:member': T[]
|
'hydra:member': T[]
|
||||||
@@ -11,13 +11,18 @@ export const formatBovinShipments = (value: unknown): string => {
|
|||||||
export const formatWeights = (value: unknown): string => {
|
export const formatWeights = (value: unknown): string => {
|
||||||
if (!Array.isArray(value) || value.length === 0) return '-'
|
if (!Array.isArray(value) || value.length === 0) return '-'
|
||||||
|
|
||||||
return value
|
let gross = 0
|
||||||
.map((item: any) => {
|
let tare = 0
|
||||||
const type = item?.type === 'tare' ? 'Poids à vide': item?.type === 'gross' ? 'Poids à plein': (item?.type ?? 'Poids')
|
|
||||||
const weight = item?.weight ?? '-'
|
for (const item of value as Array<{ type?: string; weight?:
|
||||||
return `${type}: ${weight}`
|
unknown }>) {
|
||||||
})
|
const w = Number(item.weight)
|
||||||
.join('\n ')
|
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 = (
|
export const formatRoleLabels = (
|
||||||
|
|||||||
39
migrations/Version20260218093842.php
Normal file
39
migrations/Version20260218093842.php
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -16,6 +16,7 @@ use Symfony\Component\Serializer\Attribute\Groups;
|
|||||||
|
|
||||||
#[ORM\Entity]
|
#[ORM\Entity]
|
||||||
#[ORM\Table(name: 'address')]
|
#[ORM\Table(name: 'address')]
|
||||||
|
#[ORM\HasLifecycleCallbacks]
|
||||||
#[ApiResource(
|
#[ApiResource(
|
||||||
operations: [
|
operations: [
|
||||||
new Get(
|
new Get(
|
||||||
@@ -66,6 +67,10 @@ class Address
|
|||||||
#[Groups(['address:read', 'supplier:read', 'reception:read', 'customer:read', 'shipment:read', 'address:write'])]
|
#[Groups(['address:read', 'supplier:read', 'reception:read', 'customer:read', 'shipment:read', 'address:write'])]
|
||||||
private string $city = '';
|
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)]
|
#[ORM\Column(name: 'country_code', length: 2)]
|
||||||
#[Groups(['address:read', 'supplier:read', 'customer:read', 'address:write'])]
|
#[Groups(['address:read', 'supplier:read', 'customer:read', 'address:write'])]
|
||||||
private string $countryCode = '';
|
private string $countryCode = '';
|
||||||
@@ -165,16 +170,21 @@ class Address
|
|||||||
return $this;
|
return $this;
|
||||||
}
|
}
|
||||||
|
|
||||||
#[Groups(['address:read', 'supplier:read', 'reception:read', 'shipment:read', 'customer:read'])]
|
|
||||||
public function getFullAddress(): string
|
public function getFullAddress(): string
|
||||||
{
|
{
|
||||||
$parts = array_filter([
|
return $this->fullAddress;
|
||||||
$this->street,
|
}
|
||||||
$this->street2,
|
|
||||||
trim(sprintf('%s %s', $this->postalCode, $this->city)),
|
|
||||||
]);
|
|
||||||
|
|
||||||
return implode(', ', $parts);
|
#[ORM\PrePersist]
|
||||||
|
#[ORM\PreUpdate]
|
||||||
|
public function updateFullAddress(): void
|
||||||
|
{
|
||||||
|
$this->fullAddress = trim(sprintf(
|
||||||
|
'%s %s %s',
|
||||||
|
$this->street ?? '',
|
||||||
|
$this->postalCode ?? '',
|
||||||
|
$this->city ?? ''
|
||||||
|
));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -4,6 +4,8 @@ declare(strict_types=1);
|
|||||||
|
|
||||||
namespace App\Entity;
|
namespace App\Entity;
|
||||||
|
|
||||||
|
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
|
||||||
|
use ApiPlatform\Metadata\ApiFilter;
|
||||||
use ApiPlatform\Metadata\ApiProperty;
|
use ApiPlatform\Metadata\ApiProperty;
|
||||||
use ApiPlatform\Metadata\ApiResource;
|
use ApiPlatform\Metadata\ApiResource;
|
||||||
use ApiPlatform\Metadata\Get;
|
use ApiPlatform\Metadata\Get;
|
||||||
@@ -17,6 +19,9 @@ use Symfony\Component\Serializer\Attribute\Groups;
|
|||||||
|
|
||||||
#[ORM\Entity]
|
#[ORM\Entity]
|
||||||
#[ORM\Table(name: 'customer')]
|
#[ORM\Table(name: 'customer')]
|
||||||
|
#[ApiFilter(SearchFilter::class, properties: [
|
||||||
|
'name' => 'ipartial',
|
||||||
|
])]
|
||||||
#[ApiResource(
|
#[ApiResource(
|
||||||
operations: [
|
operations: [
|
||||||
new Get(
|
new Get(
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ declare(strict_types=1);
|
|||||||
namespace App\Entity;
|
namespace App\Entity;
|
||||||
|
|
||||||
use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
|
use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
|
||||||
|
use ApiPlatform\Doctrine\Orm\Filter\DateFilter;
|
||||||
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
|
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
|
||||||
use ApiPlatform\Metadata\ApiFilter;
|
use ApiPlatform\Metadata\ApiFilter;
|
||||||
use ApiPlatform\Metadata\ApiProperty;
|
use ApiPlatform\Metadata\ApiProperty;
|
||||||
@@ -30,7 +31,15 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
|
|||||||
#[ORM\HasLifecycleCallbacks]
|
#[ORM\HasLifecycleCallbacks]
|
||||||
#[ORM\Table(name: 'reception')]
|
#[ORM\Table(name: 'reception')]
|
||||||
#[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
|
#[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(
|
#[ApiResource(
|
||||||
operations: [
|
operations: [
|
||||||
new Get(
|
new Get(
|
||||||
|
|||||||
@@ -5,6 +5,8 @@ declare(strict_types=1);
|
|||||||
namespace App\Entity;
|
namespace App\Entity;
|
||||||
|
|
||||||
use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
|
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\ApiFilter;
|
||||||
use ApiPlatform\Metadata\ApiProperty;
|
use ApiPlatform\Metadata\ApiProperty;
|
||||||
use ApiPlatform\Metadata\ApiResource;
|
use ApiPlatform\Metadata\ApiResource;
|
||||||
@@ -29,6 +31,15 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
|
|||||||
#[ORM\HasLifecycleCallbacks]
|
#[ORM\HasLifecycleCallbacks]
|
||||||
#[ORM\Table(name: 'shipment')]
|
#[ORM\Table(name: 'shipment')]
|
||||||
#[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
|
#[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(
|
#[ApiResource(
|
||||||
operations: [
|
operations: [
|
||||||
new Get(
|
new Get(
|
||||||
|
|||||||
@@ -4,6 +4,8 @@ declare(strict_types=1);
|
|||||||
|
|
||||||
namespace App\Entity;
|
namespace App\Entity;
|
||||||
|
|
||||||
|
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
|
||||||
|
use ApiPlatform\Metadata\ApiFilter;
|
||||||
use ApiPlatform\Metadata\ApiProperty;
|
use ApiPlatform\Metadata\ApiProperty;
|
||||||
use ApiPlatform\Metadata\ApiResource;
|
use ApiPlatform\Metadata\ApiResource;
|
||||||
use ApiPlatform\Metadata\Get;
|
use ApiPlatform\Metadata\Get;
|
||||||
@@ -17,6 +19,9 @@ use Symfony\Component\Serializer\Attribute\Groups;
|
|||||||
|
|
||||||
#[ORM\Entity]
|
#[ORM\Entity]
|
||||||
#[ORM\Table(name: 'supplier')]
|
#[ORM\Table(name: 'supplier')]
|
||||||
|
#[ApiFilter(SearchFilter::class, properties: [
|
||||||
|
'name' => 'ipartial',
|
||||||
|
])]
|
||||||
#[ApiResource(
|
#[ApiResource(
|
||||||
operations: [
|
operations: [
|
||||||
new Get(
|
new Get(
|
||||||
|
|||||||
Reference in New Issue
Block a user