Кнопка удаления ряда теперь действительно работает.

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]}`)">&#9998</button>
                     </td>
                     <td>
-                        <button @click="showEditForm(`${row[0]}`)">&#10006</button>
+                        <button @click="removeField(`${row[0]}`)">&#10006</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