From 6bf076b382d2e5cd1139a2650d35eec9f9a80aa9 Mon Sep 17 00:00:00 2001
From: Pauline MAROT <pauline.marot2@outlook.fr>
Date: Wed, 15 Dec 2021 16:46:42 +0100
Subject: [PATCH] templateChat

---
 .../contact/{Contact.vue => Profil.vue}       | 18 +++----
 src/components/message/Chat.vue               | 11 -----
 src/components/message/ChatBox.vue            | 44 +++++++++++++++++
 src/components/message/Message.vue            | 49 +++++++++++++++++++
 src/components/message/NavMessage.vue         |  2 +-
 src/nervtn-routes.js                          | 10 ++--
 6 files changed, 106 insertions(+), 28 deletions(-)
 rename src/components/contact/{Contact.vue => Profil.vue} (94%)
 delete mode 100644 src/components/message/Chat.vue
 create mode 100644 src/components/message/ChatBox.vue
 create mode 100644 src/components/message/Message.vue

diff --git a/src/components/contact/Contact.vue b/src/components/contact/Profil.vue
similarity index 94%
rename from src/components/contact/Contact.vue
rename to src/components/contact/Profil.vue
index eed16e1..e1d6d08 100644
--- a/src/components/contact/Contact.vue
+++ b/src/components/contact/Profil.vue
@@ -1,10 +1,10 @@
 
 <template>
 
-<div class="vCard">
+<div class="personalInformation">
  <vue-tabs>
-    <v-tab title="👤 Contact">
-		<h1>👤 Contact</h1>
+    <v-tab title="👤 Profil">
+		<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>
 					
@@ -126,8 +126,8 @@
     </template>
 
     <script>
-	/*	export default {
-            name: 'vCard',
+		/*export default {
+            name: 'personalInformation',
 			setup() {
             home = "",
             work = ""
@@ -148,11 +148,7 @@
 					}
 				}
 			};
-			
-		new Vue({
-  			el:"#vCard",
-		})	
-			*/
+	*/
     </script>
 
 	<style scoped>
diff --git a/src/components/message/Chat.vue b/src/components/message/Chat.vue
deleted file mode 100644
index 2228bfb..0000000
--- a/src/components/message/Chat.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-<template>
-    <h1>Chat</h1>
-
-</template>
-
-
-<script>
-
-
-</script>
diff --git a/src/components/message/ChatBox.vue b/src/components/message/ChatBox.vue
new file mode 100644
index 0000000..e334f7e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
new file mode 100644
index 0000000..d58270b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/message/NavMessage.vue b/src/components/message/NavMessage.vue
index c343c2f..6f42e2b 100644
--- a/src/components/message/NavMessage.vue
+++ b/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>
diff --git a/src/nervtn-routes.js b/src/nervtn-routes.js
index 2ee1a78..c212ea0 100644
--- a/src/nervtn-routes.js
+++ b/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',
-        name: "Contact",
+        path: '/profil',
+        name: "Profil",
         components: {
-            default: Contact,
+            default: Profil,
             //Links: {},
             //Sidebar: {},
             //ActionBar: {}