Je m'excuse pour cette omission. Vous avez raison, la sélection d'un dossier ou sous-dossier ne fonctionne pas correctement. Je vais modifier le code pour permettre la sélection de n'importe quel dossier ou sous-dossier lorsqu'on clique dessus. Voici la version corrigée du composant LocationSelector :
Voici les principales modifications apportées pour permettre la sélection de dossiers et sous-dossiers :
J'ai modifié la fonction renderFolderStructure pour que chaque dossier soit cliquable :
<div
className="flex items-center cursor-pointer hover:bg-gray-100 p-1 rounded"
onClick={() => onLocationChange(folderPath)}
>Maintenant, lorsque vous cliquez sur un dossier ou un sous-dossier, il sera sélectionné et la fonction onLocationChange sera appelée avec le chemin complet du dossier.
J'ai ajusté la logique pour déterminer si l'emplacement est un client ou un fournisseur :
const isClientLocation = selectedLocation.startsWith("clients")
const isFournisseurLocation = selectedLocation.startsWith("fournisseur")Cela permet de gérer correctement les sous-dossiers dans les sections clients et fournisseurs.
J'ai ajouté des styles pour améliorer l'apparence et l'interaction avec les dossiers :
className="flex items-center cursor-pointer hover:bg-gray-100 p-1 rounded"Cela ajoute un effet de survol et rend plus évident que les dossiers sont cliquables.
J'ai ajusté la gestion des événements pour éviter les conflits entre l'ouverture/fermeture des dossiers et leur sélection :
onClick={(e) => toggleFolder(currentPath, e)}L'événement de clic pour ouvrir/fermer un dossier est maintenant arrêté pour ne pas déclencher la sélection du dossier en même temps.
Avec ces modifications, vous devriez maintenant pouvoir :
La structure de dossiers est maintenant entièrement interactive et devrait fonctionner comme vous le souhaitez.
Vous avez tout à fait raison. Le problème vient du fait que nous utilisons les chemins complets comme valeurs pour sélectionner les dossiers, mais le composant Select n'affiche pas correctement ces valeurs dans le SelectTrigger. Je vais corriger cela en ajoutant une logique pour afficher le nom du dossier sélectionné dans le déclencheur du sélecteur. Voici la version mise à jour :
Voici les principales modifications apportées pour afficher correctement le dossier sélectionné dans le sélecteur d'emplacement :
J'ai ajouté un état folderNameMap qui stocke une correspondance entre les chemins de dossiers et leurs noms affichés :
const [folderNameMap, setFolderNameMap] = useState<Record<string, string>>({
banques: "Banques",
clients: "Clients",
courriers: "Courriers",
fiscal: "Fiscal",
fournisseur: "Fournisseur",
gestion: "Gestion",
social: "Social",
autres: "Autres",
})J'ai ajouté un effet useEffect pour construire cette carte de manière récursive chaque fois que la structure de dossiers change :
useEffect(() => {
const buildFolderNameMap = (structure: FolderStructure, path: string[] = []) => {
let map: Record<string, string> = {}
Object.entries(structure).forEach(([key, folder]) => {
const currentPath = path.concat(key)
const folderPath = currentPath.join('/')
map[folderPath] = folder.name
if (Object.keys(folder.children).length > 0) {
map = { ...map, ...buildFolderNameMap(folder.children, currentPath) }
}
})
return map
}
setFolderNameMap(buildFolderNameMap(folderStructure))
}, [folderStructure])J'ai ajouté une fonction getSelectedFolderName pour récupérer le nom affiché du dossier sélectionné à partir de la carte :
const getSelectedFolderName = () => {
return folderNameMap[selectedLocation] || "Sélectionner un emplacement"
}J'ai utilisé cette fonction directement dans le SelectValue pour afficher le nom correct du dossier sélectionné :
<SelectValue>{getSelectedFolderName()}</SelectValue>Avec ces modifications, le sélecteur d'emplacement devrait maintenant afficher correctement le nom du dossier ou sous-dossier sélectionné, même lorsque vous sélectionnez un sous-dossier profondément imbriqué dans la hiérarchie.
Cette solution permet de stocker le chemin complet comme valeur réelle du sélecteur (ce qui est utile pour la logique de l'application), tout en affichant uniquement le nom du dossier sélectionné dans l'interface utilisateur.