feat: improve 'Claimed' column UX in datatable #2986
+317
−34
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
wescopeland
commented
Dec 26, 2024
| @@ -34,7 +34,16 @@ private function buildBaseQuery( | |||
| ?User $user = null, | |||
| ?int $targetId = null, | |||
| ): Builder { | |||
| $query = Game::with(['system']) | |||
| $query = Game::query() | |||
There was a problem hiding this comment.
query() is just here to move with() to the next line so line indentation makes sense.
Jamiras
reviewed
Dec 31, 2024
| {hasActiveOrInReviewClaims && row.original.game.claimants ? ( | ||
| <div className="flex items-center gap-1.5"> | ||
| <LuCheck className="size-4" /> | ||
| <span className="sr-only">{strings.t_yes}</span> |
There was a problem hiding this comment.
I find the X misleading, especially right next to the add-to-list column
Similarly, the check mark is redundant. Either there will be one or more avatars, or there will be zero avatars. Do we really need the X/Check too?
There was a problem hiding this comment.
We can get rid of the check and X. Though, I do like that all of our table cells have an empty state of some kind. To maintain consistency, I've reverted the empty state for this one back to what it was previously:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR makes an improvement to the "Claimed" column and is a soft preparation for migrating the various claims table pages to React, namely with the new component shown in the screenshots below.
Before
After
The game list query now returns the active claimants for the game. In the column itself, a new component called
UserAvatarStackis used.As the name implies, this component stacks user avatars:
The column's sort order logic is unchanged: it's a simple yes or no. Mobile is unaffected by these changes.