label_editor/frontend/app/components/variant/variantCreate.vue

<script setup lang="ts">
  import type {Ref} from "vue";
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import { Variant } from "~/types/variant";
  import type {Unit} from "~/types/unit";
  import type {Label} from "~/types/label";

  let store = useLabelEditorStore();

  let dialog: Ref<boolean> = ref<boolean>(false);
  let loading: Ref<boolean> = ref<boolean>(false);

  let weight: Ref<string | null> = ref<string | null>(null);
  let ean: Ref<string | null> = ref<string | null>(null);
  let name: Ref<string | null> = ref<string | null>(null);
  let unit: Ref<Unit | null> = ref<Unit | null>(null);
  let description: Ref<string | null> = ref<string | null>(null);
  let ingredients: Ref<string | null> = ref<string | null>(null);
  let label: Ref<Label | null> = ref<Label | null>(null);
  let variant_description: Ref<string | null> = ref<string | null>(null);
  let topm_row: Ref<string | null> = ref<string | null>(null);

  if (store.article != null) {
    unit.value = store.article.default_unit;
  }

  async function create() {
    if (store.article != null &&
        weight.value != null && weight.value.trim().length > 0 &&
        unit.value != null && unit.value.trim().length > 0
    ) {
      loading.value = true;

      const variant: Variant = new Variant(0, weight.value, ean.value, name.value,
          description.value, ingredients.value, unit.value, label.value,
          variant_description.value, topm_row.value);

      await store.addVariant(variant);

      closeDialog();
    }
  }

  function closeDialog() {
    dialog.value = false;
    clearVariables();
  }

  function clearVariables() {
    if (store.article != null) {
      weight.value = null;
      ean.value = null;
      name.value = null;
      unit.value = store.article.default_unit;
      description.value = null;
      ingredients.value = null;
      label.value = null;
      variant_description.value = null;
      topm_row.value = null;
    }

    loading.value = false;
  }
</script>

<template>
  <v-dialog
      v-model="dialog"
      :scrollable="true"
      width="800"
      max-height="850"
  >
    <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"
        >
          Erstellen
        </v-tooltip>
      </v-btn>
    </template>

    <v-card>
      <v-card-title>
        <v-icon size="small">
          mdi-plus-thick
        </v-icon>

        Variante erstellen

        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
      </v-card-title>

      <v-divider/>

      <v-card-text>
        <v-row>
          <v-col cols="8">
            <v-text-field
                v-model.trim="variant_description"
                label="Varianten Bezeichnung"
                autofocus
            />
          </v-col>
          <v-col>
            <v-text-field
                v-model.trim="topm_row"
                label="TopM Zeile"
                :clearable="true"
            />
          </v-col>
        </v-row>

        <v-text-field
            v-model.trim="name"
            label="Produkt Bezeichnung"
            :clearable="true"
            :placeholder="(store.article != null)? ((store.article.name != null)? store.article.name : undefined) : undefined"
            persistent-placeholder
        />

        <v-row>
          <v-col>
            <v-select
                v-model="label"
                :items="store.labels"
                label="Etiketten Typ"
                :return-object="true"
                item-title="name"
                no-data-text="Keine Etiketten Typen angelegt"
            />
          </v-col>
          <v-col>
            <v-text-field
                v-model.trim="weight"
                label="Gewicht"
            />
          </v-col>
          <v-col>
            <v-select
                v-model="unit"
                :items="store.units"
                label="Einheit"
            ></v-select>
          </v-col>
        </v-row>

        <v-text-field
            v-model.trim="ean"
            label="EAN-Code"
            :clearable="true"
        />

        <v-textarea
            v-model.trim="description"
            label="Beschreibung"
            :clearable="true"
            :placeholder="(store.article != null)? ((store.article.description != null)? store.article.description : undefined) : undefined"
            persistent-placeholder
        />

        <v-textarea
            v-model.trim="ingredients"
            label="Zutaten"
            :clearable="true"
            :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
            persistent-placeholder
        />
      </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="weight == null ||
             loading"
            @click="create();"
        >
          Erstellen
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>

</style>