app_vue2/pages/parameters/student.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,1,2]">
          <!-- Suivi pédagogique -->
          <UiExpansionPanel id="educational_follow_up" icon="fa-graduation-cap">
            <v-container fluid class="container">
              <v-row>

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

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

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

                <v-col cols="12" sm="6" v-if="organizationProfile.hasModule(['AdvancedEducationNotation'])">
                  <UiInputEnum field="advancedEducationNotationType" :data="entry['advancedEducationNotationType']" enum-type="advanced_education_notation" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText
                    label="averageMax"
                    field="average"
                    type="number"
                    :data="entry['average']"
                    @update="updateRepository"
                    :rules="rules().averageRules"
                  />
                </v-col>

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

          <!-- Bulletins -->
          <UiExpansionPanel id="bulletin_parameters" icon="fa-file-alt">
            <v-container fluid class="container">
              <v-row>

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

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

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

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

                <v-col cols="12" sm="6">
                  <div class="d-flex flex-row">
                    <UiInputCheckbox field="bulletinShowEducationWithoutEvaluation" :data="entry['bulletinShowEducationWithoutEvaluation']" @update="updateRepository" />
                    <UiHelp>
                      <p v-html="$t('bulletinShowEducationWithoutEvaluationHelp')" />
                    </UiHelp>
                  </div>
                </v-col>

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

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

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

                <v-col cols="12" sm="6">
                  <div class="d-flex flex-row">
                    <UiInputCheckbox field="bulletinEditWithoutEvaluation" :data="entry['bulletinEditWithoutEvaluation']" @update="updateRepository" />
                    <UiHelp>
                      <p v-html="$t('bulletinEditWithoutEvaluationHelp')" />
                    </UiHelp>
                  </div>
                </v-col>

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

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

          <!-- Abscences -->
          <UiExpansionPanel id="attendance" icon="fa-check">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="6">
                  <UiInputCheckbox field="sendAttendanceEmail" :data="entry['sendAttendanceEmail']" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6" v-if="organizationProfile.hasModule(['Sms'])">
                  <UiInputCheckbox field="sendAttendanceSms" :data="entry['sendAttendanceSms']" @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";
import i18n from "~/config/nuxtConfig/i18n";

export default defineComponent({
  name: 'parameters',
  setup () {
    const {store, $dataProvider, app: {i18n}} = 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())

    return {
      query: () => query.value,
      rules: () => getRules(i18n),
      id,
      fetchState,
      model: Parameters,
      organizationProfile,
    }
  }
})

function getRules (i18n: any) {
  return {
    averageRules: [
      (averageValue: number) => (averageValue >= 1 && averageValue <= 100) || i18n.t('value_need_to_be_beetween_0_100')
    ]
  }
}
</script>