IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6503 from Ocelot-Social-Community/create-a-component-chat-scaffholding

Browse Source 
feat(webapp): create a component chat scaffholding
This commit is contained in:
Alexander Friedland 2023-07-07 11:08:10 +02:00 committed by GitHub
commit f568d7676d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 523 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
webapp/components/Chat/Chat.vue Normal file
View File

@ -0,0 +1,241 @@
<template>
<div>
<client-only>
<vue-advanced-chat
:theme="theme"
:current-user-id="currentUserId"
:room-id="null"
:template-actions="JSON.stringify(templatesText)"
:menu-actions="JSON.stringify(menuActions)"
:text-messages="JSON.stringify(textMessages)"
:messages="JSON.stringify(messages)"
:messages-loaded="messagesLoaded"
:rooms="JSON.stringify(rooms)"
:room-actions="JSON.stringify(roomActions)"
:rooms-loaded="true"
show-files="false"
show-audio="false"
:show-footer="true"
@send-message="sendMessage($event.detail[0])"
@fetch-messages="fetchMessages($event.detail[0])"
:responsive-breakpoint="responsiveBreakpoint"
:single-room="singleRoom"
@show-demo-options="showDemoOptions = $event"
/>
</client-only>
</div>
</template>
<script>
// import { roomQuery } from '~/graphql/Rooms'
import { messageQuery } from '~/graphql/Messages'
export default {
name: 'Chat',
props: {
theme: {
type: String,
},
singleRoom: {
type: Boolean,
default: false,
},
},
data() {
return {
currentUserId: '1234',
menuActions: [
{
name: 'inviteUser',
title: 'Invite User',
},
{
name: 'removeUser',
title: 'Remove User',
},
{
name: 'deleteRoom',
title: 'Delete Room',
},
],
messageActions: [
{
name: 'addMessageToFavorite',
title: 'Add To Favorite',
},
{
name: 'shareMessage',
title: 'Share Message',
},
],
templatesText: [
{
tag: 'help',
text: 'This is the help',
},
{
tag: 'action',
text: 'This is the action',
},
],
textMessages: {
ROOMS_EMPTY: 'Aucune conversation',
ROOM_EMPTY: 'Aucune conversation sélectionnée',
NEW_MESSAGES: 'Nouveaux messages',
MESSAGE_DELETED: 'Ce message a été supprimé',
MESSAGES_EMPTY: 'Aucun message',
CONVERSATION_STARTED: 'La conversation a commencée le :',
TYPE_MESSAGE: 'Tapez votre message',
SEARCH: 'Rechercher',
IS_ONLINE: 'est en ligne',
LAST_SEEN: 'dernière connexion ',
IS_TYPING: 'est en train de taper...',
CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
},
roomActions: [
{
name: 'archiveRoom',
title: 'Archive Room',
},
{ name: 'inviteUser', title: 'Invite User' },
{ name: 'removeUser', title: 'Remove User' },
{ name: 'deleteRoom', title: 'Delete Room' },
],
rooms: [
{
roomId: '1',
roomName: 'John Snow',
avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
users: [
{ _id: '1234', username: 'John Doe' },
{ _id: '4321', username: 'John Snow' },
],
},
{
roomId: '2',
roomName: 'Max J. Mustermann',
avatar:
'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
users: [
{ _id: '1234', username: 'Johnx Doe' },
{ _id: '43210', username: 'Max J. Mustermann' },
],
},
],
messages: [],
messagesLoaded: true,
showDemoOptions: true,
responsiveBreakpoint: 600,
}
},
methods: {
fetchMessages({ room, options = {} }) {
// console.log(room, options)
this.messagesLoaded = false
setTimeout(async () => {
if (options.reset) {
// console.log('reset messages')
this.messages = [] // this.addMessages(true)
} else {
try {
const {
data: { Message },
} = await this.$apollo.query({
query: messageQuery(),
variables: {
roomId: room.id,
},
})
// console.log('Messages', Message)
this.messages = Message
} catch (error) {
// console.log('Error', error)
this.messages = [] // this.addMessages(true)
this.$toast.error(error.message)
}
}
this.messagesLoaded = true
})
},
/* addMessages(reset) {
const messages = []
for (let i = 0; i < 30; i++) {
messages.push({
_id: reset ? i : this.messages.length + i,
content: `${reset ? '' : 'paginated'} message ${i + 1}`,
senderId: '4321',
username: 'John Doe',
date: '13 November',
timestamp: '10:20',
})
}
messages.push({
_id: '31',
content: `Hallo Welt`,
senderId: '1234',
username: 'John Doe',
date: '13 November',
timestamp: '10:20',
})
return messages
}, */
sendMessage(message) {
this.messages = [
...this.messages,
{
_id: this.messages.length,
content: message.content,
senderId: this.currentUserId,
timestamp: new Date().toString().substring(16, 21),
date: new Date().toDateString(),
},
]
},
addNewMessage() {
setTimeout(() => {
this.messages = [
...this.messages,
{
_id: this.messages.length,
content: 'NEW MESSAGE',
senderId: '1234',
timestamp: new Date().toString().substring(16, 21),
date: new Date().toDateString(),
},
]
}, 2000)
},
},
// apollo: {
// Rooms: {
// query() {
// return roomQuery()
// },
// update({ Room }) {
// console.log('Rooms', Room)
// if (!Room) {
// this.rooms = []
// return
// }
// this.rooms = Room
// },
// error(error) {
// this.rooms = []
// this.$toast.error(error.message)
// },
// fetchPolicy: 'cache-and-network',
// },
// },
}
</script>
<style lang="scss">
body {
font-family: 'Quicksand', sans-serif;
}
</style>

140
webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<nuxt-link v-if="!unreadChatNotificationsCount" class="chat-menu" :to="{ name: 'chat' }">
<base-button
ghost
circle
v-tooltip="{
content: $t('notifications.headerMenuButton.chat'),
placement: 'bottom-start',
}"
>
<img src="/img/empty/chat-bubble.svg" />
</base-button>
</nuxt-link>
<dropdown v-else class="chat-notifications-menu" offset="8">
<template #default="{ toggleMenu }">
<base-button
ghost
circle
v-tooltip="{
content: $t('notifications.headerMenuButton.tooltip'),
placement: 'bottom-start',
}"
@click="toggleMenu"
>
<counter-icon icon="envelope" :count="unreadChatNotificationsCount" danger />
<img src="/img/empty/chat-bubble.svg" />
</base-button>
</template>
<template #popover="{}">
<div class="chat-notifications-menu-popover">
<div v-for="notification in notifications" v-bind:key="notification.roomid">
<ds-space>
<div
class="chat-notifications-menu-popover-item"
@click="
$store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: notification.roomid })
"
>
<p>{{ notification.name }}</p>
{{ notification.title }}
</div>
</ds-space>
</div>
<!-- <notification-list :notifications="notifications" /> -->
</div>
<ds-flex class="chat-notifications-link-container">
<ds-flex-item
class="chat-notifications-link-container-item"
:width="{ base: '100%' }"
centered
>
<nuxt-link :to="{ name: 'chat' }">
<base-button ghost primary>All Chat Messages</base-button>
</nuxt-link>
</ds-flex-item>
</ds-flex>
</template>
</dropdown>
</template>
<script>
import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
import Dropdown from '~/components/Dropdown'
// import NotificationList from '../NotificationList/NotificationList'
export default {
name: 'ChatNotificationMenu',
components: {
CounterIcon,
Dropdown,
// NotificationList,
},
data() {
return {
notifications: [
{ roomid: 'u1', name: 'Jenny', title: 'last Message from Jenny' },
{ roomid: 'u2', name: 'Honey', title: 'last Message from Honey' },
{ roomid: 'u3', name: 'Bob der Baumeister', title: 'last Message from Bob der Baumeister' },
],
}
},
computed: {
unreadChatNotificationsCount() {
const result = this.notifications.reduce((count, notification) => {
return notification.read ? count : count + 1
}, 0)
return result
},
hasNotifications() {
return this.notifications.length
},
},
}
</script>
<style lang="scss">
.chat-notifications-menu {
max-width: 500px;
}
.vue-popover-theme {
z-index: 1000000;
}
.counter-icon {
position: relative;
> .count {
position: absolute;
top: -$space-xx-small;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: $size-icon-base;
min-width: $size-icon-base;
padding: 3px; // magic number to center count
border-radius: 50%;
transform: translateX(50%);
color: $color-neutral-100;
background-color: $color-primary;
font-size: 10px; // magic number to center count
line-height: 1;
text-align: center;
&.--danger {
background-color: $color-danger;
}
&.--inactive {
background-color: $color-neutral-60;
}
&.--soft {
background-color: $color-neutral-90;
color: $text-color-soft;
}
}
}
</style>

6
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -92,6 +92,10 @@
<client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
<map-button />
</client-only>
<!-- chat menü -->
<client-only>
<chat-notification-menu placement="top" />
</client-only>
<!-- avatar menu -->
<client-only>
<avatar-menu placement="top" />
@ -265,6 +269,7 @@ import SearchField from '~/components/features/SearchField/SearchField.vue'
import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
import links from '~/constants/links.js'
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
export default {
components: {
@ -278,6 +283,7 @@ export default {
NotificationMenu,
PageParamsLink,
SearchField,
ChatNotificationMenu,
},
props: {
showMobileMenu: { type: Boolean, default: false },

15
webapp/graphql/Messages.js Normal file
View File

@ -0,0 +1,15 @@
import gql from 'graphql-tag'
export const messageQuery = () => {
return gql`
query ($roomId: ID!) {
Message(roomId: $roomId) {
id
content
author {
id
}
}
}
`
}

12
webapp/graphql/Rooms.js Normal file
View File

@ -0,0 +1,12 @@
import gql from 'graphql-tag'
export const roomQuery = () => gql`
query {
Room {
id
users {
id
}
}
}
`

3
webapp/layouts/default.spec.js
View File

@ -36,6 +36,9 @@ describe('default.vue', () => {
store = new Vuex.Store({
getters: {
'auth/isLoggedIn': () => true,
'chat/showChat': () => {
return { showChat: false, roomID: 'u0' }
},
},
})
})

28
webapp/layouts/default.vue
View File

@ -13,21 +13,32 @@
<client-only>
<modal />
</client-only>
<div v-if="$store.getters['chat/showChat'].showChat" class="chat-modul">
<ds-text align="right" class="close">
RoomID: {{ $store.getters['chat/showChat'].roomID }}
<ds-button @click="$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: 'u0' })">
x
</ds-button>
</ds-text>
<chat-module :singleRoom="true" />
</div>
>
</div>
</template>
<script>
import seo from '~/mixins/seo'
import mobile from '~/mixins/mobile'
import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
import Modal from '~/components/Modal'
import PageFooter from '~/components/PageFooter/PageFooter'
import ChatModule from '~/components/Chat/Chat.vue'
export default {
components: {
HeaderMenu,
Modal,
PageFooter,
ChatModule,
},
mixins: [seo, mobile()],
}
@ -41,4 +52,19 @@ export default {
padding-top: 6rem;
padding-bottom: 5rem;
}
.chat-modul {
background-color: rgb(233, 228, 228);
height: 667px;
width: 355px;
position: fixed;
bottom: 45px;
right: 0;
z-index: 10000;
.close {
padding: 10px;
color: blue;
cursor: pointer;
}
}
</style>

1
webapp/locales/de.json
View File

@ -692,6 +692,7 @@
},
"group": "Beschreibung",
"headerMenuButton": {
"chat": "Meine Chat",
"tooltip": "Meine Benachrichtigungen"
},
"markAllAsRead": "Markiere alle als gelesen",

1
webapp/locales/en.json
View File

@ -692,6 +692,7 @@
},
"group": "Description",
"headerMenuButton": {
"chat": "My Chat",
"tooltip": "My notifications"
},
"markAllAsRead": "Mark all as read",

9
webapp/nuxt.config.js
View File

@ -127,6 +127,7 @@ export default {
{ src: '~/plugins/vue-infinite-loading.js', ssr: false },
{ src: '~/plugins/vue-observe-visibility.js', ssr: false },
{ src: '~/plugins/v-mapbox.js', mode: 'client' },
{ src: '~/plugins/vue-advanced-chat.js', mode: 'client' },
],
router: {
@ -248,6 +249,14 @@ export default {
** You can extend webpack config here
*/
extend(config, ctx) {
// Add the compilerOptions
ctx.loaders.vue.compilerOptions = {
// Add your compilerOptions here
isCustomElement: (tagName) => {
return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
},
}
if (CONFIG.STYLEGUIDE_DEV) {
config.resolve.alias['@@'] = path.resolve(__dirname, `${styleguidePath}/src/system`)
config.module.rules.push({

1
webapp/package.json
View File

@ -54,6 +54,7 @@
"v-mapbox": "^1.11.2",
"v-tooltip": "~2.1.3",
"validator": "^13.0.0",
"vue-advanced-chat": "^2.0.7",
"vue-count-to": "~1.0.13",
"vue-infinite-loading": "^2.4.5",
"vue-izitoast": "^1.2.1",

11
webapp/pages/chat.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<chat />
</template>
<script>
import Chat from '../components/Chat/Chat.vue'
export default {
components: { Chat },
}
</script>

9
webapp/pages/profile/_id/_slug.vue
View File

@ -79,6 +79,15 @@
@optimistic="optimisticFollow"
@update="updateFollow"
/>
<base-button
@click="$store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: user.id })"
v-tooltip="{
content: $t('notifications.headerMenuButton.chat'),
placement: 'bottom-start',
}"
>
<img src="/img/empty/chat-bubble.svg" height="20" />
</base-button>
</div>
<template v-if="user.about">
<hr />

6
webapp/plugins/vue-advanced-chat.js Normal file
View File

@ -0,0 +1,6 @@
import { register } from 'vue-advanced-chat'
export default ({ app }) => {
if (process.client) {
register()
}
}

1
webapp/static/img/empty/chat-bubble.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="chat-bubble"><g data-name="Chat"><path fill="#9B9B9B" d="M27.23,24.91A9,9,0,0,0,22.44,9.52,8.57,8.57,0,0,0,21,9.41a8.94,8.94,0,0,0-8.92,10.14c0,.1,0,.2,0,.29a9,9,0,0,0,.22,1l0,.11a8.93,8.93,0,0,0,.38,1l.13.28a9,9,0,0,0,.45.83l.07.14a9.13,9.13,0,0,1-2.94-.36,1,1,0,0,0-.68,0L7,24.13l.54-1.9a1,1,0,0,0-.32-1,9,9,0,0,1,11.27-14,1,1,0,0,0,1.23-1.58A10.89,10.89,0,0,0,13,3.25a11,11,0,0,0-7.5,19l-1,3.34A1,1,0,0,0,5.9,26.82l4.35-1.93a11,11,0,0,0,4.68.16A9,9,0,0,0,21,27.41a8.81,8.81,0,0,0,2.18-.27l3.41,1.52A1,1,0,0,0,28,27.48Zm-1.77-1.1a1,1,0,0,0-.32,1L25.45,26l-1.79-.8a1,1,0,0,0-.41-.09,1,1,0,0,0-.29,0,6.64,6.64,0,0,1-2,.29,7,7,0,0,1,0-14,6.65,6.65,0,0,1,1.11.09,7,7,0,0,1,3.35,12.31Z"></path><path fill="#9B9B9B" d="M17.82 17.08H17a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM21.41 17.08h-.82a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM25 17.08h-.82a1 1 0 0 0 0 2H25a1 1 0 0 0 0-2z"></path></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 942 B

22
webapp/store/chat.js Normal file
View File

@ -0,0 +1,22 @@
export const state = () => {
return {
showChat: false,
roomID: 'u0',
}
}
export const mutations = {
SET_OPEN_CHAT(state, ctx) {
state.showChat = ctx.showChat || false
state.roomID = ctx.roomID || 'u0'
},
}
export const getters = {
showChat(state) {
return state
},
roomID(state) {
return state
},
}

18
webapp/yarn.lock
View File

@ -10503,6 +10503,11 @@ emittery@^0.13.1:
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
emoji-picker-element@1.12.1:
version "1.12.1"
resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.12.1.tgz#854a9bbae4d9a04fa2b5cd0763845921f4904c83"
integrity sha512-F9AY/re8uqZmBcCXLHLGvyy7fxuMQdZl9R8OToLRH8Vnns+WMX8RYUbI2nSJklzl5+82qzpYWeus1/puDepWcQ==
emoji-regex@^7.0.1:
version "7.0.3"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@ -14729,6 +14734,11 @@ linkify-it@~3.0.2:
dependencies:
uc.micro "^1.0.1"
linkifyjs@2.1.9:
version "2.1.9"
resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
listr-silent-renderer@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@ -21951,6 +21961,14 @@ vt-pbf@^3.1.1:
"@mapbox/vector-tile" "^1.3.1"
pbf "^3.2.1"
vue-advanced-chat@^2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/vue-advanced-chat/-/vue-advanced-chat-2.0.7.tgz#bd35830c19fc5eb4e26545dc554d88e7808913cc"
integrity sha512-s+6v+KtVT46lFM8YohneLLS/vN10sSTAPfZiqAczXf13Q8vQWD9rSeWAokL0zuJeQ+jguNgFI6oN2wbI/RC1iw==
dependencies:
emoji-picker-element "1.12.1"
linkifyjs "2.1.9"
vue-apollo@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.2.tgz#b198ecfa3765850a0b9f2b84ffaa7fbd8ec15f52"