add a AddCustomer components

frontend/src/components/customers/AddCustomer.vue

@@ -1,9 +1,61 @@
-<template> </template>
+<template>
+  <dialog open>
+    <header><h1>Add Customer</h1></header>
+    <form @submit.prevent="addCustomer">
+      <label for="customer-name">Name</label>
+      <input type="text" v-model.trim="customerName" id="customer-name" />
+      <label id="customer-description">Description</label>
+      <textarea
+        v-model="customerDescription"
+        id="customer-description"
+      ></textarea>
+      <div v-if="errorMessage">
+        <p>You need to fill out both inputs.</p>
+      </div>
+      <button>Save</button>
+    </form>
+  </dialog>
+</template>
 
 <script>
 import getAPI from "../scripts/axios-api";
 
-export default {};
+export default {
+  emits: ["created-customer"],
+  data() {
+    return {
+      customerName: "",
+      customerDescription: "",
+      errorMessage: false,
+    };
+  },
+
+  methods: {
+    validateInput() {
+      if (this.customerName === "") {
+        this.errorMessage = true;
+        return false;
+      } else {
+        return true;
+      }
+    },
+    addCustomer() {
+      if (this.validateInput()) {
+        getAPI
+          .post("/customers/", {
+            name: this.customerName,
+            description: this.customerDescription,
+          })
+          .then(function(response) {
+            this.$emit("close", response.data);
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      }
+    },
+  },
+};
 </script>
 
 <style></style>

frontend/src/components/customers/Customers.vue

@@ -1,46 +1,56 @@
 <template>
-  <header><h1>List of Customers</h1></header>
-  <div>
-    <form @submit.prevent="addCustomer">
-      <input type="submit" value="Add Customer" class="btn btn-primary" />
-    </form>
-  </div>
-  <table class="table table-hover table-bordered">
-    <tr>
-      <th class="orderable">Name</th>
-      <th>Nets</th>
-      <th>Computers</th>
-      <th>Devices</th>
-      <th>Backups</th>
-      <th>Licenses</th>
-      <th>Users</th>
-      <th>Actions</th>
-    </tr>
+  <div v-if="!addCustomerDialogVisible">
+    <header><h1>List of Customers</h1></header>
+    <div>
+      <form @submit.prevent="addCustomer">
+        <button>Add Customer</button>
+      </form>
+    </div>
+    <table class="table table-hover table-bordered">
+      <tr>
+        <th class="orderable">Name</th>
+        <th>Nets</th>
+        <th>Computers</th>
+        <th>Devices</th>
+        <th>Backups</th>
+        <th>Licenses</th>
+        <th>Users</th>
+        <th>Actions</th>
+      </tr>
 
-    <tr v-for="customer in customers" :key="customer.id">
-      <td>
-        <a href="">{{ customer.name }}</a>
-      </td>
-      <td><a :href="customer.url">Nets</a></td>
-      <td><a :href="customer.url">Computers</a></td>
-      <td><a :href="customer.url">Devices</a></td>
-      <td><a :href="customer.url">Backups</a></td>
-      <td><a :href="customer.url">Licenses</a></td>
-      <td><a :href="customer.url">Users</a></td>
-      <td>
-        <a href="#" @click="deleteCustomer(customer.url)">delete</a>
-      </td>
-    </tr>
-  </table>
+      <tr v-for="customer in customers" :key="customer.id">
+        <td>
+          <a href="">{{ customer.name }}</a>
+        </td>
+        <td><a :href="customer.url">Nets</a></td>
+        <td><a :href="customer.url">Computers</a></td>
+        <td><a :href="customer.url">Devices</a></td>
+        <td><a :href="customer.url">Backups</a></td>
+        <td><a :href="customer.url">Licenses</a></td>
+        <td><a :href="customer.url">Users</a></td>
+        <td>
+          <a href="#" @click="deleteCustomer(customer.url)">delete</a>
+        </td>
+      </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";
 
 export default {
+  components: {
+    AddCustomer,
+  },
   data() {
     return {
       customers: [],
+      addCustomerDialogVisible: false,
     };
   },
   methods: {
@@ -56,6 +66,13 @@ export default {
           console.log(err);
         });
     },
+    addCustomer() {
+      this.addCustomerDialogVisible = true;
+    },
+    closeDialog(customer) {
+      this.customers.push(customer);
+      this.addCustomerDialogVisible = false;
+    },
   },
   created() {
     getAPI