From 1e520e72037c7edda00e9e3905e6d1462d24de57 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 25 Jan 2021 21:00:08 +0100
Subject: [PATCH] add a minimal working example

---
 backend/customers/views.py            |  2 +-
 frontend/src/App.vue                  | 16 +++++-------
 frontend/src/axios-api.js             |  8 ++++++
 frontend/src/components/Customers.vue | 37 +++++++++++++++++++++++++++
 frontend/src/main.js                  | 12 ++++++---
 frontend/src/routes.js                | 16 ++++++++++++
 6 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/axios-api.js
 create mode 100644 frontend/src/components/Customers.vue
 create mode 100644 frontend/src/routes.js

diff --git a/backend/customers/views.py b/backend/customers/views.py
index 02a5751..5e7fae8 100644
--- a/backend/customers/views.py
+++ b/backend/customers/views.py
@@ -27,7 +27,7 @@ class CustomerViewSet(viewsets.ModelViewSet):
     """
     queryset = Customer.objects.all()
     serializer_class = CustomerSerializer
-    permission_classes = [permissions.IsAuthenticated]
+    # permission_classes = [permissions.IsAuthenticated]
 
 
 class DeviceManufacturerViewSet(viewsets.ModelViewSet):
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index aa1197b..3e7b630 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,15 +1,13 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
+    <div>
+        <customer></customer>
+    </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+    data() {
+        return {};
+    },
+};
 </script>
diff --git a/frontend/src/axios-api.js b/frontend/src/axios-api.js
new file mode 100644
index 0000000..4f5b6c7
--- /dev/null
+++ b/frontend/src/axios-api.js
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const getAPI = axios.create({
+    baseURL: "http://localhost:8000/api/",
+    timeout: 1000,
+});
+
+export { getAPI };
diff --git a/frontend/src/components/Customers.vue b/frontend/src/components/Customers.vue
new file mode 100644
index 0000000..125c6ce
--- /dev/null
+++ b/frontend/src/components/Customers.vue
@@ -0,0 +1,37 @@
+<template>
+    <table>
+        <tr>
+            <th>Customer</th>
+            <th>Description</th>
+        </tr>
+        <tr v-for="customer in customers" :key="customer.id">
+            <td>
+                {{ customer.name }}
+            </td>
+            <td>{{ customer.description }}</td>
+        </tr>
+    </table>
+</template>
+
+<script>
+import { getAPI } from "../axios-api";
+
+export default {
+    data() {
+        return {
+            customers: [],
+        };
+    },
+    created() {
+        getAPI
+            .get("/customers/")
+            .then((response) => {
+                console.log("Post API has recieved data");
+                this.customers = response.data.results;
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    },
+};
+</script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 50a4dab..806e5b7 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,9 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './index.css'
+import { createApp } from "vue";
 
-createApp(App).mount('#app')
+import App from "./App.vue";
+import Customer from "./components/Customers.vue";
+import "./index.css";
+
+const app = createApp(App);
+app.component("customer", Customer);
+app.mount("#app");
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
new file mode 100644
index 0000000..a2d397f
--- /dev/null
+++ b/frontend/src/routes.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Customers from './views/Customers'
+
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+    history: 'history',
+    base: process.env.BASE_URL,
+    routes: [{
+        path: '/',
+        name: 'customers',
+        component: Customers,
+    }, ]
+})