From 613ea20bb7c4e93c1978470fd7f284f4b00cc4a7 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Wed, 20 Dec 2023 17:29:02 +0300
Subject: [PATCH] added logic for notification

---
 .../NotiicationwindowComponent.vue             | 18 ++++++++----------
 luckydiamond/src/pages/ProfilePage.vue         | 12 ++++++++++--
 2 files changed, 18 insertions(+), 12 deletions(-)
 rename luckydiamond/src/components/{archive => }/NotiicationwindowComponent.vue (50%)

diff --git a/luckydiamond/src/components/archive/NotiicationwindowComponent.vue b/luckydiamond/src/components/NotiicationwindowComponent.vue
similarity index 50%
rename from luckydiamond/src/components/archive/NotiicationwindowComponent.vue
rename to luckydiamond/src/components/NotiicationwindowComponent.vue
index 84f7e48..0416cc7 100644
--- a/luckydiamond/src/components/archive/NotiicationwindowComponent.vue
+++ b/luckydiamond/src/components/NotiicationwindowComponent.vue
@@ -1,11 +1,9 @@
 <template>
-  <transition name="fade">
-    <div class="notification" v-if="isAnimationOn">
-      <div class="notification__content">
-        <h3>Анимации выключены</h3>
-      </div>
+  <div class="notification" v-if="notification">
+    <div class="notification__content">
+      <h3>Успешное пополнение</h3>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>
@@ -13,18 +11,18 @@ import '@/assets/css/ComponentsStyles/notification.css'
 
 export default {
   props: {
-    isAnimationOn: Boolean
+    notification: Boolean
   },
-  emits: ['animationchange'],
+  emits: ['notificationremove'],
   methods: {
     NotificationsTimer() {
       setTimeout(() => {
-        this.$emit('animationchange', false)
+        this.$emit('notificationremove')
       }, 4000)
     }
   },
   watch: {
-    isAnimationOn(newVal, oldVal) {
+    notification(newVal, oldVal) {
       if (newVal !== oldVal) {
         this.NotificationsTimer()
       }
diff --git a/luckydiamond/src/pages/ProfilePage.vue b/luckydiamond/src/pages/ProfilePage.vue
index 3a276ce..045fae6 100644
--- a/luckydiamond/src/pages/ProfilePage.vue
+++ b/luckydiamond/src/pages/ProfilePage.vue
@@ -49,7 +49,8 @@
       </div>
     </div>
   </section>
-    <payments-modal v-if="openModal" @notifacetionmoney="notification = true" @closemodal="openModal = false" :payments="payments"></payments-modal>
+    <payments-modal v-if="openModal" @notifacetionmoney="NotificationMethod" @closemodal="openModal = false" :payments="payments"></payments-modal>
+    <notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
   </div>
 </template>
 
@@ -59,12 +60,14 @@ import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import PaymentsModal from "@/components/PaymentsModal.vue";
 import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
+import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
+
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import '@/assets/css/PagesStyles/profile.css'
 import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
 
 export default {
-  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal },
+  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
   data() {
     return {
       username: 'Artemka',
@@ -77,6 +80,7 @@ export default {
       arrayHistory: [],
     }
   },
+  emits: ['notificationremove'],
   mounted() {
     this.checkWindowSize()
 
@@ -108,6 +112,10 @@ export default {
       this.openModal = true
       this.payments = false
     },
+    NotificationMethod() {
+      this.notification = !this.notification
+      this.openModal = false
+    }
     // formatNumber(number) {
     //   return number < 10 ? `0${number}` : number;
     // },