1 files changed, 48 insertions, 14 deletions

diff --git a/day9/task5_vue/src/App.vue b/day9/task5_vue/src/App.vue
index 2af8b20..8def105 100644
--- a/day9/task5_vue/src/App.vue
+++ b/day9/task5_vue/src/App.vue
@@ -2,13 +2,18 @@
     <div>
         <EditFormBox
                 v-bind:form-type="formType"
-                v-bind:cancel-callback="hideForm"
                 v-bind:table-row="formData"
+                v-bind:cancel-callback="hideForm"
+                v-bind:show-popup="showPopup"
                 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"/>
+
+        <transition name="fade">
+            <PopupMessage v-if="isPopupShown" v-bind:message="popupMessage"/>
+        </transition>
     </div>
 </template>
 
@@ -17,35 +22,57 @@
     import Table from "./components/Table.vue";
     import UploadFileButton from "./components/UploadFileButton.vue";
     import AddNewEntryButton from './components/AddNewEntryButton.vue';
+    import PopupMessage from './components/PopupMessage.vue'
+
     import axios from 'axios';
 
+
     export default {
         name: "App",
-        components: {EditFormBox, Table, UploadFileButton, AddNewEntryButton},
+        components: {PopupMessage, EditFormBox, Table, UploadFileButton, AddNewEntryButton},
 
         data() {
             return {
                 tableData: [],
                 formType: null,
                 formData: null,
-                isFormShown: false
+                isFormShown: false,
+
+                isPopupShown: false,
+                popupMessage: '',
             }
         },
 
         mounted() {
-            axios
-                .request({
-                    url: '/api/get/',
-                    method: 'post',
-                    headers: {'Content-Type': 'application/json'},
-                    data: JSON.stringify({'type': 'full'})
-                })
-                .then(response => {
-                    this.tableData = response.data;
-                })
+            this.updateTable();
         },
 
         methods: {
+            updateTable() {
+                axios
+                    .request({
+                        url: '/api/get/',
+                        method: 'post',
+                        headers: {'Content-Type': 'application/json'},
+                        data: JSON.stringify({'type': 'full'})
+                    })
+                    .then(response => {
+                        this.tableData = response.data;
+                    })
+            },
+
+            showPopup(message) {
+                if (!this.isPopupShown) {
+                    this.isPopupShown = true;
+                    this.popupMessage = message;
+
+                    setTimeout(() => {
+                        this.isPopupShown = false;
+                        this.popupMessage = '';
+                    }, 2000)
+                }
+            },
+
             showForm(formType, formData) {
                 this.formType = formType;
                 this.formData = formData;
@@ -56,11 +83,18 @@
                 this.formType = null;
                 this.formData = null;
                 this.isFormShown = false;
+
+                this.updateTable()
             }
         }
     }
 </script>
 
 <style scoped>
-
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .5s;
+    }
+    .fade-enter, .fade-leave-to {
+        opacity: 0;
+    }
 </style>
\ No newline at end of file