Modification d'interface du projet

bethuel2805 · Nov 7, 2023 · f3bd0f5 · f3bd0f5
1 parent fea2fe1
commit f3bd0f5
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 27 deletions.
diff --git a/src/components/CardCourrier.vue b/src/components/CardCourrier.vue
@@ -1,10 +1,8 @@
 <template>
     <div class="bg-white p-2 rounded-md shadow-2xl my-3">
-                    <h1 class="text-xl font-bold text-slate-700">Note de service Pointe-Noire : Objet</h1>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nisi, rem reprehenderit itaque 
-                        temporibus fuga ad accusamus distinctio corporis, iste non dolorem consectetur 
-                        sapiente sunt, exercitationem voluptatibus tenetur natus ut?
-                    </p>
+                    <h1 class="text-xl font-bold text-slate-700">Note de service Pointe-Noire</h1>
+                    <p>Numéro Courrier : 14toto12momo2023</p>
+                    <p>Date de reception : 31/2/2058</p>
         <button class="bg-sky-700 text-white my-2 py-1 px-3 rounded-lg hover:bg-sky-600">Explorer</button>
     </div>
 </template>
diff --git a/src/main.js b/src/main.js
@@ -2,22 +2,10 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import "./css/style.css"
 
-import {createRouter, createWebHistory } from 'vue-router'
-
-import Login from "./views/LoginPage.vue"
-import Dashboard from "./views/Dashboard.vue"
-
-const routes = [
-    {name:"Login", path:"/", component: Login},
-    {name:"Dashboard", path:"/dashboard", component: Dashboard},
-]
-
-const router = createRouter({
-    routes,
-    history: createWebHistory()
-})
+import router from './routers/route'
 
 const app = createApp(App)
 
 app.use(router)
+
 app.mount('#app')
diff --git a/src/routers/route.js b/src/routers/route.js
@@ -0,0 +1,25 @@
+import {createRouter, createWebHistory} from 'vue-router'
+
+import Dashboard from '../views/Dashboard.vue'
+import LoginPage from '../views/LoginPage.vue'
+import ReceiveCourrier from '../views/subpages/ReceiveCourrier.vue'
+import SenderCourrier from '../views/subpages/SenderCourrier.vue'
+import ArchiveCourrier from '../views/subpages/ArchiveCourrier.vue'
+
+
+const routes = [
+    {name:"Login", path:"/", component: LoginPage},
+
+    {name:"Dashboard", path:"/dashboard", component: Dashboard, children: [
+        {name:"Receiver", path:"/dashboard/receive_courrier", component: ReceiveCourrier},
+        {name:"Sender", path:"/dashboard/sender_courrier", component: SenderCourrier},
+        {name:"Archiver", path:"/dashboard/archive_courrier", component: ArchiveCourrier},
+    ]},
+]
+
+const router = createRouter({
+    routes,
+    history: createWebHistory()
+})
+
+export default router
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -18,28 +18,45 @@
                  <div class="flex justify-between flex-col h-full">
                     <div class="flex flex-col justify-start space-y-10 pt-10 px-5">
                     <button class="bg-sky-700 py-2 rounded-md px-2 text-lg text-white shadow-2xl hover:bg-sky-600">
-                        <span>
+                        <router-link to="/dashboard/receive_courrier" active-class="text-slate-900">
+                            <span>
                             <ion-icon name="albums-outline"></ion-icon>
                         </span>
                         Enregistrer Arrivé Courrier
+                        </router-link>
                     </button>
+
                     <button class="bg-sky-700 py-2 rounded-md px-2 text-lg text-white shadow-2xl hover:bg-sky-600">
-                        <span>
+                        <router-link to="/dashboard/sender_courrier" active-class="text-slate-900">
+                            <span>
                             <ion-icon name="send-outline"></ion-icon>
                         </span>
                         Enregistrer Départ Courrier
+                        </router-link>
                     </button>
                     <button class="bg-sky-700 py-2 rounded-md px-2 text-lg text-white shadow-2xl hover:bg-sky-600">
-                        <span>
+                        <router-link to="/dashboard/archive_courrier" active-class="text-slate-900">
+                            <span>
                             <ion-icon name="archive-outline"></ion-icon>
                         </span>
                         Enregistrer Archivage Courrier
+                        </router-link>
                     </button>
 
                  </div>
-                    <div class="bg-red-100 font-bold text-center py-3">
+                    <div>
+                        <div class="bg-white p-3 my-3 mx-2 rounded-xl shadow-2sl flex">
+                            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="person_img" class="h-12 rounded-full mr-4">
+                            <div>
+                                <h1 class="font-bold text-lg text-slate-800">Mme Avocadrolinalisation</h1>
+                                <p class="text-slate-800">Secrétaire Principale</p>
+                            </div>
+
+                        </div>
+                        <div class="bg-red-100 font-bold text-center py-3">
                         Created by : Altaïr VBA
                     </div>
+                    </div>
                  </div>
                </div>
             </div>
@@ -49,15 +66,25 @@
             <div class="basis-9/12 bg-gray-300 h-full w-full flex flex-col">
 
                <div class="h-[80px] w-full bg-white shadow-md">
-                <div class="flex items-center h-full">
+                <div class="flex items-center h-full justify-evenly w-full">
                     <input 
-                    class="w-[75%] mx-auto py-3 rounded-2xl px-3 border-4"
+                    class="w-[75%] py-3 rounded-2xl px-3 border-4"
                     type="search" name="search" id="search" placeholder="Recherchez ici par le numéro du courrier">
+                    <div>
+                        <button class="bg-green-600 text-white px-2 py-3 rounded-xl hover:opacity-[0.6]">Enregistrement ici</button>
+                    </div>
                 </div>
                </div>
-
                <div class="h-[calc(100vh-80px)] w-full flex">
+                <router-view>
+
+                </router-view>
+               </div>
+               <!--<div class="h-[calc(100vh-80px)] w-full flex">
                 <div class="basis-2/4 overflow-auto p-2 w-full">
+                <router-view>
+                    
+                </router-view>
                 <div class="flex justify-between">
                     <span class="text-xl text-slate-800">Inserer un courrier arrivé</span>
                     <button class="bg-sky-700 py-2 px-3 rounded-md text-white">Insertion</button>
@@ -66,10 +93,11 @@
                     <CardCourrier/>
                 </div>
                </div>
+
                <div class="basis-2/4 overflow-auto p-2 bg-white m-2 rounded-md shadow-2xl">
                <DetailCourrier/>
                </div>
-               </div>
+               </div>-->
             </div>
             <!-- fin div pour la main content -->
         </div>

diff --git a/src/views/subpages/ArchiveCourrier.vue b/src/views/subpages/ArchiveCourrier.vue
@@ -0,0 +1,21 @@
+<script setup>
+import CardCourrier from "../../components/CardCourrier.vue";
+import DetailCourrier from "../../components/DetailCourrier.vue";
+</script>
+
+<template>
+    <div class="h-full w-full flex">
+        <div class="basis-2/4 overflow-auto p-2 w-full">
+            <div class="flex justify-center">
+                    <span class="text-2xl font-medium text-slate-800">Archive Courrier</span>
+            </div>
+                <div v-for="i in 2" :key="i">
+                    <CardCourrier/>
+                </div>
+               </div>
+
+               <div class="basis-2/4 overflow-auto p-2 bg-white m-2 rounded-md shadow-2xl">
+               <DetailCourrier/>
+        </div>
+    </div>
+</template>
diff --git a/src/views/subpages/ReceiveCourrier.vue b/src/views/subpages/ReceiveCourrier.vue
@@ -0,0 +1,21 @@
+<script setup>
+import CardCourrier from "../../components/CardCourrier.vue";
+import DetailCourrier from "../../components/DetailCourrier.vue";
+</script>
+
+<template>
+    <div class="h-full w-full flex">
+        <div class="basis-2/4 overflow-auto p-2 w-full">
+                <div class="flex justify-center">
+                    <span class="text-2xl font-medium text-slate-800">Arrivé Courrier</span>
+                </div>
+                <div v-for="i in 4" :key="i">
+                    <CardCourrier/>
+                </div>
+               </div>
+
+               <div class="basis-2/4 overflow-auto p-2 bg-white m-2 rounded-md shadow-2xl">
+               <DetailCourrier/>
+        </div>
+    </div>
+</template>
diff --git a/src/views/subpages/SenderCourrier.vue b/src/views/subpages/SenderCourrier.vue
@@ -0,0 +1,21 @@
+<script setup>
+import CardCourrier from "../../components/CardCourrier.vue";
+import DetailCourrier from "../../components/DetailCourrier.vue";
+</script>
+
+<template>
+    <div class="h-full w-full flex">
+        <div class="basis-2/4 overflow-auto p-2 w-full">
+            <div class="flex justify-center">
+                    <span class="text-2xl font-medium text-slate-800">Départ Courrier</span>
+            </div>
+                <div v-for="i in 3" :key="i">
+                    <CardCourrier/>
+                </div>
+               </div>
+
+               <div class="basis-2/4 overflow-auto p-2 bg-white m-2 rounded-md shadow-2xl">
+               <DetailCourrier/>
+        </div>
+    </div>
+</template>