260 lines
9.1 KiB
Vue
260 lines
9.1 KiB
Vue
<template>
|
|
<div>
|
|
<span class="d-block mb-2 fs-5 mt-3">{{ __('Coupons (MesBr)') }}</span>
|
|
<dl class="d-block text-bg-light fs-6 my-2 rounded px-3 py-2">
|
|
<dt>{{ __('Aide') }}</dt>
|
|
<dd>{{ __('L\'identifiant du coupon viens de MesBR, le ratio est partagé entre tous les coupons') }}</dd>
|
|
<dd>{{ __('La valeur faciale est en centimes (dans le mail de gain)') }}</dd>
|
|
<dd>{{ __('Valable sur (dans le mail de gain) et image du coupon sont affiché sur la page de gain') }}</dd>
|
|
</dl>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered border">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
width="10"
|
|
>
|
|
{{ __('L.') }}
|
|
</th>
|
|
<th scope="col">
|
|
{{ __('Coupon') }}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
width="10"
|
|
/>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(item, dataIndex) in coupons"
|
|
:key="dataIndex"
|
|
>
|
|
<td>{{ dataIndex }}</td>
|
|
<td class="container">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6">
|
|
<!-- IDENTIFIANT COUPON -->
|
|
<div class="input-group mb-3">
|
|
<span
|
|
class="input-group-text"
|
|
:id="`coupon${dataIndex}Id`"
|
|
>{{ __('ID') }}</span>
|
|
<input
|
|
v-model="item.web_coupon_identifiant"
|
|
:name="`${name}[${dataIndex}][web_coupon_identifiant]`"
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
placeholder="0000000000000"
|
|
:aria-label="__('Identifiant du coupon')"
|
|
:aria-describedby="`coupon${dataIndex}Id`"
|
|
autocomplete="off"
|
|
required
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<!-- RATIO COUPON -->
|
|
<div
|
|
class="progress"
|
|
role="progressbar"
|
|
:aria-label="__('Chance de gagner le coupon en pourcentage')"
|
|
:aria-valuenow="item.percentage"
|
|
aria-valuemin="1"
|
|
aria-valuemax="100"
|
|
style="height: 2px"
|
|
>
|
|
<div
|
|
class="progress-bar"
|
|
:style="{width: `${item.percentage}%`}"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<span
|
|
class="input-group-text rounded-0"
|
|
:id="`coupon${dataIndex}Ratio`"
|
|
>{{ __('Ratio') }}</span>
|
|
<input
|
|
v-model="item.percentage"
|
|
:name="`${name}[${dataIndex}][percentage]`"
|
|
type="number"
|
|
:class="{
|
|
'rounded-0':'rounded-0',
|
|
'form-control':'form-control',
|
|
'form-control-sm':'form-control-sm',
|
|
border: totalPercentage > 100,
|
|
'border-danger': totalPercentage > 100
|
|
}"
|
|
placeholder="1"
|
|
:aria-label="__('Chance de gagner le coupon en pourcentage')"
|
|
:aria-describedby="`coupon${dataIndex}Ratio`"
|
|
autocomplete="off"
|
|
required
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<!-- VALEUR FACIALE COUPON -->
|
|
<div class="input-group mb-3">
|
|
<input
|
|
v-model="item.face_value"
|
|
:name="`${name}[${dataIndex}][face_value]`"
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
placeholder="0000000000000"
|
|
:aria-label="__('Valeur faciale')"
|
|
:aria-describedby="`coupon${dataIndex}Value`"
|
|
autocomplete="off"
|
|
required
|
|
>
|
|
<span
|
|
class="input-group-text"
|
|
:id="`coupon${dataIndex}ValidOn`"
|
|
>{{ __('Cents €') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<!-- VALABLE SUR COUPON -->
|
|
<div class="input-group mb-3">
|
|
<span
|
|
class="input-group-text"
|
|
:id="`coupon${dataIndex}Value`"
|
|
>{{ __('V. sur') }}</span>
|
|
<input
|
|
v-model="item.valid_on"
|
|
:name="`${name}[${dataIndex}][valid_on]`"
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
placeholder="Cordon bleu x2 Le Gaulois"
|
|
:aria-label="__('Produit sur lequel le coupon est valable')"
|
|
:aria-describedby="`coupon${dataIndex}ValidOn`"
|
|
autocomplete="off"
|
|
required
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-8 offset-lg-2">
|
|
<!-- VALABLE SUR COUPON -->
|
|
<div class="input-group mb-3">
|
|
<ImageInput
|
|
:key="dataIndex"
|
|
:id="`coupon${dataIndex}Picture`"
|
|
:required="true"
|
|
:show-labels="true"
|
|
:name="`${name}[${dataIndex}][picture]`"
|
|
:helper="__('Image du coupon qui sera affiché sur la page de gain, :height px (h) :width px (l)', couponDimensionsLabelHelper)"
|
|
:width="couponDimensions.width"
|
|
:height="couponDimensions.height"
|
|
:value="item.picture"
|
|
:preview="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button
|
|
@click.prevent="removeItem(dataIndex)"
|
|
class="btn btn-danger btn-sm"
|
|
:title="__('Enlever un coupon')"
|
|
data-bs-toggle="tooltip"
|
|
>
|
|
<FontAwesomeIcon icon="fa fa-trash" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="form-group text-end me-2">
|
|
<button
|
|
class="btn btn-primary btn-sm"
|
|
@click.prevent="newItem"
|
|
role="button"
|
|
:title="__('Ajouter un coupon')"
|
|
data-bs-toggle="tooltip"
|
|
>
|
|
<FontAwesomeIcon icon="fa fa-plus" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { defineComponent } from "vue";
|
|
import sweetalertConfirm from "../modules/sweetalertConfirm";
|
|
import trans from "../modules/trans";
|
|
import ImageInput from "./ImageInputComponent.vue";
|
|
|
|
export default defineComponent({
|
|
name: "WebCouponsComponent",
|
|
mixins: [trans, sweetalertConfirm],
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}"), data = JSON.parse(json);
|
|
this.coupons = data.coupon_list;
|
|
this.name = data.name;
|
|
this.couponDimensionsLabelHelper.height = String(data.coupon_height);
|
|
this.couponDimensionsLabelHelper.width = String(data.coupon_with);
|
|
this.couponDimensions.height = Number.parseInt(String(data.coupon_height));
|
|
this.couponDimensions.width = Number.parseInt(String(data.coupon_with));
|
|
},
|
|
data(): {
|
|
couponDimensionsLabelHelper : {
|
|
width: string;
|
|
height: string;
|
|
},
|
|
couponDimensions : {
|
|
width: number;
|
|
height: number;
|
|
},
|
|
coupons: Array<{
|
|
web_coupon_identifiant: string;
|
|
percentage: number;
|
|
face_value: number;
|
|
valid_on: string;
|
|
picture: string;
|
|
}>;
|
|
name: string;
|
|
} {
|
|
return {
|
|
couponDimensions : {
|
|
width: 200,
|
|
height: 450
|
|
},
|
|
couponDimensionsLabelHelper : {
|
|
width: "200",
|
|
height: "450"
|
|
},
|
|
coupons: [],
|
|
name: "",
|
|
};
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
newItem() {
|
|
this.coupons.push({ web_coupon_identifiant: "", percentage: 0, face_value: 0, valid_on: "", picture: "" });
|
|
},
|
|
removeItem(index: number) {
|
|
this.confirm(
|
|
this.__("Confirmez"),
|
|
this.__("Êtes-vous sûr(e) ?"),
|
|
this,
|
|
() => {
|
|
this.coupons.splice(index, 1);
|
|
}
|
|
);
|
|
},
|
|
},
|
|
computed: {
|
|
totalPercentage() {
|
|
let total = 0;
|
|
this.coupons.forEach((element: Record<string, number | string>) => total += parseInt(String(element.percentage)));
|
|
return total;
|
|
}
|
|
},
|
|
components: { FontAwesomeIcon, ImageInput }
|
|
});
|
|
</script>
|