app_vue2/components/Form/Parameters/Subdomains.vue

<!-- Liste des sous-domaines -->
<template>
  <main>
    <LayoutContainer>
      <v-container class="container">
        <div>
          <span>{{ $t('yourSubdomains') }} : </span>
        </div>
        <v-skeleton-loader
          v-if="fetchState.pending"
          type="image"
        />
        <div v-else>
          <v-simple-table class="my-2">
            <template v-slot:default>
              <tbody>
                <tr
                  v-for="subdomain in subdomains"
                  :key="subdomain.id"
                  class="subdomainItem"
                  @click="goToEditPage(subdomain.id)"
                >
                    <td>{{ subdomain.subdomain }}</td>
                    <td>
                      <span v-if="subdomain.active">
                        <v-icon class="ot_green--text icon">
                          fa-solid fa-check
                        </v-icon> {{ $t('active') }}
                      </span>
                    </td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
          <v-btn
            v-if="subdomains.length < 3"
            class="ot_white--text ot_green float-left"
          >
            <NuxtLink to="/parameters/subdomain/new" class="no-decoration">
              <v-icon class="mr-1">fa-plus-circle</v-icon>
              <span>{{$t('add')}}</span>
            </NuxtLink>
          </v-btn>
        </div>
      </v-container>
    </LayoutContainer>
  </main>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent, ref, Ref, useContext, useRouter} from '@nuxtjs/composition-api'
import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
import {Model, Query} from '@vuex-orm/core'
import { repositoryHelper } from '~/services/store/repository'
import {Subdomain} from "~/models/Organization/Subdomain";
import {useDataUtils} from "~/composables/data/useDataUtils";
import {Collection} from "@vuex-orm/core/dist/src/data/Data";
import {queryHelper} from "~/services/store/query";
import { Parameters } from '~/models/Organization/Parameters';

export default defineComponent({
  props: {
    parametersId: {
      type: [Number, String],
      required: true
    }
  },
  setup (props) {
    const parametersId: Ref<number> = ref(parseInt(props.parametersId as string))
    const { $dataProvider } = useContext()
    const { getCollection } = useDataUtils($dataProvider)
    const router = useRouter();

    const { fetchState } = getCollection(Subdomain, Parameters, parametersId.value)

    const repository: VuexRepository<Model> = repositoryHelper.getRepository(Subdomain)
    const query: ComputedRef<Query> = computed(() => repository.query())
    const subdomains: ComputedRef<Collection> = computed(() => queryHelper.getCollection(query.value))

    const goToEditPage = function(id: number) {
      router.push('/parameters/subdomain/' + id)
    }

    return {
      subdomains,
      fetchState,
      goToEditPage
    }
  },
  beforeDestroy() {
    repositoryHelper.cleanRepository(Subdomain)
  }
})

</script>
<style scoped>
  .subdomainItem {
    cursor: pointer;
  }
  .subdomainItem .icon {
    font-size: 12px;
  }
</style>