150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<script setup>
|
|
const dataStore = useDataStore()
|
|
|
|
defineShortcuts({
|
|
'+': () => {
|
|
editTemplateModalOpen.value = true
|
|
}
|
|
})
|
|
|
|
const editTemplateModalOpen = ref(false)
|
|
const itemInfo = ref({})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
title="Text Vorlagen"
|
|
>
|
|
<template #right>
|
|
<UButton
|
|
@click="editTemplateModalOpen = true"
|
|
>
|
|
+ Erstellen
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UDashboardToolbar>
|
|
|
|
</UDashboardToolbar>
|
|
<UDashboardPanelContent>
|
|
<UCard class="mt-5 mx-5">
|
|
<template #header>
|
|
Variablen
|
|
</template>
|
|
<table>
|
|
<tr>
|
|
<th class="text-left">Variable</th>
|
|
<th class="text-left">Beschreibung</th>
|
|
</tr>
|
|
<tr>
|
|
<td>vorname</td>
|
|
<td>Vorname</td>
|
|
</tr>
|
|
<tr>
|
|
<td>nachname</td>
|
|
<td>Nachname</td>
|
|
</tr>
|
|
<tr>
|
|
<td>zahlungsziel_in_tagen</td>
|
|
<td>Zahlungsziel in Tagen</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</UCard>
|
|
|
|
<div class="w-3/4 mx-auto mt-5">
|
|
<UCard
|
|
v-for="template in dataStore.texttemplates"
|
|
class="mb-3"
|
|
>
|
|
<p class="text-2xl">{{dataStore.documentTypesForCreation[template.documentType].label}}</p>
|
|
<p class="text-xl">{{template.pos === 'startText' ? 'Einleitung' : 'Ende'}}</p>
|
|
<p class="text-justify">{{template.text}}</p>
|
|
<UButton
|
|
@click="itemInfo = template;
|
|
editTemplateModalOpen = true"
|
|
icon="i-heroicons-pencil-solid"
|
|
variant="outline"
|
|
/>
|
|
</UCard>
|
|
</div>
|
|
</UDashboardPanelContent>
|
|
|
|
<USlideover
|
|
v-model="editTemplateModalOpen"
|
|
>
|
|
<UCard class="h-full">
|
|
<template #header>
|
|
{{itemInfo.id ? 'Vorlage bearbeiten' : 'Vorlage erstellen'}}
|
|
</template>
|
|
|
|
<UForm class="h-full">
|
|
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Dokumententyp:"
|
|
>
|
|
|
|
<USelectMenu
|
|
:options="Object.keys(dataStore.documentTypesForCreation).map(i => {
|
|
return {
|
|
label: dataStore.documentTypesForCreation[i].label,
|
|
key: i
|
|
}
|
|
})"
|
|
option-attribute="label"
|
|
value-attribute="key"
|
|
v-model="itemInfo.documentType"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Position:"
|
|
>
|
|
<USelectMenu
|
|
:options="[{label:'Einleitung',key: 'startText'},{label:'Ende',key: 'endText'}]"
|
|
option-attribute="label"
|
|
value-attribute="key"
|
|
v-model="itemInfo.pos"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Text:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.text"
|
|
/>
|
|
</UFormGroup>
|
|
</UForm>
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
@click="dataStore.createNewItem('texttemplates',itemInfo);
|
|
editTemplateModalOpen = false"
|
|
v-if="!itemInfo.id"
|
|
>Erstellen</UButton>
|
|
<UButton
|
|
@click="dataStore.updateItem('texttemplates',itemInfo);
|
|
editTemplateModalOpen = false"
|
|
v-if="itemInfo.id"
|
|
>Speichern</UButton>
|
|
</template>
|
|
</UCard>
|
|
</USlideover>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |