SelectRecAccount

<script setup lang="ts">
  import { stateKey } from "./FormRegistration.vue";
  import { useField } from "vee-validate";
  import { onMounted } from "vue";

  const { t } = useI18n();
  const state = inject(stateKey, ref());
  const isLoading = ref(false);
  const token = ref(null);
  token.value = localStorage.getItem("sanctum.storage.token");
  const config = useRuntimeConfig();
  const data = ref([]);
  const error = ref();

  function handleSelect(name: string) {
    state!.value.rec_account = name;
  }

  async function fetchData() {
    try {
      isLoading.value = true;
      const { return: _data } = await $fetch(
        `${config.public.apiBaseUrl}/api/v1/references/recc-accounts/index`,
        {
          method: "GET",
          headers: {
            authorization: `Bearer ${token.value}`,
          },
          server: false,
        },
      );

      data.value = _data.data;
    } catch (error) {
      isLoading.value = false;
    } finally {
      isLoading.value = false;
    }
  }
  onMounted(fetchData);
</script>

<template>
  <MoleculeSelectBase v-model="state.rec_account_uuid" :placeholder="t('select')">
    <SelectGroup>
      <template v-if="isLoading">
        <SelectItem disabled="">Loading ...</SelectItem>
      </template>
      <template v-else-if="error">
        <SelectItem disabled>Failed load data</SelectItem>
      </template>
      <template v-else>
        <SelectItem
          v-for="{ uuid, name } in data"
          :key="uuid"
          :value="uuid"
          @select="() => handleSelect(name)"
        >
          {{ name }}
        </SelectItem>
      </template>
    </SelectGroup>
  </MoleculeSelectBase>
</template>