Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 1x 1x 3x 1x | <template>
<div class="d-flex flex-column align-items-center position-relative">
<BIconSearch class="search-icon d-flex position-absolute" />
<SelectWithSearch
:data="customers"
:filter="filterCustomers"
:clickItem="addCustomer"
:placeholder="'Serch bundles'"
class="mb-3"
>
<template v-slot:item="customers">
<div class="row p-3 w-100">
<div class="text-ellipsis col-6">
{{ getCustomerName(customers.item) }}
</div>
<div class="text-ellipsis col-3">{{ customers.item.state }}</div>
<div class="text-ellipsis col-3">{{ customers.item.cellphone }}</div>
</div>
</template>
</SelectWithSearch>
<div class="w-100 row" v-if="customer">
<div class="text-ellipsis col-6">
{{ getCustomerName(customer) }}
</div>
<div class="text-ellipsis col-2">{{ customer.state }}</div>
<div class="text-ellipsis col-3">{{ customer.cellphone }}</div>
<div
class="col-1 d-flex justify-content-center align-items-start"
v-on:click="deleteCustomer"
>
<BIconX />
</div>
</div>
<AddCustomerModal v-on:addCustomer="addCustomer" />
</div>
</template>
<script>
import { mapActions } from "vuex";
import SelectWithSearch from "~/components/common/SelectWithSearch.vue";
import AddCustomerModal from "./AddCustomerModal.vue";
export default {
name: "CustomersBlock",
components: { SelectWithSearch, AddCustomerModal },
data: () => ({
customers: [],
customer: null,
}),
methods: {
...mapActions({ getCustomers: "admin_orders/getCustomers" }),
filterCustomers: function (text, data) {
return data.filter(
(item) =>
item.firstName.toLowerCase().includes(text.toLowerCase()) ||
item.lastName.toLowerCase().includes(text.toLowerCase()) ||
item.email.toLowerCase().includes(text.toLowerCase()) ||
item.cellphone.toLowerCase().includes(text.toLowerCase())
);
},
addCustomer: function (customer) {
this.customer = customer;
this.$emit("setCustomer", customer);
},
deleteCustomer: function () {
this.customer = null;
this.$emit("setCustomer", null);
},
getCustomerName: function (customer) {
const { firstName, lastName } = customer;
return `${firstName} ${lastName}`;
},
},
async beforeMount() {
this.customers = await this.getCustomers();
},
};
</script>
<style scoped>
</style> |