OBPIH-7253 Resize identifier column on shipment list to show full code#5550
OBPIH-7253 Resize identifier column on shipment list to show full code#5550alannadolny merged 1 commit intodevelopfrom
Conversation
| headerClassName: 'header justify-content-center', | ||
| fixed: 'left', | ||
| minWidth: 100, | ||
| minWidth: 130, |
There was a problem hiding this comment.
The identifier format is configurable, and so doesn't necessarily always have the same length (see openboxes.identifier.default.random.template in runtime.groovy). How difficult would it be to change the behaviour here to flex the width of the column?
There was a problem hiding this comment.
Good catch, I didn’t know about that. The only question is whether anyone actually changes openboxes.identifier.default.random.template, or if that’s not really a realistic case. If they do, then maybe it would make sense to implement a dynamic minWidth, where the base value is 100 px and for each additional character/digit we add, say, 5–10 px?
Something like this:
{
Header: <Translate id="react.stockMovement.column.identifier.label" defaultMessage="Identifier" />,
accessor: 'identifier',
fixed: 'left',
headerClassName: 'header justify-content-center',
minWidth: 100 + (tableData.data[0]?.identifier.length * 5) || 100,
Cell: (row) => {
const { id, shipmentType } = row.original;
return (
<TableCell
{...row}
link={STOCK_MOVEMENT_URL.show(id)}
tooltip
tooltipLabel={getShipmentTypeTooltip(translate, shipmentType?.displayName)}
>
<ShipmentIdentifier
shipmentType={mapShipmentTypes(shipmentType)}
identifier={row?.value}
/>
</TableCell>
);
},
},
In that case, we would also need to add tableData to the dependency array in the useMemo so that the column definition updates when the data changes. Unless you have other ideas, because I don’t think we can read the value from runtime.groovy directly in React.
There was a problem hiding this comment.
Since we use minWidth (not width), won't it adjust automatically if an identifier becomes larger?
There was a problem hiding this comment.
@kchelstowski yes, in theory it should work, but it doesn’t. At first, I thought the identifier always consists of 3 letters and 3 digits, which is why I only increased the width. But it turns out the length of this code can actually be different. Now I’m wondering if anyone really changes the code length in openboxes.identifier.default.random.template, or if no one uses that setting. If we want to change it, I’m not sure whether the solution I mentioned above is fine, or if it’s better to check and fix why minWidth isn’t working properly. Anyway, this issue appears only in the old table, and I’m not sure if it’s worth spending time fixing it since it’s probably no longer used anywhere because only old components use it, so we could just make a small “workaround” instead.
There was a problem hiding this comment.
How difficult would it be to change the behaviour here to flex the width of the column?
It's done using flex under the hood
✨ Description of Change
Link to GitHub issue or Jira ticket:
Description:
📷 Screenshots & Recordings (optional)