136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import type {Article} from "~/types/article";
|
|
|
|
let config = useRuntimeConfig();
|
|
let store = useLabelEditorStore();
|
|
let dialog: Ref<boolean> = ref<boolean>(false);
|
|
|
|
let loading: Ref<boolean> = ref<boolean>(false);
|
|
let articles: Ref<Article[]> = ref<Article[]>([]);
|
|
let selectedArticle: Ref<Article | null> = ref<Article | null>(null);
|
|
|
|
watch(dialog, async (oldDialog) => {
|
|
if (oldDialog) {
|
|
articles.value = await loadArticles();
|
|
selectedArticle.value = null;
|
|
}
|
|
})
|
|
|
|
async function loadArticles(): Promise<Array<Article>> {
|
|
try {
|
|
const articles: Array<Article> = await $fetch<Array<Article>>(config.public.url + '/articles', {
|
|
method: 'GET',
|
|
});
|
|
|
|
return articles;
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
async function getSelected() {
|
|
if (selectedArticle.value != null) {
|
|
loading.value = true;
|
|
const articleID: number = selectedArticle.value.id;
|
|
|
|
await store.loadArticle(articleID);
|
|
|
|
loading.value = false;
|
|
dialog.value = false;
|
|
}
|
|
}
|
|
|
|
function closeDialog() {
|
|
clearVariables();
|
|
|
|
dialog.value = false;
|
|
}
|
|
|
|
function clearVariables() {
|
|
selectedArticle.value = null;
|
|
loading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog
|
|
v-model="dialog"
|
|
:scrollable="true"
|
|
width="800"
|
|
max-height="500"
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
:flat="true"
|
|
v-bind="props"
|
|
>
|
|
<v-icon>mdi-magnify</v-icon>
|
|
<v-tooltip
|
|
activator="parent"
|
|
location="bottom"
|
|
>
|
|
Artikel auswählen
|
|
</v-tooltip>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-icon size="small">
|
|
mdi-magnify
|
|
</v-icon>
|
|
|
|
Artikel auswählen
|
|
|
|
<v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
|
|
</v-card-title>
|
|
|
|
<v-divider/>
|
|
|
|
<v-card-text>
|
|
<v-autocomplete
|
|
v-model="selectedArticle"
|
|
:items="articles"
|
|
label="Artikel"
|
|
item-title="name"
|
|
:disabled="loading"
|
|
:clearable="true"
|
|
:autofocus="true"
|
|
:return-object="true"
|
|
:auto-select-first="true"
|
|
:open-on-clear="true"
|
|
no-data-text="Keine Artikel angelegt"
|
|
@keyup.enter="getSelected()"
|
|
></v-autocomplete>
|
|
</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="selectedArticle == null || loading"
|
|
@click="getSelected();"
|
|
>
|
|
Auswählen
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |