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

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  modelValue: {
    company_name: string;
    company_street: string;
    company_street_number: string;
    company_postal_code: string;
    company_city: string;
    company_country: string;
  };
}>();

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

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"
      >
        Name
      </label>
      <div class="mt-2">
        <input
          id="company-name"
          v-model="orgAddress.company_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-5">
      <label
        for="company-street-address"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        Strasse
      </label>
      <div class="mt-2">
        <input
          id="company-street-address"
          v-model="orgAddress.company_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-1">
      <label
        for="company-street-number"
        class="block text-sm font-medium leading-6 text-gray-900"
      >
        Hausnummmer
      </label>
      <div class="mt-2">
        <input
          id="company-street-number"
          v-model="orgAddress.company_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"
      >
        PLZ
      </label>
      <div class="mt-2">
        <input
          id="company-postal-code"
          v-model="orgAddress.company_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"
      >
        Ort
      </label>
      <div class="mt-2">
        <input
          id="company-city"
          v-model="orgAddress.company_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"
      >
        Land
      </label>
      <div class="mt-2">
        <select
          id="company-country"
          v-model="orgAddress.company_country"
          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>Schweiz</option>
          <option>Deutschland</option>
          <option>Österreich</option>
        </select>
      </div>
    </div>
  </div>
</template>