app/components/Ui/Input/Autocomplete/Accesses.vue

<!--
Champs autocomplete dédié à la recherche des access d'une structure

@see https://vuetifyjs.com/en/components/autocompletes/#usage
-->

<template>
  <main>
    <UiInputAutocomplete
        :model-value="modelValue"
        :field="field"
        :label="label"
        :items="items"
        item-value="id"
        :isLoading="pending"
        :multiple="multiple"
        hide-no-data
        :chips="chips"
        :auto-select-first="false"
        prependIcon="fas fa-magnifying-glass"
        :return-object="false"
        :variant="variant"
        @update:model-value="onUpdateModelValue"
        @update:search="onUpdateSearch"
    />
  </main>
</template>

<script setup lang="ts">
import type {PropType} from "@vue/runtime-core";
import {computed} from "@vue/reactivity";
import type {ComputedRef, Ref} from "@vue/reactivity";
import type {AnyJson, AssociativeArray} from "~/types/data";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import Access from "~/models/Access/Access";
import {useEntityManager} from "~/composables/data/useEntityManager";
import ArrayUtils from "~/services/utils/arrayUtils";
import * as _ from 'lodash-es'

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    type: [Object, Array],
    required: false,
    default: null
  },
  /**
   * Filtres à transmettre à la source de données
   */
  filters: {
    type: Object as PropType<Ref<AssociativeArray>>,
    required: false,
    default: ref(null)
  },
  /**
   * Nom de la propriété d'une entité lorsque l'input concerne cette propriété
   * - Utilisé par la validation
   * - Laisser null si le champ ne s'applique pas à une entité
   */
  field: {
    type: String,
    required: false,
    default: null
  },
  /**
   * Label du champ
   * Si non défini, c'est le nom de propriété qui est utilisé
   */
  label: {
    type: String,
    required: false,
    default: null
  },
  /**
   * Définit si le champ est en lecture seule
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-readonly
   */
  readonly: {
    type: Boolean,
    required: false
  },
  /**
   * Autorise la sélection multiple
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-multiple
   */
  multiple: {
    type: Boolean,
    default: false
  },
  /**
   * Rends les résultats sous forme de puces
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-chips
   */
  chips: {
    type: Boolean,
    default: false
  },
  /**
   * Closes the menu and clear the current search after the selection has been updated
   */
  clearSearchAfterUpdate: {
    type: Boolean,
    default: false
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-variant
   */
  variant: {
    type: String as PropType<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled" | undefined>,
    required: false,
    default: 'filled'
  }
})

/**
 * Element de la liste autocomplete
 */
interface AccessListItem {
  id: number | string,
  title: string
}

const { fetchCollection } = useEntityFetch()
const { em } = useEntityManager()
const i18n = useI18n()

/**
 * Génère un AccessListItem à partir d'un Access
 * @param access
 */
const accessToItem = (access: Access): AccessListItem => {
  return {
    id: access.id,
    title: access.person ? `${access.person.name} ${access.person.givenName}` : i18n.t('unknown')
  }
}

const initialized: Ref<boolean> = ref(false)

/**
 * Saisie de l'utilisateur utilisée pour filtrer la recherche
 */
const nameFilter: Ref<string | null> = ref(null)

/**
 * Query transmise à l'API lors des changements de filtre de recherche
 */
const query: ComputedRef<AnyJson> = computed(() => {
  let q: AnyJson = {'groups[]': 'access_people_ref', 'order[name]': 'asc'}

  if (!initialized.value && props.modelValue) {
    if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
      q['id[in]'] = props.modelValue.join(',')
    } else {
      q['id[in]'] = props.modelValue
    }
    return q
  }

  if (nameFilter.value) {
    q['fullname'] = nameFilter.value
  }

  return q
})

/**
 * On commence par fetcher les accesses déjà actifs, pour affichage des noms
 */
const { data: collection, pending, refresh } = await fetchCollection(
    Access,
    null,
    query
)
initialized.value = true

// On a déjà récupéré les access actifs, on relance une requête pour récupérer la première page
// des accesses suivants
refresh()


/**
 * Contenu de la liste autocomplete
 */
const items: ComputedRef<Array<AccessListItem>> = computed(() => {
  if (pending.value || !collection.value) {
    return []
  }

  if (!collection.value) {
    return []
  }

  //@ts-ignore
  const fetchedItems = collection.value.items.map(accessToItem)

  // move the active items to the top and sort by name
  fetchedItems.sort((a, b) => {
    if (props.modelValue.includes(a.id) && !props.modelValue.includes(b.id)) {
      return -1
    } else if (!props.modelValue.includes(a.id) && props.modelValue.includes(b.id)) {
      return 1
    } else {
      return a.title.localeCompare(b.title)
    }
  })

  return fetchedItems
})


/**
 * Délai entre le dernier caractère saisi et la requête de vérification de la mise à jour des résultats (en ms)
 */
const inputDelay = 600

/**
 * Version debounced de la fonction refresh
 * @see https://docs-lodash.com/v4/debounce/
 */
const refreshDebounced: _.DebouncedFunc<() => void> = _.debounce(async () => {
  await refresh();
}, inputDelay)

// ### Events
const emit = defineEmits(['update:model-value'])

/**
 * La recherche textuelle a changé.
 * @param event
 */
const onUpdateSearch = (event: string) => {
  nameFilter.value = event
  refreshDebounced()
}

const onUpdateModelValue = (event: Array<number>) => {
  if (props.clearSearchAfterUpdate) {
    nameFilter.value = ""
  }
  emit('update:model-value', event)
}
</script>

<style scoped lang="scss">
  .v-autocomplete {
    min-width: 350px;
  }
</style>