app/pages/dev/poc_fetch_collection.vue

<!--
Permet de tester la méthode fetchCollection de nuxt
et la réactivité de la collection retournée.

Le filtre textuel doit s'appliquer à la liste de résultats quand on clique sur refresh.
Si on ajoute un nouveau pays, il doit apparaitre dans la liste seulement s'il valide le filtre actif.

Exemple :

1. A l'affichage, je dois avoir la liste des pays
2. Si je tape "fra" dans le filtre et que je valide, il ne doit rester que la France
3. Si je créé le pays "francie", il doit s'ajouter à la liste, trié si un OrderBy est actif
4. Si je créé le pays "mon super pays", il ne doit pas apparaitre.
-->

<template>
  <div class="pa-8">
    <h1>POC</h1>

    <div class="d-flex flex-row my-8">
      <v-text-field v-model="searchFilter" style="max-width: 200px" />
      <v-btn class="ma-4" @click="onRefreshClick">Refresh</v-btn>
    </div>

    <v-row>
      <v-col cols="3">
        <h3>From Entity Manager</h3>

        <div v-if="!pending && data !== null">
          <div>{{ data.totalItems || 0 }} results</div>

          <ul>
            <li v-for="country in data.items" :key="country.id">
              {{ country.name }}
            </li>
          </ul>
        </div>
        <span v-else>Loading...</span>
      </v-col>
    </v-row>

    <v-pagination
      v-model="page"
      :length="totalPages"
      :total-visible="7"
      @update:model-value="refresh"
    />

    <div class="d-flex flex-row">
      <v-text-field v-model="newVal" class="my-4" style="max-width: 200px" />
      <v-btn class="ma-4" @click="onAddClick">Add organization</v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import Query from '~/services/data/Query'
import SearchFilter from '~/services/data/Filters/SearchFilter'
import { ORDER_BY_DIRECTION, SEARCH_STRATEGY } from '~/types/enum/data'
import Country from '~/models/Core/Country'
import OrderBy from '~/services/data/Filters/OrderBy'
import PageFilter from '~/services/data/Filters/PageFilter'

const { fetchCollection } = useEntityFetch()

const query = new Query()

const searchFilter = ref('')

const newVal = ref('')

const page = ref(1)
const itemsPerPage = ref(10)

query.add(new SearchFilter('name', searchFilter, SEARCH_STRATEGY.IPARTIAL))
query.add(new OrderBy('name', ORDER_BY_DIRECTION.ASC))
query.add(new PageFilter(page, itemsPerPage))

const { data, pending, refresh } = fetchCollection(Country, null, query)

const totalPages = computed(() =>
  data.value ? data.value?.pagination.last : 1,
)

console.log(data)
// console.log(data.value!.items)

let id = 100000000
const onAddClick = () => {
  if (!newVal.value) {
    throw new Error('no val')
  }

  const country = new Country()
  country.id = id
  country.name = newVal.value

  const repo = useRepo(Country)
  repo.save(country)

  id += 1
}

const onRefreshClick = () => {
  page.value = 1
  refresh()
}
</script>

<style scoped lang="scss">
h1 {
  color: rgb(var(--v-theme-primary));
}
</style>