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

<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import type {Ref} from "vue";
  import {Variant} from "~/types/variant";
  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
  import type {Unit} from "~/types/unit";

  let store = useLabelEditorStore();

  const props = defineProps({
    variant: {type: Object as PropType<Variant>, required: true},
  });

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

  let weight: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.weight)));
  let ean: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ean)));
  let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.name)));
  let unit: Ref<Unit | null> = ref<Unit | null>(JSON.parse(JSON.stringify(props.variant.unit)));
  let description: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.description)));
  let ingredients: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ingredients)));

  function toggleEdit() {
    if (edit.value) {
      disableEdit();
    } else {
      enableEdit();
    }
  }

  function enableEdit() {
    edit.value = true;
  }

  function disableEdit() {
    edit.value = false;
    weight.value = JSON.parse(JSON.stringify(props.variant.weight));
    ean.value = JSON.parse(JSON.stringify(props.variant.ean));
    name.value = JSON.parse(JSON.stringify(props.variant.name));
    unit.value = JSON.parse(JSON.stringify(props.variant.unit));
    description.value = JSON.parse(JSON.stringify(props.variant.description));
    ingredients.value = JSON.parse(JSON.stringify(props.variant.ingredients));
  }

  async function updateVariant() {
    if (weight.value != null && unit.value != null) {
      let updateVariant: Variant = new Variant(props.variant.id, weight.value, ean.value, name.value, description.value, ingredients.value, unit.value);

      await store.updateVariant(updateVariant);

      disableEdit();
    }
  }

  async function deleteVariant() {
    await store.deleteVariant(props.variant.id);
  }

</script>

<template>
  <v-card>
    <v-card-title>
      <v-row style="padding-top: 10px">
        <v-text-field
            v-model.trim="name"
            :readonly="!edit"
        />

        <v-spacer />

        <v-divider vertical/>

        <DeleteConfirm
            title="Variante löschen?"
            :disable="!edit"
            @delete="deleteVariant()"
        />

        <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="updateVariant()"
        >
          <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-divider/>

    <v-card-text>
      <v-row
          align="start"
      >
        <v-col cols="2">
          <v-row>
            <v-text-field
                v-model.trim="weight"
                label="Gewicht"
                :readonly="!edit"
            />
          </v-row>
          <v-row>
            <v-select
                v-model="unit"
                :items="store.units"
                label="Einheit"
                :readonly="!edit"
            ></v-select>
          </v-row>
          <v-row>
            <v-text-field
                v-model.trim="ean"
                label="EAN"
                :readonly="!edit"
            />
          </v-row>
        </v-col>

        <v-col cols="5">
          <v-textarea
              v-model.trim="description"
              :tile=true
              label="Beschreibung"
              counter
              :persistentCounter=true
              rows="6"
              no-resize
              :readonly="!edit"
              :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
              persistent-placeholder
          >
            <template v-slot:counter="{ counter }">
              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
            </template>
          </v-textarea>
        </v-col>

        <v-col cols="5">
          <v-textarea
              v-model.trim="ingredients"
              :tile=true
              label="Zutaten"
              counter
              :persistentCounter=true
              rows="6"
              no-resize
              :readonly="!edit"
              :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
              persistent-placeholder
          >
            <template v-slot:counter="{ counter }">
              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
            </template>
          </v-textarea>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<style scoped>

</style>