117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<script setup>
|
|
|
|
import i18n from "@/i18n.js";
|
|
import {uploadProfilePicture} from "@/rest/uploads.js";
|
|
import {postUser} from "@/rest/Users.js";
|
|
import {ref} from "vue";
|
|
let toCreate = Object.assign({},{})
|
|
const today = new Date()
|
|
const date = today.getFullYear() +"-" + ("0" + (today.getMonth()+1)).slice(-2) + "-" + ("0" + today.getDate()).slice(-2);
|
|
|
|
|
|
async function createUser(){
|
|
|
|
if (toCreate.lastName === null || toCreate.birthDate === null || toCreate.firstName === null ||
|
|
toCreate.email === null || toCreate.address === null || toCreate.role === null || toCreate.password === null)
|
|
return
|
|
|
|
await postUser(toCreate)
|
|
toCreate = Object.assign({},{})
|
|
}
|
|
|
|
async function getProfilePic(data){
|
|
const pp= await uploadProfilePicture(data)
|
|
toCreate.profilePictureUrl = pp.url
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="body">
|
|
<div class="container">
|
|
<div class = "globalInfos">
|
|
<div class="infosContainer">
|
|
<ul>
|
|
<li>{{i18n("LastName")}} : <input type="text" v-model="toCreate.lastName"></li>
|
|
<li>{{i18n("FirstName")}} : <input type="text" v-model="toCreate.firstName"></li>
|
|
<li> E-mail : <input type="text" v-model="toCreate.email"></li>
|
|
<li>{{i18n("Country")}} : <input type="text" v-model="toCreate.country"></li>
|
|
<li>{{i18n("Address")}} : <input type="text" v-model="toCreate.address"></li>
|
|
<li>{{i18n("BirthDate")}} : <input type="date" min="1924-01-01" :max="date" v-model="toCreate.birthDate"></li>
|
|
|
|
<li>{{i18n("Profile.Picture")}} :
|
|
<input type="file" @change="getProfilePic($event.target.files);" accept="image/*">
|
|
</li>
|
|
|
|
|
|
<li>{{i18n("Role")}} :
|
|
<select v-model="toCreate.role">
|
|
<option value="Student">{{i18n("Student")}}</option>
|
|
<option value="Teacher">{{i18n("Teacher")}}</option>
|
|
<option value="Secretary">{{i18n("Secretary")}}</option>
|
|
<option value="InscriptionService">{{i18n("InscriptionService")}}</option>
|
|
</select>
|
|
</li>
|
|
|
|
<li>{{i18n("Password")}} : <input type="password" v-model="toCreate.password"></li>
|
|
|
|
</ul>
|
|
<div style="text-align: end"> <button id="createButton" @click="createUser"> {{i18n("Create.User")}}</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.container{
|
|
margin-top: 25px;
|
|
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:5%;
|
|
}
|
|
|
|
|
|
.infosContainer {
|
|
border:2px solid black;
|
|
font-size:23px;
|
|
color:white;
|
|
background-color:rgb(50,50,50);
|
|
border-radius:10px;
|
|
}
|
|
|
|
#createButton{
|
|
align-self: center;
|
|
text-align: center;
|
|
border: 2px solid black;
|
|
color: white;
|
|
font-size: x-large;
|
|
background-color: #07bc0c;
|
|
border-radius: 20px
|
|
}
|
|
#createButton:hover{
|
|
background: #4cd964;
|
|
}
|
|
|
|
</style> |