templateChat

src/components/contact/Profil.vue

@@ -1,10 +1,10 @@
 
 <template>
 
-<div class="vCard">
+<div class="personalInformation">
  <vue-tabs>
-    <v-tab title="👤 Contact">
+    <v-tab title="👤 Profil">
-		<h1>👤 Contact</h1>
+		<h1>👤 Profil</h1>
       	<div>
 			<label for="avatar">Avatar</label>
 			<input type="file" />
@@ -113,7 +113,7 @@
 	 <v-tab title="✍🏼 Commentaires">
 		 <h1>✍🏼 Commentaires</h1>
 		 <div>
-			<label for="comment"></label>
+			<label for="comments"></label>
 			<textarea v-model="home"></textarea>
 		</div>
 					
@@ -127,7 +127,7 @@
 
     <script>
 		/*export default {
-            name: 'vCard',
+            name: 'personalInformation',
 			setup() {
             home = "",
             work = ""
@@ -148,10 +148,6 @@
 					}
 				}
 			};
-			
-		new Vue({
-  			el:"#vCard",
-		})	
 	*/
     </script>
 

src/components/message/Chat.vue

@@ -1,11 +0,0 @@
-
-<template>
-    <h1>Chat</h1>
-
-</template>
-
-
-<script>
-
-
-</script>

src/components/message/ChatBox.vue

@@ -0,0 +1,44 @@
+<template>
+  <form class='chat-box' v-on:submit='onSubmit($event)'>
+    <input
+        v-model='text'
+        placeholder='Ecrire un message'
+        type='text'
+    />
+    <button :disabled='text === ""'>Send</button>
+  </form>
+</template>
+
+
+
+<script>
+export default {
+  name: 'ChatBox',
+  data: () => ({
+    text: ''
+  }),
+  methods: {
+
+    onSubmit(event) {
+      this.$emit("submit", event, this.text);
+      this.text = '';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-box {
+  width: 100%;
+  display: flex;
+}
+
+input {
+  width: min(100%, 20rem);
+  flex-grow: 1;
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+</style>

src/components/message/Message.vue

@@ -0,0 +1,49 @@
+
+<template>
+    <h1>Chat</h1>
+
+    <div
+      :class='["message", { dark }]'>
+
+    <h5>{{ user }}</h5>
+    {{ text }}
+  </div>
+
+  <ChatBox
+        class='chat-box'
+        @submit='onSubmit'
+    />
+</template>
+
+
+<script>
+import ChatBox from "./ChatBox.vue";
+
+export default {
+    name: "Message",
+    props: [
+        "text",
+        "user",
+        "dark" // fond de la box
+    ],
+    components: { ChatBox }
+}
+
+</script>
+
+
+<style scoped>
+.message {
+  background: #e7e7e7;
+  border-radius: 10px;
+  padding: 1rem;
+  width: fit-content;
+}
+.message.dark {
+  background: #e9eaf6;
+}
+
+h5 {
+  margin: 0 0 .5rem 0;
+}
+</style>

src/components/message/NavMessage.vue

@@ -5,7 +5,7 @@
             <span class="onglet">👤 Contact</span>
         </summary>
         <ul>
-            <li><router-link to="/contact">📝 Profil</router-link></li>
+            <li><router-link to="/profil">📝 Profil</router-link></li>
             <li><router-link to="">🗒️ Liste des contacts</router-link></li>
         </ul>
     </details>

src/nervtn-routes.js

@@ -5,9 +5,9 @@ import * as VueRouter from 'vue-router';
 
 const Apps = () => import('./components/NervTNApps.vue');
 const Dashboard = () => import('./components/Dashboard.vue');
-const Chat = () => import('./components/message/Chat.vue');
+const Chat = () => import('./components/message/Message.vue');
 const Correspondance = () => import('./components/message/Correspondance.vue');
-const Contact = () =>import('./components/contact/Contact.vue');
+const Profil = () =>import('./components/contact/Profil.vue');
 
 
 const routes = [
@@ -52,10 +52,10 @@ const routes = [
         }
     },
     {
-        path: '/contact',
+        path: '/profil',
-        name: "Contact",
+        name: "Profil",
         components: {
-            default: Contact,
+            default: Profil,
             //Links: {},
             //Sidebar: {},
             //ActionBar: {}