git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-27 05:00:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: truncate format cards when too many conditions

Browse Source
This commit is contained in:
Sam Chau
2024-12-06 06:20:35 +10:30
parent b117a06362
commit 53bef9c996
1 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/format/FormatCard.jsx
View File

@@ -21,6 +21,31 @@ function FormatCard({format, onEdit, onClone, sortBy}) {
return 'bg-blue-100 border-blue-200 text-blue-700 dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-300';
};
const getDisplayConditions = conditions => {
if (!conditions?.length) return [];
// Sort conditions: required first, then non-required
const sortedConditions = [...conditions].sort((a, b) => {
if (a.required && !b.required) return -1;
if (!a.required && b.required) return 1;
return 0;
});
if (sortedConditions.length <= 5) return sortedConditions;
// Take first 4 conditions and add a count of remaining ones
const displayConditions = sortedConditions.slice(0, 4);
const remainingCount = sortedConditions.length - 4;
// Add a virtual condition for the count
displayConditions.push({
name: `+${remainingCount} more...`,
isCounter: true
});
return displayConditions;
};
return (
<div
className='w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500 transition-all cursor-pointer max-h-96'
@@ -57,7 +82,6 @@ function FormatCard({format, onEdit, onClone, sortBy}) {
</button>
</div>
{/* Rest of the component remains the same */}
{content.description && (
<p className='text-gray-600 dark:text-gray-300 text-sm line-clamp-2'>
{content.description}
@@ -66,15 +90,19 @@ function FormatCard({format, onEdit, onClone, sortBy}) {
<div className='flex justify-between items-start gap-4'>
<div className='flex flex-wrap gap-2 flex-1'>
{content.conditions?.map((condition, index) => (
<span
key={index}
className={`px-2 py-1 rounded text-xs font-medium ${getConditionStyle(
condition
)}`}>
{condition.name}
</span>
))}
{getDisplayConditions(content.conditions)?.map(
(condition, index) => (
<span
key={index}
className={`px-2 py-1 rounded text-xs font-medium ${
condition.isCounter
? 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
: getConditionStyle(condition)
}`}>
{condition.name}
</span>
)
)}
</div>
{totalTests > 0 && (