Skip to content

Implement store-team list in Vue

Chris Oelmueller requested to merge vue-store-team into master

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

  1. View store page as regular store team member
  2. 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)

image
image
image

Previous layouts in this branch, for reference: image

image
image
image

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
Edited by Chris Oelmueller

Merge request reports