add the CustomerDetails to the customers component
This commit is contained in:
parent
d0b67fd28a
commit
ea35359253
|
@ -1,5 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="!addCustomerDialogVisible">
|
<customer-details
|
||||||
|
v-if="showCustomerDetails"
|
||||||
|
:customer-name="customerName"
|
||||||
|
:customer-description="customerDescription"
|
||||||
|
@hide-details="hideDetails"
|
||||||
|
></customer-details>
|
||||||
|
|
||||||
|
<add-customer
|
||||||
|
v-if="addCustomerDialogVisible"
|
||||||
|
@created-customer="closeDialog"
|
||||||
|
></add-customer>
|
||||||
|
|
||||||
|
<div v-if="!addCustomerDialogVisible && !showCustomerDetails">
|
||||||
<header><h1>List of Customers</h1></header>
|
<header><h1>List of Customers</h1></header>
|
||||||
<div>
|
<div>
|
||||||
<form @submit.prevent="addCustomer">
|
<form @submit.prevent="addCustomer">
|
||||||
|
@ -20,7 +32,7 @@
|
||||||
|
|
||||||
<tr v-for="customer in customers" :key="customer.url">
|
<tr v-for="customer in customers" :key="customer.url">
|
||||||
<td>
|
<td>
|
||||||
<a href="#">{{ customer.name }}</a>
|
<a href="#" @click="showDetails(customer)">{{ customer.name }}</a>
|
||||||
</td>
|
</td>
|
||||||
<td><a :href="customer.url">Nets</a></td>
|
<td><a :href="customer.url">Nets</a></td>
|
||||||
<td><a :href="customer.url">Computers</a></td>
|
<td><a :href="customer.url">Computers</a></td>
|
||||||
|
@ -34,23 +46,25 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="addCustomerDialogVisible">
|
|
||||||
<add-customer @created-customer="closeDialog"></add-customer>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import getAPI from "../scripts/axios-api";
|
import getAPI from "../scripts/axios-api";
|
||||||
import AddCustomer from "./AddCustomer.vue";
|
import AddCustomer from "./AddCustomer.vue";
|
||||||
|
import CustomerDetails from "./CustomerDetails.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
AddCustomer,
|
AddCustomer,
|
||||||
|
CustomerDetails,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
customers: [],
|
customers: [],
|
||||||
addCustomerDialogVisible: false,
|
addCustomerDialogVisible: false,
|
||||||
|
showCustomerDetails: false,
|
||||||
|
customerName: "",
|
||||||
|
customerDescription: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -73,6 +87,14 @@ export default {
|
||||||
this.customers.unshift(customer);
|
this.customers.unshift(customer);
|
||||||
this.addCustomerDialogVisible = false;
|
this.addCustomerDialogVisible = false;
|
||||||
},
|
},
|
||||||
|
showDetails(customer) {
|
||||||
|
this.customerName = customer.name;
|
||||||
|
this.customerDescription = customer.description;
|
||||||
|
this.showCustomerDetails = true;
|
||||||
|
},
|
||||||
|
hideDetails() {
|
||||||
|
this.showCustomerDetails = false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
getAPI
|
getAPI
|
||||||
|
|
Loading…
Reference in New Issue