1
0
forked from PGL/Clyde
Clyde/frontend/src/Apps/Inscription/AboutUnregister.vue

85 lines
1.9 KiB
Vue

<script setup>
import {
editUnregReq,
getUnregisterbyId
} from "@/rest/requests.js";
import i18n from "@/i18n.js";
import {ref} from "vue";
const props = defineProps(["reqId"])
const req = ref(await getUnregisterbyId(props.reqId))
async function uploadandrefreshUnregRequest(state){
await editUnregReq(req.value.id, state)
req.value.state = state
}
</script>
<template>
<div class="body">
<div class="container">
<div class="globalInfos">
<div class="infosContainer">
<div>
{{ i18n("firstname/name") }} : {{req.firstName}} {{req.lastName}}
</div>
<div>
{{ i18n("login.guest.email") }}: {{req.email}}
</div>
<div>
{{ i18n("regNo") }} : {{req.regNo}}
</div>
<div>
{{ i18n("reason") }}
<input type="text" v-model="req.reason" readonly/>
</div>
<div>
<button v-if="req.state === 'Pending'" @click="req.state='Accepted';uploadandrefreshUnregRequest('Accepted')">{{i18n("request.accept")}}</button>
<button v-if="req.state === 'Pending'" @click="req.state='Refused';uploadandrefreshUnregRequest('Refused')" style="margin-left: 2%;">{{i18n("request.refuse")}}</button>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.container{
min-width:675px;
display:grid;
grid-template-columns:10vw 50vw;
grid-template-rows:200px auto;
column-gap:2.7%;
row-gap:45px;
grid-template-areas:
"profilPic globalInfos"
"minfos minfos";
}
.globalInfos {
grid-area:globalInfos;
align-self :center;
}
.body {
min-width:960px;
width:100%;
display:flex;
align-items:center;
justify-content:center;
margin-top:7%;
}
.infosContainer {
min-width:350px;
padding-bottom:50px;
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
}
</style>