app_vue2/pages/organization.vue

<!-- Page de détails de l'organization courante -->

<template>
  <LayoutContainer v-if="!fetchState.pending">
    <!-- Définit le contenu des trois slots du header de la page -->
    <LayoutBannerTop>
      <template #block1>
        {{ entry.name }}
      </template>
      <template #block2>
        N°Siret : {{ entry.siretNumber }}
      </template>
      <template #block3>
        {{ entry.description }}
      </template>
    </LayoutBannerTop>

    <!-- Rend le contenu de la page -->
    <NuxtChild />
  </LayoutContainer>
</template>

<script lang="ts">
import {computed, defineComponent, useContext, ComputedRef} from '@nuxtjs/composition-api'
import { Item, Query } from '@vuex-orm/core'
import { Organization } from '~/models/Organization/Organization'
import { queryHelper } from '~/services/store/query'
import { repositoryHelper } from '~/services/store/repository'
import {ContactPoint} from "~/models/Core/ContactPoint";
import {BankAccount} from "~/models/Core/BankAccount";
import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
import {Country} from "~/models/Core/Country";
import {TypeOfPractice} from "~/models/Organization/TypeOfPractice";
import {Network} from "~/models/Network/Network";
import {NetworkOrganization} from "~/models/Network/NetworkOrganization";
import {AddressPostal} from "~/models/Core/AddressPostal";
import {OrganizationArticle} from "~/models/Organization/OrganizationArticle";
import {File} from "~/models/Core/File"
import {useDataUtils} from "~/composables/data/useDataUtils";

export default defineComponent({
  name: 'Organization',
  middleware({ $ability, redirect }) {
    if(!$ability.can('display', 'organization_page'))
      return redirect('/error')
  },
  setup () {
    const {store, $dataProvider} = useContext()
    const {getItemToEdit} = useDataUtils($dataProvider)
    const id = store.state.profile.organization.id

    const {fetchState} = getItemToEdit(id, Organization)

    const repository = repositoryHelper.getRepository(Organization)
    const query: ComputedRef<Query> = computed(() => repository.query())
    const entry: ComputedRef<Item> = computed(() => {
      return queryHelper.getItem(query.value, id)
    })

    return {
      entry,
      fetchState
    }
  },
  beforeDestroy() {
    repositoryHelper.cleanRepository(Organization)
    repositoryHelper.cleanRepository(ContactPoint)
    repositoryHelper.cleanRepository(BankAccount)
    repositoryHelper.cleanRepository(OrganizationAddressPostal)
    repositoryHelper.cleanRepository(AddressPostal)
    repositoryHelper.cleanRepository(Country)
    repositoryHelper.cleanRepository(TypeOfPractice)
    repositoryHelper.cleanRepository(Network)
    repositoryHelper.cleanRepository(NetworkOrganization)
    repositoryHelper.cleanRepository(OrganizationArticle)
    repositoryHelper.cleanRepository(File)
  }
})

</script>