Dokumentenvorlagen im Ausgangsbeleg-Editor ergänzen

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>