lint and comments

components/Layout/BannerTop.vue

@@ -3,13 +3,13 @@
 <template>
   <v-row justify="center" align="center" class="bannerTopForm">
     <v-col cols="3" class="ot_dark_grey ot_white--text">
-      <slot name="bloc1" />
+      <slot name="block1" />
     </v-col>
     <v-col cols="6" class="ot_white ot_grey--text">
-      <slot name="bloc2" />
+      <slot name="block2" />
     </v-col>
     <v-col cols="3" class="ot_light_grey ot_grey--text">
-      <slot name="bloc3" />
+      <slot name="block3" />
     </v-col>
   </v-row>
 </template>

components/Layout/Header.vue

@@ -87,11 +87,11 @@ export default defineComponent({
     const hasFamilyMenu:ComputedRef<boolean> = computed(() => store.state.profile.access.hasFamilyMenu)
     const title:ComputedRef<string> = computed(() => store.state.profile.organization.name)
 
-    const webSiteMenu:Ref<any> = $useMenu.setUpContext().useWebSiteMenuConstruct()
-    const myAccessesMenu:Ref<any> = $useMenu.setUpContext().useMyAccessesMenuConstruct()
-    const myFamilyMenu:Ref<any> = $useMenu.setUpContext().useMyFamilyMenuConstruct()
-    const configurationMenu:Ref<any> = $useMenu.setUpContext().useConfigurationMenuConstruct()
-    const accountMenu:Ref<any> = $useMenu.setUpContext().useAccountMenuConstruct()
+    const webSiteMenu:Ref<any> = $useMenu.setupContext().useWebSiteMenuConstruct()
+    const myAccessesMenu:Ref<any> = $useMenu.setupContext().useMyAccessesMenuConstruct()
+    const myFamilyMenu:Ref<any> = $useMenu.setupContext().useMyFamilyMenuConstruct()
+    const configurationMenu:Ref<any> = $useMenu.setupContext().useConfigurationMenuConstruct()
+    const accountMenu:Ref<any> = $useMenu.setupContext().useAccountMenuConstruct()
 
     const displayedMenu = () => {
       properties.miniVariant = !properties.miniVariant

components/Layout/Header/Notification.vue

@@ -35,14 +35,14 @@ Notification
 </template>
 
 <script lang="ts">
-import { $useMenu } from '@/use/layout/menu'
 import { defineComponent, reactive, Ref } from '@nuxtjs/composition-api'
 import { UnwrapRef } from '@vue/composition-api'
+import { $useMenu } from '@/use/layout/menu'
 import { AnyJson } from '~/types/interfaces'
 
 export default defineComponent({
   setup () {
-    const menu: Ref<any> = $useMenu.setUpContext().useConfigurationMenuConstruct()
+    const menu: Ref<any> = $useMenu.setupContext().useConfigurationMenuConstruct()
 
     const properties: UnwrapRef<AnyJson> = reactive({
       menu

layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
   <main>
-    <client-only placeholder=" " />
+    <!-- The client only is used to show the loading picture (@see https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component) -->
+    <client-only placeholder="Loading..." />
 
     <v-app dark>
       <LayoutMenu v-if="displayedMenu" :menu="menu" :mini-variant="properties.miniVariant" />
@@ -9,6 +10,8 @@
 
       <v-main class="ot_content_color">
         <LayoutSubheader v-if="displayedSubHeader" />
+
+        <!-- Page will be rendered here-->
         <nuxt />
       </v-main>
 
@@ -22,18 +25,22 @@ import { computed, ComputedRef, defineComponent, reactive, useContext } from '@n
 import { $useMenu } from '@/use/layout/menu'
 
 export default defineComponent({
-  name: 'defaultLayout',
+  name: 'DefaultLayout',
+
+  middleware: ['auth'],
   setup () {
     const { store } = useContext()
-    const menu = $useMenu.setUpContext().useLateralMenuConstruct()
+    const menu = $useMenu.setupContext().useLateralMenuConstruct()
 
     const properties = reactive({
       clipped: false,
       miniVariant: false
     })
-    const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)
 
-    const displayedSubHeader: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu || store.state.profile.access.isTeacher)
+    const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)
+    const displayedSubHeader: ComputedRef<boolean> = computed(
+      () => store.state.profile.access.hasLateralMenu || store.state.profile.access.isTeacher
+    )
 
     const handleOpenMenu = (miniVariant: boolean) => {
       properties.miniVariant = miniVariant
@@ -46,9 +53,7 @@ export default defineComponent({
       displayedSubHeader,
       handleOpenMenu
     }
-  },
-
-  middleware: ['auth']
+  }
 })
 </script>
 

notes_relecture.md

@@ -11,7 +11,7 @@
 
 ## Use/layout/Menus
 
-* envisageable de factoriser le code des menus dans baseMenu?
+* voir à factoriser le code des menus des use/...Menu
 
 # Divers
 
@@ -19,6 +19,7 @@
 * manquerait pas un await dans middleware/auth.js?
 * un intérêt à utiliser les extensions .client.js et .server.js pour les plugins? (https://fr.nuxtjs.org/docs/2.x/directory-structure/plugins#convention-pour-le-nommage-des-plugins)
 * DatesUtils.sortDates: est-ce qu'un sort standard ne suffirait pas?
+* useChecker -> renommer en useValidator?
 
 pour reproduire l'erreur lors des tests:
 
@@ -28,4 +29,6 @@ pour reproduire l'erreur lors des tests:
 ## Questions
 
 * classe Connection.ts: pqoi AxiosRequestConfig accepte le mot clé progress et pas showPogress?
-* 
+* dans la doc composition-api, ils mettent leurs fonctions 'use' dans un répertoire 'composables',  
+  est-ce qu'on ne ferait pas la même chose?
+* y'a t-il une utilité à séparer pages/organization.vue et pages/organization/index.vue ?

pages/index.vue

@@ -1,3 +1,5 @@
+<!-- Page d'accueil de l'application -->
+
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="12">
@@ -13,7 +15,7 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
-  name: 'index',
+  name: 'Index',
   setup () {
     return {
 

pages/login.vue

@@ -1,3 +1,5 @@
+<!-- Page de login -->
+
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="12">
@@ -7,16 +9,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext } from '@nuxtjs/composition-api'
+import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
-  name: 'login',
+  name: 'Login',
+  layout: 'login',
   setup () {
     return {
 
     }
-  },
-  layout: 'login'
+  }
 })
 
 </script>

pages/organization.vue

@@ -1,16 +1,21 @@
+<!-- Page de détails de l'organization courante -->
+
 <template>
   <LayoutContainer>
+    <!-- Définit le contenu des trois slots du header de la page -->
     <LayoutBannerTop>
-      <template v-slot:bloc1>
+      <template #block1>
         {{ entry.name }}
       </template>
-      <template v-slot:bloc2>
+      <template #block2>
         N°Siret : {{ entry.siretNumber }}
       </template>
-      <template v-slot:bloc3>
+      <template #block3>
         {{ entry.description }}
       </template>
     </LayoutBannerTop>
+
+    <!-- Rend le contenu de la page -->
     <NuxtChild />
   </LayoutContainer>
 </template>
@@ -24,14 +29,16 @@ import { queryHelper } from '~/services/store/query'
 import { repositoryHelper } from '~/services/store/repository'
 
 export default defineComponent({
-  name: 'organization',
+  name: 'Organization',
   setup () {
     const { store } = useContext()
+
     const repository = repositoryHelper.getRepository(Organization)
-    const query:ComputedRef<Query> = computed(() => repository.query())
-    const entry:ComputedRef<Item> = computed(() => {
+    const query: ComputedRef<Query> = computed(() => repository.query())
+    const entry: ComputedRef<Item> = computed(() => {
       return queryHelper.getItem(query.value, store.state.profile.organization.id)
     })
+
     return {
       entry
     }

pages/organization/address/_id.vue

@@ -1,3 +1,5 @@
+<!-- Page de détails d'une adresse postale -->
+
 <template>
   <main>
     <v-skeleton-loader
@@ -82,7 +84,7 @@ import { queryHelper } from '~/services/store/query'
 import { AddressPostal } from '~/models/Core/AddressPostal'
 
 export default defineComponent({
-  name: 'organization_address',
+  name: 'OrganizationAddress',
   setup () {
     const { route, $dataProvider } = useContext()
     const loading: Ref<boolean> = ref(true)
@@ -113,7 +115,7 @@ export default defineComponent({
       repositoryHelper.persist(OrganizationAddressPostal, organizationAddressPostal)
     }
 
-    /** Computed proprieties needs to be return as function until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
+    /** Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
     return {
       model: OrganizationAddressPostal,
       query: () => query,

pages/organization/index.vue

@@ -1,3 +1,7 @@
+<!--
+Contenu de la page pages/organization.vue
+Contient toutes les informations sur l'organization courante
+-->
 <template>
   <LayoutContainer>
 
@@ -316,16 +320,16 @@ import UseChecker from "~/use/form/useChecker";
 import {UseNavigationHelpers} from "~/use/form/useNavigationHelpers";
 
 export default defineComponent({
-  name: 'organization_parent',
+  name: 'OrganizationParent',
   setup() {
     const {store, app: {i18n}, $dataProvider} = useContext()
     const organizationProfile = $organizationProfile(store)
-    const id:number = store.state.profile.organization.id;
+    const id: number = store.state.profile.organization.id;
 
     const repositories = getRepositories()
 
     const {siretError, siretErrorMessage, checkSiret} = UseChecker.useHandleSiret(i18n, $dataProvider)
-    const checkSiretHook = async (siret:string, field:string, updateRepository:any) => {
+    const checkSiretHook = async (siret: string, field: string, updateRepository: any) => {
       await checkSiret(siret)
       if(!siretError.value)
         updateRepository(siret, field);

use/layout/menu.ts

@@ -24,14 +24,14 @@ import { getAccountMenu } from '~/use/layout/Menus/accountMenu'
  * Use Classe pour la construction du Menu
  */
 class Menu {
-  private $ability!:Ability;
-  private $config!:any;
-  private $store!:OrganizationStore;
+  private $ability!: Ability;
+  private $config!: any;
+  private $store!: OrganizationStore;
 
   /**
    * Initialise le context NUXT
    */
-  setUpContext () {
+  setupContext () {
     const { $ability, $config, store } = useContext()
     this.$ability = $ability
     this.$config = $config
@@ -43,42 +43,42 @@ class Menu {
    * Construit le menu et mets à jour le state du profile d'access
    */
   useLateralMenuConstruct (): Ref {
-    const menu:ItemsMenu = []
+    const menu: ItemsMenu = []
 
-    const accessMenu:ItemMenu | null = getAccessMenu(this.$config, this.$ability, this.$store)
+    const accessMenu: ItemMenu | null = getAccessMenu(this.$config, this.$ability, this.$store)
     if (accessMenu) { menu.push(accessMenu) }
 
-    const agendaMenu:ItemMenu | null = getAgendaMenu(this.$config, this.$ability)
+    const agendaMenu: ItemMenu | null = getAgendaMenu(this.$config, this.$ability)
     if (agendaMenu) { menu.push(agendaMenu) }
 
-    const equipmentMenu:ItemMenu | null = getEquipmentMenu(this.$config, this.$ability)
+    const equipmentMenu: ItemMenu | null = getEquipmentMenu(this.$config, this.$ability)
     if (equipmentMenu) { menu.push(equipmentMenu) }
 
-    const educationalMenu:ItemMenu | null = getEducationalMenu(this.$config, this.$ability)
+    const educationalMenu: ItemMenu | null = getEducationalMenu(this.$config, this.$ability)
     if (educationalMenu) { menu.push(educationalMenu) }
 
-    const billingMenu:ItemMenu | null = getBillingMenu(this.$config, this.$ability)
+    const billingMenu: ItemMenu | null = getBillingMenu(this.$config, this.$ability)
     if (billingMenu) { menu.push(billingMenu) }
 
-    const communicationMenu:ItemMenu | null = getCommunicationMenu(this.$config, this.$ability)
+    const communicationMenu: ItemMenu | null = getCommunicationMenu(this.$config, this.$ability)
     if (communicationMenu) { menu.push(communicationMenu) }
 
-    const donorsMenu:ItemMenu | null = getDonorsMenu(this.$config, this.$ability)
+    const donorsMenu: ItemMenu | null = getDonorsMenu(this.$config, this.$ability)
     if (donorsMenu) { menu.push(donorsMenu) }
 
-    const medalsMenu:ItemMenu | null = getMedalsMenu(this.$config, this.$ability)
+    const medalsMenu: ItemMenu | null = getMedalsMenu(this.$config, this.$ability)
     if (medalsMenu) { menu.push(medalsMenu) }
 
-    const websiteMenu:ItemMenu | null = getWebsiteMenu(this.$config, this.$ability, this.$store).getMenu()
+    const websiteMenu: ItemMenu | null = getWebsiteMenu(this.$config, this.$ability, this.$store).getMenu()
     if (websiteMenu) { menu.push(websiteMenu) }
 
-    const cotisationsMenu:ItemMenu | null = getCotisationsMenu(this.$config, this.$ability)
+    const cotisationsMenu: ItemMenu | null = getCotisationsMenu(this.$config, this.$ability)
     if (cotisationsMenu) { menu.push(cotisationsMenu) }
 
-    const statsMenu:ItemMenu | null = getStatsMenu(this.$config, this.$ability)
+    const statsMenu: ItemMenu | null = getStatsMenu(this.$config, this.$ability)
     if (statsMenu) { menu.push(statsMenu) }
 
-    const admin2iosMenu:ItemMenu | null = getAdmin2iosMenu(this.$config, this.$ability)
+    const admin2iosMenu: ItemMenu | null = getAdmin2iosMenu(this.$config, this.$ability)
     if (admin2iosMenu) { menu.push(admin2iosMenu) }
 
     // Si l'utilisateur possède au moins un menu alors le menu latéral sera accessible
@@ -88,10 +88,10 @@ class Menu {
   }
 
   /**
-   * Construit le menu configuration et mets à jour le state du profile d'access
+   * Construit le menu configuration et met à jour le state du profile d'access
    */
   useConfigurationMenuConstruct (): Ref {
-    const menu:ItemMenu | null = getConfigurationMenu(this.$config, this.$ability, this.$store)
+    const menu: ItemMenu | null = getConfigurationMenu(this.$config, this.$ability, this.$store)
     // Si l'utilisateur possède au moins un menu alors le menu configuration sera accessible
     this.$store.commit('profile/access/setHasConfigurationMenu', menu != null)
     return ref(menu)
@@ -108,7 +108,7 @@ class Menu {
    * Construit le menu Mes structure et mets à jour le state du profile d'access
    */
   useMyAccessesMenuConstruct (): Ref {
-    const menu:ItemMenu | null = getMyAccessesMenu(this.$config, this.$ability, this.$store)
+    const menu: ItemMenu | null = getMyAccessesMenu(this.$config, this.$ability, this.$store)
     // Si l'utilisateur possède au moins un menu alors le menu mes structures sera accessible
     this.$store.commit('profile/access/setHasAccessesMenu', menu != null)
     return ref(menu)
@@ -118,7 +118,7 @@ class Menu {
    * Construit le menu Changement d'utilisateur et mets à jour le state du profile d'access
    */
   useMyFamilyMenuConstruct (): Ref {
-    const menu:ItemMenu | null = getMyFamilyMenu(this.$config, this.$ability, this.$store)
+    const menu: ItemMenu | null = getMyFamilyMenu(this.$config, this.$ability, this.$store)
     // Si l'utilisateur possède au moins un menu alors le menu changement d'utilisateur sera accessible
     this.$store.commit('profile/access/setHasFamilyMenu', menu != null)
     return ref(menu)