init des Autocomplete

components/Ui/Input/Autocomplete.vue

@@ -21,8 +21,10 @@ Liste déroulante avec autocompletion
       :return-object="returnObject"
       :search-input.sync="search"
       :prepend-icon="prependIcon"
-      :error="error"
+      :error="error || !!violation"
+      :error-messages="errorMessage || violation ? $t(violation) : ''"
       :rules="rules"
+      :chips="chips"
       :menu-props="menuProps"
       @input="onChange($event)"
     >
@@ -116,11 +118,24 @@ export default defineComponent({
       required: false,
       default: () => []
     },
+    chips: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      required: false
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: null
+    }
   },
   setup (props, { emit }) {
     const {app:{i18n}, store} = useContext()
     const search:Ref<string|null> = ref(null)
-    const {error, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
 
     // On reconstruit les items à afficher...
     const itemsToDisplayed: ComputedRef<Array<AnyJson>> = computed(() => {
@@ -199,7 +214,7 @@ export default defineComponent({
       label_field: props.label ?? props.field,
       itemsToDisplayed,
       search,
-      error,
+      violation,
       onChange
     }
   }

components/Ui/Input/AutocompleteWithAPI.vue

@@ -9,12 +9,14 @@ d'une api)
     <UiInputAutocomplete
       :field="field"
       :label="label"
-      :data="data"
+      :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"
@@ -25,7 +27,9 @@ d'une api)
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, Ref, watch, onUnmounted, toRefs} from '@nuxtjs/composition-api'
+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: {
@@ -48,6 +52,16 @@ export default defineComponent({
       required: false,
       default: null
     },
+    remoteUri: {
+      type: [Array],
+      required: false,
+      default: null
+    },
+    remoteUrl: {
+      type: String,
+      required: false,
+      default: null
+    },
     readonly: {
       type: Boolean,
       required: false
@@ -71,24 +85,57 @@ export default defineComponent({
     noFilter: {
       type: Boolean,
       default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    chips: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
     const {data} = toRefs(props)
-    const items:Ref<Array<any>> = ref([data.value])
+    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 = await func(research, props.field)
-
+      items.value = items.value.concat(await func(research, props.field))
       isLoading.value = false
     }
 
     const unwatch = watch(data,(d) => {
-      items.value = [d]
+      items.value = props.multiple ? d : [d]
     })
 
     onUnmounted(() => {
@@ -99,6 +146,7 @@ export default defineComponent({
       label_field: props.label ?? props.field,
       isLoading,
       items,
+      remoteData,
       search
     }
   }