337 lines
12 KiB
Vue
337 lines
12 KiB
Vue
<script>
|
|
import Layout from "../../layouts/main";
|
|
import PageHeader from "../../components/page-header";
|
|
import { required } from "vuelidate/lib/validators";
|
|
|
|
import { customersData } from "./data-customers";
|
|
|
|
/**
|
|
* Customers component
|
|
*/
|
|
export default {
|
|
components: { Layout, PageHeader },
|
|
data() {
|
|
return {
|
|
customersData: customersData,
|
|
title: "Customers",
|
|
items: [
|
|
{
|
|
text: "Ecommerce",
|
|
href: "/"
|
|
},
|
|
{
|
|
text: "Customers",
|
|
active: true
|
|
}
|
|
],
|
|
showModal: false,
|
|
submitted: false,
|
|
customers: {
|
|
username: "",
|
|
phone: "",
|
|
email: "",
|
|
address: "",
|
|
balance: "",
|
|
},
|
|
};
|
|
},
|
|
validations: {
|
|
customers: {
|
|
username: { required },
|
|
phone: { required },
|
|
email: { required },
|
|
address: { required },
|
|
balance: { required },
|
|
},
|
|
},
|
|
methods: {
|
|
/**
|
|
* Modal form submit
|
|
*/
|
|
// eslint-disable-next-line no-unused-vars
|
|
handleSubmit(e) {
|
|
this.submitted = true;
|
|
|
|
// stop here if form is invalid
|
|
this.$v.$touch();
|
|
if (this.$v.$invalid) {
|
|
return;
|
|
} else {
|
|
const currentDate = new Date();
|
|
this.customersData.push({
|
|
username: this.customers.username,
|
|
phone: this.customers.phone,
|
|
email: this.customers.email,
|
|
address: this.customers.address,
|
|
balance: this.customers.balance,
|
|
rating: "4.3",
|
|
date: currentDate,
|
|
});
|
|
this.showModal = false;
|
|
this.customers = {};
|
|
}
|
|
this.submitted = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<PageHeader :title="title" :items="items" />
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-4">
|
|
<div class="search-box me-2 mb-2 d-inline-block">
|
|
<div class="position-relative">
|
|
<input type="text" class="form-control" placeholder="Search..." />
|
|
<i class="bx bx-search-alt search-icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="text-sm-end">
|
|
<button
|
|
type="button"
|
|
class="btn btn-success btn-rounded mb-2 me-2"
|
|
@click="showModal = true"
|
|
>
|
|
<i class="mdi mdi-plus me-1"></i> New Customers
|
|
</button>
|
|
<b-modal
|
|
v-model="showModal"
|
|
title="Add New Customer"
|
|
title-class="text-black font-18"
|
|
body-class="p-3"
|
|
hide-footer
|
|
>
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label for="name">Event Name</label>
|
|
<input
|
|
id="name"
|
|
v-model="customers.username"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Insert username"
|
|
:class="{
|
|
'is-invalid':
|
|
submitted && $v.customers.username.$error,
|
|
}"
|
|
/>
|
|
<div
|
|
v-if="
|
|
submitted && !$v.customers.username.required
|
|
"
|
|
class="invalid-feedback"
|
|
>
|
|
This value is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label for="phone">Phone</label>
|
|
<input
|
|
id="phone"
|
|
v-model="customers.phone"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Insert phone"
|
|
:class="{
|
|
'is-invalid':
|
|
submitted && $v.customers.phone.$error,
|
|
}"
|
|
/>
|
|
<div
|
|
v-if="submitted && !$v.customers.phone.required"
|
|
class="invalid-feedback"
|
|
>
|
|
This value is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label for="email">Email</label>
|
|
<input
|
|
id="email"
|
|
v-model="customers.email"
|
|
type="email"
|
|
class="form-control"
|
|
placeholder="Insert email"
|
|
:class="{
|
|
'is-invalid':
|
|
submitted && $v.customers.email.$error,
|
|
}"
|
|
/>
|
|
<div
|
|
v-if="submitted && !$v.customers.email.required"
|
|
class="invalid-feedback"
|
|
>
|
|
This value is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label for="address">Address</label>
|
|
<input
|
|
id="address"
|
|
v-model="customers.address"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Insert address"
|
|
:class="{
|
|
'is-invalid':
|
|
submitted && $v.customers.address.$error,
|
|
}"
|
|
/>
|
|
<div
|
|
v-if="submitted && !$v.customers.address.required"
|
|
class="invalid-feedback"
|
|
>
|
|
This value is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label for="balance">Balance</label>
|
|
<input
|
|
id="balance"
|
|
v-model="customers.balance"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Insert balance"
|
|
:class="{
|
|
'is-invalid':
|
|
submitted && $v.customers.balance.$error,
|
|
}"
|
|
/>
|
|
<div
|
|
v-if="submitted && !$v.customers.balance.required"
|
|
class="invalid-feedback"
|
|
>
|
|
This value is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end pt-5 mt-3">
|
|
<b-button variant="light" @click="showModal = false">Close</b-button>
|
|
<b-button type="submit" variant="success" class="ms-1"
|
|
>Create event</b-button
|
|
>
|
|
</div>
|
|
</form>
|
|
</b-modal>
|
|
</div>
|
|
</div>
|
|
<!-- end col-->
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-centered table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Username</th>
|
|
<th>Phone / Email</th>
|
|
<th>Address</th>
|
|
<th>Rating</th>
|
|
<th>Wallet Balance</th>
|
|
<th>Joining Date</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="customers in customersData" :key="customers.id">
|
|
<td>
|
|
<div class="form-check font-size-16">
|
|
<input
|
|
:id="`customCheck${customers.id}`"
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
:for="`customCheck${customers.id}`"
|
|
> </label>
|
|
</div>
|
|
</td>
|
|
<td>{{customers.username}}</td>
|
|
<td>
|
|
<p class="mb-1">{{customers.phone}}</p>
|
|
<p class="mb-0">{{customers.email}}</p>
|
|
</td>
|
|
|
|
<td>{{customers.address}}</td>
|
|
<td>
|
|
<span class="badge bg-success font-size-12">
|
|
<i class="mdi mdi-star me-1"></i>
|
|
{{customers.rating}}
|
|
</span>
|
|
</td>
|
|
<td>{{customers.balance}}</td>
|
|
<td>{{customers.date}}</td>
|
|
<td>
|
|
<b-dropdown class="card-drop" variant="white" right toggle-class="p-0" menu-class="dropdown-menu-end">
|
|
<template v-slot:button-content>
|
|
<i class="mdi mdi-dots-horizontal font-size-18"></i>
|
|
</template>
|
|
|
|
<b-dropdown-item>
|
|
<i class="fas fa-pencil-alt text-success me-1"></i> Edit
|
|
</b-dropdown-item>
|
|
|
|
<b-dropdown-item>
|
|
<i class="fas fa-trash-alt text-danger me-1"></i> Delete
|
|
</b-dropdown-item>
|
|
</b-dropdown>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<ul class="pagination pagination-rounded justify-content-end mb-2">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
|
|
<i class="mdi mdi-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="javascript: void(0);">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="javascript: void(0);">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="javascript: void(0);">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="javascript: void(0);">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="javascript: void(0);">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="javascript: void(0);" aria-label="Next">
|
|
<i class="mdi mdi-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
</Layout>
|
|
</template>
|