matthias/label_editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Functionality to create, update and delete label.

Browse Source
This commit is contained in:
matthias
2026-01-31 17:10:40 +01:00
parent 8d15e786ac
commit cb39f7ad32
8 changed files with 488 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/components/label/label.vue
+96
View File
@@ -0,0 +1,96 @@
<script setup lang="ts">
import {useLabelEditorStore} from "~/store/labelEditorStore";
import type {Ref} from "vue";
import LabelCreate from "~/components/label/labelCreate.vue";
let store = useLabelEditorStore();
let dialog: Ref<boolean> = ref<boolean>(false);
let loading: Ref<boolean> = ref<boolean>(false);
watch(dialog, async (oldDialog) => {
if (oldDialog) {
loading.value = true;
await store.loadLabels();
loading.value = false;
}
})
function closeDialog() {
dialog.value = false;
}
</script>
<template>
<v-dialog
v-model="dialog"
:scrollable="true"
width="800"
max-height="750"
height="750"
>
<template v-slot:activator="{ props }">
<v-btn
:flat="true"
v-bind="props"
size="small"
>
<v-icon>mdi-label</v-icon>
<v-tooltip
activator="parent"
location="bottom"
>
Etiketten Typen
</v-tooltip>
</v-btn>
</template>
<v-card>
<v-card-title>
<v-row style="padding-top: 10px">
<v-icon size="small">
mdi-label
</v-icon>
Etiketten Typen
<v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
<v-spacer/>
<v-divider vertical/>
<LabelCreate/>
</v-row>
</v-card-title>
<v-divider/>
<v-card-text>
<LabelRow
v-for="(label) in store.labels"
:key="label.id"
v-bind:label="label"
/>
</v-card-text>
<v-divider/>
<v-card-actions>
<v-spacer/>
<v-btn
variant="text"
:disabled="loading"
@click="closeDialog()"
>
Schließen
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<style scoped>
</style>
frontend/app/components/label/labelCreate.vue
+114
View File
@@ -0,0 +1,114 @@
<script setup lang="ts">
import {useLabelEditorStore} from "~/store/labelEditorStore";
import type {Ref} from "vue";
import {Label} from "~/types/label";
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);
watch(dialog, async (oldDialog) => {
if (oldDialog) {
loading.value = true;
await store.loadLabels();
loading.value = false;
}
})
async function create() {
if (name.value != null && name.value.trim().length > 0){
const label = new Label(0, name.value);
await store.createLabel(label);
closeDialog();
}
}
function closeDialog() {
dialog.value = false;
clearVariables();
}
function clearVariables() {
name.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"
>
Etiketten Typ erstellen
</v-tooltip>
</v-btn>
</template>
<v-card>
<v-card-title>
<v-icon size="small">
mdi-plus-thick
</v-icon>
Etiketten Typ 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"
autofocus
/>
</v-card-text>
<v-divider/>
<v-card-actions>
<v-spacer/>
<v-btn
variant="text"
:disabled="loading"
@click="closeDialog()"
>
Schließen
</v-btn>
<v-btn
variant="text"
:disabled="name == null || loading"
@click="create();"
>
Erstellen
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<style scoped>
</style>
frontend/app/components/label/labelRow.vue
+119
View File
@@ -0,0 +1,119 @@
<script setup lang="ts">
import {useLabelEditorStore} from "~/store/labelEditorStore";
import type {Ref} from "vue";
import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
import {Label} from "~/types/label";
let store = useLabelEditorStore();
const props = defineProps({
label: {type: Object as PropType<Label>, required: true},
});
let edit: Ref<boolean> = ref<boolean>(false);
let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.label.name)));
function toggleEdit() {
if (edit.value) {
disableEdit();
} else {
enableEdit();
}
}
function enableEdit() {
edit.value = true;
}
function disableEdit() {
name.value = JSON.parse(JSON.stringify(props.label.name));
}
async function updateLabel() {
if (name.value != null && name.value.trim().length > 0) {
const label = new Label(props.label.id, name.value);
await store.updateLabel(label);
disableEdit();
}
}
async function deleteLabel() {
await store.deleteLabel(props.label.id);
}
</script>
<template>
<v-card>
<v-card-title>
<v-row style="padding-top: 10px">
<v-text-field
v-model.trim="name"
:readonly="!edit"
/>
<v-spacer />
<v-divider vertical/>
<DeleteConfirm
title="Etiketten Typ löschen?"
:disable="!edit"
@delete="deleteLabel()"
/>
<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="updateLabel()"
>
<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-card>
</template>
<style scoped>
</style>
frontend/app/components/layout/customHeader.vue
+6
View File
@@ -14,6 +14,12 @@
:vertical="true"
/>
<Label/>
<v-divider
:vertical="true"
/>
<PickArticle/>
<ArticleCreate/>
frontend/app/store/labelEditorStore.ts
+67
View File
@@ -5,6 +5,7 @@ import type {RuntimeConfig} from "nuxt/schema";
import {Origin} from "~/types/origin";
import type {Variant} from "~/types/variant";
import {Unit} from "~/types/unit";
import type {Label} from "~/types/label";
interface State {
config: RuntimeConfig,
@@ -21,6 +22,8 @@ interface State {
article: Article | null,
articleEdit: Article | null,
labels: Array<Label>,
origins: Array<Origin>,
units: Array<Unit>,
}
@@ -41,6 +44,8 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
article: null,
articleEdit: null,
labels: [],
origins: [
Origin.EU,
Origin.NonEU,
@@ -117,6 +122,68 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
this.addNotification(false, "Benachrichtigungen gelöscht")
},
async loadLabels() {
try {
const labels: Array<Label> = await $fetch<Array<Label>>(this.config.public.url + '/label', {
method: 'GET',
});
this.labels = labels;
this.addNotification(false, 'Etiketten Typen geladen');
} catch {
this.addNotification(true, 'Fehler beim laden der Etiketten Typen');
}
},
async createLabel(label: Label) {
try {
let createdLabel = await $fetch<Label>(this.config.public.url + '/label', {
method: 'POST',
body: JSON.stringify(label),
});
this.labels.push(createdLabel);
this.addNotification(false, 'Etiketten Typ "' + createdLabel.name + '" erstellt');
} catch {
this.addNotification(true, 'Fehler beim erstellen des Etiketten Typ: ' + label.name);
}
},
async updateLabel(label: Label) {
let labelIndex = this.labels.findIndex(i => i.id === label.id);
try {
let updatedLabel = await $fetch<Label>(this.config.public.url + '/label/' + label.id, {
method: 'POST',
body: JSON.stringify(label),
});
this.labels[labelIndex] = updatedLabel;
this.addNotification(false, 'Etiketten Typ aktualisiert.');
} catch {
this.addNotification(true, 'Fehler beim aktualisieren des Etiketten Typen.');
}
},
async deleteLabel(labelID: number) {
let labelIndex = this.labels.findIndex(i => i.id === labelID);
try {
await $fetch(this.config.public.url + '/label/' + labelID, {
method: 'DELETE',
});
this.labels.splice(labelIndex, 1);
this.addNotification(false, 'Etiketten Typ aktualisiert.');
} catch {
this.addNotification(true, 'Fehler beim aktualisieren des Etiketten Typen.');
}
},
// Article
async loadArticle(articleID: number) {
frontend/nuxt.config.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
runtimeConfig: {
public: {
url: process.env.URL || 'http://localhost:9090',
url: process.env.URL || 'http://localhost:9091',
},
},