Options asynchrones
Rechercher des choix distants et résoudre les valeurs déjà sélectionnées.
Les grandes listes nécessitent une recherche distante et un moyen de retrouver les libellés des identifiants existants. Implémentez les deux chemins pour ne pas afficher un identifiant brut à l’ouverture d’une fiche.
Exemple de configuration
Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.
import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table/components/forms/types";
const optionSchema = z.array(
z.object({ value: z.string(), label: z.string() })
);
const loadOptions = async (query: URLSearchParams, signal: AbortSignal) => {
const response = await fetch(`/api/customers/options?${query}`, { signal });
if (!response.ok) {
throw new Error("Customer options could not be loaded.");
}
return optionSchema.parse(await response.json());
};
export const customerForm: FormConfig = {
id: "customer-choice",
fields: [
{
name: "customerId",
label: "Customer",
type: "select",
options: [],
searchMinLength: 2,
searchDebounceMs: 250,
searchOptions: (query, _context, signal) =>
loadOptions(new URLSearchParams({ q: query }), signal),
resolveOptions: (values, _context, signal) =>
loadOptions(
new URLSearchParams({ ids: values.map(String).join(",") }),
signal
),
},
],
};import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table-vue/types";
const optionSchema = z.array(
z.object({ value: z.string(), label: z.string() })
);
const loadOptions = async (query: URLSearchParams, signal: AbortSignal) => {
const response = await fetch(`/api/customers/options?${query}`, { signal });
if (!response.ok) {
throw new Error("Customer options could not be loaded.");
}
return optionSchema.parse(await response.json());
};
export const customerForm: FormConfig = {
id: "customer-choice",
fields: [
{
name: "customerId",
label: "Customer",
type: "select",
options: [],
searchMinLength: 2,
searchDebounceMs: 250,
searchOptions: (query, _context, signal) =>
loadOptions(new URLSearchParams({ q: query }), signal),
resolveOptions: (values, _context, signal) =>
loadOptions(
new URLSearchParams({ ids: values.map(String).join(",") }),
signal
),
},
],
};Contrat de l’endpoint
Cet exemple d’intégration attend de votre route /api/customers/options un tableau de { value: string, label: string }. q recherche et ids résout les identifiants enregistrés. Autorisez les deux opérations, validez les paramètres et ne renvoyez que les options accessibles. L’exemple valide la réponse avec Zod ; il ne fournit pas cette API propre à votre application.
Dépendances et annulation
Déclarez dans optionDependencies uniquement les champs influençant les options. Modifiez optionsScope lorsque le tenant ou les permissions changent. Transmettez l’AbortSignal à fetch pour éviter qu’une réponse tardive ne remplace une recherche récente. resolveOptions doit inclure les valeurs sélectionnées même si elles sont absentes de la première page.
Créer un choix
Pour une sélection avec création, createOption renvoie l’option nouvellement enregistrée. La création appartient à l’API hôte et doit vérifier unicité et autorisations. Testez erreurs de chargement, frappe rapide, identifiants initiaux, changement d’un champ dépendant et fermeture du formulaire pendant une requête.