education timing

.gitignore

@@ -93,3 +93,5 @@ sw.*
 *.swp
 /.project
 /todo.md
+
+package-lock.json

components/Form/Parameters/EducationTiming.vue

@@ -0,0 +1,97 @@
+<!-- Component d'un formulaire d'une durée pour un curriculum -->
+<template>
+  <main>
+    <LayoutContainer>
+      <v-card class="mb-5 mt-4">
+        <FormToolbar title="educationTiming" icon="fa-calendar"/>
+
+        <UiForm
+          :id="id"
+          :model="model"
+          :query="query()"
+          :submitActions="submitActions">
+          <template #form.input="{entry, updateRepository}">
+            <v-container fluid class="container">
+              <v-row>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText
+                    field="timing"
+                    label="timing"
+                    :data="entry['timing']"
+                    @update="updateRepository"
+                    type="number"
+                    :rules="rules().timingRules"
+                  />
+                </v-col>
+
+              </v-row>
+            </v-container>
+
+          </template>
+
+          <template #form.button>
+            <NuxtLink :to="{ path: '/parameters/education'}" class="no-decoration">
+              <v-btn class="mr-4 ot_light_grey ot_grey--text">
+                {{ $t('back') }}
+              </v-btn>
+            </NuxtLink>
+          </template>
+
+        </UiForm>
+      </v-card>
+    </LayoutContainer>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, computed, useContext} from '@nuxtjs/composition-api'
+import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
+import { Query, Model } from '@vuex-orm/core'
+import { SUBMIT_TYPE} from '~/types/enums'
+import { repositoryHelper } from '~/services/store/repository'
+import {AnyJson} from "~/types/interfaces";
+import {EducationTiming} from "~/models/Education/EducationTiming";
+
+export default defineComponent({
+  props: {
+    id:{
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup () {
+    const {app:{i18n}} = useContext()
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(EducationTiming)
+    const query: Query = repository.query()
+
+    const submitActions = computed(() => {
+      let actions:AnyJson = {}
+      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/parameters/education` }
+      actions[SUBMIT_TYPE.SAVE] = { path: `/parameters/education/education_timing/` }
+      return actions
+    })
+
+    /** Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
+    return {
+      model: EducationTiming,
+      query: () => query,
+      rules: () => getRules(i18n),
+      panel: 0,
+      submitActions
+    }
+  },
+  beforeDestroy() {
+    repositoryHelper.cleanRepository(EducationTiming)
+  }
+})
+
+function getRules (i18n: any) {
+  return {
+    timingRules: [
+      (timingValue: number) => (timingValue > 0) || i18n.t('value_need_to_be_bigger_than_0')
+    ]
+  }
+}
+
+</script>

lang/field/fr-FR.js

@@ -1,5 +1,8 @@
 export default (context, locale) => {
   return ({
+    cycle: 'Cycle',
+    timing: 'Durée d\'un enseignement (en minutes)',
+    educationTiming: 'Durée d\'un enseignement (en minutes)',
     superAdmin: 'Compte super-admin',
     username: 'Login de connexion',
     residenceArea: 'Zones de résidence',

lang/rulesAndErrors/fr-FR.js

@@ -1,5 +1,6 @@
 export default (context, locale) => {
   return ({
+    value_need_to_be_bigger_than_0: 'La valeur doit être plus grande que 0',
     forbidden: 'Vous ne posséder pas les droits nécessaires pour effectuer cette opération',
     wrong_mobyt_credentials: 'Identifiants SMS incorrects',
     smsSenderName_error: 'Seuls les caractères alphanumériques sont permis, sans espaces, sans accent et sans caractères spéciaux',

models/Education/EducationTiming.ts

@@ -0,0 +1,11 @@
+import {Num, Model, Uid} from '@vuex-orm/core'
+
+export class EducationTiming extends Model {
+  static entity = 'education_timings'
+
+  @Uid()
+  id!: number | string | null
+
+  @Num(null, { nullable: true })
+  timing!: number
+}

pages/parameters/education/education_timing/_id.vue

@@ -0,0 +1,26 @@
+<!-- Page de détails d'un temps d'enseignement -->
+<template>
+  <main>
+    <FormParametersEducationTiming :id="id" v-if="!fetchState.pending"></FormParametersEducationTiming>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useDataUtils} from "~/composables/data/useDataUtils";
+import {EducationTiming} from "~/models/Education/EducationTiming";
+
+export default defineComponent({
+  name: 'EditFormParametersEducationTiming',
+  setup () {
+    const {$dataProvider, route} = useContext()
+    const {getItemToEdit} = useDataUtils($dataProvider)
+    const id = parseInt(route.value.params.id)
+    const {fetchState} = getItemToEdit(id, EducationTiming)
+    return {
+      id,
+      fetchState
+    }
+  }
+})
+</script>

pages/parameters/education/education_timing/new.vue

@@ -0,0 +1,35 @@
+<!-- Page de détails d'une zone de résidence -->
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="loading"
+      type="text"
+    />
+    <FormParametersEducationTiming :id="item.id" v-else></FormParametersEducationTiming>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useDataUtils} from "~/composables/data/useDataUtils";
+import {EducationTiming} from "~/models/Education/EducationTiming";
+
+export default defineComponent({
+  name: 'NewFormParametersEducationTiming',
+  setup () {
+    const {$dataProvider, store} = useContext()
+    const {createItem} = useDataUtils($dataProvider)
+    const {create, loading, item} = createItem(store, EducationTiming)
+
+    if(process.client){
+      const itemToCreate: EducationTiming = new EducationTiming()
+      create(itemToCreate)
+    }
+
+    return {
+      loading,
+      item
+    }
+  }
+})
+</script>

pages/parameters/education/index.vue

@@ -1,14 +1,14 @@
 <template>
   <LayoutContainer class="mt-4">
-        <v-expansion-panels  focusable multiple :value="[0]">
-          <!-- Description -->
+        <v-expansion-panels  focusable multiple :value="[0, 1]">
+          <!-- Cycle -->
           <UiExpansionPanel id="cycle" icon="fa-bars">
             <v-container fluid class="container">
               <v-row>
                 <v-col cols="12" sm="12">
                   <UiCollection
-                    :query="query()"
-                    :model="model"
+                    :query="queryCycle()"
+                    :model="modelCycle"
                     loaderType="image"
                   >
                     <template #list.item="{items}">
@@ -22,7 +22,7 @@
                             <UiCard
                               :id="item.id"
                               :link="`/parameters/education/cycle/${item.id}`"
-                              :model="model"
+                              :model="modelCycle"
                               :can-delete="false"
                             >
                               <template #card.text>
@@ -39,6 +39,45 @@
             </v-container>
           </UiExpansionPanel>
 
+          <!-- EducationTiming -->
+          <UiExpansionPanel id="educationTiming" icon="fa-calendar">
+            <v-container fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="12">
+                  <UiCollection
+                    :query="queryEducationTiming()"
+                    :model="modelEducationTiming"
+                    loaderType="image"
+                    newLink="/parameters/education/education_timing/new"
+                  >
+                    <template #list.item="{items}">
+                      <v-container fluid>
+                        <v-row dense>
+                          <v-col
+                            v-for="item in items"
+                            :key="item.id"
+                            cols="4"
+                          >
+                            <UiCard
+                              :id="item.id"
+                              :link="`/parameters/education/education_timing/${item.id}`"
+                              :model="modelEducationTiming"
+                              :can-delete="false"
+                            >
+                              <template #card.text>
+                                {{ item.timing }}
+                              </template>
+                            </UiCard>
+                          </v-col>
+                        </v-row>
+                      </v-container>
+                    </template>
+                  </UiCollection>
+                </v-col>
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
         </v-expansion-panels>
   </LayoutContainer>
 </template>
@@ -48,16 +87,21 @@ import {computed, ComputedRef, defineComponent} from '@nuxtjs/composition-api'
 import { repositoryHelper } from '~/services/store/repository'
 import {Query} from "@vuex-orm/core";
 import {Cycle} from "~/models/Education/Cycle";
+import {EducationTiming} from "~/models/Education/EducationTiming";
 
 export default defineComponent({
-  name: 'cycles',
+  name: 'educationTimings',
   setup () {
-    const repository = repositoryHelper.getRepository(Cycle)
-    const query: ComputedRef<Query> = computed(() => repository.query().orderBy('order', 'asc'))
+    const repositoryCycle = repositoryHelper.getRepository(Cycle)
+    const repositoryEducationTiming = repositoryHelper.getRepository(EducationTiming)
+    const queryCycle: ComputedRef<Query> = computed(() => repositoryCycle.query().orderBy('order', 'asc'))
+    const queryEducationTiming: ComputedRef<Query> = computed(() => repositoryEducationTiming.query())
 
     return {
-      query: () => query,
-      model: Cycle
+      queryCycle: () => queryCycle,
+      queryEducationTiming: () => queryEducationTiming,
+      modelCycle: Cycle,
+      modelEducationTiming: EducationTiming,
     }
   }
 })