app_vue2/pages/parameters/index.vue

<template>
      <LayoutContainer v-if="!fetchState.pending">
        <UiForm :id="id" :model="model" :query="query()">
          <template #form.input="{entry, updateRepository}">
            <v-expansion-panels  focusable multiple :value="[0]">
              <!-- Description -->
              <UiExpansionPanel id="generalParams" icon="fa-info">
                <v-container fluid class="container">
                  <v-row>
                    <v-col cols="12" sm="6" v-if="organizationProfile.isSchool()">
                      <UiInputDatePicker field="financialDate" :data="entry['financialDate']" format="DD MMMM" @update="updateRepository" />
                    </v-col>

                    <v-col cols="12" sm="6">
                      <UiInputDatePicker field="musicalDate" :data="entry['musicalDate']" format="DD MMMM" @update="updateRepository" />
                    </v-col>

                    <v-col cols="12" sm="6" v-if="organizationProfile.isSchool()">
                      <UiInputDatePicker field="startCourseDate" :data="entry['startCourseDate']" @update="updateRepository" />
                    </v-col>

                    <v-col cols="12" sm="6" v-if="organizationProfile.isSchool()">
                      <UiInputDatePicker field="endCourseDate" :data="entry['endCourseDate']" @update="updateRepository" />
                    </v-col>

                    <v-col cols="12" sm="6">
                      <UiInputCheckbox field="showAdherentList" :data="entry['showAdherentList']" @update="updateRepository" />
                    </v-col>

                    <v-col cols="12" sm="6" v-if="organizationProfile.isSchool() && organization.legalStatus === 'ASSOCIATION_LAW_1901'">
                      <UiInputCheckbox field="studentsAreAdherents" :data="entry['studentsAreAdherents']" @update="updateRepository" />
                    </v-col>

                    <v-col cols="12" sm="6" v-if="organizationProfile.isCMFCentralService()">
                      <div>
                        <span>{{ $t('qrCode') }}</span>
                      </div>
                      <UiImage
                        :id="getIdFromUri(entry['qrCode'])"
                        :upload="true"
                        :width="100"
                        field="qrCode"
                        :ownerId="id"
                        @update="updateRepository"
                      ></UiImage>
                    </v-col>

                    <v-col cols="12" sm="6">
                      <UiInputEnum field="timezone" :data="entry['timezone']" enum-type="timezone" @update="updateRepository" />
                    </v-col>

                  </v-row>
                </v-container>
              </UiExpansionPanel>

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

<script lang="ts">
import {computed, ComputedRef, defineComponent, reactive, useContext} from '@nuxtjs/composition-api'
import { Organization } from '@/models/Organization/Organization'
import { repositoryHelper } from '~/services/store/repository'
import {useDataUtils} from "~/composables/data/useDataUtils";
import {Parameters} from "~/models/Organization/Parameters";
import {Model, Query, Item} from "@vuex-orm/core";
import {$organizationProfile} from "~/services/profile/organizationProfile";
import {Repository as VuexRepository} from "@vuex-orm/core/dist/src/repository/Repository";
import ModelsUtils from "~/services/utils/modelsUtils";

export default defineComponent({
  name: 'parameters',
  setup () {
    const {store, $dataProvider} = useContext()
    const organizationProfile = reactive($organizationProfile(store))
    const {getItemToEdit} = useDataUtils($dataProvider)
    const id = store.state.profile.organization.parametersId
    const {fetchState} = getItemToEdit(id, Parameters)
    const repositoryParameters: VuexRepository<Model> = repositoryHelper.getRepository(Parameters)
    const query: ComputedRef<Query> = computed(() => repositoryParameters.query())

    getItemToEdit(store.state.profile.organization.id, Organization)
    const organization:ComputedRef<Item> = computed(() => repositoryHelper.findItemFromModel(Organization, store.state.profile.organization.id))

    const getIdFromUri = (uri: string) => ModelsUtils.extractIdFromUri(uri)

    return {
      query: () => query.value,
      id,
      fetchState,
      model: Parameters,
      organizationProfile,
      organization,
      getIdFromUri
    }
  }
})
</script>