Fix copy created document modal

frontend/components/copyCreatedDocumentModal.vue

@@ -19,6 +19,23 @@ const props = defineProps({
 const emit = defineEmits(["updateNeeded","returnData"])
 
 const documentTypeToUse = ref(props.type)
+const documentTypeItems = computed(() => {
+  return Object.keys(dataStore.documentTypesForCreation).map((key) => ({
+    ...dataStore.documentTypesForCreation[key],
+    key
+  }))
+})
+
+const visibleImportKeys = computed(() => {
+  return Object.keys(optionsToImport.value).filter((key) => {
+    if (documentTypeToUse.value !== props.type) {
+      return !['startText', 'endText'].includes(key)
+    }
+
+    return true
+  })
+})
+
 const optionsToImport = ref({
   taxType: true,
   customer: true,
@@ -66,41 +83,63 @@ const startImport = () => {
 </script>
 
 <template>
-  <UModal :fullscreen="false">
+  <UModal>
     <template #content>
-      <UCard>
+      <UCard class="mx-auto w-full max-w-2xl shadow-xl ring-1 ring-black/5">
         <template #header>
-          Erstelltes Dokument Kopieren
+          <div class="flex items-start gap-4">
+            <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
+              <UIcon name="i-heroicons-document-duplicate" class="h-6 w-6" />
+            </div>
+            <div class="min-w-0">
+              <h2 class="text-lg font-semibold text-highlighted">Erstelltes Dokument kopieren</h2>
+              <p class="mt-1 text-sm text-muted">Wähle den Zieltyp und welche Inhalte in das neue Dokument übernommen werden sollen.</p>
+            </div>
+          </div>
         </template>
 
-        <UFormField
-            label="Dokumententyp:"
-          class="mb-3"
-        >
-          <USelectMenu
-              :options="Object.keys(dataStore.documentTypesForCreation).map(key => { return { ...dataStore.documentTypesForCreation[key], key}})"
-              value-attribute="key"
-              option-attribute="labelSingle"
-              v-model="documentTypeToUse"
-          >
+        <div class="space-y-6">
+          <UFormField label="Dokumententyp" required>
+            <USelectMenu
+                v-model="documentTypeToUse"
+                :items="documentTypeItems"
+                value-key="key"
+                label-key="labelSingle"
+                class="w-full"
+                size="lg"
+                :search-input="{ placeholder: 'Dokumententyp suchen...' }"
+                :filter-fields="['labelSingle']"
+            />
+          </UFormField>
 
-          </USelectMenu>
-        </UFormField>
-        <UCheckbox
-              v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)"
-              v-model="optionsToImport[key]"
-            :label="mappings[key]"
-        />
+          <div class="space-y-3">
+            <div>
+              <h3 class="text-sm font-medium text-highlighted">Inhalte übernehmen</h3>
+              <p class="mt-1 text-sm text-muted">Nur die aktivierten Bereiche werden in das neue Dokument kopiert.</p>
+            </div>
 
+            <div class="grid gap-3 sm:grid-cols-2">
+              <UCheckbox
+                  v-for="key in visibleImportKeys"
+                  :key="key"
+                  v-model="optionsToImport[key]"
+                  :label="mappings[key]"
+                  class="rounded-xl border border-default px-3 py-2"
+              />
+            </div>
+          </div>
+        </div>
 
         <template #footer>
-          <UButton
-            @click="startImport"
-          >
-            Kopieren
-          </UButton>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="ghost" @click="modal.close()">
+              Abbrechen
+            </UButton>
+            <UButton @click="startImport">
+              Kopieren
+            </UButton>
+          </div>
         </template>
-
       </UCard>
     </template>
   </UModal>