frontend move Customers to a subfolder
This commit is contained in:
parent
64fb1b79f9
commit
218a7c1b4c
|
@ -1,32 +1,32 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<customer></customer>
|
<customer></customer>
|
||||||
<the-footer></the-footer>
|
<the-footer></the-footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TheFooter from "./components/UI/TheFooter.vue";
|
import TheFooter from "./components/UI/TheFooter.vue";
|
||||||
import Customer from "./components/Customers.vue";
|
import Customer from "./components/customers/Customers.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
TheFooter,
|
TheFooter,
|
||||||
Customer,
|
Customer,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
</style>
|
</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