Refactor Chat

What does this MR do?

• Use vue components for chats
• Remove jQuery dependencies
• Fix layout problems
• Reuse Navigation conversation list for conversation Selection Replaced by vue-advanced-chat component
• Add hashtag for cid if a different chat has been selected Chat component has conversation list included so not required.
• Use chat for chat page and also on desktop chat popup
• Mobile devices
  • Hide conversation list
  • Use full size of page
• Always display Avatar next to the Chat (prevent floating of text) Chat component has no possibility to display avatars in chat
• Hide Rename of locked conversations

Known issues

• Can't display our avatar component next to the messages. It can only display image urls: https://github.com/antoine92190/vue-advanced-chat/issues/372
• In popup chats, it is not possible to fetch more messages when scrolling up: https://github.com/antoine92190/vue-advanced-chat/issues/368
  • Remove workaround when issue has been fixed

TODOs

• Load conversation list
• Implement lazy loading of conversation list
• Display Avatar in conversation list
• Reuse Conversation Entry from NavBar. Outsource dropdown-item and hover effect from entry. Use original vac list.
• Implement online/offline? in converastion list Don't differentiate at the moment.
• Implement loading messages of conversation
• Implement lazy loading of more messages
• Implement sending of message
  • Implement updating of conversation list
  • Implement send failed
  • Display unread messages badge in conversation list
• Implement(Check if it works) updating of conversation list over websocket
• Implement(Check if it works) receving new message in active conversation over websocket
• Implement mark conversation as read
  • Should also be updated in navigation conversation list
  • Mark conversation as read when beeing in current conversation by clicking again in response message textbox
• Implement new conversation
• Implement direct opening of chat with id
• Implement chat component for popup chat on desktop
  • Hide converastion list in this mode
  • Implement Close all chats
• Implement emojys? Will be done in future merge request.
• Implement multi languages
• Implement user tags or remove feature?
• Prevent switching rooms when input text is not empty or store input text for each room?
  • Users must be also stored for new conversation
• Display profile pictures in message header
• Display avatars next to messages in group chat Nativ not possible with chat component.
• Check: Creating new conversation by function http://localhost:18080/profile/1954 -> Nachricht schreiben
  • Don't display user selector for empty conversation
• Sending Message: Add message to conversation also when socket has no connection. (send message api response with the created message now)
• Clear New COnversation Users after recreating new conversation after message has been sent.
• Open New chat on message page instead of popup for mobile devices: http://localhost:18080/profile/1743
• Fit size of chat component to message page.
• Remove unused stuff from MessageView.php, chat.css, Search for msg-conversation
• Remove msg.js

How confident are you it won't break things if deployed?

It should not break something.

Links to related issues

Issue could be solved: #1125 (closed) #1038 (closed)

Issue could be handled: #1193

How to test

How to send messages in different ways

1. Checkout branch locally
2. Login as foodsaver
3. Open Dashboard
4. Click in navigation bar to open one or multiple chats and play around with the chat windows
5. Go to /?page=msg and play around with the chat window.
6. Open /essenskoerbe/find and search for a basket and send a request
7. Click in navigation bar to open the last chat which must be of the basket request

Things to test with the chat component

1. Test preventing loosing written chat message when leaving page or switching chats
2. Create a new conversation with one or multiple recipients
3. Send emojis
4. Try different screen resolutions
5. Loading all conversations
6. Loading a conversation with many messages so the pagination loading is executed.

Screenshots (if applicable)

Checklist

• added a test, or explain why one is not needed/possible...
  • chat test has been disabled and will be reimplemented #1466
• no unrelated changes
• asked someone for a code review
• set a "for:" label to indicate who will be affected by this change
• added to the next milestone (see https://gitlab.com/foodsharing-dev/foodsharing/-/milestones, unless it has a "for:Dev" label)
• added an entry to CHANGELOG.md
• added a short text that can be used in the release notes
• Once your MR has been merged, you are responsible to create a testing issue in the Beta Testing forum: https://foodsharing.de/?page=bezirk&bid=734&sub=forum. Please change the MRs label to "state:Beta testing".
  • Consider writing a detailed description in German.
  • Describe in a few sentences, what should be tested from a user perspective.
  • Also mention different settings (e.g. different browsers, roles, ...) how this change can be tested.
  • Be aware, that also non technical people should understand.

Release notes text in German

Der Chat der Foodsharing Webseite wurde modernisiert.