diff options
Diffstat (limited to 'day9/task5_vue/src/components/Table.vue')
| -rw-r--r-- | day9/task5_vue/src/components/Table.vue | 71 |
1 files changed, 36 insertions, 35 deletions
diff --git a/day9/task5_vue/src/components/Table.vue b/day9/task5_vue/src/components/Table.vue index 519af25..d9296d9 100644 --- a/day9/task5_vue/src/components/Table.vue +++ b/day9/task5_vue/src/components/Table.vue @@ -1,12 +1,5 @@ <template> - <div> - <EditFormBox - v-bind:form-type="formType" - v-bind:cancel-callback="hideEditForm" - v-bind:table-row="tableRow" - v-if="isFormShown" - /> - <table id="vueTable"> + <table> <thead> <tr> <th v-for="header in tableData.headers"> @@ -26,12 +19,11 @@ <button @click="showEditForm(`${row[0]}`)">✎</button> </td> <td> - <button @click="showEditForm(`${row[0]}`)">✖</button> + <button @click="removeField(`${row[0]}`)">✖</button> </td> </tr> </tbody> </table> - </div> </template> <script> @@ -40,40 +32,36 @@ export default { name: "Table", - props: ['tableData'], + props: ['tableData', 'showFormCallback'], components: {EditFormBox}, - data() { - return { - formType: null, - isFormShown: false, - tableRow: null - } - }, - methods: { showEditForm(serviceId) { - this.requestRowById(serviceId) + axios + .request({ + url: '/api/get/', + method: 'post', + headers: {'Content-Type': 'application/json'}, + data: JSON.stringify({'type': 'single_id', 'service_id': serviceId}) + }) .then(response => { - this.tableRow = response.data; - this.formType = 'update'; - this.isFormShown = true; + this.showFormCallback('update', response.data); }); }, - hideEditForm() { - this.formType = null; - this.isFormShown = false; - }, - - requestRowById(serviceId) { - return axios.request({ - url: '/api/get/', - method: 'post', - headers: {'Content-Type': 'application/json'}, - data: JSON.stringify({'type': 'single_id', 'service_id': serviceId}) - }) + removeField(serviceId) { + this.tableData.content = this.tableData.content.filter(row => row[0].toString() !== serviceId); + axios + .request({ + url: '/api/delete', method: 'post', + data: {'service_id': serviceId} + }) + .then(response => { + if (response.status === 200) + this.tableData = this.tableData.content.filter(row => row[0] !== serviceId); + }); } + } } </script> @@ -103,4 +91,17 @@ tbody > tr:nth-child(2n) { background-color: #f8f6ff; } + + button { + border: none; + border-radius: 2px; + } + + button:hover { + background-color: #dadada; + } + + button:focus { + background-color: #d5d5d5; + } </style>
\ No newline at end of file |