Implement store-team list in Vue
This is a part of &22 (closed) which closes #820 (closed) and also closes #104 (closed).
What does this MR do?
Reimplements the store-team list in Vue:
- layout adjustments for all pages(!) - main content is now 12/24 wide, was 13/24 before
- store managers are now always displayed before regular members
(and the no longer needed box of store managers is removed)
=> sleeping head keeps them up top, but in last place - better visual separation for unverified members
-
increase avatar size to 50px, matching pickup slot size now
(moved fetchcount display into a badge to obtain some space) - colored border for avatar is removed (not helpful in this context)
(and only the avatar itself links to user profiles now)
=> fetchcount border is colored green now if store manager quiz was passed. orange border is gone. this stuff should become icons after !1052 (closed) handles it better. -
call button (prefers 'handy' over 'telefon') on screen sizes smaller than
-md
(this should be more visible than tapping on the phone numbers to call)
=> both numbers are validated and only valid numbers can be called - b-tooltips + mobile tooltip replacement (with a different layout)
- (re)moved CSS and several translations
(and translated a few strings that weren't before) - better visual distinction of waiting-list members (star badge)
-
remove context menu and reimplement as table details (click on username)
directly reporting users from stores was removed, can just use the profile button and report there - add confirmation popup for removing users from store team
- much better accessibility awareness for this component
- code preparations for potential client-side sorting by last pickup / fetchcount / joindate etc
(if you're interested, build virtual columns and sort them!) - add a few acceptance tests for the member actions, fixing #104 (closed) while at it
How confident are you it won't break things if deployed?
Well. Let's see.
- the global layout modification (left column width increased by 20% compared to before) might cause some unexpected stuff down the road, but shouldn't break
- the tooltips are actually implemented in a safer and more stable way now
- there will be fewer undesired interface actions (visiting profiles, removing users)
- the calling mechanisms should be more stable than the current ones, although not perfect
- changed as little backend functionality as possible for the former context menu actions
- overflow from long names is also handled better than it was previously
- the potentially-too-big 50px avatars are handled by CSS
- the chat adjustments have corresponding tests backing them
Overall, I'm sure I missed something, but we probably won't find out what exactly until this is merged and used by others with real (read: bad old) data :)
Links to related issues
Closes #104 (closed) (problem with removing store managers from team without demoting them first)
Closes #820 (closed) by displaying the same date for both jumpers and regular members.
We should check database-side if we can fix #407 (closed) while at it.
Calling relies on data quality, so #600 (closed) should be looked at too.
How to test
- View store page as regular store team member
- View store page as store manager (or ambassador / orga)
and for the list of team members...
- check data accuracy
- check data presentation
- check tooltips
- check differences on mobile
- check the former context menu actions
- tab through the action ;-)
Screenshots (if applicable)
Checklist
-
context menus need to give dynamic feedback when switching between team states, or removing team members -
the default profile photo should be reset ;-) -
clarify whether "last pickup date" is public information or store-manager only -
look into verified
data and display something if not verified -
added some tests for callable phone numbers -
more stable callable-phone-number handling for tel:
https://tools.ietf.org/html/rfc3966#page-6 -
try to fix Firefox focus/blur event handling when toggling details -
mobile collapse -
follow-up: look into promoting/demoting as member action -
follow-up: better communicate avatar as profile link, remove "profile" member action -
follow-up: dynamic sorting modes based on certain properties -
follow-up: look into "manage team" toggle mode that could replace the current "Team bearbeiten" screen => highlight folks with SM quiz, only offer team-removal / promotion,demotion actions there, introduce search box for adding new people, etc -
no unrelated changes -
asked someone for a code review -
joined #foodsharing-beta channel at https://slackin.yunity.org -
added an entry to CHANGELOG.md (description, merge request link, username(s)) -
Once your MR has been merged, you are responsible to update the #foodsharing-beta Slack channel about what has been changed here. They will test your work in different browsers, roles or other settings