show changes detected

src/components/queryBuilder/BuilderHost.vue

@@ -30,6 +30,9 @@
         v-if="allowPredefinedSelect && can('read', 'configuration', 'query_store')"
         class="flex flex-row gap-2 max-lg:w-full max-lg:order-10"
       >
+        <div v-if="!isAsStored" class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Änderung erkannt">
+          <DocumentCurrencyRupeeIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
         <select v-model="activeQueryId" class="max-h-[34px] py-0!">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
           <option v-for="query in queries" :key="query.id" :value="query.id">
@@ -88,6 +91,7 @@ import {
   RectangleGroupIcon,
   TrashIcon,
   SparklesIcon,
+  DocumentCurrencyRupeeIcon,
 } from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import { useModalStore } from "@/stores/modal";
@@ -95,6 +99,7 @@ import Table from "./Table.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 import { v4 as uuid } from "uuid";
+import cloneDeep from "lodash.clonedeep";
 </script>
 
 <script lang="ts">
@@ -128,7 +133,7 @@ export default defineComponent({
         } else {
           this.queryMode = "builder";
         }
-        this.value = query;
+        this.value = cloneDeep(query);
       }
     },
     value() {
@@ -156,6 +161,11 @@ export default defineComponent({
         this.$emit("update:model-value", val);
       },
     },
+    isAsStored() {
+      let stored = this.queries.find((q) => q.id == this.activeQueryId);
+      if (!stored) return true;
+      return JSON.stringify(this.value) == JSON.stringify(stored.query);
+    },
   },
   mounted() {
     this.fetchTableMetas();