101 lines
4 KiB
Vue
101 lines
4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">Rechercher un opt-in</h1>
|
|
<div class="spinner-border text-dark float-right" role="status" v-show="processing">
|
|
<span class="sr-only">Chargement...</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group form-row">
|
|
<label class="col-form-label col text-center">Marque :</label>
|
|
<select v-model="selectedBrand" class="custom-select col">
|
|
<option value="0" selected>Toutes les marques</option>
|
|
<option v-for="item in brands" :key="item.id" :value="item.id">{{ item.name }}</option>
|
|
</select>
|
|
<label class="col-form-label col text-center">Votre recherche :</label>
|
|
<input v-model="search" type="text" class="form-control col" placeholder="Entrer votre recherche ici" v-on:keyup.enter="enterSearch">
|
|
</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Email</th>
|
|
<th scope="col">Marque</th>
|
|
<th scope="col">Date opt-in</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="emails">
|
|
<tr v-for="item in datas" :key="item.id">
|
|
<td>{{ item.email }}</td>
|
|
<td>{{ brands.find(element => element.id === item.brand_id).name }}</td>
|
|
<td>{{ item.created_at | formatDate }}</td>
|
|
<td><a class="btn btn-sm btn-danger" @click="deleteOptin(item.id)">Supprimer</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('SearchOptin Component mounted.');
|
|
this.brands = JSON.parse(this.dbbrands);
|
|
},
|
|
props: [
|
|
'dbbrands',
|
|
],
|
|
data() {
|
|
return {
|
|
brands: [],
|
|
datas: [],
|
|
processing: false,
|
|
search: '',
|
|
selectedBrand: "0",
|
|
}
|
|
},
|
|
methods: {
|
|
enterSearch() {
|
|
if (this.search.length < 1)
|
|
return false;
|
|
this.processing = true;
|
|
let chaine = this.search;
|
|
if (this.selectedBrand !== "0")
|
|
chaine += '/' + this.selectedBrand;
|
|
axios.get('/single-optins/filter/' + chaine)
|
|
.then(
|
|
(response) => {
|
|
this.datas = response.data;
|
|
this.processing = false;
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.processing = false;
|
|
});
|
|
},
|
|
deleteOptin(id) {
|
|
let r = confirm("Veuillez confirmer cette action en cliquant sur OK.");
|
|
if (r === true) {
|
|
axios.post('/single-optins/' + id + '/delete')
|
|
.then(
|
|
(response) => {
|
|
if (response.data.status === 'OK'){
|
|
this.datas = [];
|
|
this.search = '';
|
|
this.selectedBrand = "0";
|
|
this.processing = false;
|
|
alert("Suppression terminée.");
|
|
}
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.processing = false;
|
|
alert("Une erreur est survenue.");
|
|
});
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|