41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<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>
|