christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 14:35:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: reorganize tabs, add Article Details, and enhance filters/search

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-08 16:10:14 +02:00
parent 935cd5b510
commit 24042a6aed
7 changed files with 397 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductDescriptions.tsx
+18 -24
View File
@@ -8,7 +8,7 @@ interface ProductDescriptionsProps {
onEdit: (index: number) => void;
}
type TabType = 'all' | 'missingDeLong' | 'missingEnLong' | 'missingDeShort' | 'missingEnShort' | 'missingDeDetails' | 'missingEnDetails' | 'complete' | 'incomplete';
type TabType = 'all' | 'missingLongDE' | 'missingLongEN' | 'missingLongAny' | 'missingShortDE' | 'missingShortEN' | 'missingShortAny' | 'complete' | 'incomplete';
export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps) {
const [activeTab, setActiveTab] = useState<TabType>('all');
@@ -27,21 +27,20 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
let result = data.map((row, index) => ({ row, index }));
// Tab filter
if (activeTab === 'missingDeLong') result = result.filter(r => !r.row[COLUMNS.LONG_DE]);
if (activeTab === 'missingEnLong') result = result.filter(r => !r.row[COLUMNS.LONG_EN]);
if (activeTab === 'missingDeShort') result = result.filter(r => !r.row[COLUMNS.SHORT_DE]);
if (activeTab === 'missingEnShort') result = result.filter(r => !r.row[COLUMNS.SHORT_EN]);
if (activeTab === 'missingDeDetails') result = result.filter(r => !r.row[COLUMNS.DETAILS_DE]);
if (activeTab === 'missingEnDetails') result = result.filter(r => !r.row[COLUMNS.DETAILS_EN]);
if (activeTab === 'missingLongDE') result = result.filter(r => !r.row[COLUMNS.LONG_DE]);
if (activeTab === 'missingLongEN') result = result.filter(r => !r.row[COLUMNS.LONG_EN]);
if (activeTab === 'missingLongAny') result = result.filter(r => !r.row[COLUMNS.LONG_DE] || !r.row[COLUMNS.LONG_EN]);
if (activeTab === 'missingShortDE') result = result.filter(r => !r.row[COLUMNS.SHORT_DE]);
if (activeTab === 'missingShortEN') result = result.filter(r => !r.row[COLUMNS.SHORT_EN]);
if (activeTab === 'missingShortAny') result = result.filter(r => !r.row[COLUMNS.SHORT_DE] || !r.row[COLUMNS.SHORT_EN]);
if (activeTab === 'complete') result = result.filter(r =>
r.row[COLUMNS.LONG_DE] && r.row[COLUMNS.LONG_EN] &&
r.row[COLUMNS.SHORT_DE] && r.row[COLUMNS.SHORT_EN] &&
r.row[COLUMNS.DETAILS_DE] && r.row[COLUMNS.DETAILS_EN]
r.row[COLUMNS.SHORT_DE] && r.row[COLUMNS.SHORT_EN]
);
if (activeTab === 'incomplete') result = result.filter(r =>
!r.row[COLUMNS.LONG_DE] || !r.row[COLUMNS.LONG_EN] ||
!r.row[COLUMNS.SHORT_DE] || !r.row[COLUMNS.SHORT_EN] ||
!r.row[COLUMNS.DETAILS_DE] || !r.row[COLUMNS.DETAILS_EN]
!r.row[COLUMNS.SHORT_DE] || !r.row[COLUMNS.SHORT_EN]
);
// Search filter
@@ -96,11 +95,10 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
const fields = [
row[COLUMNS.LONG_DE], row[COLUMNS.LONG_EN],
row[COLUMNS.SHORT_DE], row[COLUMNS.SHORT_EN],
row[COLUMNS.DETAILS_DE], row[COLUMNS.DETAILS_EN]
row[COLUMNS.SHORT_DE], row[COLUMNS.SHORT_EN]
];
const filled = fields.filter(Boolean).length;
if (filled === 6) return 'bg-green-900/10 hover:bg-green-900/20';
if (filled === 4) return 'bg-green-900/10 hover:bg-green-900/20';
if (filled === 0) return 'bg-red-900/10 hover:bg-red-900/20';
return 'bg-yellow-900/10 hover:bg-yellow-900/20';
};
@@ -121,12 +119,12 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
const tabs: { id: TabType; label: string }[] = [
{ id: 'all', label: 'All Products' },
{ id: 'missingDeLong', label: 'Missing DE Long' },
{ id: 'missingEnLong', label: 'Missing EN Long' },
{ id: 'missingDeShort', label: 'Missing DE Short' },
{ id: 'missingEnShort', label: 'Missing EN Short' },
{ id: 'missingDeDetails', label: 'Missing DE Details' },
{ id: 'missingEnDetails', label: 'Missing EN Details' },
{ id: 'missingLongDE', label: 'Missing Long DE' },
{ id: 'missingLongEN', label: 'Missing Long EN' },
{ id: 'missingLongAny', label: 'Missing Long DE/EN' },
{ id: 'missingShortDE', label: 'Missing Short DE' },
{ id: 'missingShortEN', label: 'Missing Short EN' },
{ id: 'missingShortAny', label: 'Missing Short DE/EN' },
{ id: 'complete', label: 'Complete' },
{ id: 'incomplete', label: 'Incomplete' },
];
@@ -188,8 +186,6 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
{ col: COLUMNS.ARTICLE_NO, label: 'Article No.' },
{ col: COLUMNS.ARTICLE_NAME, label: 'Article Name' },
{ col: COLUMNS.LINE, label: 'Line' },
{ col: COLUMNS.DETAILS_DE, label: 'Details DE' },
{ col: COLUMNS.DETAILS_EN, label: 'Details EN' },
{ col: COLUMNS.LONG_DE, label: 'Long DE' },
{ col: COLUMNS.LONG_EN, label: 'Long EN' },
{ col: COLUMNS.SHORT_DE, label: 'Short DE' },
@@ -217,8 +213,6 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
<td className="px-4 py-3 font-mono text-slate-300 text-xs">{row[COLUMNS.ARTICLE_NO]}</td>
<td className="px-4 py-3 font-medium text-white max-w-[200px] truncate" title={row[COLUMNS.ARTICLE_NAME]}>{row[COLUMNS.ARTICLE_NAME]}</td>
<td className="px-4 py-3 text-slate-300 text-xs">{row[COLUMNS.LINE]}</td>
<td className="px-4 py-3"><Badge content={row[COLUMNS.DETAILS_DE]} row={row} /></td>
<td className="px-4 py-3"><Badge content={row[COLUMNS.DETAILS_EN]} row={row} /></td>
<td className="px-4 py-3"><Badge content={row[COLUMNS.LONG_DE]} row={row} /></td>
<td className="px-4 py-3"><Badge content={row[COLUMNS.LONG_EN]} row={row} /></td>
<td className="px-4 py-3"><Badge content={row[COLUMNS.SHORT_DE]} row={row} /></td>