Skip to content

OBPIH-7253 Resize identifier column on shipment list to show full code#5550

Merged
alannadolny merged 1 commit intodevelopfrom
OBPIH-7253
Oct 16, 2025
Merged

OBPIH-7253 Resize identifier column on shipment list to show full code#5550
alannadolny merged 1 commit intodevelopfrom
OBPIH-7253

Conversation

@SebastianLib
Copy link
Collaborator

✨ Description of Change

Link to GitHub issue or Jira ticket:

Description:


📷 Screenshots & Recordings (optional)

@SebastianLib SebastianLib added the type: feature A new piece of functionality for the app label Oct 14, 2025
@github-actions github-actions bot added the domain: frontend Changes or discussions relating to the frontend UI label Oct 14, 2025
headerClassName: 'header justify-content-center',
fixed: 'left',
minWidth: 100,
minWidth: 130,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we use minWidth (not width), won't it adjust automatically if an identifier becomes larger?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ewaterman

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

@alannadolny alannadolny merged commit b0e6abf into develop Oct 16, 2025
3 of 5 checks passed
@alannadolny alannadolny deleted the OBPIH-7253 branch October 16, 2025 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

domain: frontend Changes or discussions relating to the frontend UI type: feature A new piece of functionality for the app

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants