Ocelot-Social/webapp/components/Chat/Chat.vue

<template>
  <div>
    <client-only>
      <internal-page :pageParams="pageParams" />
      <vue-advanced-chat
        :current-user-id="currentUserId"
        :template-actions="JSON.stringify(templatesText)"
        :text-messages="JSON.stringify(textMessages)"
        :menu-actions="JSON.stringify(menuActions)"
        :rooms="JSON.stringify(rooms)"
        :messages="JSON.stringify(messages)"
        :room-actions="JSON.stringify(roomActions)"
        :rooms-loaded="true"
        show-files="false"
        show-audio="false"
        :show-footer="true"
        :messages-loaded="messagesLoaded"
        @send-message="sendMessage($event.detail[0])"
        @fetch-messages="fetchMessages($event.detail[0])"
        :theme="theme"
        :is-device="isDevice"
        @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,
    },
  },
  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: false,
      showDemoOptions: true,
      isDevice: true,
    }
  },

  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>