Added TextTemplates Page and Function

pages/settings/texttemplates.vue

@@ -0,0 +1,136 @@
+<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="Dokumententyp:"
+        >
+          <USelectMenu
+            :options="Object.keys(dataStore.documentTypesForCreation).map(i => {
+              return {
+                label: dataStore.documentTypesForCreation[i].label,
+                key: i
+              }
+            })"
+            v-model="itemInfo.documentType"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Position:"
+        >
+          <USelectMenu
+            :options="[{label:'Einleitung',key: 'startText'},{label:'Ende',key: 'endText'}]"
+            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>