Ajoute le détail des étudiants (big update)

frontend/src/Apps/StudentsList.vue

@@ -1,19 +1,29 @@
 <script setup>
   import i18n from "@/i18n.js"
-  import { reactive  } from 'vue'
+  import {provide, reactive, ref} from 'vue'
   import { getStudents } from '../rest/Users.js'
-
+  import AboutStudent from "@/Apps/AboutStudent.vue";
   const users = await getStudents();
-</script> 
+
+  let targetRegNo = "";
+  let list = ref(true);
+</script>
+
 <template>
-  <div v-for="item in users">
+  <div v-if="list === false">
+    <AboutStudent :target=targetRegNo />
+    <button style="background-color:rgb(105,05,105);" @click="list = true;">Back</button>
+  </div>
+  <div v-for="item in users" v-if="list === true">
     <div class="bodu">
       <div class="container">
         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div>
         <div class="option"><a>{{item.role}}</a></div>
         <div class="surname"><a>{{item.lastName}}</a></div>
         <div class="firstname"><a>{{item.firstName}}</a></div>
-        <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}}   </button></div>
+        <div class="infos">
+          <button style="background-color:rgb(105,05,105);" @click="list = false; targetRegNo = item.regNo;">{{i18n("request.moreInfos")}} </button>
+        </div>
     </div>
     </div>
   </div>
@@ -29,7 +39,6 @@
     grid-template-areas:
     "status option surname firstname infos"; 
     column-gap:10px;
-    
   }
   
   .infos {