app/components/Layout/Parameters/General.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <UiForm
        v-else
        :model="Parameters"
        :entity="parameters"
    >
      <v-row>
        <v-col cols="6">
          <UiInputDatePicker
              v-if="organizationProfile.isSchool"
              v-model="parameters.financialDate"
              field="financialDate"
              label="start_date_of_financial_season"
              class="my-2"
          />

          <UiInputDatePicker
              v-if="organizationProfile.isSchool"
              v-model="parameters.startCourseDate"
              field="startCourseDate"
              label="start_date_of_courses"
              class="my-2"
          />

          <UiInputCheckbox
              v-model="parameters.showAdherentList"
              field="showAdherentList"
              label="show_adherents_list_and_their_coordinates"
          />

          <UiInputAutocompleteWithEnum
              v-model="parameters.timezone"
              enum-name="timezone"
              field="timezone"
          />
        </v-col>

        <v-col cols="6">
          <UiInputDatePicker
              v-if="organizationProfile.isSchool"
              v-model="parameters.musicalDate"
              field="musicalDate"
              label="start_date_of_activity_season"
              class="my-2"
          />

          <UiInputDatePicker
              v-if="organizationProfile.isSchool"
              v-model="parameters.endCourseDate"
              field="endCourseDate"
              label="end_date_of_courses"
              class="my-2"
          />

          <UiInputCheckbox
              v-if="organizationProfile.isSchool && organizationProfile.isAssociation"
              v-model="parameters.studentsAreAdherents"
              field="studentsAreAdherents"
              label="students_are_also_association_members"
          />

          <div
              v-if="organizationProfile.isCMFCentralService"
              class="d-flex flex-column"
          >
            <span class="mb-1">{{ $t('qrCode')}} </span>
            <UiInputImage
                v-model="parameters.qrCode"
                field="qrCode"
                label="licenceQrCode"
                :width="120"
            />
          </div>
        </v-col>
      </v-row>
    </UiForm>
  </LayoutContainer>
</template>

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

const { fetch } = useEntityFetch()

const organizationProfile = useOrganizationProfileStore()

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

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

</script>