app_vue2/components/Ui/Input/AutocompleteWithAPI.vue

<!--
Liste déroulante avec autocompletion (les données sont issues
d'une api)

@see https://vuetifyjs.com/en/components/autocompletes/#usage
-->
<template>
  <main>
    <UiInputAutocomplete
      :field="field"
      :label="label"
      :data="remoteData ? remoteData : data"
      :items="items"
      :isLoading="isLoading"
      :item-text="itemText"
      :slotText="slotText"
      :item-value="itemValue"
      :multiple="multiple"
      :chips="chips"
      prependIcon="mdi-magnify"
      :return-object="returnObject"
      @research="search"
      :no-filter="noFilter"
      @update="$emit('update', $event, field)"
    />
  </main>
</template>

<script lang="ts">
import {defineComponent, ref, Ref, watch, onUnmounted, toRefs, useContext, useFetch} from '@nuxtjs/composition-api'
import {QUERY_TYPE} from "~/types/enums";
import ModelsUtils from "~/services/utils/modelsUtils";

export default defineComponent({
  props: {
    label: {
      type: String,
      required: false,
      default: null
    },
    field: {
      type: String,
      required: false,
      default: null
    },
    searchFunction: {
      type: Function,
      required: true
    },
    data: {
      type: [String, Number, Object, Array],
      required: false,
      default: null
    },
    remoteUri: {
      type: [Array],
      required: false,
      default: null
    },
    remoteUrl: {
      type: String,
      required: false,
      default: null
    },
    readonly: {
      type: Boolean,
      required: false
    },
    itemValue: {
      type: String,
      default: 'id'
    },
    itemText: {
      type: Array,
      required: true
    },
    slotText: {
      type: Array,
      required: false
    },
    returnObject: {
      type: Boolean,
      default: false
    },
    noFilter: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    chips: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const {data} = toRefs(props)
    const items = ref([])
    const remoteData:Ref<Array<string> | null> = ref(null)
    const isLoading = ref(false)
    const {$dataProvider} = useContext()

    if(props.data){
      items.value = props.multiple ? (data.value ?? []) : [data.value]
    }else if(props.remoteUri){
      const ids:Array<any> = []
      for(const uri of props.remoteUri){
        ids.push(ModelsUtils.extractIdFromUri(uri as string))
      }

      useFetch(async () => {
        isLoading.value = true
        const r = await $dataProvider.invoke({
          type: QUERY_TYPE.DEFAULT,
          url: props.remoteUrl,
          listArgs: {
            filters:[
              {key: 'id', value: ids.join(',')}
            ]
          }
        })
        isLoading.value = false
        remoteData.value = r.data
        items.value = r.data
      })
    }

    const search = async (research:string) => {
      isLoading.value = true
      const func: Function = props.searchFunction
      items.value = items.value.concat(await func(research, props.field))
      isLoading.value = false
    }

    const unwatch = watch(data,(d) => {
      items.value = props.multiple ? d : [d]
    })

    onUnmounted(() => {
      unwatch()
    })

    return {
      label_field: props.label ?? props.field,
      isLoading,
      items,
      remoteData,
      search
    }
  }
})
</script>