From ea35359253fc1467a4867e2534ab5a89bbe3b1d9 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 15 Feb 2021 22:35:02 +0100
Subject: [PATCH] add the CustomerDetails to the customers component

---
 .../src/components/customers/Customers.vue    | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/customers/Customers.vue b/frontend/src/components/customers/Customers.vue
index 085006b..d7f782c 100644
--- a/frontend/src/components/customers/Customers.vue
+++ b/frontend/src/components/customers/Customers.vue
@@ -1,5 +1,17 @@
 <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>
     <div>
       <form @submit.prevent="addCustomer">
@@ -20,7 +32,7 @@
 
       <tr v-for="customer in customers" :key="customer.url">
         <td>
-          <a href="#">{{ customer.name }}</a>
+          <a href="#" @click="showDetails(customer)">{{ customer.name }}</a>
         </td>
         <td><a :href="customer.url">Nets</a></td>
         <td><a :href="customer.url">Computers</a></td>
@@ -34,23 +46,25 @@
       </tr>
     </table>
   </div>
-  <div v-if="addCustomerDialogVisible">
-    <add-customer @created-customer="closeDialog"></add-customer>
-  </div>
 </template>
 
 <script>
 import getAPI from "../scripts/axios-api";
 import AddCustomer from "./AddCustomer.vue";
+import CustomerDetails from "./CustomerDetails.vue";
 
 export default {
   components: {
     AddCustomer,
+    CustomerDetails,
   },
   data() {
     return {
       customers: [],
       addCustomerDialogVisible: false,
+      showCustomerDetails: false,
+      customerName: "",
+      customerDescription: "",
     };
   },
   methods: {
@@ -73,6 +87,14 @@ export default {
       this.customers.unshift(customer);
       this.addCustomerDialogVisible = false;
     },
+    showDetails(customer) {
+      this.customerName = customer.name;
+      this.customerDescription = customer.description;
+      this.showCustomerDetails = true;
+    },
+    hideDetails() {
+      this.showCustomerDetails = false;
+    },
   },
   created() {
     getAPI