app_vue2/pages/parameters/education/index.vue

<template>
  <LayoutContainer class="mt-4">
        <v-expansion-panels  focusable multiple :value="[0, 1]">
          <!-- Cycle -->
          <UiExpansionPanel id="cycle" icon="fa-bars">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                  <UiCollection
                    :query="queryCycle()"
                    :model="modelCycle"
                    loaderType="image"
                  >
                    <template #list.item="{items}">
                      <v-container fluid>
                        <v-row dense>
                          <v-col
                            v-for="item in items"
                            :key="item.id"
                            cols="4"
                          >
                            <UiCard
                              :id="item.id"
                              :link="`/parameters/education/cycle/${item.id}`"
                              :model="modelCycle"
                              :can-delete="false"
                            >
                              <template #card.text>
                                {{ item.label }}
                              </template>
                            </UiCard>
                          </v-col>
                        </v-row>
                      </v-container>
                    </template>
                  </UiCollection>
                </v-col>
              </v-row>
            </v-container>
          </UiExpansionPanel>

          <!-- EducationTiming -->
          <UiExpansionPanel id="educationTiming" icon="fa-calendar">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                  <UiCollection
                    :query="queryEducationTiming()"
                    :model="modelEducationTiming"
                    loaderType="image"
                    newLink="/parameters/education/education_timing/new"
                  >
                    <template #list.item="{items}">
                      <v-container fluid>
                        <v-row dense>
                          <v-col
                            v-for="item in items"
                            :key="item.id"
                            cols="4"
                          >
                            <UiCard
                              :id="item.id"
                              :link="`/parameters/education/education_timing/${item.id}`"
                              :model="modelEducationTiming"
                              :can-delete="false"
                            >
                              <template #card.text>
                                {{ item.timing }}
                              </template>
                            </UiCard>
                          </v-col>
                        </v-row>
                      </v-container>
                    </template>
                  </UiCollection>
                </v-col>
              </v-row>
            </v-container>
          </UiExpansionPanel>

        </v-expansion-panels>
  </LayoutContainer>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent} from '@nuxtjs/composition-api'
import { repositoryHelper } from '~/services/store/repository'
import {Query} from "@vuex-orm/core";
import {Cycle} from "~/models/Education/Cycle";
import {EducationTiming} from "~/models/Education/EducationTiming";

export default defineComponent({
  name: 'educationTimings',
  setup () {
    const repositoryCycle = repositoryHelper.getRepository(Cycle)
    const repositoryEducationTiming = repositoryHelper.getRepository(EducationTiming)
    const queryCycle: ComputedRef<Query> = computed(() => repositoryCycle.query().orderBy('order', 'asc'))
    const queryEducationTiming: ComputedRef<Query> = computed(() => repositoryEducationTiming.query())

    return {
      queryCycle: () => queryCycle,
      queryEducationTiming: () => queryEducationTiming,
      modelCycle: Cycle,
      modelEducationTiming: EducationTiming,
    }
  }
})
</script>