Dokumentenvorlagen im Ausgangsbeleg-Editor ergänzen

frontend/components/EntityShowSubCreatedDocuments.vue

@@ -2,6 +2,8 @@
 
 import dayjs from "dayjs";
 import {useSum} from "~/composables/useSum.js";
+import CreateDocumentModal from "~/components/createDocumentModal.vue";
+import CreateDocumentFromTemplateModal from "~/components/createDocumentFromTemplateModal.vue";
 defineShortcuts({
   /*'/': () => {
     //console.log(searchinput)
@@ -56,6 +58,7 @@ const dataStore = useDataStore()
 const tempStore = useTempStore()
 
 const router = useRouter()
+const modal = useModal()
 const deliveryNoteLikeDocumentTypes = ['deliveryNotes', 'packingSlips']
 
 const createddocuments = ref([])
@@ -154,34 +157,17 @@ const selectItem = (item) => {
         Lieferscheine/Packscheine abrechnen
       </UButton>
       <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
+          icon="i-heroicons-plus"
+          @click="modal.open(CreateDocumentModal, { queryStringData: props.queryStringData })"
       >
-        + Angebot
+        + Dokument
       </UButton>
       <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'costEstimates'})}`)"
+          icon="i-heroicons-document-duplicate"
+          variant="outline"
+          @click="modal.open(CreateDocumentFromTemplateModal, { queryStringData: props.queryStringData })"
       >
-        + Kostenschätzung
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
-      >
-        + Auftragsbestätigung
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
-      >
-        + Lieferschein
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'packingSlips'})}`)"
-      >
-        + Packschein
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
-      >
-        + Abschlagsrechnung
+        + Dokument aus Vorlage
       </UButton>
       <UButton
           @click="showFinalInvoiceConfig = true"
@@ -238,12 +224,6 @@ const selectItem = (item) => {
           </UCard>
         </template>
       </UModal>
-      <UButton
-          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
-      >
-        + Rechnung
-      </UButton>
-
       <template #right>
         <USelectMenu
             v-model="selectedColumns"

frontend/components/MainNav.vue

@@ -331,6 +331,11 @@ const links = computed(() => {
       to: "/settings/texttemplates",
       icon: "i-heroicons-clipboard-document-list",
     } : null,
+    featureEnabled("settingsDocumenttemplates") ? {
+      label: "Dokumentenvorlagen",
+      to: "/settings/documenttemplates",
+      icon: "i-heroicons-document-duplicate",
+    } : null,
     featureEnabled("settingsLetterheads") ? {
       label: "Briefpapiere",
       to: "/settings/letterheads",

frontend/components/createDocumentFromTemplateModal.vue

@@ -0,0 +1,94 @@
+<script setup>
+const dataStore = useDataStore()
+const modal = useModal()
+const router = useRouter()
+const templates = ref([])
+const selectedType = ref(null)
+const loading = ref(true)
+const props = defineProps({
+  queryStringData: { type: String, default: "" },
+})
+
+const documentTypes = computed(() => Object.entries(dataStore.documentTypesForCreation || {})
+    .filter(([key]) => key !== 'serialInvoices')
+    .map(([key, value]) => ({ key, ...value })))
+const visibleTemplates = computed(() => templates.value.filter(template => {
+  return !selectedType.value || template.documentType === selectedType.value
+}))
+
+const loadTemplates = async () => {
+  try {
+    templates.value = await useEntities('documenttemplates').select('*')
+  } finally {
+    loading.value = false
+  }
+}
+
+const selectTemplate = (template) => {
+  const query = new URLSearchParams(props.queryStringData)
+  query.set('templateId', template.id)
+  query.set('type', template.documentType)
+  router.push(`/createDocument/edit?${query.toString()}`)
+  modal.close()
+}
+
+loadTemplates()
+</script>
+
+<template>
+  <UModal :ui="{ content: 'sm:max-w-3xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-lg font-semibold">Dokument aus Vorlage erstellen</h2>
+              <p class="mt-1 text-sm text-muted">Zuerst Dokumenttyp, anschließend die passende Vorlage auswählen.</p>
+            </div>
+            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="modal.close()" />
+          </div>
+        </template>
+
+        <UFormField label="Dokumenttyp" required>
+          <USelectMenu
+              v-model="selectedType"
+              :items="documentTypes"
+              value-key="key"
+              label-key="labelSingle"
+              class="w-full"
+              placeholder="Dokumenttyp auswählen"
+          />
+        </UFormField>
+
+        <div class="mt-5 space-y-2">
+          <p class="text-sm font-medium text-highlighted">Vorlagen</p>
+          <div v-if="loading" class="py-6 text-center text-sm text-muted">Vorlagen werden geladen …</div>
+          <div v-else-if="visibleTemplates.length === 0" class="rounded-lg border border-dashed border-default p-6 text-center text-sm text-muted">
+            Keine Vorlagen für diesen Dokumenttyp vorhanden.
+          </div>
+          <div v-else class="space-y-2">
+            <button
+                v-for="template in visibleTemplates"
+                :key="template.id"
+                type="button"
+                class="flex w-full items-center justify-between rounded-lg border border-default p-3 text-left transition hover:border-primary hover:bg-primary/5"
+                @click="selectTemplate(template)"
+            >
+              <span>
+                <span class="block font-medium text-highlighted">{{ template.name }}</span>
+                <span class="text-xs text-muted">{{ dataStore.documentTypesForCreation[template.documentType]?.labelSingle }}</span>
+              </span>
+              <UBadge v-if="template.default" color="primary" variant="soft">Standard</UBadge>
+            </button>
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton color="neutral" variant="ghost" @click="modal.close()">Abbrechen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>

frontend/components/createDocumentModal.vue

@@ -0,0 +1,62 @@
+<script setup>
+const dataStore = useDataStore()
+const modal = useModal()
+const router = useRouter()
+const props = defineProps({
+  queryStringData: { type: String, default: "" },
+  projectId: { type: [String, Number], default: null },
+  customerId: { type: [String, Number], default: null },
+})
+
+const documentTypes = computed(() => Object.entries(dataStore.documentTypesForCreation || {})
+    .filter(([key]) => key !== 'serialInvoices')
+    .map(([key, value]) => ({ key, ...value })))
+
+const createDocument = (type) => {
+  const query = new URLSearchParams(props.queryStringData)
+  query.set('type', type)
+  if (props.projectId) query.set('project', props.projectId)
+  if (props.customerId) query.set('customer', props.customerId)
+  router.push(`/createDocument/edit?${query.toString()}`)
+  modal.close()
+}
+</script>
+
+<template>
+  <UModal :ui="{ content: 'sm:max-w-3xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-lg font-semibold">Dokument erstellen</h2>
+              <p class="mt-1 text-sm text-muted">Wähle den gewünschten Ausgangsbeleg.</p>
+            </div>
+            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="modal.close()" />
+          </div>
+        </template>
+
+        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <UButton
+              v-for="documentType in documentTypes"
+              :key="documentType.key"
+              block
+              color="neutral"
+              variant="outline"
+              class="flex h-auto min-h-24 flex-col items-start justify-center gap-1 p-4 text-left"
+              @click="createDocument(documentType.key)"
+          >
+            <span class="font-semibold text-highlighted">{{ documentType.labelSingle }}</span>
+            <span class="text-xs text-muted">{{ documentType.label }}</span>
+          </UButton>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton color="neutral" variant="ghost" @click="modal.close()">Abbrechen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>