vbv/client/src/components/onboarding/PersonalAddress.vue

<script setup lang="ts">
import { computed } from "vue";
import { useEntities } from "@/services/entities";

const props = defineProps<{
  modelValue: {
    first_name: string;
    last_name: string;
    street: string;
    street_number: string;
    postal_code: string;
    city: string;
    country_code: string;
  };
}>();

const emit = defineEmits(["update:modelValue"]);

const { countries } = useEntities();

const address = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

<template>
  <div class="my-10 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
    <div class="sm:col-span-3">
      <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">
        {{ $t("a.Vorname") }}
      </label>
      <div class="mt-2">
        <input
          id="first-name"
          v-model="address.first_name"
          type="text"
          name="first-name"
          required
          autocomplete="given-name"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        />
      </div>
    </div>

    <div class="sm:col-span-3">
      <label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">
        {{ $t("a.Nachname") }}
      </label>
      <div class="mt-2">
        <input
          id="last-name"
          v-model="address.last_name"
          type="text"
          name="last-name"
          required
          autocomplete="family-name"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        />
      </div>
    </div>

    <div class="sm:col-span-4">
      <label
        for="street-address"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Strasse") }}
      </label>
      <div class="mt-2">
        <input
          id="street-address"
          v-model="address.street"
          type="text"
          required
          name="street-address"
          autocomplete="street-address"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        />
      </div>
    </div>

    <div class="sm:col-span-2">
      <label
        for="street-number"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Hausnummmer") }}
      </label>
      <div class="mt-2">
        <input
          id="street-number"
          v-model="address.street_number"
          name="street-number"
          type="text"
          autocomplete="street-number"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        />
      </div>
    </div>

    <div class="sm:col-span-1">
      <label
        for="postal-code"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.PLZ") }}
      </label>
      <div class="mt-2">
        <input
          id="postal-code"
          v-model="address.postal_code"
          type="text"
          required
          name="postal-code"
          autocomplete="postal-code"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        />
      </div>
    </div>

    <div class="sm:col-span-5">
      <label for="city" class="block text-sm font-medium leading-6 text-gray-900">
        {{ $t("a.Ort") }}
      </label>
      <div class="mt-2">
        <input
          id="city"
          v-model="address.city"
          type="text"
          name="city"
          required
          autocomplete="address-level2"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        />
      </div>
    </div>

    <div class="col-span-full">
      <label for="country" class="block text-sm font-medium leading-6 text-gray-900">
        {{ $t("a.Land") }}
      </label>
      <div class="mt-2">
        <select
          id="country"
          v-model="address.country_code"
          required
          name="country"
          autocomplete="country-name"
          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        >
          <option
            v-for="country in countries"
            :key="country.country_code"
            :value="country.country_code"
          >
            {{ country.name }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>