Added functionality to select article.

frontend/app/components/article/article.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+
+  let store = useLabelEditorStore();
+</script>
+
+<template>
+  <v-container>
+    <v-card v-if="store.article != null">
+      <v-card-title>{{ store.article.name }}</v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <v-row no-gutters>
+          <v-col cols="2">
+            <v-sheet>
+              BIO:
+            </v-sheet>
+          </v-col>
+          <v-col>
+            <v-sheet>
+              {{ store.article.bio }}
+            </v-sheet>
+          </v-col>
+        </v-row>
+
+        <v-row no-gutters>
+          <v-col cols="2">
+            <v-sheet>
+              Herkunft:
+            </v-sheet>
+          </v-col>
+          <v-col>
+            <v-sheet>
+              {{ store.article.origin }}
+            </v-sheet>
+          </v-col>
+        </v-row>
+
+        <v-row no-gutters>
+          <v-col cols="2">
+            <v-sheet>
+              Varianten:
+            </v-sheet>
+          </v-col>
+          <v-col>
+            <v-sheet>
+              {{ store.article.variants.length }}
+            </v-sheet>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/article/pickArticle.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Article} from "~/types/article";
+
+  let config = useRuntimeConfig();
+  let store = useLabelEditorStore();
+  let dialog: Ref<boolean> = ref<boolean>(false);
+
+  let loading: Ref<boolean> = ref<boolean>(false);
+  let articles: Ref<Article[]> = ref<Article[]>([]);
+  let selectedArticle: Ref<Article | null> = ref<Article | null>(null);
+
+  watch(dialog, async (oldDialog) => {
+    if (oldDialog) {
+      console.log("Get articles");
+      articles.value = await loadArticles();
+      console.log("Got articles");
+    }
+  })
+
+  async function loadArticles(): Promise<Array<Article>> {
+    try {
+      const articles: Array<Article> = await $fetch<Array<Article>>(config.public.url + '/articles', {
+        method: 'GET',
+      });
+
+      return articles;
+    } catch {
+      return [];
+    }
+  }
+
+  async function getSelected() {
+    if (selectedArticle.value != null) {
+      loading.value = true;
+      const articleID: number = selectedArticle.value.id;
+
+      await store.loadArticle(articleID);
+
+      loading.value = false;
+      dialog.value = false;
+    }
+  }
+
+  function closeDialog() {
+    clearVariables();
+
+    dialog.value = false;
+  }
+
+  function clearVariables() {
+    selectedArticle.value = null;
+    loading.value = false;
+  }
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="500"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+      >
+        <v-icon>mdi-magnify</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Artikel auswählen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-magnify
+        </v-icon>
+
+        Artikel auswählen
+
+        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <v-autocomplete
+            v-model="selectedArticle"
+            :items="articles"
+            label="Artikel"
+            item-title="name"
+            :disabled="loading"
+            :clearable="true"
+            :autofocus="true"
+            :return-object="true"
+            :auto-select-first="true"
+            :open-on-clear="true"
+            no-data-text="Keine Artikel angelegt"
+            @keyup.enter="getSelected()"
+        ></v-autocomplete>
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Abbrechen
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            :disabled="selectedArticle == null || loading"
+            @click="getSelected();"
+        >
+          Auswählen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/layout/customHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import Notifications from "~/components/notification/notifications.vue";
+  import PickArticle from "~/components/article/pickArticle.vue";
 </script>
 
 <template>
@@ -13,6 +14,8 @@
         :vertical="true"
     />
 
+    <PickArticle/>
+
     <ArticleCreate/>
 
     <v-divider