190 lines
4.8 KiB
Vue
190 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import {originToString} from "~/types/origin";
|
|
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">
|
|
<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-col cols="5">
|
|
Herkunft:
|
|
</v-col>
|
|
<v-col>
|
|
{{ originToString(store.article.origin) }}
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-select
|
|
v-model="store.articleEdit.default_unit"
|
|
:items="store.units"
|
|
label="Standard Einheit"
|
|
:readonly="!edit"
|
|
></v-select>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-col cols="5" style="padding: 5px;">
|
|
<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-col>
|
|
|
|
<v-col cols="5" style="padding: 5px;">
|
|
<v-textarea
|
|
v-model.trim="store.articleEdit.ingredients"
|
|
:tile=true
|
|
label="Zutaten"
|
|
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-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |