app/components/Ui/Input/Autocomplete.vue

<!--
Liste déroulante avec autocompletion, à placer dans un composant `UiForm`

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

<template>
  <main>
    <!--suppress TypeScriptValidateTypes -->
    <v-autocomplete
      v-model:search-input="search"
      :model-value="modelValue"
      :readonly="readonly"
      autocomplete="search"
      :items="items"
      :label="$t(fieldLabel)"
      :item-title="itemTitle"
      :item-value="itemValue"
      :no-filter="noFilter"
      :auto-select-first="autoSelectFirst"
      :multiple="multiple"
      :loading="isLoading"
      :return-object="returnObject"
      :prepend-inner-icon="prependInnerIcon"
      :error="error || !!fieldViolations"
      :error-messages="
        errorMessage || fieldViolations ? $t(fieldViolations) : ''
      "
      :rules="rules"
      :chips="chips"
      :closable-chips="closableChips"
      :hide-no-data="hideNoData"
      :no-data-text="
        isLoading ? $t('please_wait') : $t('no_result_matching_your_request')
      "
      :variant="variant"
      density="compact"
      class="mb-3"
      :clearable="clearable && !readonly"
      @update:model-value="onUpdate"
      @update:search="emit('update:search', $event)"
      @update:menu="emit('update:menu', $event)"
      @update:focused="emit('update:focused', $event)"
    >
      <template v-if="slotText" #item="{ item }">
        <div>{{ item.slotTextDisplay }}</div>
      </template>
    </v-autocomplete>
  </main>
</template>

<script setup lang="ts">
import type { Ref, PropType } from 'vue'
import { useFieldViolation } from '~/composables/form/useFieldViolation'
import ObjectUtils from '~/services/utils/objectUtils'
import type { AnyJson } from '~/types/data'

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    type: [String, Number, Object, Array] as PropType<
      string | number | object | Array<unknown>
    >,
    required: false,
    default: 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,
  },
  /**
   * Liste des éléments de la liste
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-items
   */
  items: {
    type: Array as PropType<Array<object>>,
    required: false,
    default: () => [],
  },
  /**
   * Définit si le champ est en lecture seule
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-readonly
   */
  readonly: {
    type: Boolean,
    required: false,
  },
  /**
   * Le model est l'objet lui-même, et non pas son id (ou la propriété définie avec itemValue)
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-return-object
   */
  returnObject: {
    type: Boolean,
    default: false,
  },
  /**
   * Autorise la sélection multiple
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-multiple
   */
  multiple: {
    type: Boolean,
    default: false,
  },
  /**
   * Propriété de l'objet à utiliser comme label
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-item-title
   */
  itemTitle: {
    type: String,
    default: 'title',
  },
  /**
   * Propriété de l'objet à utiliser comme clé (et correspondant au v-model)
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-item-value
   */
  itemValue: {
    type: String,
    default: 'id',
  },
  /**
   * Icône de gauche
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-prepend-inner-icon
   */
  prependInnerIcon: {
    type: String,
    default: null,
  },
  /**
   * Rends les résultats sous forme de puces
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-chips
   */
  chips: {
    type: Boolean,
    default: false,
  },
  /**
   * Permet de retirer une puce directement
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-closable-chips
   */
  closableChips: {
    type: Boolean,
    default: false,
  },
  /**
   * Le contenu de la liste est en cours de chargement
   */
  isLoading: {
    type: Boolean,
    required: false,
    default: false,
  },
  /**
   * Propriété de l'objet utilisé pour grouper les items ; laisser null pour ne pas grouper
   */
  group: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-hide-no-data
   */
  hideNoData: {
    type: Boolean,
    required: false,
    default: false,
  },
  // TODO: c'est quoi?
  slotText: {
    type: Array,
    required: false,
    default: null,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-no-filter
   */
  noFilter: {
    type: Boolean,
    default: false,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-auto-select-first
   */
  autoSelectFirst: {
    type: Boolean,
    default: true,
  },
  // TODO: c'est quoi?
  translate: {
    type: Boolean,
    default: false,
  },
  /**
   * Règles de validation
   * @see https://vuetify.cn/en/components/forms/#validation-with-submit-clear
   */
  rules: {
    type: Array,
    required: false,
    default: () => [],
  },
  /**
   * Le champ est-il actuellement en état d'erreur
   */
  error: {
    type: Boolean,
    required: false,
  },
  /**
   * Si le champ est en état d'erreur, quel est le message d'erreur?
   */
  errorMessage: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * @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: 'outlined',
  },
  /**
   * Définit si le champ est en lecture seule
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-readonly
   */
  clearable: {
    type: Boolean,
    required: false,
  },
})

const i18n = useI18n()

const search: Ref<string | null> = ref(null)

const fieldLabel: string = props.label ?? props.field

const { fieldViolations, updateViolationState } = useFieldViolation(props.field)

const emit = defineEmits([
  'update:model-value',
  'update:search',
  'update:focused',
  'update:menu',
])

const onUpdate = (event: string) => {
  updateViolationState()
  emit('update:model-value', event)
}

/**
 * On construit l'Array à double entrée contenant les groups (headers) et les items
 * TODO: à revoir
 *
 * @param items
 */
const groupItems = (items: Array<AnyJson>): Array<Array<string>> => {
  const group = props.group as string | null
  if (group === null) {
    return items
  }

  const itemsByGroup: Array<Array<string>> = []
  let groupValue = null

  for (const item of items) {
    if (item) {
      groupValue = item[group]

      if (!itemsByGroup[groupValue]) {
        itemsByGroup[groupValue] = []
      }

      itemsByGroup[groupValue].push(item)
    }
  }

  return itemsByGroup
}

/**
 * Construction de l'Array JSON contenant toutes les propositions à afficher dans le select
 * TODO: à revoir
 *
 * @param groupedItems
 */
const prepareGroups = (groupedItems: Array<Array<string>>): Array<AnyJson> => {
  let finalItems: Array<AnyJson> = []

  for (const group in groupedItems) {
    // Si un groupe est présent, alors on créé le groupe options header
    if (group !== 'undefined') {
      finalItems.push({ header: i18n.t(group as string) })
    }

    // On parcourt les items pour préparer les texts / slotTexts à afficher
    finalItems = finalItems.concat(
      groupedItems[group].map((item: AnyJson) => {
        return prepareItem(item)
      }),
    )
  }
  return finalItems
}

/**
 * Construction d'un item
 * TODO: à revoir
 *
 * @param item
 */
const prepareItem = (item: object): AnyJson => {
  const slotTextDisplay: Array<string> = []
  const itemTextDisplay: Array<string> = []

  item = ObjectUtils.cloneAndFlatten(item)

  // Si on souhaite avoir un texte différent dans les propositions que dans la sélection finale de select
  if (props.slotText) {
    for (const text of props.slotText) {
      slotTextDisplay.push(
        props.translate ? i18n.t(item[text as string]) : item[text as string],
      )
    }
  }

  for (const text of props.itemTitle) {
    itemTextDisplay.push(
      props.translate ? i18n.t(item[text as string]) : item[text as string],
    )
  }

  // On reconstruit l'objet
  return Object.assign({}, item, {
    itemTextDisplay: itemTextDisplay.join(' '),
    slotTextDisplay: slotTextDisplay.join(' '),
  })
}

onUnmounted(() => {
  updateViolationState()
  search.value = null
})
</script>

<style scoped lang="scss">
:deep(.v-chip__close .v-icon) {
  font-size: 16px;
  color: rgb(var(--v-theme-on-neutral));
}
</style>