Added supplier and updated dependencies.

frontend/app/components/layout/customHeader.vue

@@ -14,6 +14,12 @@
         :vertical="true"
     />
 
+    <Supplier/>
+
+    <v-divider
+        :vertical="true"
+    />
+
     <Settings/>
 
     <v-divider

frontend/app/components/supplier/supplier.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import LabelCreate from "~/components/label/labelCreate.vue";
+
+  let store = useLabelEditorStore();
+  let dialog: Ref<boolean> = ref<boolean>(false);
+  let loading: Ref<boolean> = ref<boolean>(false);
+
+  watch(dialog, async (oldDialog) => {
+    if (oldDialog) {
+      loading.value = true;
+
+      await store.loadSuppliers();
+
+      loading.value = false;
+    }
+  })
+
+  function closeDialog() {
+    dialog.value = false;
+  }
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="900"
+      max-height="750"
+      height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          size="small"
+      >
+        <v-icon>mdi-wheel-barrow </v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Lieferanten
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-row style="padding-top: 10px">
+          <v-icon size="small">
+            mdi-label
+          </v-icon>
+
+          Lieferanten
+
+          <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+
+          <v-spacer/>
+          <v-divider vertical/>
+
+          <SupplierCreate/>
+        </v-row>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <SupplierRow
+            v-for="(supplier) in store.suppliers"
+            :key="supplier.id"
+            v-bind:supplier="supplier"
+        />
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Schließen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/supplier/supplierCreate.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import {Supplier} from "~/types/supplier";
+
+  let store = useLabelEditorStore();
+  let dialog: Ref<boolean> = ref<boolean>(false);
+  let loading: Ref<boolean> = ref<boolean>(false);
+
+  let topm_id: Ref<string | null> = ref<string | null>(null);
+  let name: Ref<string | null> = ref<string | null>(null);
+  let bio_info: Ref<string | null> = ref<string | null>(null);
+
+  async function create() {
+    if (topm_id.value != null && topm_id.value.trim().length > 0 &&
+        name.value != null && name.value.trim().length > 0 &&
+        bio_info.value != null && bio_info.value.trim().length > 0) {
+      const supplier = new Supplier(0, topm_id.value, name.value, bio_info.value);
+      await store.createSupplier(supplier);
+
+      closeDialog();
+    }
+  }
+
+  function closeDialog() {
+    dialog.value = false;
+    clearVariables();
+  }
+
+  function clearVariables() {
+    topm_id.value = null;
+    name.value = null;
+    bio_info.value = null;
+
+    loading.value = false;
+  }
+
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          size="small"
+      >
+        <v-icon>mdi-plus-thick</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Lieferant erstellen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-plus-thick
+        </v-icon>
+
+        Lieferant erstellen
+
+        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <v-text-field
+            v-model.trim="topm_id"
+            label="TopM ID"
+            autofocus
+        />
+
+        <v-text-field
+            v-model.trim="name"
+            label="Name"
+        />
+
+        <v-text-field
+            v-model.trim="bio_info"
+            label="BIO Info"
+        />
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Schließen
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            :disabled="topm_id == null || name == null || loading"
+            @click="create();"
+        >
+          Erstellen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/supplier/supplierRow.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
+  import {Supplier} from "~/types/supplier";
+
+  let store = useLabelEditorStore();
+
+  const props = defineProps({
+    supplier: {type: Object as PropType<Supplier>, required: true},
+  });
+
+  let edit: Ref<boolean> = ref<boolean>(false);
+
+  let topm_id: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.topm_id)));
+  let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.name)));
+  let bio_info: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.bio_info)));
+
+  function toggleEdit() {
+    if (edit.value) {
+      disableEdit();
+    } else {
+      enableEdit();
+    }
+  }
+
+  function enableEdit() {
+    edit.value = true;
+  }
+
+  function disableEdit() {
+    topm_id.value = JSON.parse(JSON.stringify(props.supplier.topm_id));
+    name.value = JSON.parse(JSON.stringify(props.supplier.name));
+    bio_info.value = JSON.parse(JSON.stringify(props.supplier.bio_info));
+    edit.value = false;
+  }
+
+  async function updateSupplier() {
+    if (topm_id.value != null && topm_id.value.trim().length > 0 &&
+        name.value != null && name.value.trim().length > 0 &&
+        bio_info.value != null && bio_info.value.trim().length > 0) {
+      const supplier = new Supplier(props.supplier.id, topm_id.value, name.value, bio_info.value);
+      await store.updateSupplier(supplier);
+
+      disableEdit();
+    }
+  }
+
+  async function deleteSupplier() {
+    await store.deleteSupplier(props.supplier.id);
+  }
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <v-row style="padding-top: 10px">
+
+        <v-col>
+          <v-text-field
+              v-model.trim="topm_id"
+              label="TopM ID"
+              :readonly="!edit"
+          />
+          <v-text-field
+              v-model.trim="name"
+              label="Bezeichnung"
+              :readonly="!edit"
+          />
+          <v-text-field
+              v-model.trim="bio_info"
+              label="BIO Info"
+              :readonly="!edit"
+          />
+        </v-col>
+
+        <v-spacer />
+
+        <v-divider vertical/>
+
+        <DeleteConfirm
+            title="Lieferant löschen?"
+            :disable="!edit"
+            @delete="deleteSupplier()"
+        />
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            :disabled="!edit"
+            :hidden="edit"
+            @click="disableEdit()"
+        >
+          <v-icon>mdi-cancel</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Abbrechen
+          </v-tooltip>
+        </v-btn>
+
+        <v-btn
+            :flat="true"
+            :disabled="!edit"
+            :hidden="edit"
+            @click="updateSupplier()"
+        >
+          <v-icon>mdi-content-save</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Speichern
+          </v-tooltip>
+        </v-btn>
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            @click="toggleEdit();"
+        >
+          <v-icon>mdi-pencil</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Bearbeiten
+          </v-tooltip>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/store/labelEditorStore.ts

@@ -7,6 +7,7 @@ import type {Variant} from "~/types/variant";
 import {Unit} from "~/types/unit";
 import type {Label} from "~/types/label";
 import type {Settings} from "~/types/settings";
+import type {Supplier} from "~/types/supplier";
 
 interface State {
   config: RuntimeConfig,
@@ -29,6 +30,8 @@ interface State {
 
   origins: Array<Origin>,
   units: Array<Unit>,
+
+  suppliers: Array<Supplier>,
 }
 
 export const useLabelEditorStore = defineStore('label_editor_store', {
@@ -64,6 +67,8 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
         Unit.L,
         Unit.Stk,
     ],
+
+    suppliers: [],
   }),
   actions: {
     // Notification
@@ -385,5 +390,70 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
         this.addNotification(true, 'Kann Variante nicht gelöscht werden. Es ist kein Artikel ausgewählt.');
       }
     },
+
+
+
+    // Supplier:
+    async loadSuppliers() {
+      try {
+        const suppliers: Array<Supplier> = await $fetch<Array<Supplier>>(this.config.public.url + '/supplier', {
+          method: 'GET',
+        });
+
+        this.suppliers = suppliers;
+
+        this.addNotification(false, 'Lieferanten geladen');
+      } catch {
+        this.addNotification(true, 'Fehler beim laden der Lieferanten');
+      }
+    },
+
+    async createSupplier(supplier: Supplier) {
+      try {
+        let createdSupplier = await $fetch<Supplier>(this.config.public.url + '/supplier', {
+          method: 'POST',
+          body: JSON.stringify(supplier),
+        });
+
+        this.suppliers.push(createdSupplier);
+
+        this.addNotification(false, 'Lieferant "' + createdSupplier.name + '" erstellt');
+      } catch {
+        this.addNotification(true, 'Fehler beim erstellen des Lieferant: ' + supplier.name);
+      }
+    },
+
+    async updateSupplier(supplier: Supplier) {
+      let labelIndex = this.labels.findIndex(i => i.id === supplier.id);
+
+      try {
+        let updatedSupplier = await $fetch<Supplier>(this.config.public.url + '/supplier/' + supplier.id, {
+          method: 'POST',
+          body: JSON.stringify(supplier),
+        });
+
+        this.labels[labelIndex] = updatedSupplier;
+
+        this.addNotification(false, 'Lieferant aktualisiert.');
+      } catch {
+        this.addNotification(true, 'Fehler beim aktualisieren des Lieferanten.');
+      }
+    },
+
+    async deleteSupplier(supplierID: number) {
+      let supplierIndex = this.suppliers.findIndex(i => i.id === supplierID);
+
+      try {
+        await $fetch(this.config.public.url + '/supplier/' + supplierID, {
+          method: 'DELETE',
+        });
+
+        this.suppliers.splice(supplierIndex, 1);
+
+        this.addNotification(false, 'Lieferant gelöscht.');
+      } catch {
+        this.addNotification(true, 'Fehler beim löschen des Lieferanten.');
+      }
+    },
   },
 });

frontend/app/types/supplier.ts

@@ -0,0 +1,13 @@
+export class Supplier {
+  readonly id: number;
+  topm_id: string;
+  name: string;
+  bio_info: string | null;
+
+  constructor(id: number, topm_id: string, name: string, bio_info: string | null) {
+    this.id = id;
+    this.topm_id = topm_id;
+    this.name = name;
+    this.bio_info = bio_info;
+  }
+}