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 ++++++++++++++++++++------
 day9/task5_vue/src/components/EditFormBox.vue  |  6 ++-
 day9/task5_vue/src/components/PopupMessage.vue | 28 ++++++++++++
 day9/task5_vue/src/components/Table.vue        | 48 ++++++++++----------
 4 files changed, 105 insertions(+), 39 deletions(-)
 create mode 100644 day9/task5_vue/src/components/PopupMessage.vue

(limited to 'day9/task5_vue/src')

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
diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue
index 861a82d..c994656 100644
--- a/day9/task5_vue/src/components/EditFormBox.vue
+++ b/day9/task5_vue/src/components/EditFormBox.vue
@@ -111,7 +111,7 @@
 
     export default {
         name: "EditFormBox",
-        props: ['formType', 'cancelCallback', 'tableRow'],
+        props: ['formType', 'cancelCallback', 'tableRow', 'showPopup'],
 
         data() {
             return {
@@ -178,6 +178,10 @@
                             headers: {'Content-Type': 'application/json'},
                             data: JSON.stringify(formData)
                         })
+                        .then(response => {
+                            this.cancelCallback();
+                            this.showPopup('Database updated successfully');
+                        });
                 }
             }
         }
diff --git a/day9/task5_vue/src/components/PopupMessage.vue b/day9/task5_vue/src/components/PopupMessage.vue
new file mode 100644
index 0000000..a905b4d
--- /dev/null
+++ b/day9/task5_vue/src/components/PopupMessage.vue
@@ -0,0 +1,28 @@
+<template>
+    <div ref="container" class="popupContainer">
+        {{ message }}
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "PopupMessage",
+        props: ['message'],
+    }
+</script>
+
+<style scoped>
+    .popupContainer {
+        background-color: #00ff5e;
+        padding: 30px;
+
+        font-size: 30px;
+        text-align: center;
+
+        position: fixed;
+        bottom: 0;
+
+        left: 0;
+        right: 0;
+    }
+</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 d9296d9..a186277 100644
--- a/day9/task5_vue/src/components/Table.vue
+++ b/day9/task5_vue/src/components/Table.vue
@@ -1,29 +1,29 @@
 <template>
     <table>
-            <thead>
-                <tr>
-                    <th v-for="header in tableData.headers">
-                        {{ header }}
-                    </th>
-                    <th></th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="(row) in tableData.content">
-                    <td>{{ row[0] }}</td>
-                    <td v-for="(column) in row.slice(1)">
-                        {{ column }}
-                    </td>
-                    <td>
-                        <button @click="showEditForm(`${row[0]}`)">&#9998</button>
-                    </td>
-                    <td>
-                        <button @click="removeField(`${row[0]}`)">&#10006</button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <thead>
+            <tr>
+                <th v-for="header in tableData.headers">
+                    {{ header }}
+                </th>
+                <th></th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(row) in tableData.content">
+                <td>{{ row[0] }}</td>
+                <td v-for="(column) in row.slice(1)">
+                    {{ column }}
+                </td>
+                <td>
+                    <button @click="showEditForm(`${row[0]}`)">&#9998</button>
+                </td>
+                <td>
+                    <button @click="removeField(`${row[0]}`)">&#10006</button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </template>
 
 <script>
-- 
cgit v1.2.3