115 lines
4.3 KiB
Vue
115 lines
4.3 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Gestion des vues correspondants au gain
|
|
<button class="btn btn-primary btn-sm text-white float-right" @click="saveData()">Sauvegarder</button>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="col-md-10 offset-md-1">
|
|
<table class="table table-bordered text-center">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Nom de la page de gain <span class="required-asterisk">*</span></th>
|
|
<th scope="col">Nom du fichier <span class="required-asterisk">*</span></th>
|
|
<th scope="col">Slug d'accès <span class="required-asterisk">*</span></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.name" type="text" required></td>
|
|
<td><input class="form-control form-control-sm" v-model="item.file_name" type="text" required></td>
|
|
<td><input class="form-control form-control-sm" v-model="item.slug_route" type="text" required></td>
|
|
<td><button @click="removeItem(index)" class="btn btn-secondary 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>
|
|
<input type="hidden" :name="name" :value="JSON.stringify(datas)" required>
|
|
</div>
|
|
<transition name="fade">
|
|
<p class="alert alert-info" v-show="processing">
|
|
{{ response }}
|
|
</p>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('GainViews Component mounted.');
|
|
this.datas = JSON.parse(this.dbdatas);
|
|
},
|
|
props: [
|
|
'name',
|
|
'dbdatas',
|
|
],
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
response: null,
|
|
processing: false
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
newItem() {
|
|
this.datas.push({name: '', file_name: '', slug_route: ''});
|
|
},
|
|
removeItem(index) {
|
|
if (this.datas[index]['id'] !== undefined) {
|
|
this.processing = true;
|
|
this.response = "Suppression en cours...";
|
|
axios.post('/bo/ajax/delete-gain-views', {
|
|
id: this.datas[index]['id'],
|
|
}).then(
|
|
response => (this.response = response.data)
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.response = "Erreur lors de la suppression.";
|
|
});
|
|
this.datas.splice(index, 1);
|
|
setTimeout(function() {
|
|
this.processing = false;
|
|
}.bind(this), 3000);
|
|
} else {
|
|
this.datas.splice(index, 1);
|
|
}
|
|
},
|
|
saveData() {
|
|
this.processing = true;
|
|
this.response = "En cours de sauvegarde..."
|
|
axios.post('/bo/ajax/save-gain-views', {
|
|
gainViews: this.datas,
|
|
}).then(
|
|
response => (this.datas = response.data)
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.response = "Erreur lors de la sauvegarde.";
|
|
});
|
|
this.response = "Sauvegarde terminée !";
|
|
setTimeout(function() {
|
|
this.processing = false;
|
|
}.bind(this), 3000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
.fade-enter, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|