MALIO-DEV/Inventory
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(ui): ajoute la pagination et la recherche serveur

Browse Source
This commit is contained in:
THOLOT DECHENE Matthieu
2026-01-23 19:35:00 +01:00
parent 9cc7ac10f0
commit 8af8374282
6 changed files with 579 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/composables/useComposants.js
View File

@@ -6,6 +6,7 @@ import { useConstructeurs } from './useConstructeurs'
import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
const composants = ref([])
const total = ref(0)
const loading = ref(false)
const extractCollection = (payload) => {
@@ -24,6 +25,16 @@ const extractCollection = (payload) => {
return []
}
const extractTotal = (payload, fallbackLength) => {
if (typeof payload?.totalItems === 'number') {
return payload.totalItems
}
if (typeof payload?.['hydra:totalItems'] === 'number') {
return payload['hydra:totalItems']
}
return fallbackLength
}
export function useComposants () {
const { showSuccess, showError, showInfo } = useToast()
const { get, post, patch, delete: del } = useApi()
@@ -65,18 +76,56 @@ export function useComposants () {
return composant
}
const loadComposants = async () => {
/**
* Load composants with pagination and search support
* @param {Object} options - Query options
* @param {string} [options.search] - Search term for name/reference
* @param {number} [options.page=1] - Current page (1-based)
* @param {number} [options.itemsPerPage=30] - Items per page
* @param {string} [options.orderBy='name'] - Field to order by
* @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
*/
const loadComposants = async (options = {}) => {
loading.value = true
try {
const result = await get('/composants')
const {
search = '',
page = 1,
itemsPerPage = 30,
orderBy = 'name',
orderDir = 'asc'
} = options
const params = new URLSearchParams()
params.set('itemsPerPage', String(itemsPerPage))
params.set('page', String(page))
if (search && search.trim()) {
params.set('name', search.trim())
}
params.set(`order[${orderBy}]`, orderDir)
const result = await get(`/composants?${params.toString()}`)
if (result.success) {
const items = extractCollection(result.data)
const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
composants.value = enrichedItems
showInfo(`Chargement de ${composants.value.length} composant(s) réussi`)
total.value = extractTotal(result.data, items.length)
return {
success: true,
data: {
items: enrichedItems,
total: total.value,
page,
itemsPerPage
}
}
}
return result
} catch (error) {
console.error('Erreur lors du chargement des composants:', error)
return { success: false, error: error.message }
} finally {
loading.value = false
}
@@ -89,7 +138,8 @@ export function useComposants () {
const result = await post('/composants', normalizedPayload)
if (result.success) {
const enriched = await withResolvedConstructeurs(result.data)
composants.value.push(enriched)
composants.value.unshift(enriched)
total.value += 1
const displayName = result.data?.name
|| composantData?.definition?.name
|| composantData?.name
@@ -134,6 +184,7 @@ export function useComposants () {
if (result.success) {
const deletedComposant = composants.value.find(comp => comp.id === id)
composants.value = composants.value.filter(comp => comp.id !== id)
total.value = Math.max(0, total.value - 1)
showSuccess(`Composant "${deletedComposant?.name || 'inconnu'}" supprimé avec succès`)
}
return result
@@ -150,6 +201,7 @@ export function useComposants () {
return {
composants,
total,
loading,
loadComposants,
createComposant,

62
app/composables/usePieces.js
View File

@@ -6,6 +6,7 @@ import { useConstructeurs } from './useConstructeurs'
import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
const pieces = ref([])
const total = ref(0)
const loading = ref(false)
const extractCollection = (payload) => {
@@ -24,6 +25,16 @@ const extractCollection = (payload) => {
return []
}
const extractTotal = (payload, fallbackLength) => {
if (typeof payload?.totalItems === 'number') {
return payload.totalItems
}
if (typeof payload?.['hydra:totalItems'] === 'number') {
return payload['hydra:totalItems']
}
return fallbackLength
}
export function usePieces () {
const { showSuccess, showError, showInfo } = useToast()
const { get, post, patch, delete: del } = useApi()
@@ -65,18 +76,58 @@ export function usePieces () {
return piece
}
const loadPieces = async () => {
/**
* Load pieces with pagination and search support
* @param {Object} options - Query options
* @param {string} [options.search] - Search term for name/reference
* @param {number} [options.page=1] - Current page (1-based)
* @param {number} [options.itemsPerPage=30] - Items per page
* @param {string} [options.orderBy='name'] - Field to order by
* @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
*/
const loadPieces = async (options = {}) => {
loading.value = true
try {
const result = await get('/pieces')
const {
search = '',
page = 1,
itemsPerPage = 30,
orderBy = 'name',
orderDir = 'asc'
} = options
const params = new URLSearchParams()
params.set('itemsPerPage', String(itemsPerPage))
params.set('page', String(page))
if (search && search.trim()) {
// API Platform uses property filters
params.set('name', search.trim())
}
// API Platform OrderFilter syntax: order[field]=direction
params.set(`order[${orderBy}]`, orderDir)
const result = await get(`/pieces?${params.toString()}`)
if (result.success) {
const items = extractCollection(result.data)
const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
pieces.value = enrichedItems
showInfo(`Chargement de ${pieces.value.length} pièce(s) réussi`)
total.value = extractTotal(result.data, items.length)
return {
success: true,
data: {
items: enrichedItems,
total: total.value,
page,
itemsPerPage
}
}
}
return result
} catch (error) {
console.error('Erreur lors du chargement des pièces:', error)
return { success: false, error: error.message }
} finally {
loading.value = false
}
@@ -89,7 +140,8 @@ export function usePieces () {
const result = await post('/pieces', normalizedPayload)
if (result.success) {
const enriched = await withResolvedConstructeurs(result.data)
pieces.value.push(enriched)
pieces.value.unshift(enriched)
total.value += 1
const displayName = result.data?.name
|| pieceData?.definition?.name
|| pieceData?.name
@@ -134,6 +186,7 @@ export function usePieces () {
if (result.success) {
const deletedPiece = pieces.value.find(piece => piece.id === id)
pieces.value = pieces.value.filter(piece => piece.id !== id)
total.value = Math.max(0, total.value - 1)
showSuccess(`Pièce "${deletedPiece?.name || 'inconnu'}" supprimée avec succès`)
}
return result
@@ -150,6 +203,7 @@ export function usePieces () {
return {
pieces,
total,
loading,
loadPieces,
createPiece,

62
app/composables/useProducts.js
View File

@@ -42,6 +42,16 @@ const extractCollection = (payload) => {
return []
}
const extractTotal = (payload, fallbackLength) => {
if (typeof payload?.totalItems === 'number') {
return payload.totalItems
}
if (typeof payload?.['hydra:totalItems'] === 'number') {
return payload['hydra:totalItems']
}
return fallbackLength
}
export function useProducts () {
const { showError } = useToast()
const { get, post, patch, delete: del } = useApi()
@@ -77,32 +87,62 @@ export function useProducts () {
return product
}
/**
* Load products with pagination and search support
* @param {Object} options - Query options
* @param {string} [options.search] - Search term for name/reference
* @param {number} [options.page=1] - Current page (1-based)
* @param {number} [options.itemsPerPage=30] - Items per page
* @param {string} [options.orderBy='name'] - Field to order by
* @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
* @param {boolean} [options.force=false] - Force reload even if already loaded
*/
const loadProducts = async (options = {}) => {
const {
search = '',
page = 1,
itemsPerPage = 30,
orderBy = 'name',
orderDir = 'asc',
force = false
} = options
if (loading.value) {
return {
success: true,
data: { items: products.value, total: total.value },
}
}
if (loaded.value && !options.force) {
return {
success: true,
data: { items: products.value, total: total.value },
data: { items: products.value, total: total.value, page, itemsPerPage },
}
}
loading.value = true
error.value = null
try {
const result = await get('/products?itemsPerPage=100')
const params = new URLSearchParams()
params.set('itemsPerPage', String(itemsPerPage))
params.set('page', String(page))
if (search && search.trim()) {
params.set('name', search.trim())
}
params.set(`order[${orderBy}]`, orderDir)
const result = await get(`/products?${params.toString()}`)
if (result.success) {
const items = extractCollection(result.data)
const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
products.value = enrichedItems
total.value = typeof result.data?.totalItems === 'number'
? result.data.totalItems
: items.length
total.value = extractTotal(result.data, items.length)
loaded.value = true
return {
success: true,
data: {
items: enrichedItems,
total: total.value,
page,
itemsPerPage
}
}
} else if (result.error) {
error.value = result.error
showError(`Impossible de charger les produits: ${result.error}`)