label_editor/frontend/app/components/article/article.vue

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

  let store = useLabelEditorStore();

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

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

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

  function disableEdit() {
    edit.value = false;
    store.articleEdit = JSON.parse(JSON.stringify(store.article));
  }

  async function updateArticle() {
    if (store.articleEdit != null &&
        store.articleEdit.name != null && store.articleEdit.name.trim().length > 0 &&
        store.articleEdit.origin != null)
    {

      await store.updateArticle(store.articleEdit);

      disableEdit();
    }
  }

  async function deleteArticle() {
    await store.deleteCurrentArticle();
  }
</script>

<template>
  <v-container>
    <v-card v-if="store.article != null && store.articleEdit != null && store.settings != null">
      <v-card-title>
        <v-row style="padding-top: 10px">
          <v-text-field
              v-model.trim="store.articleEdit.name"
              :readonly="!edit"
              label="Produkt Bezeichnung"
          />

          <v-spacer />

          <v-divider vertical/>

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

          <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="updateArticle()"
          >
            <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 no-gutters>
          <v-col cols="2" style="padding: 5px;">
            <v-row no-gutters>
              <v-checkbox
                  v-model="store.articleEdit.bio"
                  label="BIO"
                  :readonly="!edit"
              />
            </v-row>

            <v-row no-gutters>
              <v-select
                  v-model="store.articleEdit.origin"
                  :items="store.origins"
                  label="Herkunft"
                  :readonly="!edit"
              ></v-select>
            </v-row>

            <v-row no-gutters>
              <v-select
                  v-model="store.articleEdit.default_unit"
                  :items="store.units"
                  label="Standard Einheit"
                  :readonly="!edit"
              ></v-select>
            </v-row>

            <v-row no-gutters>
              <v-text-field
                  v-model.trim="store.articleEdit.bio_origin"
                  label="BIO Hinweis Text"
                  :hint="store.settings.bio"
                  persistent-placeholder
                  persistent-hint
                  :readonly="!edit"
              />
            </v-row>

            <v-row no-gutters>
              <v-text-field
                  v-model.trim="store.articleEdit.mhd"
                  label="MHD Text"
                  :hint="store.settings.mhd"
                  persistent-placeholder
                  persistent-hint
                  :readonly="!edit"
              />
            </v-row>
          </v-col>

          <v-col cols="5" style="padding: 5px;">
            <v-row no-gutters>
              <v-text-field
                  v-model.trim="store.articleEdit.bio_info"
                  label="BIO Hinweis Text"
                  :hint="store.settings.bio_info"
                  persistent-placeholder
                  persistent-hint
                  :readonly="!edit"
              />
            </v-row>
            <v-row no-gutters>
              <v-textarea
                  v-model.trim="store.articleEdit.description"
                  :tile=true
                  label="Beschreibung"
                  counter
                  :persistentCounter=true
                  rows="6"
                  no-resize
                  :readonly="!edit"
                  persistent-placeholder
              >
                <template v-slot:counter="{ counter }">
                  <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
                </template>
              </v-textarea>
            </v-row>

          </v-col>

          <v-col cols="5" style="padding: 5px;">
            <v-row no-gutters>
              <v-text-field
                  v-model.trim="store.articleEdit.allergens_text"
                  label="Allergen Hinweis"
                  :hint="store.settings.allergens_text"
                  persistent-placeholder
                  persistent-hint
                  :readonly="!edit"
              />
            </v-row>
            <v-row no-gutters>
              <VuetifyTiptap
                  v-model="store.articleEdit.ingredients"
                  label="Zutaten"
                  rounded
                  :max-height="200"
                  :disabled="!edit"
              />
            </v-row>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<style scoped>

</style>