264 lines
12 KiB
Vue
264 lines
12 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
Lots
|
|
</div>
|
|
<!-- TODO ? Message sauvegarde et suppression en toast ? -->
|
|
<div class="col-md-6 text-center">
|
|
<transition name="fade">
|
|
<span v-show="processing">
|
|
{{ response }}
|
|
</span>
|
|
</transition>
|
|
</div>
|
|
<div class="col-md-3 text-right">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TODO : Mettre chaque lot en onglet -->
|
|
<div class="card-body">
|
|
<div class="col-md-10 offset-md-1">
|
|
<div v-for="(item, index) in datas">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<td class="w-50">
|
|
ID du lot <span class="required-asterisk">*</span><br/>
|
|
<small class="text-muted">ATTENTION ! Bien vérifier que chaque id de lot est unique et correspond bien aux id de la table des IG</small>
|
|
</td>
|
|
<td class="w-50 align-middle"><input class="form-control form-control-sm" v-model="item.arcadia_id" type="number" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Libellé au singulier <span class="required-asterisk">*</span>
|
|
</td>
|
|
<td class="align-middle"><input class="form-control form-control-sm" v-model="item.label_one" type="text" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Libellé au pluriel <span class="required-asterisk">*</span>
|
|
</td>
|
|
<td class="align-middle"><input class="form-control form-control-sm" v-model="item.label_many" type="text" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Quantité <span class="required-asterisk">*</span>
|
|
</td>
|
|
<td class="align-middle"><input class="form-control form-control-sm" v-model="item.quantity" type="number" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Activer les notifications <span class="required-asterisk">*</span><br/>
|
|
<small class="text-muted">Activer l'envoi d'un mail au gagnant</small>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="onoffswitch">
|
|
<input type="checkbox" :id="'notifications_' + index" class="onoffswitch-checkbox" v-model="item.notifications">
|
|
<label class="onoffswitch-label" :for="'notifications_' + index">
|
|
<span class="onoffswitch-inner"></span>
|
|
<span class="onoffswitch-switch"></span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Formulaire complémentaire <span class="required-asterisk">*</span><br/>
|
|
<small class="text-muted">Si activé, l'utilisateur sera redirigé vers un formulaire complémentaire</small>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="onoffswitch">
|
|
<input type="checkbox" :id="'additional_form_' + index" class="onoffswitch-checkbox" v-model="item.additional_form">
|
|
<label class="onoffswitch-label" :for="'additional_form_' + index">
|
|
<span class="onoffswitch-inner"></span>
|
|
<span class="onoffswitch-switch"></span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Id courrier Arcadia <span class="required-asterisk">*</span><br/>
|
|
<small class="text-muted">Si ce champ est renseigné, un courrier sera créé en CRM pour l'export Arcadia</small>
|
|
</td>
|
|
<td class="align-middle"><input class="form-control form-control-sm" v-model="item.arcadia_mail_id" type="number" required></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Pdf preuve de gain
|
|
</td>
|
|
<td class="align-middle">
|
|
<input type="file" accept="application/pdf" name="pdf_winning_proof" v-on:change="handleFileUpload(index)">
|
|
<!-- TODO ? Mettre un embed du fichier ? A voir -->
|
|
<span v-if="item.pdf_winning_proof != null">Fichier actuel : <span class="badge badge-primary">{{item.pdf_winning_proof}}</span></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Lot par défaut <span class="required-asterisk">*</span><br/>
|
|
<small class="text-muted">Si activé, ce lot sera systématiquement attribué en cas de perte aux instants gagnants</small>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="onoffswitch">
|
|
<input type="checkbox" :id="'is_default_' + index" class="onoffswitch-checkbox" v-model="item.is_default">
|
|
<label class="onoffswitch-label" :for="'is_default_' + index">
|
|
<span class="onoffswitch-inner"></span>
|
|
<span class="onoffswitch-switch"></span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Page de gain du lot <span class="required-asterisk">*</span><br/>
|
|
</td>
|
|
<td class="align-middle">
|
|
<select class="custom-select" v-model="item.gain_view_id">
|
|
<option v-for="gv in gainviews" :value="gv.id" v-bind:key="gv.id">{{gv.name}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Supprimer le lot
|
|
</td>
|
|
<td class="align-middle">
|
|
<button @click="removeItem(index)" class="btn btn-secondary btn-sm">Supprimer</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<hr/>
|
|
</div>
|
|
<div class="form-group text-right">
|
|
<button class="btn btn-primary btn-sm text-white" @click="newItem">Ajouter un lot</button>
|
|
<input type="hidden" :name="name" :value="JSON.stringify(datas)" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('GainViews Component mounted.');
|
|
this.datas = JSON.parse(this.dbdatas);
|
|
this.gainviews = JSON.parse(this.dbgainviews);
|
|
},
|
|
props: [
|
|
'name',
|
|
'dbdatas',
|
|
'dbgainviews'
|
|
],
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
gainviews: [],
|
|
response: null,
|
|
processing: false,
|
|
pdf_winning_proof: []
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
handleFileUpload(index) {
|
|
let files = event.target.files || event.dataTransfer.files;
|
|
if (!files.length)
|
|
return;
|
|
|
|
// File[0] car on le récupère toujours de l'event au dessus
|
|
this.pdf_winning_proof[index] = files[0];
|
|
|
|
if (!this.pdf_winning_proof[index]) {
|
|
event.preventDefault();
|
|
alert('Aucun fichier choisi.');
|
|
return;
|
|
}
|
|
|
|
if (this.pdf_winning_proof[index].size > (1024 * 1024) * 20) {
|
|
event.preventDefault();
|
|
alert('Fichier trop volumineux (> 20MB)');
|
|
return;
|
|
}
|
|
},
|
|
newItem() {
|
|
this.datas.push({
|
|
arcadia_id: null,
|
|
label_one: '',
|
|
label_many: '',
|
|
quantity: 0,
|
|
notifications: 0,
|
|
additional_form: 0,
|
|
arcadia_mail_id: null,
|
|
pdf_winning_proof: null,
|
|
is_default: 0,
|
|
gain_view_id: null
|
|
});
|
|
},
|
|
removeItem(index) {
|
|
if (this.datas[index]['id'] !== undefined) {
|
|
this.processing = true;
|
|
this.response = "Suppression en cours...";
|
|
axios.post('/bo/ajax/delete-prize', {
|
|
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() {
|
|
let formData = new FormData();
|
|
$.each(this.pdf_winning_proof, function(index, value) {
|
|
formData.append('pdf[' + index + "]", value);
|
|
});
|
|
formData.append('prizes', JSON.stringify(this.datas));
|
|
|
|
this.processing = true;
|
|
this.response = "En cours de sauvegarde..."
|
|
axios.post('/bo/ajax/save-prizes', formData)
|
|
.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>
|