Modal ze zmianami

src/App.vue

@@ -84,5 +84,45 @@ button:hover {
 button:focus-within {
   border: 1px solid gold;
 }
+
+// Card modal
+.g-card {
+  position: fixed;
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 90vw;
+  max-width: 350px;
+
+  padding: 0.5em 1em;
+  margin-top: 1em;
+
+  background-color: #2e2e2e;
+  box-shadow: 0 0 6px 1px #131313;
+}
+
+// Scrollbar
+/* width */
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
 </style>
 

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!';

src/store.ts

@@ -22,5 +22,7 @@ export const useStore = defineStore('store', {
       notifyDiscord: true,
       alertMessage: '',
       confirmMessage: '',
+
+      changesResponse: []
     } as IStore),
 });

src/types/types.ts

@@ -35,4 +35,6 @@ export interface IStore {
   notifyDiscord: boolean;
   alertMessage: string;
   confirmMessage: string;
+
+  changesResponse: string[];
 }