frontend move Customers to a subfolder
This commit is contained in:
Andreas Zweili
parent
64fb1b79f9
commit
218a7c1b4c
|
|
@ -1,32 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
<customer></customer>
|
||||
<the-footer></the-footer>
|
||||
</div>
|
||||
<div>
|
||||
<customer></customer>
|
||||
<the-footer></the-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheFooter from "./components/UI/TheFooter.vue";
|
||||
import Customer from "./components/Customers.vue";
|
||||
import Customer from "./components/customers/Customers.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TheFooter,
|
||||
Customer,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
TheFooter,
|
||||
Customer,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<header><h1>List of Customers</h1></header>
|
||||
<div>
|
||||
<form action="/create/customer/">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getAPI from "./scripts/axios-api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
deleteCustomer(url){
|
||||
getAPI.delete(url)
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
this.customers = this.customers.filter(customer => customer.url !== url)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
getAPI
|
||||
.get("/customers/")
|
||||
.then((response) => {
|
||||
console.log("Post API has recieved data");
|
||||
this.customers = response.data.results;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template> </template>
|
||||
|
||||
<script>
|
||||
import getAPI from "../scripts/axios-api";
|
||||
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getAPI from "../scripts/axios-api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
deleteCustomer(url) {
|
||||
getAPI
|
||||
.delete(url)
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
this.customers = this.customers.filter(
|
||||
(customer) => customer.url !== url
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
getAPI
|
||||
.get("/customers/")
|
||||
.then((response) => {
|
||||
console.log("Post API has recieved data");
|
||||
this.customers = response.data.results;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue