152 lines
3.3 KiB
Vue
152 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type {Ref} from "vue";
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import {Article} from "~/types/article";
|
|
import {Origin} from "~/types/origin";
|
|
|
|
let store = useLabelEditorStore();
|
|
|
|
let dialog: Ref<boolean> = ref<boolean>(false);
|
|
let loading: Ref<boolean> = ref<boolean>(false);
|
|
|
|
let name: Ref<string | null> = ref<string | null>(null);
|
|
let bio: Ref<boolean> = ref<boolean>(false);
|
|
let origin: Ref<Origin | null> = ref<Origin | null>(null);
|
|
let description: Ref<string | null> = ref<string | null>(null);
|
|
let ingredients: Ref<string | null> = ref<string | null>(null);
|
|
|
|
let origins: Origin[] = [
|
|
Origin.EU,
|
|
Origin.NEU,
|
|
Origin.EUnEU
|
|
];
|
|
|
|
async function create() {
|
|
if (name.value != null && name.value.trim().length > 0 &&
|
|
origin.value != null && origin.value.trim().length > 0
|
|
) {
|
|
loading.value = true;
|
|
|
|
const article: Article = new Article(0, name.value, bio.value, origin.value, description.value, ingredients.value, []);
|
|
|
|
await store.createArticle(article);
|
|
|
|
closeDialog();
|
|
}
|
|
}
|
|
|
|
function closeDialog() {
|
|
dialog.value = false;
|
|
clearVariables();
|
|
}
|
|
|
|
function clearVariables() {
|
|
name.value = null;
|
|
bio.value = false;
|
|
origin.value = null;
|
|
description.value = null;
|
|
ingredients.value = null;
|
|
|
|
loading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog
|
|
v-model="dialog"
|
|
:scrollable="true"
|
|
width="800"
|
|
max-height="750"
|
|
>
|
|
<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>
|
|
|
|
Artikel erstellen
|
|
|
|
<v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
|
|
</v-card-title>
|
|
|
|
<v-divider/>
|
|
|
|
<v-card-text>
|
|
<v-text-field
|
|
v-model.trim="name"
|
|
label="Bezeichnung"
|
|
/>
|
|
|
|
<v-row>
|
|
<v-col cols="2">
|
|
<v-checkbox
|
|
v-model.="bio"
|
|
label="BIO"
|
|
/>
|
|
</v-col>
|
|
<v-col>
|
|
<v-select
|
|
v-model="origin"
|
|
:items="origins"
|
|
label="Herkunft"
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-textarea
|
|
v-model.trim="description"
|
|
label="Beschreibung"
|
|
/>
|
|
|
|
<v-textarea
|
|
v-model.trim="ingredients"
|
|
label="Zutaten"
|
|
/>
|
|
</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="name == null ||
|
|
origin == null ||
|
|
loading"
|
|
@click="create();"
|
|
>
|
|
Erstellen
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |