<script setup> import i18n from "@/i18n.js" import {ref} from 'vue' import {validateRegister, getAllRegisters } from '@/rest/ServiceInscription.js' import AboutRequest from "@/Apps/AboutRequest.vue"; const requests = ref(await getAllRegisters()); let targetId = ""; //0 = liste, 1 = détails, 2 = sure? let windowsState = ref(0); async function upPage(id,review){ await validateRegister(id,review); requests.value = await getAllRegisters(); } </script> <template> <div v-if="windowsState === 1"> <AboutRequest :target="targetId"></AboutRequest> <button style="background-color:rgb(105,05,105);margin-left: 30%" @click="windowsState=0;">Retour</button> </div> <div v-if="windowsState === 0"> <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests"> <div class="bodu"> <div class="container"> <div class="date">{{item.submissionDate.slice(0, 10)}}</div> <div class="state">{{item.state}}</div> <div class="surname">{{item.lastName}}</div> <div class="firstname">{{item.firstName}}</div> <div class="accept" v-if="item.state === 'Pending'"><button @click="windowsState=2;targetId=item.id;" style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div> <div class="refuse" v-if="item.state === 'Pending'"><button @click="upPage(item.id,'Refused')" style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div> <div class="infos"><button style="background-color:rgb(105,05,105);" @click="targetId=item.id;windowsState=1;">{{i18n("request.moreInfos")}}</button></div> </div> </div> </div> </div> <div style='display:flex; justify-content:center; min-width:1140px;margin-top: 10%' v-if="windowsState === 2"> <p>Etes vous sur de vouloir accepter cette demande ?</p> <button style="background-color:rgb(105,05,105);" @click="upPage(targetId,'Accepted');windowsState=0;">Valider</button> <button style="background-color:rgb(105,05,105);" @click="windowsState=0;">Retour</button> </div> </template> <style scoped> .container{ color:white; height:100px; font-size:20px; display:grid; grid-template-columns:15% 15% 10% 14.2% 14.2% 14.2% 14.2%; grid-template-areas: "date state surname firstname accept refuse infos"; column-gap:10px; } .infos { grid-area:infos; align-self:center; } .accept{ grid-area:accept; align-self:center; } .refuse{ grid-area:refuse; align-self:center; } .titles { grid-area:titles; align-self:center; } .date{ grid-area:date; margin-left:40px; align-self:center; } .state{ grid-area:state; margin-left:40px; align-self:center; } .type{ grid-area:type; align-self:center; } .surname{ grid-area:surname; align-self:center; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } .firstname{ grid-area:firstname; align-self:center; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } button{ font-size:15px; height:50px; width:100px; border:none; border-radius:20px; } .bodu { margin-top:2%; width:66%; border:2px solid black; border-radius:9px; background-color:rgb(50,50,50); } </style>