remodel scan process and visualize external

src/components/scanner/ScanResultsModal.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-col items-center w-full md:max-w-md h-[455px] overflow-hidden">
+    <div class="w-full flex flex-row items-center justify-between">
+      <p>Scan-Ergebnisse</p>
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="closeModal" />
+    </div>
+
+    <br />
+    <div class="w-full grow flex flex-col gap-2 overflow-y-scroll pr-2">
+      <div
+        v-for="i in results"
+        :key="i"
+        class="h-10 w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-medium rounded-md text-white bg-primary"
+      >
+        <p class="grow select-text">{{ i }}</p>
+        <TrashIcon class="w-5 h-5 cursor-pointer" @click="() => removeElementFromResults(i)" />
+      </div>
+      <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { TrashIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["results"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useScannerStore, ["removeElementFromResults"]),
+  },
+});
+</script>