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 {Query} from "pinia-orm";
import UrlUtils from "~/services/utils/urlUtils";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import {computed} from "@vue/reactivity";
import type {ComputedRef} from "@vue/reactivity";
import 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>