feat: sort tags in KanbanFilters by usage count
- Added sorting functionality to `KanbanFilters` to display tags in descending order based on their usage count. - Introduced `sortedTags` using `useMemo` for performance optimization, ensuring efficient re-calculation when `availableTags` or `tagCounts` change. - Updated the rendering logic to utilize `sortedTags` instead of `availableTags`, enhancing the user experience by prioritizing frequently used tags.
This commit is contained in:
@@ -138,6 +138,15 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
|
|||||||
count: priorityCounts[priorityConfig.key] || 0
|
count: priorityCounts[priorityConfig.key] || 0
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
// Trier les tags par nombre d'utilisation (décroissant)
|
||||||
|
const sortedTags = useMemo(() => {
|
||||||
|
return [...availableTags].sort((a, b) => {
|
||||||
|
const countA = tagCounts[a.name] || 0;
|
||||||
|
const countB = tagCounts[b.name] || 0;
|
||||||
|
return countB - countA; // Décroissant
|
||||||
|
});
|
||||||
|
}, [availableTags, tagCounts]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-slate-900/50 border-b border-slate-700/50 backdrop-blur-sm">
|
<div className="bg-slate-900/50 border-b border-slate-700/50 backdrop-blur-sm">
|
||||||
<div className="container mx-auto px-6 py-4">
|
<div className="container mx-auto px-6 py-4">
|
||||||
@@ -302,7 +311,7 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
|
|||||||
Tags
|
Tags
|
||||||
</label>
|
</label>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{availableTags.map((tag) => (
|
{sortedTags.map((tag) => (
|
||||||
<button
|
<button
|
||||||
key={tag.id}
|
key={tag.id}
|
||||||
onClick={() => handleTagToggle(tag.name)}
|
onClick={() => handleTagToggle(tag.name)}
|
||||||
|
|||||||
Reference in New Issue
Block a user