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

46
src/components/ItemsList.tsx
View file

@ -569,31 +569,16 @@ export function ItemsList({ url }: ItemsListProps) {
<div className="p-4"> <div className="p-4">
<h1 className="text-2xl font-bold mb-4">Items List</h1> <h1 className="text-2xl font-bold mb-4">Items List</h1>
<div className="overflow-x-auto"> <div className="table-container">
<table className="min-w-full border-collapse border border-gray-300"> <table>
<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>
<tbody> <tbody>
{/* Name row */} {/* Name row */}
<tr> <tr>
<td className="border border-gray-300 p-2 font-medium">Name</td> <td className="font-medium">Name</td>
{items.map((item, index) => ( {items.map((item, index) => (
<td key={`name-${item.id}`} className="border border-gray-300 p-2"> <td key={`name-${item.id}`}>
<div className="flex items-center gap-2">
<div className="flex-1">
<TypeaheadInput <TypeaheadInput
value={item.name} value={item.name}
onInput={(value) => updateItem(index, 'name', value)} onInput={(value) => updateItem(index, 'name', value)}
@ -602,15 +587,24 @@ export function ItemsList({ url }: ItemsListProps) {
onFocus={() => setFocusedItemId(item.id)} onFocus={() => setFocusedItemId(item.id)}
placeholder="Enter item name" placeholder="Enter item name"
/> />
</div>
<button
onClick={() => removeItem(index)}
className="delete-button item-delete"
title="Delete item"
>
×
</button>
</div>
</td> </td>
))} ))}
</tr> </tr>
{/* Description row */} {/* Description row */}
<tr> <tr>
<td className="border border-gray-300 p-2 font-medium">Description</td> <td className="font-medium">Description</td>
{items.map((item, index) => ( {items.map((item, index) => (
<td key={`description-${item.id}`} className="border border-gray-300 p-2"> <td key={`description-${item.id}`}>
<EditableCell <EditableCell
value={item.description} value={item.description}
onInput={(value) => updateItem(index, 'description', value)} onInput={(value) => updateItem(index, 'description', value)}
@ -628,18 +622,18 @@ export function ItemsList({ url }: ItemsListProps) {
const propertyLabel = propertyLabels[property] || property; const propertyLabel = propertyLabels[property] || property;
return ( return (
<tr key={property}> <tr key={property}>
<td className="border border-gray-300 p-2 font-medium relative"> <td className="font-medium relative">
{propertyLabel} {propertyLabel}
<button <button
onClick={() => removeProperty(property)} 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" title="Delete property"
> >
× ×
</button> </button>
</td> </td>
{items.map((item, index) => ( {items.map((item, index) => (
<td key={`${property}-${item.id}`} className="border border-gray-300 p-2"> <td key={`${property}-${item.id}`}>
<EditableCell <EditableCell
value={item.customProperties[property] || ''} value={item.customProperties[property] || ''}
onInput={(value) => updateItem(index, property, value)} onInput={(value) => updateItem(index, property, value)}