74 lines
3.1 KiB
Vue
74 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col"></th>
|
|
<th scope="col">Identifiant coupon <span class="required-asterisk">*</span></th>
|
|
<th scope="col">Pourcentage <span class="required-asterisk">*</span></th>
|
|
<th scope="col">Valeur faciale <span class="required-asterisk">*</span></th>
|
|
<th scope="col">Valable sur <span class="required-asterisk">*</span></th>
|
|
<th scope="col">Nom image <span class="required-asterisk">*</span></th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="emails">
|
|
<tr v-for="(item, index) in datas" v-bind:key="item.id">
|
|
<td>{{index + 1}}</td>
|
|
<td><input class="form-control form-control-sm" v-model="item.web_coupon_identifiant" type="text" required></td>
|
|
<td>
|
|
<input class="form-control form-control-sm" :class="{ border: totalPercentage > 100, 'border-danger': totalPercentage > 100}"
|
|
v-model="item.percentage" type="number" required>
|
|
</td>
|
|
<td><input class="form-control form-control-sm" v-model="item.face_value" type="text" required></td>
|
|
<td><input class="form-control form-control-sm" v-model="item.valid_on" type="text" required></td>
|
|
<td><input class="form-control form-control-sm" v-model="item.img_name" 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">
|
|
<small v-show="totalPercentage > 100" class="text-danger">Poucentage total > 100%</small>
|
|
<a class="btn btn-primary btn-sm text-white" @click="newItem" role="button">Ajouter un coupon</a>
|
|
<input type="hidden" :name="name" :value="JSON.stringify(datas)" required>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('WebCoupons Component mounted.');
|
|
this.datas = JSON.parse(this.dbdatas);
|
|
},
|
|
props: [
|
|
'name',
|
|
'dbdatas',
|
|
],
|
|
data() {
|
|
return {
|
|
datas: []
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
newItem() {
|
|
this.datas.push({web_coupon_identifiant: '', percentage: 0, face_value: 0, valid_on: '', img_name: ''});
|
|
},
|
|
removeItem(index) {
|
|
if (confirm("Êtes-vous sûr(e) ?")) {
|
|
this.datas.splice(index, 1);
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
totalPercentage() {
|
|
let total = 0;
|
|
this.datas.forEach(element => total += parseInt(element.percentage));
|
|
return total;
|
|
}
|
|
}
|
|
}
|
|
</script>
|