From a5d5526ce0b792ead849c185ee149c842dafd133 Mon Sep 17 00:00:00 2001
From: Pauline MAROT <pauline.marot2@outlook.fr>
Date: Tue, 28 Dec 2021 15:55:42 +0100
Subject: [PATCH] Mise en place du menu Message/Profile et traduction

---
 src/NervTN.vue                        |  32 ++---
 src/components/contact/Profil.vue     | 187 -------------------------
 src/components/contact/Profile.vue    | 188 ++++++++++++++++++++++++++
 src/components/contact/locale/en.json |  26 ++++
 src/components/contact/locale/fr.json |  27 ++++
 src/components/message/ChatBox.vue    |  14 +-
 src/components/message/NavMessage.vue |  43 ++++++
 src/components/message/locale/en.json |  17 +++
 src/components/message/locale/fr.json |  18 +++
 src/locale/en.json                    |  11 +-
 src/locale/fr.json                    |  12 +-
 src/nervtn-routes.js                  |   2 +-
 12 files changed, 344 insertions(+), 233 deletions(-)
 delete mode 100644 src/components/contact/Profil.vue
 create mode 100644 src/components/contact/Profile.vue
 create mode 100644 src/components/message/NavMessage.vue

diff --git a/src/NervTN.vue b/src/NervTN.vue
index 81729a6..3591f26 100644
--- a/src/NervTN.vue
+++ b/src/NervTN.vue
@@ -1,10 +1,17 @@
 <script setup>
 import ReloadPWA from './components/ReloadPWA.vue';
+import NavMessage from './components/message/NavMessage.vue';
 import {useI18n} from 'vue-i18n';
 
 const {t} = useI18n({useScope: 'local'});
 </script>
 
+<script>
+export default{
+    components: {NavMessage}
+}
+</script>
+
 <template>
     <div id="appflex">
         <div id="page">
@@ -18,31 +25,12 @@ const {t} = useI18n({useScope: 'local'});
         </div>
         <div id="sidebar" class="sidebar">
             <router-view name="Sidebar"></router-view>
-        
             <div id="menu">
-                <details>
-        <summary>
-            <span>👤 {{ t('menu.contact') }}</span>
-        </summary>
-        <ul>
-            <li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
-            <li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
-        </ul>
-    </details>
-
-    <details>
-        <summary>
-            <span>💬 ✉️ {{ t('menu.messages') }}</span>
-        </summary>
-        <ul>
-            <li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
-            <li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
-            <li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
-        </ul>  
-    </details> 
+                <NavMessage/>
+                <router-view name="navMessage"></router-view>
             </div> 
         </div>
-    </div>
+        </div>
     <header class="navbar">
         <router-link :to="{name: 'Apps'}" class="home-link">
             <img id="main-logo" alt="" src="./assets/logo.svg"/>
diff --git a/src/components/contact/Profil.vue b/src/components/contact/Profil.vue
deleted file mode 100644
index 64dced2..0000000
--- a/src/components/contact/Profil.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script setup>
-import {useI18n} from 'vue-i18n';
-const {t} = useI18n({useScope: 'local'});
-</script>
-
-<template>
-<form id="profil" method="POST" v-on:submit="checkForm">
-
-    <div title="👤 Profil">
-		<h1>👤 Profil</h1>
-      	<div>
-			<label for="avatar">Avatar</label>
-			<input type="file" />
-		</div>
-		
-		<div>
-			<label for="nickname">Pseudonyme :</label>
-			<input type="text" v-model="home">
-		</div>
-
-		<div>
-			<label for="emailHome">Email Personnelle :</label>
-			<input type="email" v-model="home" placeholder="john.Doe@email.com" required>
-		</div>
-    </div>
-
-	<br>
-
-    <div title="📇 Informations personnelles">
-		<h1>📇 Informations personnelles</h1>
-      	<div>
-			<label for="name">Nom complet :</label>
-			<input type="text" v-model="home" pattern="{a-zA-Z}{4,25}" placeholder="John Doe" required>
-		</div>
-
-		<div>
-			<label for="bday"> Date de naissance :</label>
-			<input type="date" v-model="home">
-		</div>
-		
-        <div>
-			<label for="nbrHome">Numéro de téléphone :</label>
-			<input type="tel" v-model="home" placeholder="+32(0)15738490" >
-		</div>
-
-		<div class="Home">
-			<h3>Adresse Personnelle</h3>
-				<ul>
-					<li><label for="street">Rue :</label></li>
-					<input type="text" v-model="home">
-					
-					<li><label for="locality">Ville :</label></li>
-					<input type="text" v-model="home">
-					
-					<li><label for="pcode">Code Postal :</label></li>
-					<input type="text" v-model="home">
-					
-					<li><label for="ctry">Pays :</label></li>
-					<input type="text" v-model="home">
-				</ul>	
-		</div>
-    </div>
-
-	<br>
-
-    <div title="💼 Emploi">
-		<h1>💼 Emploi</h1>
-      <div>
-			<label for="orgname">Entreprise :</label>
-			<input type="text" v-model="work">
-		</div>
-		<div>
-			<label for="title">Poste :</label>
-			<input type="text" v-model="work">
-		</div>
-        <div>
-			<label for="role">Rôle :</label>
-			<input type="text" v-model="work">
-		</div>
-		<div>
-			<label for="emailWork">Email Professionnel :</label>
-			<input type="email" v-model="work">
-		</div>
-        <div>
-			<label for="nbrWork">Numéro de téléphone :</label>
-			<input type="tel" v-model="work">
-		</div>
-
-        <div class="Work">
-			<h3>Adresse Proffessionelle</h3>
-				<ul>
-					<li><label for="street">Rue :</label></li>
-					<input type="text" v-model="work">
-					
-					<li><label for="locality">Ville :</label></li>
-					<input type="text" v-model="work">
-					
-					<li><label for="pcode">Code Postal :</label></li>
-					<input type="text" v-model="work">
-					
-					<li><label for="ctry">Pays :</label></li>
-					<input type="text" v-model="work">
-				</ul>
-		</div>
-				
-		 <button type="submit" value="Submit">Enregistrer</button>
-    </div>
-
-	<br>
-
-	 <div title="✍🏼 À propos / Commentaires">
-		 <h1>✍🏼 À propos / Commentaires</h1>
-		 <div>
-			<label for="comments"></label>
-			<textarea v-model="home"></textarea>
-		</div>
-		  <button @click="persist">Enregistrer</button>
-    </div>
-
-</form>
-
-    </template>
-
-    <script>
-	/*const profil = new Vue ({	// vue n'est pas définie
-  		el: '#profil',
-  		data: {
-    	home: null,
-		work: null
-    
-  		},
-  		methods:{
-    		checkForm: function (e) {
-      		if (this.home && this.work) {
-        	return true;
-      	}
-      	e.preventDefault();
-    	}
-  		}
-		}); */
-
-
-		/*export default {  //home n'est pas déclarer
-            name: 'profil',
-			setup() {
-            home = "",
-            work = ""
-			},
-			mounted() {
-			if (localStorage.home) {
-			this.home = localStorage.home;
-				}
-			if (localStorage.work) {
-			this.work = localStorage.work;
-				}	
-			},
-			 methods: {
-				persist() {
-				localStorage.home = this.home;
-				localStorage.work = this.work;
-				console.log('ok');
-					}
-				}
-			}; */
-	
-    </script>
-
-	<style scoped>
-		label{
-			padding: 5px;
-		}
-		input{
-			padding: 5px;
-		}
-		li {
-			list-style-type: none;
-		}
-		textarea {
-			padding: 20px;
-		}
-		button{
-			margin-top: 20px;
-		}
-	</style>
-
-<i18n lang="json" locale="en" src="./locale/en.json"/>
-<i18n lang="json" locale="fr" src="./locale/fr.json"/>
\ No newline at end of file
diff --git a/src/components/contact/Profile.vue b/src/components/contact/Profile.vue
new file mode 100644
index 0000000..a0d61ca
--- /dev/null
+++ b/src/components/contact/Profile.vue
@@ -0,0 +1,188 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
+<template>
+<form id="profil" method="POST" v-on:submit="checkForm">
+
+    <div title="👤">
+		<h1>👤 {{ t ('pwa.profile') }}</h1>
+      	<div>
+			<label for="avatar">{{ t ('pwa.avatar') }}</label>
+			<input type="file" id="avatar" />
+		</div>
+		
+		<div>
+			<label for="nickname">{{ t ('pwa.nickname') }}:</label>
+			<input type="text" id="nickname" v-model="home">
+		</div>
+
+		<div>
+			<label for="emailHome">{{ t ('pwa.emailHome') }}:</label>
+			<input type="email" id="emailHome" v-model="home" placeholder="john.Doe@email.com" required>
+		</div>
+    </div>
+
+	<br>
+
+    <div title="📇">
+		<h1>📇 {{ t ('pwa.personalInfo') }}</h1>
+      	<div>
+			<label for="name">{{ t ('pwa.name') }}:</label>
+			<input type="text" id="name" v-model="home" pattern="{a-zA-Z}{4,25}" placeholder="John Doe" required>
+		</div>
+
+		<div>
+			<label for="bday">{{ t ('pwa.bday') }}:</label>
+			<input type="date" id="bday" v-model="home">
+		</div>
+		
+        <div>
+			<label for="nbrHome">{{ t ('pwa.nbrHome') }}:</label>
+			<input type="tel" id="nbrHome" v-model="home" placeholder="+32(0)15738490" >
+		</div>
+
+		<div class="Home">
+			<h3>{{ t ('pwa.home') }}</h3>
+				<ul>
+					<li><label for="street">{{ t ('pwa.street') }}:</label></li>
+					<input type="text" id="street"	v-model="home">
+					
+					<li><label for="locality">{{ t ('pwa.locality') }}:</label></li>
+					<input type="text" id="locality" v-model="home">
+					
+					<li><label for="pcode">{{ t ('pwa.pcode') }}:</label></li>
+					<input type="text" id="pcode" v-model="home">
+					
+					<li><label for="ctry">{{ t ('pwa.ctry') }}:</label></li>
+					<input type="text" id="ctry" v-model="home">
+				</ul>	
+		</div>
+    </div>
+
+	<br>
+
+    <div title="💼">
+		<h1>💼 {{ t ('pwa.job') }}</h1>
+      <div>
+			<label for="orgname">{{ t ('pwa.orgname') }}:</label>
+			<input type="text" id="orgname" v-model="work">
+		</div>
+		<div>
+			<label for="title">{{ t ('pwa.title') }}:</label>
+			<input type="text" id="title" v-model="work">
+		</div>
+        <div>
+			<label for="role">{{ t ('pwa.role') }}:</label>
+			<input type="text" id="role" v-model="work">
+		</div>
+		<div>
+			<label for="emailWork">{{ t ('pwa.emailWork') }}:</label>
+			<input type="email" id="emailWork" v-model="work">
+		</div>
+        <div>
+			<label for="nbrWork">{{ t ('pwa.nbrWork') }}:</label>
+			<input type="tel" id="nbrWork" v-model="work">
+		</div>
+
+        <div class="Work">
+			<h3>{{ t ('pwa.work') }}</h3>
+				<ul>
+					<li><label for="street">{{ t ('pwa.street') }}:</label></li>
+					<input type="text" id="street" v-model="work">
+					
+					<li><label for="locality">{{ t ('pwa.locality') }}:</label></li>
+					<input type="text" id="locality" v-model="work">
+					
+					<li><label for="pcode">{{ t ('pwa.pcode') }}:</label></li>
+					<input type="text" id="pcode" v-model="work">
+					
+					<li><label for="ctry">{{ t ('pwa.ctry') }}:</label></li>
+					<input type="text" id="ctry" v-model="work">
+				</ul>
+		</div>
+				
+		 <button type="submit" value="Submit">{{ t ('pwa.save') }}</button>
+    </div>
+
+	<br>
+
+	 <div title="✍🏼">
+		 <h1>✍🏼 {{ t ('pwa.comments') }}</h1>
+		 <div>
+			<label for="comments"></label>
+			<textarea id="comments" v-model="home"></textarea>
+		</div>
+		  <button @click="persist">{{ t ('pwa.save') }}</button>
+    </div>
+
+</form>
+
+    </template>
+
+    <script>
+	/*const profil = new Vue ({	// vue n'est pas définie
+  		el: '#profil',
+  		data: {
+    	home: null,
+		work: null
+    
+  		},
+  		methods:{
+    		checkForm: function (e) {
+      		if (this.home && this.work) {
+        	return true;
+      	}
+      	e.preventDefault();
+    	}
+  		}
+		}); */
+
+
+		/*export default {  //home n'est pas déclarer
+            name: 'profil',
+			setup() {
+            home = "",
+            work = ""
+			},
+			mounted() {
+			if (localStorage.home) {
+			this.home = localStorage.home;
+				}
+			if (localStorage.work) {
+			this.work = localStorage.work;
+				}	
+			},
+			 methods: {
+				persist() {
+				localStorage.home = this.home;
+				localStorage.work = this.work;
+				console.log('ok');
+					}
+				}
+			}; */
+	
+    </script>
+
+	<style scoped>
+		label{
+			padding: 5px;
+		}
+		input{
+			padding: 5px;
+		}
+		li {
+			list-style-type: none;
+		}
+		textarea {
+			padding: 20px;
+		}
+		button{
+			margin-top: 20px;
+		}
+	</style>
+
+<i18n lang="json" locale="en" src="./locale/en.json"/>
+<i18n lang="json" locale="fr" src="./locale/fr.json"/>
\ No newline at end of file
diff --git a/src/components/contact/locale/en.json b/src/components/contact/locale/en.json
index e69de29..6f3daf0 100644
--- a/src/components/contact/locale/en.json
+++ b/src/components/contact/locale/en.json
@@ -0,0 +1,26 @@
+{
+    "pwa": {
+        "profile": "Profile",
+        "avatar": "Avatar",
+        "nickname": "Nickname",
+        "emailHome": "Personal Email",
+        "personalInfo": "Personal information",
+        "name": "Full name",
+        "bday": "Date of birth", 
+        "nbrHome": "Phone number",
+        "home": "Personal Address",
+        "street": "Street",
+        "locality": "City",
+        "pcode": "Postal Code",
+        "ctry": "Country",
+        "job": "Job",
+        "orgname": "Company",
+        "title": "Position",
+        "role": "Role",
+        "emailWork": "Professional Email",
+        "nbrWork": "Phone number",
+        "work": "Professional address ",
+        "save": "Save",
+        "comments": "About / Comments"
+    }
+}
\ No newline at end of file
diff --git a/src/components/contact/locale/fr.json b/src/components/contact/locale/fr.json
index e69de29..4345cd5 100644
--- a/src/components/contact/locale/fr.json
+++ b/src/components/contact/locale/fr.json
@@ -0,0 +1,27 @@
+{
+    "pwa": {
+        
+        "profile": "Profil",
+        "avatar": "Avatar",
+        "nickname": "Pseudonyme",
+        "emailHome": "Email Personnelle",
+        "personalInfo": "Informations Personnelles",
+        "name": "Nom complet",
+        "bday": "Date de naissance", 
+        "nbrHome" : "Numéro de téléphone",
+        "home": "Adresse Personnelle",
+        "street": "Rue",
+        "locality": "Ville",
+        "pcode": "Code Postal",
+        "ctry": "Pays",
+        "job": "Emploi",
+        "orgname": "Entreprise",
+        "title": "Poste",
+        "role": "Rôle",
+        "emailWork": "Email Professionnel",
+        "nbrWork": "Numéro de téléphone",
+        "work": "Adresse Proffessionelle",
+        "save": "Enregistrer",
+        "comments": "À propos / Commentaires"
+    }
+}
\ No newline at end of file
diff --git a/src/components/message/ChatBox.vue b/src/components/message/ChatBox.vue
index e18a2e6..d07bb95 100644
--- a/src/components/message/ChatBox.vue
+++ b/src/components/message/ChatBox.vue
@@ -1,11 +1,16 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
 <template>
   <form class='chat-box' v-on:submit='onSubmit($event)'>
     <input
         v-model='text'
-        placeholder='Écrire un message'
         type='text'
     />
-    <button :disabled='text === ""'>Envoyer</button>
+    <button :disabled='text === ""'>{{ t('pwa.send') }}</button>
   </form>
 </template>
 
@@ -41,4 +46,7 @@ input {
 button:disabled {
   opacity: 0.5;
 }
-</style>
\ No newline at end of file
+</style>
+
+<i18n lang="json" locale="en" src="./locale/en.json"/>
+<i18n lang="json" locale="fr" src="./locale/fr.json"/>
\ No newline at end of file
diff --git a/src/components/message/NavMessage.vue b/src/components/message/NavMessage.vue
new file mode 100644
index 0000000..2e60df1
--- /dev/null
+++ b/src/components/message/NavMessage.vue
@@ -0,0 +1,43 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
+<template>
+          
+    <details>
+        <summary>
+            <span>👤 {{ t('menu.contact') }}</span>
+        </summary>
+        <ul>
+            <li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
+            <li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
+        </ul>
+    </details>
+
+    <details>
+        <summary>
+            <span>💬 ✉️ {{ t('menu.messages') }}</span>
+        </summary>
+        <ul>
+            <li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
+            <li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
+            <li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
+        </ul>  
+    </details> 
+           
+</template>
+
+<style scoped>
+    li {
+        list-style-type: none;
+    }
+    details {
+        padding-bottom: 5px;
+    }
+</style>
+
+
+<i18n lang="json" locale="en" src="./locale/en.json"/>
+<i18n lang="json" locale="fr" src="./locale/fr.json"/>
\ No newline at end of file
diff --git a/src/components/message/locale/en.json b/src/components/message/locale/en.json
index e69de29..c9c2882 100644
--- a/src/components/message/locale/en.json
+++ b/src/components/message/locale/en.json
@@ -0,0 +1,17 @@
+{
+    "menu": {
+        "contact": "Contact",
+        "profile": "Profil",
+        "contacts list": "contacts list",
+        "messages": "Messages",
+        "correspondence": "Correspondence",
+        "chat": "Chat",
+        "video conferencing": "Video conferencing"
+    },
+
+    "pwa": {
+        "send": "Send"
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/components/message/locale/fr.json b/src/components/message/locale/fr.json
index e69de29..8357ee6 100644
--- a/src/components/message/locale/fr.json
+++ b/src/components/message/locale/fr.json
@@ -0,0 +1,18 @@
+{
+    "menu": {
+        "contact": "Contact",
+        "profile ": "Profil",
+        "contacts list": "Liste des contacts",
+        "messages": "Messages",
+        "correspondence": "Correspondence",
+        "chat": "Chat",
+        "video conferencing": "Visioconférence"
+    },
+
+    "pwa": {
+        "send": "Envoyer"
+       
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/locale/en.json b/src/locale/en.json
index e9d34f2..cc0a849 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -20,15 +20,6 @@
         "new_content": "New version available!",
         "later": "See later",
         "reload": "Reload app"
-    },
-
-    "menu": {
-        "contact": "Contact",
-        "profile": "Profil",
-        "contacts list": "contacts list",
-        "messages": "Messages",
-        "correspondence": "Correspondence",
-        "chat": "Chat",
-        "video conferencing": "Video conferencing"
     }
+
 }
diff --git a/src/locale/fr.json b/src/locale/fr.json
index 4cfa5a5..e59ecb4 100644
--- a/src/locale/fr.json
+++ b/src/locale/fr.json
@@ -20,15 +20,7 @@
         "new_content": "Nouvelle version disponible !",
         "later": "Plus tard",
         "reload": "Recharger"
-    },
-
-    "menu": {
-        "contact": "Contact",
-        "profile ": "Profil",
-        "contacts list": "Liste des contacts",
-        "messages": "Messages",
-        "correspondence": "Correspondence",
-        "chat": "Chat",
-        "video conferencing": "Visioconférence"
     }
+
+   
 }
diff --git a/src/nervtn-routes.js b/src/nervtn-routes.js
index c212ea0..c8d25a4 100644
--- a/src/nervtn-routes.js
+++ b/src/nervtn-routes.js
@@ -7,7 +7,7 @@ const Apps = () => import('./components/NervTNApps.vue');
 const Dashboard = () => import('./components/Dashboard.vue');
 const Chat = () => import('./components/message/Message.vue');
 const Correspondance = () => import('./components/message/Correspondance.vue');
-const Profil = () =>import('./components/contact/Profil.vue');
+const Profil = () =>import('./components/contact/Profile.vue');
 
 
 const routes = [