app/components/Ui/ItemFromUri.vue

<!--
Espace permettant de récupérer un item via une uri et de gérer son affichage via un slot
-->
<template>
  <main>
    <v-skeleton-loader v-if="pending" :type="loaderType" />
    <div v-else>
      <slot name="item.text" v-bind="{ item }" />
    </div>
    <slot />
  </main>
</template>

<script setup lang="ts">
// TODO: renommer en EntityFromUri? voir si ce component est encore nécessaire, ou si ça ne peut pas être une méthode de l'entity manager

import type { Query } from 'pinia-orm'
import { computed } from 'vue'
import type { ComputedRef } from 'vue'
import UrlUtils from '~/services/utils/urlUtils'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import type ApiResource from '~/models/ApiResource'

const props = defineProps({
  uri: {
    type: String,
    required: false,
    default: null,
  },
  model: {
    type: Object,
    required: true,
  },
  query: {
    type: Object as () => Query,
    required: true,
  },
  loaderType: {
    type: String,
    required: false,
    default: 'text',
  },
})

const id = UrlUtils.extractIdFromUri(props.uri)
if (id === null) {
  throw new Error('Uri parsing error : no id found')
}

const { fetch } = useEntityFetch()

const { data, pending } = fetch(props.model, id)

const item: ComputedRef<ApiResource | null> = computed(() => {
  return data.value
})
</script>