FEDEO/frontend/components/copyCreatedDocumentModal.vue

<script setup>

const dataStore = useDataStore()
const modal = useModal()
const router = useRouter()
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  },
})



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 selectedDocumentType = computed(() => {
  return documentTypeItems.value.find((item) => item.key === documentTypeToUse.value) || null
})

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,
  letterhead: true,
  contact: true,
  deliveryDateType: true,
  deliveryDate: true,
  deliveryDateEnd: true,
  documentDate: false,
  paymentDays: true,
  customSurchargePercentage: true,
  contactPerson: true,
  plant: true,
  project:true,
  costcentre: true,
  description: true,
  startText: false,
  rows: true,
  endText: false,
})

const mappings = ref({
  customer: "Kunde",
  taxType: "Steuertyp",
  letterhead: "Briefpapier",
  contact: "Ansprechpartner",
  deliveryDateType: "Lieferdatumsart",
  deliveryDate: "Lieferdatum / Lieferzeitraum Start",
  deliveryDateEnd: "Lieferzeitraum Ende",
  documentDate: "Belegdatum",
  paymentDays: "Zahlungsziel in Tagen",
  customSurchargePercentage: "Individueller Aufschlag",
  contactPerson: "Ansprechpartner Mitarbeiter",
  plant: "Objekt",
  project: "Projekt",
  costcentre: "Kostenstelle",
  description: "Beschreibung",
  startText: "Einleitung",
  rows: "Positionen",
  endText: "Nachbemerkung",
})

const startImport = () => {
  router.push(`/createDocument/edit/?createddocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
  modal.close()
}
</script>

<template>
  <UModal :ui="{ content: 'sm:max-w-2xl' }">
    <template #content>
      <div class="mx-auto flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-default shadow-xl ring-1 ring-black/5">
        <div class="border-b border-default px-6 py-5 sm:px-7">
          <div class="flex items-start gap-4">
            <div class="flex h-12 w-12 shrink-0 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>
        </div>

        <div class="flex-1 space-y-6 overflow-y-auto px-6 py-5 sm:px-7">
          <UFormField label="Dokumententyp" required class="w-full">
            <USelectMenu
                v-model="documentTypeToUse"
                :items="documentTypeItems"
                value-key="key"
                label-key="labelSingle"
                class="w-full"
                size="lg"
                :placeholder="selectedDocumentType?.labelSingle || 'Dokumententyp wählen'"
                :search-input="{ placeholder: 'Dokumententyp suchen...' }"
                :filter-fields="['labelSingle']"
            >
              <template #default>
                <span class="block truncate">
                  {{ selectedDocumentType?.labelSingle || "Dokumententyp wählen" }}
                </span>
              </template>
            </USelectMenu>
          </UFormField>

          <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>

        <div class="flex shrink-0 justify-end gap-2 border-t border-default px-6 py-4 sm:px-7">
          <UButton color="neutral" variant="ghost" @click="modal.close()">
            Abbrechen
          </UButton>
          <UButton @click="startImport">
            Kopieren
          </UButton>
        </div>
      </div>
    </template>
  </UModal>
</template>

<style scoped>

</style>