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

6 files changed, 90 insertions, 64 deletions

diff --git a/day9/task5_vue/backend_serve.py b/day9/task5_vue/backend_serve.py
index abcbb2b..7aa89ef 100644
--- a/day9/task5_vue/backend_serve.py
+++ b/day9/task5_vue/backend_serve.py
@@ -29,7 +29,7 @@ def return_static(query, *args):
             return ErrorResponse(404)
 
 
-@route('/api/upload', ['POST'])
+@route('/api/upload/?', ['POST'])
 def upload_file(query, *args):
     base_html = '<a href="/">Return to main page</a><br>%s'
 
@@ -77,7 +77,7 @@ def upload_file(query, *args):
     return HtmlResponse(base_html % '<h1>File uploaded</h1>')
 
 
-@route('/api/update', ['POST'])
+@route('/api/update/?', ['POST'])
 def update_post(query, *args):
     print(query)
     service_id = query['service_id']
@@ -98,7 +98,7 @@ def update_post(query, *args):
     return HtmlResponse('<a href="/">Return to main page</a><br><h1>Database Updated</h1>')
 
 
-@route('/api/delete', ['POST'])
+@route('/api/delete/?', ['POST'])
 def delete_post(query, *args):
     service_id = query['service_id']
     cursor = db.cursor()
@@ -107,7 +107,7 @@ def delete_post(query, *args):
     return HtmlResponse('<a href="/">Return to main page</a><br><h1>Database Updated</h1>')
 
 
-@route('/api/add', ['POST'])
+@route('/api/add/?', ['POST'])
 def add_post(query, *args):
     header_fields = db_column_names()
     headers = []
diff --git a/day9/task5_vue/src/App.vue b/day9/task5_vue/src/App.vue
index 3ce2035..2af8b20 100644
--- a/day9/task5_vue/src/App.vue
+++ b/day9/task5_vue/src/App.vue
@@ -1,12 +1,19 @@
 <template>
     <div>
-        <Table v-bind:table-data="tableData"/>
-        <UploadFileButton/>
-        <AddNewEntryButton/>
+        <EditFormBox
+                v-bind:form-type="formType"
+                v-bind:cancel-callback="hideForm"
+                v-bind:table-row="formData"
+                v-if="isFormShown"
+        />
+        <Table v-bind:table-data="tableData" v-bind:show-form-callback="showForm"/>
+        <UploadFileButton v-if="!isFormShown"/>
+        <AddNewEntryButton v-if="!isFormShown" v-bind:show-form-callback="showForm"/>
     </div>
 </template>
 
 <script>
+    import EditFormBox from "./components/EditFormBox.vue";
     import Table from "./components/Table.vue";
     import UploadFileButton from "./components/UploadFileButton.vue";
     import AddNewEntryButton from './components/AddNewEntryButton.vue';
@@ -14,11 +21,14 @@
 
     export default {
         name: "App",
-        components: {Table, UploadFileButton, AddNewEntryButton},
+        components: {EditFormBox, Table, UploadFileButton, AddNewEntryButton},
 
         data() {
             return {
-                tableData: []
+                tableData: [],
+                formType: null,
+                formData: null,
+                isFormShown: false
             }
         },
 
@@ -33,6 +43,20 @@
                 .then(response => {
                     this.tableData = response.data;
                 })
+        },
+
+        methods: {
+            showForm(formType, formData) {
+                this.formType = formType;
+                this.formData = formData;
+                this.isFormShown = true;
+            },
+
+            hideForm() {
+                this.formType = null;
+                this.formData = null;
+                this.isFormShown = false;
+            }
         }
     }
 </script>
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();
             }
         }