112 lines
3.9 KiB
Vue
112 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">FAQ</h1>
|
|
<transition name="fade">
|
|
<span class="float-right text-success" v-show="processing">{{ response }}</span>
|
|
</transition>
|
|
<button class="btn btn-primary btn-sm text-white float-right" @click="saveData()" :disabled="processing">
|
|
Sauvegarder
|
|
<div class="spinner-border spinner-border-sm text-light" role="status" v-show="processing">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<table class="table table-bordered text-center">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Question</th>
|
|
<th scope="col">Réponse</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in datas" v-bind:key="item.id">
|
|
<td><input class="form-control form-control-sm" v-model="item.question" type="text" required></td>
|
|
<td><input class="form-control form-control-sm" v-model="item.answer" type="text" required></td>
|
|
<td><button @click="removeItem(index)" class="btn btn-danger btn-sm">Supprimer</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="form-group text-right">
|
|
<button class="btn btn-primary btn-sm text-white" @click="newItem">Ajouter une ligne</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('Faq Component mounted.');
|
|
this.datas = JSON.parse(this.dbdatas);
|
|
},
|
|
props: [
|
|
'name',
|
|
'dbdatas',
|
|
],
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
response: null,
|
|
processing: false
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
newItem() {
|
|
this.datas.push({question: '', answer: ''});
|
|
},
|
|
removeItem(index) {
|
|
if (this.datas[index]['id'] !== undefined) {
|
|
this.processing = true;
|
|
axios.post('/bo/ajax/delete-faq', {
|
|
id: this.datas[index]['id'],
|
|
}).then(
|
|
(response) => {
|
|
this.response = response.data;
|
|
this.processing = false;
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
alert('Erreur lors de la suppression.');
|
|
this.processing = false;
|
|
});
|
|
this.datas.splice(index, 1);
|
|
} else {
|
|
this.datas.splice(index, 1);
|
|
}
|
|
},
|
|
saveData() {
|
|
this.processing = true;
|
|
this.response = "En cours de sauvegarde..."
|
|
axios.post('/bo/ajax/save-faq', {
|
|
faq: this.datas,
|
|
}).then(
|
|
(response) => {
|
|
this.datas = response.data;
|
|
this.response = "Sauvegarde terminée !";
|
|
this.processing = false;
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.response = "Erreur lors de la sauvegarde.";
|
|
this.processing = false;
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
.fade-enter, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|