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

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

const props = defineProps<{
  modelValue: {
    organisation_detail_name: string;
    organisation_street: string;
    organisation_street_number: string;
    organisation_postal_code: string;
    organisation_city: string;
    organisation_country_code: string;
  };
}>();

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

const { countries } = useEntities();

const orgAddress = 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="col-span-full">
      <label
        for="company-name"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Firmenname") }}
      </label>
      <div class="mt-2">
        <input
          id="company-name"
          v-model="orgAddress.organisation_detail_name"
          type="text"
          required
          name="company-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="company-street-address"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Strasse") }}
      </label>
      <div class="mt-2">
        <input
          id="company-street-address"
          v-model="orgAddress.organisation_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="company-street-number"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Hausnummmer") }}
      </label>
      <div class="mt-2">
        <input
          id="company-street-number"
          v-model="orgAddress.organisation_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="company-postal-code"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.PLZ") }}
      </label>
      <div class="mt-2">
        <input
          id="company-postal-code"
          v-model="orgAddress.organisation_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="company-city"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Ort") }}
      </label>
      <div class="mt-2">
        <input
          id="company-city"
          v-model="orgAddress.organisation_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="company-country"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        {{ $t("a.Land") }}
      </label>
      <div class="mt-2">
        <select
          id="company-country"
          v-model="orgAddress.organisation_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>