remodel scan process and visualize external

src/components/scanner/ManageScanModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <XMarkIcon class="ml-auto mb-2 w-5 h-5 cursor-pointer" @click="closeModal" />
+    <div class="w-full flex flex-row justify-center items-stretch" :class="{ 'max-md:hidden': activeTab == 'self' }">
+      <div v-for="tab in tabs" :key="tab.type" class="w-1/2 p-0.5 first:pl-0 last:pr-0" @click="activeTab = tab.type">
+        <p
+          :class="[
+            'flex w-full h-full items-center justify-center rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+            activeTab == tab.type
+              ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+              : ' hover:bg-red-200',
+          ]"
+        >
+          {{ tab.title }}
+        </p>
+      </div>
+    </div>
+    <Scanner v-if="activeTab == 'self'" @code="(c) => commit(c)" />
+    <Phone v-else @code="(c) => commit(c)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import Scanner from "./Scanner.vue";
+import Phone from "./Phone.vue";
+import { useScannerStore } from "../../stores/admin/scanner";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    callback: {
+      type: Function,
+      default: (result: string) => {},
+    },
+  },
+  data() {
+    return {
+      activeTab: "self" as "self" | "phone",
+      tabs: [
+        { type: "self", title: "Scanner" },
+        { type: "phone", title: "Smartphone" },
+      ] as Array<{ type: "self" | "phone"; title: string }>,
+    };
+  },
+  computed: {
+    ...mapState(useScannerStore, ["inUse"]),
+  },
+  mounted() {
+    if (this.inUse) this.activeTab = "phone";
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    commit(code: string) {
+      this.callback(code);
+      this.closeModal();
+    },
+  },
+});
+</script>