app/pages/parameters/teaching.vue

<template>
  <NuxtLayout name="parameters">
    <LayoutContainer>
      <UiLoadingPanel v-if="pending" />
      <UiForm
          v-else
          :model="Parameters"
          :entity="parameters"
      >
        <v-table>
          <thead>
            <tr>
              <td>{{ $t('originalLabel') }}</td>
              <td>{{ $t('effectiveLabel') }}</td>
            </tr>
          </thead>

          <tbody>
            <tr v-for="enumItem in cycleEnum">
              <td>{{ $t(enumItem.value) }}</td>
              <td class="cycle-editable-cell">
                {{ orderedCycles[enumItem.value] ? orderedCycles[enumItem.value].label : $t(enumItem.value) }}
              </td>
              <td style="max-width: 24px;">
                <v-btn
                    v-if="orderedCycles[enumItem.value]"
                    :flat="true"
                    icon="fa fa-pen"
                    class="cycle-edit-icon"
                    @click="goToCycleEditPage(orderedCycles[enumItem.value].id)"
                />
              </td>
            </tr>
          </tbody>
        </v-table>

        <v-row>
          <v-col cols="6">
            <UiInputCheckbox
                v-model="parameters.showEducationIsACollectivePractice"
                field="showEducationIsACollectivePractice"
                label="allow_to_configure_teachings_with_played_instrument_choice"
            />
          </v-col>
        </v-row>
      </UiForm>
    </LayoutContainer>
  </NuxtLayout>
</template>

<script setup lang="ts">
import Parameters from "~/models/Organization/Parameters";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import Cycle from "~/models/Education/Cycle";
import {AsyncData} from "#app";
import {useOrganizationProfileStore} from "~/stores/organizationProfile";
import {AnyJson} from "~/types/data";
import {useEnumFetch} from "~/composables/data/useEnumFetch";

/**
 * Disable the default layout, the page will use the layout defined with <NuxtLayout />
 * @see https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis
 */
definePageMeta({
  layout: false,
});

const organizationProfile = useOrganizationProfileStore()

if (organizationProfile.parametersId === null) {
  throw new Error('Missing organization parameters id')
}

const { fetch, fetchCollection } = useEntityFetch()
const { fetch: fetchEnum } = useEnumFetch()


const { data: cycleEnum, pending: enumPending } = fetchEnum('education_cycle')

const { data: parameters, pending: parametersPending } = fetch(Parameters, organizationProfile.parametersId) as AsyncData<Parameters, Parameters | true>

const { data: cycles, pending: cyclesPending } = fetchCollection(Cycle)

const pending: ComputedRef<boolean> = computed(() => enumPending.value || parametersPending.value || cyclesPending.value)

const orderedCycles: ComputedRef<AnyJson> = computed(() => {
  if (pending.value) {
    return []
  }

  let orderedCycles: AnyJson = {}

  for (const enumItem of cycleEnum.value) {
    orderedCycles[enumItem.value] = null
  }

  for (const cycle of cycles.value.items) {
    if (!orderedCycles.hasOwnProperty(cycle.cycleEnum)) {
      console.error('Unknown cycle enum : ' + cycle.cycleEnum)
      continue
    }

    orderedCycles[cycle.cycleEnum] = cycle
  }

  return orderedCycles
})


const goToCycleEditPage = (id: number) => {
  navigateTo(`parameters/cycles/${id}`)
}
</script>

<style scoped lang="scss">

.cycle-edit-icon {
  color: rgb(var(--v-theme-primary));
}

:deep(.cycle-edit-icon .v-icon) {
  font-size: 18px;
}


</style>