Redirect to mete to add barcode on click (#14)

Add the option to click on the warning that the barcode is not known, so
that we can directly add it in mete.

To achieve this I added the `url` prop to `Mete.vue`.

NOTE: I had to cast `this.$root` to any - if you have better ideas
please share!

I assume this is quite hacky - nicer approaches welcome.

And help wanted to fix the checks 🙃 

To test this add `this.addFromBarcode('asdf?!<');` to `Register.vue`'s
`mounted` function.

src/App.vue

@@ -26,7 +26,7 @@
     <el-main v-if="!mete">
       <Register ref="register" />
     </el-main>
-    <Mete v-if="mete" />
+    <Mete v-if="mete" :url='meteUrl' />
   </el-container>
 </template>
 
@@ -49,6 +49,7 @@ export default defineComponent({
     return {
       menu: false,
       mete: false,
+      meteUrl: '/mete',
       storno: false,
     };
   },
@@ -85,6 +86,14 @@ export default defineComponent({
     goMete($event: Event) {
       $event.preventDefault();
 
+      this.meteUrl = '/mete';
+      this.menu = false;
+      this.mete = true;
+    },
+    addNewBarCode($event: Event, barcode: string) {
+      $event.preventDefault();
+
+      this.meteUrl = '/mete/barcodes/new?id=' + encodeURIComponent(barcode);
       this.menu = false;
       this.mete = true;
     },

src/components/Mete.vue

@@ -1,11 +1,17 @@
 <template>
-  <iframe ref="mete" class="meteframe" src="/mete" />
+  <iframe ref="mete" class="meteframe" :src="url" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "Mete",
+  props: {
+    url: {
+      type: String,
+      required: true,
+    }
+  }
 });
 </script>

src/components/Register.vue

@@ -121,8 +121,9 @@ export default defineComponent({
       } else {
         notify({
           title: "Unbekannter Barcode!",
-          message: `Bitte den Barcode ${barcode} im Administrationsbereich hinterlegen!`,
+          message: `Klicke hier um den Barcode ${barcode} im Administrationsbereich zu hinterlegen!`,
           type: "warning",
+          onClick:($event: Event) => { (this.$root as any)?.addNewBarCode($event, barcode); }
         });
       }
     },