318 lines
9.2 KiB
Vue
318 lines
9.2 KiB
Vue
<script setup>
|
||
import {computed, ref} from 'vue';
|
||
import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
|
||
import RichSelectBox from "../../../../Views/Components/RichSelectBox.vue";
|
||
import {toast} from "vue3-toastify";
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
})
|
||
|
||
const {request} = useAjax()
|
||
|
||
const editing = ref(false)
|
||
|
||
const reasons = computed(() => props.data.exemption_reasons ?? [])
|
||
const pricingModes = computed(() => props.data.pricing_modes ?? [])
|
||
|
||
const liableOptions = [
|
||
{value: '1', label: 'Ja – Umsatzsteuer wird erhoben'},
|
||
{value: '0', label: 'Nein – umsatzsteuerbefreit'},
|
||
]
|
||
|
||
const form = ref({
|
||
tax_liable: props.data.tax_liable ? '1' : '0',
|
||
vat_rate: props.data.vat_rate ?? 0,
|
||
tax_exemption_reason: props.data.tax_exemption_reason ?? '',
|
||
tax_exemption_note: props.data.tax_exemption_note ?? '',
|
||
vat_pricing_mode: props.data.vat_pricing_mode ?? 'inclusive',
|
||
tax_number: props.data.tax_number ?? '',
|
||
vat_id: props.data.vat_id ?? '',
|
||
invoice_prefix: props.data.invoice_prefix ?? '',
|
||
})
|
||
|
||
// Das Präfix bestimmt den Nummernkreis und darf sich nachträglich nicht ändern -- sonst gehörten bereits
|
||
// herausgegebene Rechnungen plötzlich zu einer anderen Nummer. Nur in der verwalteten Ansicht editierbar.
|
||
const canEditPrefix = computed(() => props.data.can_edit_invoice_prefix === true)
|
||
|
||
const isLiable = computed(() => form.value.tax_liable === '1')
|
||
const isCustomReason = computed(() => form.value.tax_exemption_reason === 'custom')
|
||
|
||
const selectedReason = computed(
|
||
() => reasons.value.find(r => r.value === form.value.tax_exemption_reason) ?? null
|
||
)
|
||
|
||
const pricingModeLabel = computed(
|
||
() => pricingModes.value.find(m => m.value === form.value.vat_pricing_mode)?.label ?? '—'
|
||
)
|
||
|
||
// Vorschau des Pflichthinweises nach § 14 Abs. 4 Nr. 8 UStG, der später auf der Rechnung erscheint.
|
||
const invoiceHint = computed(() => {
|
||
if (isLiable.value) {
|
||
return `Umsatzsteuerpflichtig – USt-Satz: ${form.value.vat_rate || 0} %`
|
||
}
|
||
if (isCustomReason.value) {
|
||
return form.value.tax_exemption_note?.trim() || '—'
|
||
}
|
||
return selectedReason.value?.text || '—'
|
||
})
|
||
|
||
const reasonLabel = computed(() => selectedReason.value?.label ?? '—')
|
||
|
||
async function save() {
|
||
const saveUrl = props.data.saveEndpoint ?? '/api/v1/admin/tenant/tax'
|
||
const response = await request(saveUrl, {
|
||
method: 'POST',
|
||
body: {
|
||
tax_liable: isLiable.value,
|
||
vat_rate: Number(form.value.vat_rate) || 0,
|
||
tax_exemption_reason: isLiable.value ? null : form.value.tax_exemption_reason,
|
||
tax_exemption_note: form.value.tax_exemption_note,
|
||
vat_pricing_mode: form.value.vat_pricing_mode,
|
||
tax_number: form.value.tax_number,
|
||
vat_id: form.value.vat_id,
|
||
invoice_prefix: canEditPrefix.value ? form.value.invoice_prefix : undefined,
|
||
},
|
||
})
|
||
|
||
if (response && response.status === 'success') {
|
||
toast.success(response.message)
|
||
editing.value = false
|
||
} else {
|
||
toast.error(response?.message ?? 'Fehler beim Speichern')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="!editing">
|
||
<table class="data-table">
|
||
<tr>
|
||
<th>Steuerpflicht</th>
|
||
<td>{{ isLiable ? 'Ja – Umsatzsteuer wird erhoben' : 'Nein – umsatzsteuerbefreit' }}</td>
|
||
</tr>
|
||
<tr v-if="isLiable">
|
||
<th>USt-Satz</th>
|
||
<td>{{ form.vat_rate || 0 }} %</td>
|
||
</tr>
|
||
<tr v-if="isLiable">
|
||
<th>Preismodus</th>
|
||
<td>{{ pricingModeLabel }}</td>
|
||
</tr>
|
||
<tr v-else>
|
||
<th>Befreiungsgrund</th>
|
||
<td>{{ reasonLabel }}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Rechnungshinweis</th>
|
||
<td>{{ invoiceHint }}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Steuernummer</th>
|
||
<td>{{ form.tax_number || '—' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>USt-IdNr.</th>
|
||
<td>{{ form.vat_id || '—' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Rechnungs-Präfix</th>
|
||
<td>{{ form.invoice_prefix || '—' }}</td>
|
||
</tr>
|
||
</table>
|
||
<button class="btn-edit" @click="editing = true">Bearbeiten</button>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<table class="data-table">
|
||
<tr>
|
||
<th>Steuerpflicht</th>
|
||
<td>
|
||
<RichSelectBox v-model="form.tax_liable" :options="liableOptions"/>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr v-if="isLiable">
|
||
<th>USt-Satz (%)</th>
|
||
<td><input type="number" min="0" max="100" v-model.number="form.vat_rate" class="form-input"/></td>
|
||
</tr>
|
||
<tr v-if="isLiable">
|
||
<th>Preismodus</th>
|
||
<td>
|
||
<RichSelectBox v-model="form.vat_pricing_mode" :options="pricingModes"/>
|
||
</td>
|
||
</tr>
|
||
|
||
<template v-else>
|
||
<tr>
|
||
<th>Befreiungsgrund</th>
|
||
<td>
|
||
<RichSelectBox
|
||
v-model="form.tax_exemption_reason"
|
||
:options="reasons"
|
||
placeholder="Grund auswählen…"
|
||
/>
|
||
</td>
|
||
</tr>
|
||
<tr v-if="isCustomReason">
|
||
<th>Freitext</th>
|
||
<td>
|
||
<textarea
|
||
v-model="form.tax_exemption_note"
|
||
class="form-input"
|
||
rows="3"
|
||
placeholder="Hinweistext für die Rechnung…"
|
||
></textarea>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
|
||
<tr>
|
||
<th>Rechnungshinweis</th>
|
||
<td class="hint-preview">{{ invoiceHint }}</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th>Steuernummer</th>
|
||
<td>
|
||
<input type="text" v-model="form.tax_number" class="form-input" />
|
||
<span class="field-hint">
|
||
Pflichtangabe auf Rechnungen — alternativ die USt-IdNr. (§ 14 Abs. 4 Nr. 2 UStG)
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>USt-IdNr.</th>
|
||
<td><input type="text" v-model="form.vat_id" class="form-input" /></td>
|
||
</tr>
|
||
<tr>
|
||
<th>Rechnungs-Präfix</th>
|
||
<td>
|
||
<input
|
||
type="text"
|
||
v-model="form.invoice_prefix"
|
||
class="form-input"
|
||
:disabled="!canEditPrefix"
|
||
/>
|
||
<span class="field-hint">
|
||
Erster Block der Rechnungsnummer, z. B. <code>WM</code> in
|
||
<code>WM-V-20260701-0005</code>.
|
||
<template v-if="canEditPrefix">
|
||
Eine Änderung wirkt nur auf künftige Veranstaltungen; bereits angelegte behalten
|
||
ihre Nummer.
|
||
</template>
|
||
<template v-else>
|
||
Änderbar nur in der Mandanten-Verwaltung.
|
||
</template>
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div class="btn-group">
|
||
<button class="btn-save" @click="save">Speichern</button>
|
||
<button class="btn-cancel" @click="editing = false">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.data-table th {
|
||
text-align: left;
|
||
padding: 8px 12px;
|
||
width: 200px;
|
||
color: #374151;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.data-table td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 6px 10px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 6px;
|
||
font-size: 0.95rem;
|
||
box-sizing: border-box;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.hint-preview {
|
||
color: #6b7280;
|
||
font-style: italic;
|
||
}
|
||
|
||
.field-hint {
|
||
display: block;
|
||
margin-top: 4px;
|
||
font-size: 0.8rem;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.field-hint code {
|
||
padding: 1px 4px;
|
||
background-color: #f3f4f6;
|
||
border-radius: 3px;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.form-input:disabled {
|
||
background-color: #f3f4f6;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.btn-edit, .btn-save, .btn-cancel {
|
||
margin-top: 15px;
|
||
padding: 8px 20px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.btn-edit {
|
||
background-color: #1d4899;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btn-edit:hover {
|
||
background-color: #163a7a;
|
||
}
|
||
|
||
.btn-save {
|
||
background-color: #16a34a;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btn-save:hover {
|
||
background-color: #15803d;
|
||
}
|
||
|
||
.btn-cancel {
|
||
background-color: #e5e7eb;
|
||
color: #374151;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.btn-cancel:hover {
|
||
background-color: #d1d5db;
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
</style>
|