362 lines
12 KiB
Vue
362 lines
12 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-md-3">Lots</div>
|
|
<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 colspan="2">
|
|
<div>
|
|
Argumentaire
|
|
<table class="table">
|
|
<tr>
|
|
<td>Titre <span class="required-asterisk">*</span></td>
|
|
<td class="align-middle">
|
|
<input
|
|
class="form-control form-control-sm"
|
|
v-model="item.arg_title"
|
|
type="text"
|
|
required
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sous-titre</td>
|
|
<td class="align-middle">
|
|
<input
|
|
class="form-control form-control-sm"
|
|
v-model="item.arg_subtitle"
|
|
type="text"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Texte <span class="required-asterisk">*</span></td>
|
|
<td class="align-middle">
|
|
<ck-editor-component-vue
|
|
@input="(dbtext) => (item.arg_content = dbtext)"
|
|
:id="`arg_content${index}`"
|
|
:name="`arg_content${index}`"
|
|
:required="true"
|
|
:dbtext="item.arg_content"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</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>
|
|
Code Opération 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_operation_code"
|
|
type="number"
|
|
required
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Code Support 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_support_code"
|
|
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($event, index)"
|
|
/>
|
|
<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>
|
|
Preuve de gain obligatoire <span class="required-asterisk">*</span
|
|
><br />
|
|
<small class="text-muted"
|
|
>Si activé, il sera obligatoire de fournir des preuves de gain pour ce
|
|
lot (sticker, ticket de caisse, code barre).</small
|
|
>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="onoffswitch">
|
|
<input
|
|
type="checkbox"
|
|
:id="'need_proof_' + index"
|
|
class="onoffswitch-checkbox"
|
|
v-model="item.need_proof"
|
|
/>
|
|
<label class="onoffswitch-label" :for="'need_proof_' + 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-danger 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>
|
|
import ckEditorComponentVue from "./ckEditorComponent.vue";
|
|
|
|
export default {
|
|
components: {
|
|
ckEditorComponentVue,
|
|
},
|
|
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(event, index) {
|
|
let files = event.target.files || event.dataTransfer.files;
|
|
if (!files.length) return;
|
|
|
|
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({
|
|
id: null,
|
|
arcadia_id: null,
|
|
label_one: "",
|
|
label_many: "",
|
|
arg_title: "",
|
|
arg_subtitle: "",
|
|
arg_content: "",
|
|
quantity: 0,
|
|
notifications: 0,
|
|
additional_form: 0,
|
|
arcadia_operation_code: null,
|
|
arcadia_support_code: null,
|
|
pdf_winning_proof: null,
|
|
need_proof: 1,
|
|
gain_view_id: null,
|
|
});
|
|
},
|
|
removeItem(index) {
|
|
if (confirm("Êtes-vous sûr(e) ?")) {
|
|
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;
|
|
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 0.5s;
|
|
}
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|