TransfereProjet

kujiu_test

@@ -0,0 +1 @@
+Subproject commit b59e3b608247e8a9cb4f09e81f8a6d878127a241

src/NervTN.vue

@@ -1,5 +1,7 @@
 <script setup>
 import ReloadPWA from './components/ReloadPWA.vue';
+import NavMessage from './components/message/NavMessage.vue';
+import NavContact from './components/contact/NavContact.vue';
 import {useI18n} from 'vue-i18n';
 
 const {t} = useI18n({useScope: 'local'});
@@ -18,6 +20,15 @@ const {t} = useI18n({useScope: 'local'});
         </div>
         <div id="sidebar" class="sidebar">
             <router-view name="Sidebar"></router-view>
+
+            <div id="menu">
+                <NavMessage/>
+                <router-view name="navMessage"></router-view>
+
+                <NavContact/>
+                <router-view name="navContact"></router-view>
+
+            </div>
         </div>
         </div>
     <header class="navbar">
@@ -25,6 +36,29 @@ const {t} = useI18n({useScope: 'local'});
             <img id="main-logo" alt="" src="./assets/logo.svg"/>
             <span id="site-name">{{ t('home.apps') }}</span>
         </router-link>
+<div class="menu">
+    <div class="navMessage">
+      <router-link to="/navMessage">💬 ✉️ {{ t('home.messages') }}</router-link>
+    </div>
+
+    <div class="navContact">
+      <router-link to="/navContact">👤 {{ t('home.contact') }}</router-link>
+    </div>
+
+        <div class="nav-menu">
+            <details>
+                <summary>
+                <span class="connect">👥 {{ t('home.connection') }}</span>
+                </summary>
+                <ul>
+                    <li><router-link to="/">{{ t('home.account') }}</router-link></li>
+                    <li><router-link to="/">{{ t('home.dashboard') }}</router-link></li>
+                    <li><router-link to="/">{{ t('home.disconnect') }}</router-link></li>
+                </ul>
+            </details>
+        </div>
+    </div>
+
         <div class="links">
             <router-view name="Links"></router-view>
             <select v-model="$i18n.locale" @change="$i18n.loadMessages()">
@@ -34,6 +68,7 @@ const {t} = useI18n({useScope: 'local'});
                 <option value="nl">Nederlands</option>
             </select>
         </div>
+
     </header>
     <footer class="footer">
     </footer>

src/assets/css/sidebar.less

@@ -23,6 +23,50 @@
     }
 }
 
+#menu {
+  padding: 10px;
+}
+.menu {
+    display: inline-block;
+    margin-left: auto;
+}
+.navMessage{
+  vertical-align: top;
+  float: left;
+  padding: 10px;
+  max-height: 2em;
+
+}
+
+.navContact{
+  vertical-align: top;
+  float: left;
+  padding: 10px;
+  max-height: 2em;
+}
+
+.nav-menu{
+  vertical-align: top;
+  float: left;
+  padding: 10px;
+  max-height: 2em;
+
+details{
+  padding: 0 .5em;
+  background: #282828;
+  border-radius: .5em;
+  color: #a0bede;
+
+    li {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+      }
+    }
+}
+
+
 .nav-links {
     display: inline-block;
     a, a:visited {

src/components/contact/ContactsList.vue

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

src/components/contact/NavContact.vue

@@ -0,0 +1,29 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
+<template>
+
+
+        <ul>
+            <li><router-link to="/navContact/profile">📝 {{ t('menu.profile') }}</router-link></li>
+            <li><router-link to="/navContact/contactsList">🗒️ {{ t('menu.contacts list') }}</router-link></li>
+        </ul>
+
+
+    </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"/>

src/components/contact/Profile.vue

@@ -0,0 +1,193 @@
+<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 form') }}</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" aria-required="true">
+		</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" aria-required="true">
+		</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" @click="persist">{{ 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 {
+            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');
+					}
+				}
+        computed: {
+          profil() {
+          return this.$contact.getters.getProfil;
+          }
+        }
+			};
+
+    </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"/>

src/components/contact/contact-routes.js

@@ -1,3 +1,18 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
-
+/*Ne fonctionne pas */
+  routes: [
+    { path: '/navContact', component:NavContact ,
+      children: [
+        {
+          path: '/profile',
+          component: Profile
+        },
+        {
+          path: '/contactsList',
+          component: ContactsList
+        }
+      ]
+    }
+  ]
+})

src/components/contact/contact-state.js

@@ -1,3 +1,13 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
 
+import Vuex from 'vuex';
+
+const store = new Vuex.Store({
+    state: {},
+    mutations: {},
+    actions: {},
+    modules: {}
+});
+
+export default store;

src/components/contact/locale/en.json

@@ -0,0 +1,30 @@
+{
+  "menu": {
+      "profile": "Profile",
+      "contacts list": "contacts list",
+    },
+    "pwa": {
+        "profile form": "Profile Form",
+        "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"
+    }
+}

src/components/contact/locale/fr.json

@@ -0,0 +1,30 @@
+{
+  "menu": {
+      "profile ": "Profil",
+      "contacts list": "Liste des contacts",
+    },
+    "pwa": {
+        "profile form": "Formulaire de 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"
+    }
+}

src/components/message/Chat.vue

@@ -0,0 +1,45 @@
+
+<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/ChatBox.vue

@@ -0,0 +1,52 @@
+<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'
+        type='text'
+    />
+    <button :disabled='text === ""'>{{ t('pwa.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>
+
+<i18n lang="json" locale="en" src="./locale/en.json"/>
+<i18n lang="json" locale="fr" src="./locale/fr.json"/>

src/components/message/Correspondance.vue

@@ -0,0 +1,12 @@
+
+<template>
+    <h1>Correspondance</h1>
+
+</template>
+
+
+<script>
+
+
+</script>
+

src/components/message/NavMessage.vue

@@ -0,0 +1,28 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
+<template>
+
+    <ul>
+        <li><router-link to="/navMessage/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
+        <li><router-link to="/navMessage/chat">💬 {{ t('menu.chat') }}</router-link></li>
+        <li><router-link to="/navMessage/videoConferencing">🎥 {{ t('menu.video conferencing') }}</router-link></li>
+    </ul>
+
+</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"/>

src/components/message/locale/en.json

@@ -0,0 +1,12 @@
+{
+    "menu": {
+        "correspondence": "Correspondence",
+        "chat": "Chat",
+        "video conferencing": "Video conferencing"
+    },
+
+    "pwa": {
+        "send": "Send"
+    }
+
+}

src/components/message/locale/fr.json

@@ -0,0 +1,14 @@
+{
+    "menu": {
+        "correspondence": "Correspondence",
+        "chat": "Chat",
+        "video conferencing": "Visioconférence"
+    },
+
+    "pwa": {
+        "send": "Envoyer"
+
+    }
+
+
+}

src/components/message/message-routes.js

@@ -1,3 +1,2 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
-

src/components/message/message-state.js

@@ -1,3 +1,13 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
 
+import Vuex from 'vuex';
+
+const store = new Vuex.Store({
+    state: {},
+    mutations: {},
+    actions: {},
+    modules: {}
+});
+
+export default store;

src/locale/en.json

@@ -9,7 +9,13 @@
         "route_not_found": "Url {route} does not exist."
     },
     "home": {
-        "apps": "Applications"
+        "apps": "Applications",
+        "connection": "Connection",
+        "account":"Account",
+        "dashboard": "Dashboard",
+        "disconnect": "Disconnect",
+        "messages": "Messages",
+        "contact": "Contact"
     },
     "pwa": {
         "ready": "Your applications are ready for offline.",
@@ -17,4 +23,5 @@
         "later": "See later",
         "reload": "Reload app"
     }
+
 }

src/locale/fr.json

@@ -9,7 +9,13 @@
         "route_not_found": "La route {route} n'existe pas."
     },
     "home": {
-        "apps": "Applications"
+        "apps": "Applications",
+        "connection": "Connexion",
+        "account":"Compte",
+        "dashboard": "Tableau de bord",
+        "disconnect": "Déconnexion",
+        "contact": "Contact",
+        "messages": "Messages"
     },
     "pwa": {
         "ready": "Vous êtes prêts pour le mode hors-ligne.",
@@ -17,4 +23,6 @@
         "later": "Plus tard",
         "reload": "Recharger"
     }
+
+
 }

src/nervtn-routes.js

@@ -5,6 +5,13 @@ import * as VueRouter from 'vue-router';
 
 const Apps = () => import('./components/NervTNApps.vue');
 const Dashboard = () => import('./components/Dashboard.vue');
+const NavMessage = () => import('./components/message/NavMessage.vue');
+const Chat = () => import('./components/message/Chat.vue');
+const Correspondance = () => import('./components/message/Correspondance.vue');
+const NavContact = () => import('./components/contact/NavContact.vue');
+const Profile = () => import('./components/contact/Profile.vue');
+const ContactsList = () => import('./components/contact/ContactsList.vue');
+
 
 const routes = [
     {
@@ -27,6 +34,66 @@ const routes = [
             //ActionBar: {}
         }
     },
+    {
+        path: '/navMessage',
+        name: "NavMessage",
+        components: {
+            default: NavMessage,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navMessage/chat',
+        name: "Chat",
+        components: {
+            default: Chat,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navMessage/correspondance',
+        name: "Correspondance",
+        components: {
+            default: Correspondance,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navContact',
+        name: "NavContact",
+        components: {
+            default: NavContact,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navContact/profile',
+        name: "Profile",
+        components: {
+            default: Profile,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navContact/contactsList',
+        name: "ContactsList",
+        components: {
+            default: ContactsList,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
     {
         path: '/:errorPath(.*)*',
         name: "NotFound",