ryanmwangi/Compareware_next.js
1
0
Fork 0
Code Issues Pull requests Releases Activity

feat(ItemsList): enhance table layout to matxh wireframe and improve item deletion UI

Browse source
This commit is contained in:
ryan 2025-06-30 16:26:25 +03:00
parent 5f5d8f00d9
commit 8c9b7d84ca
1 changed files with 28 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/ItemsList.tsx
View file

@ -569,48 +569,42 @@ export function ItemsList({ url }: ItemsListProps) {
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">Items List</h1>
<div className="overflow-x-auto">
<table className="min-w-full border-collapse border border-gray-300">
<thead>
<tr>
<th className="border border-gray-300 p-2 bg-gray-100">Property</th>
{items.map((item, index) => (
<th key={item.id} className="border border-gray-300 p-2 bg-gray-100 relative">
{item.name || `Item ${index + 1}`}
<button
onClick={() => removeItem(index)}
className="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full text-xs hover:bg-red-600"
title="Delete item"
>
×
</button>
</th>
))}
</tr>
</thead>
<div className="table-container">
<table>
<tbody>
{/* Name row */}
<tr>
<td className="border border-gray-300 p-2 font-medium">Name</td>
<td className="font-medium">Name</td>
{items.map((item, index) => (
<td key={`name-${item.id}`} className="border border-gray-300 p-2">
<TypeaheadInput
value={item.name}
onInput={(value) => updateItem(index, 'name', value)}
onSelect={(suggestion) => handleWikidataSelect(suggestion, item.id)}
fetchSuggestions={fetchWikidataSuggestions}
onFocus={() => setFocusedItemId(item.id)}
placeholder="Enter item name"
/>
<td key={`name-${item.id}`}>
<div className="flex items-center gap-2">
<div className="flex-1">
<TypeaheadInput
value={item.name}
onInput={(value) => updateItem(index, 'name', value)}
onSelect={(suggestion) => handleWikidataSelect(suggestion, item.id)}
fetchSuggestions={fetchWikidataSuggestions}
onFocus={() => setFocusedItemId(item.id)}
placeholder="Enter item name"
/>
</div>
<button
onClick={() => removeItem(index)}
className="delete-button item-delete"
title="Delete item"
>
×
</button>
</div>
</td>
))}
</tr>
{/* Description row */}
<tr>
<td className="border border-gray-300 p-2 font-medium">Description</td>
<td className="font-medium">Description</td>
{items.map((item, index) => (
<td key={`description-${item.id}`} className="border border-gray-300 p-2">
<td key={`description-${item.id}`}>
<EditableCell
value={item.description}
onInput={(value) => updateItem(index, 'description', value)}
@ -628,18 +622,18 @@ export function ItemsList({ url }: ItemsListProps) {
const propertyLabel = propertyLabels[property] || property;
return (
<tr key={property}>
<td className="border border-gray-300 p-2 font-medium relative">
<td className="font-medium relative">
{propertyLabel}
<button
onClick={() => removeProperty(property)}
className="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full text-xs hover:bg-red-600"
className="delete-button property-delete"
title="Delete property"
>
×
</button>
</td>
{items.map((item, index) => (
<td key={`${property}-${item.id}`} className="border border-gray-300 p-2">
<td key={`${property}-${item.id}`}>
<EditableCell
value={item.customProperties[property] || ''}
onInput={(value) => updateItem(index, property, value)}