140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import type {Ref} from "vue";
|
|
import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
|
|
import {Supplier} from "~/types/supplier";
|
|
|
|
let store = useLabelEditorStore();
|
|
|
|
const props = defineProps({
|
|
supplier: {type: Object as PropType<Supplier>, required: true},
|
|
});
|
|
|
|
let edit: Ref<boolean> = ref<boolean>(false);
|
|
|
|
let topm_id: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.topm_id)));
|
|
let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.name)));
|
|
let bio_info: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.bio_info)));
|
|
|
|
function toggleEdit() {
|
|
if (edit.value) {
|
|
disableEdit();
|
|
} else {
|
|
enableEdit();
|
|
}
|
|
}
|
|
|
|
function enableEdit() {
|
|
edit.value = true;
|
|
}
|
|
|
|
function disableEdit() {
|
|
topm_id.value = JSON.parse(JSON.stringify(props.supplier.topm_id));
|
|
name.value = JSON.parse(JSON.stringify(props.supplier.name));
|
|
bio_info.value = JSON.parse(JSON.stringify(props.supplier.bio_info));
|
|
edit.value = false;
|
|
}
|
|
|
|
async function updateSupplier() {
|
|
if (topm_id.value != null && topm_id.value.trim().length > 0 &&
|
|
name.value != null && name.value.trim().length > 0 &&
|
|
bio_info.value != null && bio_info.value.trim().length > 0) {
|
|
const supplier = new Supplier(props.supplier.id, topm_id.value, name.value, bio_info.value);
|
|
await store.updateSupplier(supplier);
|
|
|
|
disableEdit();
|
|
}
|
|
}
|
|
|
|
async function deleteSupplier() {
|
|
await store.deleteSupplier(props.supplier.id);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-row style="padding-top: 10px">
|
|
|
|
<v-col>
|
|
<v-text-field
|
|
v-model.trim="topm_id"
|
|
label="TopM ID"
|
|
:readonly="!edit"
|
|
/>
|
|
<v-text-field
|
|
v-model.trim="name"
|
|
label="Bezeichnung"
|
|
:readonly="!edit"
|
|
/>
|
|
<v-text-field
|
|
v-model.trim="bio_info"
|
|
label="BIO Info"
|
|
:readonly="!edit"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-spacer />
|
|
|
|
<v-divider vertical/>
|
|
|
|
<DeleteConfirm
|
|
title="Lieferant löschen?"
|
|
:disable="!edit"
|
|
@delete="deleteSupplier()"
|
|
/>
|
|
|
|
<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="updateSupplier()"
|
|
>
|
|
<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> |