3 files changed, 26 insertions, 9 deletions

diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue
index 42bb3c6..276dbbe 100644
--- a/day9/task5_vue/src/components/EditFormBox.vue
+++ b/day9/task5_vue/src/components/EditFormBox.vue
@@ -170,7 +170,7 @@
                         })
                         .then(response => {
                             this.$emit('close-form');
-                            this.$emit('show-popup', 'Database updated successfully');
+                            this.$emit('show-popup', {'type': 'success', 'meg': 'Database updated successfully'});
                         });
                 }
             }
diff --git a/day9/task5_vue/src/components/PopupMessage.vue b/day9/task5_vue/src/components/PopupMessage.vue
index a905b4d..90e28da 100644
--- a/day9/task5_vue/src/components/PopupMessage.vue
+++ b/day9/task5_vue/src/components/PopupMessage.vue
@@ -1,19 +1,23 @@
 <template>
-    <div ref="container" class="popupContainer">
-        {{ message }}
+    <div
+            ref="container" class="popupContainer"
+            v-bind:class="{
+                'type-success': data.type === 'success',
+                'type-failure': data.type === 'failure'
+            }">
+        {{ data.msg }}
     </div>
 </template>
 
 <script>
     export default {
         name: "PopupMessage",
-        props: ['message'],
+        props: ['message', 'data'],
     }
 </script>
 
 <style scoped>
     .popupContainer {
-        background-color: #00ff5e;
         padding: 30px;
 
         font-size: 30px;
@@ -25,4 +29,12 @@
         left: 0;
         right: 0;
     }
+
+    .type-success {
+        background-color: #00ff5e;
+    }
+
+    .type-failure {
+        background-color: #ff002d;
+    }
 </style>
\ No newline at end of file
diff --git a/day9/task5_vue/src/components/Table.vue b/day9/task5_vue/src/components/Table.vue
index 97bc24d..d94afe2 100644
--- a/day9/task5_vue/src/components/Table.vue
+++ b/day9/task5_vue/src/components/Table.vue
@@ -50,15 +50,20 @@
             },
 
             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}
+                        data: {'service_id': parseInt(serviceId)}
                     })
                     .then(response => {
-                        if (response.status === 200)
-                            this.tableData = this.tableData.content.filter(row => row[0] !== serviceId);
+                        if (response.status === 200) {
+                            let err = response.data.error;
+
+                            if (err) this.$emit('show-popup', {'type': 'failure', 'msg': response.data.service_id});
+                            else this.tableData.content = this.tableData.content.filter(row => row[0].toString() !== serviceId);
+
+                        }
+
                     });
             }