Modal ze zmianami

src/components/ChangesModal.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="changes-modal">
+    <transition name="modal-anim">
+      <div class="content g-card" v-if="store.changesResponse.length > 0">
+        <h2>Wprowadzone zmiany</h2>
+        <div>
+          <ul class="changelog">
+            <li v-for="change in store.changesResponse">{{ change }}</li>
+          </ul>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  top: 0;
+  transform: translateX(-50%);
+
+  max-width: 450px;
+}
+
+ul.changelog {
+  list-style: square;
+}
+
+// Vue transition animations
+.modal-anim {
+  &-leave-active,
+  &-enter-active {
+    transition: all 100ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -30px);
+    opacity: 0.25;
+  }
+}
+</style>

src/components/PopUpCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-dimmer"></div>
-  <div class="popup-card">
+  <div class="g-card popup-card">
     <div class="card_content">
       <p>{{ store.alertMessage || store.confirmMessage }}</p>
     </div>
@@ -56,24 +56,6 @@ export default defineComponent({
 
   background-color: #0000004f;
 }
-.popup-card {
-  position: fixed;
-  z-index: 999;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  width: 80%;
-  max-width: 350px;
-
-  padding: 0.5em 1em;
-  margin-top: 1em;
-
-  font-size: 1.35em;
-
-  background-color: #2a2a2a;
-  box-shadow: 2px 0 10px 2px #1f1f1f;
-}
 
 .card_content {
   text-align: center;

src/components/TableActions.vue

@@ -132,9 +132,8 @@ export default defineComponent({
           }
         );
 
-        console.log(response.data);
+        this.store.changesResponse = response.data;
 
-        alert('Zapisano do bazy!');
         this.loadData();
       } catch (error) {
         this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';