<template>
	<div>
		<h4>Inserisci nuova figura</h4>
		<div class="form-group">
	        <label for="titolo">Titolo ruolo</label>
	        <input type="text" v-model="title" class="form-control">

	    	<button @click="saveRole" class="btn btn-primary">Salva</button>
	    </div>
	    <h4>Figure presenti</h4>
	    <div class="form-group col-4 mt-3"  v-for="role in roles">
	    	<p class="form-control">{{ role.title }}</p>
	    	<button class="btn btn-danger" :role="role" @click="deleteRole">Cancella</button>
	    </div>
	</div>
</template>

<script>
	import axios from 'axios'

	export default {
		data() {
			return {
				'title' : '',
				'roles' : [],
				'role'  : '',
			}
		},
		mounted() {
			let obj = this;

			axios.get('/api/getAllRoles', {
			})
			.then((response)  =>  {
				obj.roles = response.data
			})
		},
		methods: {
			saveRole(){
				let obj = this;

				axios.post('/api/role/save', {
					title: obj.title
				})
				.then(function(response) {
					console.log(response);
				});
			},
			deleteRole(){
				let obj = this;

				axios.post('/api/role/delete', {
					role: obj.role.id
				})
				.then((response) => {
				});
			}
		},
	}
</script>

<style>

</style>