Ou Ziggy route dans une cellule Datatable PrimeVue en mode composant de cellule.
Je ne vais pas répéter ici ce qui a été vu précédemment, ce que l’on cherche à faire est un composant utile et générique pour pouvoir rediriger l’utilisateur vers une route nommée avec les paramètres adéquats (variables donc) avec un libellé pouvant être basé sur les données de la lignes (rowData).
La route
Ziggy va alimenter notre objet route. Ce dernier contiendra la définition de notre router Laravel (pour rappel quand même). On a une route nommée : maroute-edit = /maroute/{id} .
Le composant de lien de cellule
On a besoin de lui passer l’url et le texte à afficher, mais on aimerait profiter du rowData pour construire ce texte et cette url (du fait des paramètres à passer), il nous faut donc un moyen d’intervention du côté de l’appelant.
Pour le texte on peut imaginer que le paramètre ne soit pas le libellé directement mais une fonction callback recevant rowData en params, nous permettant de retourner le string que l’on aura produit potentiellement avec.
Pour l’url c’est plus compliqué, on sait juste que l’on veut travailler avec des routes nommées, donc une propriété qui recevra le nom de la route, mais quid des paramètres ? Dans mon cas j’ai eu un besoin de l’attribut de route ‘id’, mais dans mon rowData c’est l’attribut xyz_id qui matchait et non l’id de ma row, du coup il nous faudrait un mapper qui serait un tableau de clefs avec la valeur à prendre dans le rowData.
<script setup lang="ts">
import { PropType } from "vue";
const props = defineProps({
to: {
type: String,
required: true
},
text: {
type: Function as PropType<(rowData: any) => string>,
required: true
},
toParams: {
type: Array as PropType<{ key: string, value: string }[]>
},
rowData: {
type: Object,
required: true
}
})
function getRouteParams(): Object {
const params = {}
props.toParams?.forEach((tp) => {
params[tp.key] = props.rowData![tp.value]
})
return params
}
</script>
<template>
<Link :href="route(to, getRouteParams())">{{ text(rowData) }}</Link>
</template>
On notera que c’est Link et non router-link qui officie du coup, comme vu précédemment.
Rassemblement !
{
field: 'li_created_at',
header: 'Dernière action',
sortable: true,
components: [
{
component: markRaw(LinkCell),
props: {
to: "invoice-edit",
toParams: [
{ key: 'id', value: 'li_id' }
],
text: (rowData: any) => {
return rowData.li_num + ' (' + (new Date(rowData.li_created_at).toLocaleDateString()) + ')'
}
}
} as CellComponent
]
}
En gros l’astuce sera dans props où l’on passera le nom de la route, le mapping de paramètres et la fonction callback pour rédiger le contenu. Ainsi on aura dans mon cas ce rendu avec lien fonctionnel.
