✨ Site > Chat > Add messages sending

site/src/components/chat/script.js

@@ -5,7 +5,8 @@ export default
     data()
     {
         return {
-            userName: ''
+            userName: '',
+            messageText: ''
         }
     },
 
@@ -38,7 +39,7 @@ export default
     {
         onUserNameChange()
         {
-            this.$store.commit('askUpdateUser', { name: this.userName })
+            this.$store.commit('setPendingUser', { name: this.userName })
         },
 
         onUserNameKeyDown(event)
@@ -48,6 +49,19 @@ export default
             {
                 event.target.blur()
             }
+        },
+
+        onMessageTextKeyDown(event)
+        {
+            // Blur if enter pressed
+            if(event.keyCode === 13)
+            {
+                event.preventDefault()
+                event.target.blur()
+
+                this.$store.commit('setPendingMessage', { text: this.messageText })
+                this.messageText = ''
+            }
         }
     }
 }

site/src/components/chat/template.html

@@ -18,4 +18,7 @@
     <div class="infos" v-if="user">
         Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
     </div>
+    <div class="message">
+        <textarea class="text" v-model="messageText" @keydown="onMessageTextKeyDown($event)"></textarea>
+    </div>
 </div>

site/src/components/connexion/script.js

@@ -14,13 +14,19 @@ export default
         pendingUser()
         {
             return this.$store.state.chat.pendingUser
+        },
+
+        pendingMessage()
+        {
+            return this.$store.state.chat.pendingMessage
         }
     },
 
     watch:
     {
         project: 'onProjectChange',
-        pendingUser: 'onPendingUser'
+        pendingUser: 'onPendingUser',
+        pendingMessage: 'onPendingMessage'
     },
 
     created()
@@ -105,6 +111,14 @@ export default
             {
                 this.chatSocket.emit('update_user', value)
             }
+        },
+
+        onPendingMessage(value)
+        {
+            if(value)
+            {
+                this.chatSocket.emit('message', value)
+            }
         }
     }
 }

site/src/store/modules/chat.js

@@ -24,9 +24,14 @@ export default {
             state.user = data
         },
 
-        askUpdateUser(state, data)
+        setPendingUser(state, data)
         {
             state.pendingUser = data
+        },
+
+        setPendingMessage(state, data)
+        {
+            state.pendingMessage = data
         }
     }
 }