From 38055bcd23527a36d77468ce2dfd0b4766e7fc00 Mon Sep 17 00:00:00 2001
From: Andrew <saintruler@gmail.com>
Date: Tue, 23 Jul 2019 12:26:38 +0400
Subject: =?UTF-8?q?=D0=91=D1=8D=D0=BA=D0=B5=D0=BD=D0=B4:=20=D0=94=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=82=D0=B5=D1=81?=
 =?UTF-8?q?=D1=82=D1=8B,=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=B2=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B0=D1=85=20=D0=B8=20=D0=BF=D0=BE=D0=BB=D1=8F=D1=85=20=D1=81?=
 =?UTF-8?q?=D1=85=D0=B5=D0=BC=20=D0=B1=D0=B0=D0=B7=20=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D1=85.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Фронтенд:
Добавлен компонент для показа всплывающих сообщений.
---
 day9/task5_vue/src/App.vue | 62 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 14 deletions(-)

(limited to 'day9/task5_vue/src/App.vue')

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
-- 
cgit v1.2.3

