87 lines
3.4 KiB
Vue
87 lines
3.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 client</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">CRM ID</th>
|
|
<th scope="col">Email</th>
|
|
<th scope="col">Nom</th>
|
|
<th scope="col">Prénom</th>
|
|
<th scope="col">Opt-In</th>
|
|
<th scope="col">Marque</th>
|
|
<th scope="col">Dernière connexion</th>
|
|
<th scope="col">Voir</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="emails">
|
|
<tr v-for="item in datas" :key="item.id">
|
|
<td>{{ item.customer_id }}</td>
|
|
<td>{{ item.email }}</td>
|
|
<td>{{ item.lastname }}</td>
|
|
<td>{{ item.firstname }}</td>
|
|
<td>{{ item.opt_in === 1 ? "Oui" : "Non" }}</td>
|
|
<td>{{ brands.find(element => element.id === item.brand_id).name }}</td>
|
|
<td>{{ item.last_connection | formatDate }}</td>
|
|
<td><a :href="'/customer/' + item.customer_id + '/' + item.brand_id" class="btn btn-sm btn-primary">Détail</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('SearchUser 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('/customers/filter/' + chaine)
|
|
.then(
|
|
(response) => {
|
|
this.datas = response.data;
|
|
this.processing = false;
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.processing = false;
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|