150 lines
3.3 KiB
Vue
150 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type {Variant} from "~/types/variant";
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import type {Ref} from "vue";
|
|
|
|
let store = useLabelEditorStore();
|
|
|
|
const props = defineProps({
|
|
variant: {type: Object as PropType<Variant>, required: true},
|
|
});
|
|
|
|
let edit: Ref<boolean> = ref<boolean>(false);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-row>
|
|
{{ variant.name }}
|
|
|
|
<v-spacer />
|
|
|
|
<v-divider vertical/>
|
|
|
|
<v-btn
|
|
:flat="true"
|
|
size="small"
|
|
:disabled="!edit"
|
|
>
|
|
<v-icon>mdi-delete-empty</v-icon>
|
|
<v-tooltip
|
|
activator="parent"
|
|
location="bottom"
|
|
>
|
|
Löschen
|
|
</v-tooltip>
|
|
</v-btn>
|
|
|
|
<v-divider vertical/>
|
|
|
|
<v-btn
|
|
:flat="true"
|
|
size="small"
|
|
:disabled="!edit"
|
|
>
|
|
<v-icon>mdi-cancel</v-icon>
|
|
<v-tooltip
|
|
activator="parent"
|
|
location="bottom"
|
|
>
|
|
Abbrechen
|
|
</v-tooltip>
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
:flat="true"
|
|
size="small"
|
|
:disabled="!edit"
|
|
>
|
|
<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"
|
|
size="small"
|
|
>
|
|
<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="variant.weight"
|
|
label="Gewicht"
|
|
:readonly="true"
|
|
/>
|
|
</v-row>
|
|
<v-row>
|
|
<v-text-field
|
|
v-model.trim="variant.ean"
|
|
label="EAN"
|
|
:readonly="true"
|
|
/>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-col cols="5">
|
|
<v-textarea
|
|
:model-value="variant.description"
|
|
:tile=true
|
|
label="Beschreibung"
|
|
counter
|
|
:persistentCounter=true
|
|
rows="6"
|
|
no-resize
|
|
:readonly="true"
|
|
>
|
|
<template v-slot:counter="{ counter }">
|
|
<span>{{ counter }} von {{ store.ingredientsMaxChars }} Zeichen.</span>
|
|
</template>
|
|
</v-textarea>
|
|
</v-col>
|
|
|
|
<v-col cols="5">
|
|
<v-textarea
|
|
:model-value="variant.ingredients"
|
|
:tile=true
|
|
label="Zutaten"
|
|
counter
|
|
:persistentCounter=true
|
|
rows="6"
|
|
no-resize
|
|
:readonly="true"
|
|
>
|
|
<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> |