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

4 files changed, 57 insertions, 55 deletions

diff --git a/day9/task5_vue/src/components/AddNewEntryButton.vue b/day9/task5_vue/src/components/AddNewEntryButton.vue
index fa52f8b..dc86907 100644
--- a/day9/task5_vue/src/components/AddNewEntryButton.vue
+++ b/day9/task5_vue/src/components/AddNewEntryButton.vue
@@ -2,7 +2,7 @@
     <button
             @mouseenter="isHovered = true"
             @mouseleave="isHovered = false"
-            @click="showCreateForm">
+            @click="showForm">
         <div v-if="isHovered">Add new entry</div>
         <div v-else>+</div>
     </button>
@@ -13,17 +13,24 @@
 
     export default {
         name: "AddNewEntryButton",
+        props: ['showFormCallback'],
         components: {EditFormBox},
 
         data() {
             return {
-                isHovered: false
+                isHovered: false,
             }
         },
 
         methods: {
-            showCreateForm() {
-
+            showForm() {
+                this.showFormCallback('create', {
+                    service_id: '', servtype: '', subtype: '',
+                    user_id: '', referrer_user_id: '', state: '',
+                    creation_date: '', creation_time: '',
+                    creation_request_sent_date: '',
+                    notified_about_expiration: ''
+                })
             }
         }
     }
diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue
index 53bfd8b..389b549 100644
--- a/day9/task5_vue/src/components/EditFormBox.vue
+++ b/day9/task5_vue/src/components/EditFormBox.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="backgroundTint shown">
         <div class="contentBox shown">
-            <form id="tableForm" action="/api/update" method="post">
+            <form ref="tableForm" action="/api/actionNotChanged" method="post">
                 <div class="formRow">
                     <div class="formRow-label">service_id</div>
 
@@ -88,13 +88,11 @@
                     </div>
                 </div>
 
-                <div class="formButtons" v-if="formType === 'update'">
+                <div class="formButtons">
                     <button type="button" @click="cancelCallback">Cancel</button>
-                    <button type="submit">Update</button>
-                </div>
-                <div class="formButtons" v-else-if="formType === 'create'">
-                    <button type="button">Cancel</button>
-                    <button type="submit">Create</button>
+
+                    <button type="submit" v-if="formType === 'update'">Update</button>
+                    <button type="submit" v-else-if="formType === 'create'">Create</button>
                 </div>
             </form>
         </div>
@@ -106,14 +104,12 @@
         name: "EditFormBox",
         props: ['formType', 'cancelCallback', 'tableRow'],
 
-        data() {
-            return {
-                row: this.tableRow
-            }
-        },
-
         mounted() {
-            console.log(this.row);
+            let action = '';
+            if (this.formType === 'create') action = '/api/add';
+            else if (this.formType === 'update') action = '/api/update';
+
+            this.$refs.tableForm.action = action;
         }
     }
 </script>
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
diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue
index f544088..96f3576 100644
--- a/day9/task5_vue/src/components/UploadFileButton.vue
+++ b/day9/task5_vue/src/components/UploadFileButton.vue
@@ -30,8 +30,6 @@
 
         methods: {
             triggerUploadFile() {
-                console.log('Clicked');
-                console.log(this.$refs.csvFileInput);
                 this.$refs.csvFileInput.click();
             }
         }