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-model="parameters.financialDate"
              field="financialDate"
              label="start_date_of_financial_season"
          />
        </v-col>

        <v-col cols="6">
          <UiInputDatePicker
              v-model="parameters.musicalDate"
              field="musicalDate"
              label="start_date_of_activity_season"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="6">
          <UiInputDatePicker
              v-model="parameters.startCourseDate"
              field="startCourseDate"
              label="start_date_of_courses"
          />
        </v-col>
        <v-col cols="6">
          <UiInputDatePicker
              v-model="parameters.endCourseDate"
              field="endCourseDate"
              label="end_date_of_courses"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="6">
          <UiInputCheckbox
              v-model="parameters.showAdherentList"
              field="showAdherentList"
              label="show_adherents_list_and_their_coordinates"
          />
        </v-col>
        <v-col cols="6">
          <UiInputCheckbox
              v-model="parameters.studentsAreAdherents"
              field="studentsAreAdherents"
              label="students_are_also_association_members"
          />
        </v-col>
      </v-row>

      <v-row>
        <UiInputCombobox
            v-model="parameters.timezone"
            field="timezone"
            :items="['Europe/Paris', 'Europe/Zurich', 'Indian/Reunion']"
        />
      </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>

<style scoped lang="scss">


</style>