components: documents and lint

components/Layout/Alert/Container.vue

@@ -1,3 +1,7 @@
+<!--
+Container principal pour l'affichage d'une ou plusieurs alertes
+-->
+
 <template>
   <main class="alertContainer">
     <LayoutAlertContent
@@ -18,7 +22,7 @@ export default defineComponent({
   setup () {
     const { store } = useContext()
 
-    const alerts:ComputedRef<Array<alert>> = computed(() => {
+    const alerts: ComputedRef<Array<alert>> = computed(() => {
       return store.state.page.alerts
     })
     return {

components/Layout/Alert/Content.vue

@@ -1,3 +1,5 @@
+<!-- Message d'alerte -->
+
 <template>
   <v-alert
     v-model="show"
@@ -28,10 +30,10 @@ export default defineComponent({
   },
   setup () {
     const { store } = useContext()
-    const show:Ref<boolean> = ref(true)
+    const show: Ref<boolean> = ref(true)
     let timeout: any = null
 
-    const clearAlert = (time:number = 2000) => {
+    const clearAlert = (time: number = 2000) => {
       timeout = setTimeout(() => {
         show.value = false
         store.dispatch('page/removeSlowlyAlert')

components/Layout/BannerTop.vue

@@ -1,13 +1,15 @@
+<!-- Troisième bandeau en partant du haut, contenant entre autre le numéro SIRET de l'organisation -->
+
 <template>
   <v-row justify="center" align="center" class="bannerTopForm">
     <v-col cols="3" class="ot_dark_grey ot_white--text">
-      <slot name="bloc1"></slot>
+      <slot name="bloc1" />
     </v-col>
     <v-col cols="6" class="ot_white ot_grey--text">
-      <slot name="bloc2"></slot>
+      <slot name="bloc2" />
     </v-col>
     <v-col cols="3" class="ot_light_grey ot_grey--text">
-      <slot name="bloc3"></slot>
+      <slot name="bloc3" />
     </v-col>
   </v-row>
 </template>

components/Layout/Container.vue

@@ -1,8 +1,11 @@
+<!-- Container générique pleine page, utilisé entre autres
+ pour porter le contenu principal de la page -->
+
 <template>
   <v-container fluid class="container">
     <v-row justify="center" align="center">
       <v-col cols="12" sm="12" md="12">
-        <slot></slot>
+        <slot />
       </v-col>
     </v-row>
   </v-container>
@@ -10,6 +13,6 @@
 
 <style scoped>
   .container{
-    padding-top: 0px;
+    padding-top: 0;
   }
 </style>

components/Layout/Dialog.vue

@@ -1,3 +1,5 @@
+<!-- Fenêtre de dialogue -->
+
 <template>
   <v-dialog
     v-model="show"

components/Layout/Header.vue

@@ -1,3 +1,8 @@
+<!--
+Header de l'application, contient entre autres le nom de l'organisation, l'accès à l'aide
+et aux préférences de l'utilisateur
+-->
+
 <template>
   <v-app-bar
     clipped-left
@@ -13,20 +18,24 @@
       icon
       @click.stop="displayedMenu()"
     >
-      <v-icon class="ot_white--text">mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}</v-icon>
+      <v-icon class="ot_white--text">
+        mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}
+      </v-icon>
     </v-btn>
 
-    <v-toolbar-title v-text="title"/>
+    <v-toolbar-title v-text="title" />
 
-    <v-spacer/>
+    <v-spacer />
 
     <v-btn
       elevation="2"
       color="ot_warning ot_white--text"
-    >{{ $t('create') }}</v-btn>
+    >
+      {{ $t('create') }}
+    </v-btn>
 
     <v-tooltip bottom>
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn
           icon
           v-bind="attrs"
@@ -38,47 +47,45 @@
       <span>{{ $t('welcome') }}</span>
     </v-tooltip>
 
+    <LayoutHeaderMenu :menu="webSiteMenu" />
 
-    <LayoutHeaderMenu :menu="webSiteMenu"></LayoutHeaderMenu>
+    <LayoutHeaderMenu v-if="hasAccessesMenu" :menu="myAccessesMenu" />
 
-    <LayoutHeaderMenu :menu="myAccessesMenu" v-if="hasAccessesMenu"></LayoutHeaderMenu>
+    <LayoutHeaderMenu v-if="hasFamilyMenu" :menu="myFamilyMenu" />
 
-    <LayoutHeaderMenu :menu="myFamilyMenu" v-if="hasFamilyMenu"></LayoutHeaderMenu>
+    <LayoutHeaderNotification />
 
-    <LayoutHeaderNotification></LayoutHeaderNotification>
+    <LayoutHeaderMenu v-if="hasConfigurationMenu" :menu="configurationMenu" />
 
-    <LayoutHeaderMenu :menu="configurationMenu" v-if="hasConfigurationMenu"></LayoutHeaderMenu>
-
-    <LayoutHeaderMenu :menu="accountMenu" :avatar="true"></LayoutHeaderMenu>
+    <LayoutHeaderMenu :menu="accountMenu" :avatar="true" />
 
     <a class="text-body pa-3 ml-2 ot_dark_grey ot_white--text text-decoration-none" href="https://support.opentalent.fr/" target="_blank">
       <span class="d-none d-sm-none d-md-flex">{{ $t('help_access') }}</span>
       <v-icon class="d-sm-flex d-md-none" color="white">fas fa-question-circle</v-icon>
     </a>
-
   </v-app-bar>
 </template>
 
 <script lang="ts">
-import {defineComponent, reactive, useContext, computed, ComputedRef, Ref} from '@nuxtjs/composition-api'
-import {$useMenu} from "~/use/layout/menu";
-import {UnwrapRef} from "@vue/composition-api";
-import {AnyJson} from "~/types/interfaces";
+import { defineComponent, reactive, useContext, computed, ComputedRef, 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(props, {emit}) {
-    const {store, $config} = useContext();
+  setup (props, { emit }) {
+    const { store, $config } = useContext()
 
     const properties:UnwrapRef<AnyJson> = reactive({
       miniVariant: false,
-      homeUrl : $config.baseURL_adminLegacy
+      homeUrl: $config.baseURL_adminLegacy
     })
 
-    const displayedMiniVariant:ComputedRef<boolean> = computed(()=>store.state.profile.access.hasLateralMenu)
-    const hasConfigurationMenu:ComputedRef<boolean>  = computed(()=>store.state.profile.access.hasConfigurationMenu)
-    const hasAccessesMenu:ComputedRef<boolean>  = computed(()=>store.state.profile.access.hasAccessesMenu)
-    const hasFamilyMenu:ComputedRef<boolean>  = computed(()=>store.state.profile.access.hasFamilyMenu)
-    const title:ComputedRef<string>  = computed(()=>store.state.profile.organization.name)
+    const displayedMiniVariant:ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)
+    const hasConfigurationMenu:ComputedRef<boolean> = computed(() => store.state.profile.access.hasConfigurationMenu)
+    const hasAccessesMenu:ComputedRef<boolean> = computed(() => store.state.profile.access.hasAccessesMenu)
+    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()

components/Layout/Header/Menu.vue

@@ -1,3 +1,8 @@
+<!--
+Menu déroulant générique pour l'affichage des menus du
+header principal (configuration, paramètres du compte...)
+-->
+
 <template>
   <v-menu offset-y left max-height="300">
     <template v-slot:activator="{ on: { click }, attrs }">

components/Layout/Header/Notification.vue

@@ -1,3 +1,7 @@
+<!--
+Notification
+-->
+
 <template>
   <v-menu offset-y>
     <template v-slot:activator="{ on, attrs }">
@@ -38,9 +42,9 @@ 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({
+    const properties: UnwrapRef<AnyJson> = reactive({
       menu
     })
 

components/Layout/Loading.vue

@@ -1,3 +1,5 @@
+<!-- Animation circulaire à afficher durant les chargements -->
+
 <template>
   <v-overlay :value="loading" class="loading-page">
     <v-progress-circular
@@ -12,7 +14,7 @@ import { defineComponent, ref, Ref } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup () {
-    const loading:Ref<boolean> = ref(false)
+    const loading: Ref<boolean> = ref(false)
 
     const set = (num: number) => {
       loading.value = true

components/Layout/Menu.vue

@@ -1,3 +1,8 @@
+<!--
+Menu principal de l'application
+Prend en paramètre une liste de ItemMenu et les met en forme
+-->
+
 <template>
   <v-navigation-drawer
     :mini-variant.sync="miniVariant"

components/Layout/SubHeader/Breadcrumbs.vue

@@ -12,9 +12,9 @@ export default defineComponent({
   setup () {
     const { route, $config, app: { i18n } } = useContext()
     const $router = useRouter()
-    const homeUrl:string = $config.baseURL_adminLegacy
+    const homeUrl: string = $config.baseURL_adminLegacy
 
-    const items:ComputedRef<Array<AnyJson>> = computed(() => {
+    const items: ComputedRef<Array<AnyJson>> = computed(() => {
       const crumbs:Array<AnyJson> = []
       crumbs.push({
         text: i18n.t('welcome'),

components/Layout/SubHeader/DataTiming.vue

@@ -36,10 +36,10 @@ export default defineComponent({
     const { markFormAsNotDirty } = $useDirtyForm(store)
     const { updateMyProfile, setHistorical, historical } = $useMyProfileUpdater(store, $dataPersister)
 
-    const historicalBtn:Ref<Array<number>> = initHistoricalBtn(historical.value)
+    const historicalBtn: Ref<Array<number>> = initHistoricalBtn(historical.value)
 
-    const unwatch:WatchStopHandle = watch(historicalBtn, async (newValue) => {
-      const historicalChoice:Array<string> = initHistoricalChoice(newValue)
+    const unwatch: WatchStopHandle = watch(historicalBtn, async (newValue) => {
+      const historicalChoice: Array<string> = initHistoricalChoice(newValue)
 
       setHistorical(historicalChoice)
       markFormAsNotDirty()
@@ -61,7 +61,7 @@ export default defineComponent({
    * Prépare le tableau de valeur numéraire devant être passé au component v-btn-toggle
    * @param historical
    */
-function initHistoricalBtn (historical:Array<any>) {
+function initHistoricalBtn (historical: Array<any>) {
   const timeChoice:Ref<Array<number>> = ref(Array<number>())
   const historicalArray:Array<any> = ['past', 'present', 'future']
 

components/Layout/SubHeader/PersonnalizedList.vue

@@ -47,7 +47,7 @@ export default defineComponent({
   fetchOnServer: false,
   setup () {
     const { $dataProvider, $config } = useContext()
-    const isLoading:Ref<boolean> = ref(true)
+    const isLoading: Ref<boolean> = ref(true)
     const homeUrl:string = $config.baseURL_adminLegacy
 
     useFetch(async () => {

components/Layout/Subheader.vue

@@ -1,3 +1,8 @@
+<!--
+Second header de l'application
+Contient entre autres le breadcrumb, les commandes de changement d'année et les listes personnalisées
+-->
+
 <template>
   <main>
     <v-card

components/Ui/Button/Delete.vue

@@ -1,3 +1,7 @@
+<!--
+Bouton Delete avec modale de confirmation de la suppression
+-->
+
 <template>
   <main>
     <v-btn icon @click="alertDeleteItem()">
@@ -42,18 +46,18 @@ export default defineComponent({
   },
   setup (props) {
     const { $dataDeleter, store, app: { i18n } } = useContext()
-    const showDialog:Ref<boolean> = ref(false)
+    const showDialog: Ref<boolean> = ref(false)
 
     const deleteItem = async () => {
       try {
         await $dataDeleter.invoke(props.deleteArgs)
-        const alert:alert = {
+        const alert: alert = {
           type: TYPE_ALERT.SUCCESS,
           message: i18n.t('deleteSuccess') as string
         }
         store.commit('page/setAlert', alert)
       } catch (error) {
-        const alert:alert = {
+        const alert: alert = {
           type: TYPE_ALERT.ALERT,
           message: error.message
         }

components/Ui/Card.vue

@@ -1,3 +1,7 @@
+<!--
+Container de type Card
+-->
+
 <template>
   <v-card
     elevation="2"

components/Ui/DataTable.vue

@@ -1,3 +1,9 @@
+<!--
+Tableau interactif
+
+@see https://vuetifyjs.com/en/components/data-tables/
+-->
+
 <template>
   <v-col
     cols="12"

components/Ui/ExpansionPanel.vue

@@ -1,3 +1,9 @@
+<!--
+Panneaux déroulants de type "accordéon"
+
+@see https://vuetifyjs.com/en/components/expansion-panels/
+-->
+
 <template>
   <v-expansion-panel :id="id">
     <v-expansion-panel-header class="ot_light_grey">

components/Ui/Form.vue

@@ -1,3 +1,9 @@
+<!--
+Formulaire générique
+
+@see https://vuetifyjs.com/en/components/forms/#usage
+-->
+
 <template>
   <main>
     <v-form

components/Ui/Input/Autocomplete.vue

@@ -1,3 +1,9 @@
+<!--
+Liste déroulante avec autocompletion
+
+@see https://vuetifyjs.com/en/components/autocompletes/#usage
+-->
+
 <template>
   <main>
     <v-autocomplete

components/Ui/Input/AutocompleteWithAPI.vue

@@ -1,3 +1,10 @@
+<!--
+Liste déroulante avec autocompletion (les données sont issues
+de l'api Opentalent)
+
+@see https://vuetifyjs.com/en/components/autocompletes/#usage
+-->
+
 <template>
   <main>
     <v-autocomplete

components/Ui/Input/Checkbox.vue

@@ -1,3 +1,9 @@
+<!--
+Case à cocher
+
+@see https://vuetifyjs.com/en/components/checkboxes/
+-->
+
 <template>
   <v-container
     class="px-0"

components/Ui/Input/DatePicker.vue

@@ -1,3 +1,9 @@
+<!--
+Sélecteur de dates
+
+@see https://vuetifyjs.com/en/components/date-pickers/
+-->
+
 <template>
   <main>
     <v-menu
@@ -73,7 +79,7 @@ export default defineComponent({
     const { $moment } = useContext()
     const dateUtils = new DatesUtils($moment)
 
-    const datesParsed:Ref<Array<string>|string> = range ? ref(Array<string>()) : ref('')
+    const datesParsed: Ref<Array<string>|string> = range ? ref(Array<string>()) : ref('')
 
     if (Array.isArray(datesParsed.value)) {
       for (const date of data as Array<string>) {
@@ -83,11 +89,11 @@ export default defineComponent({
       datesParsed.value = $moment(data as string).format('YYYY-MM-DD')
     }
 
-    const datesFormatted:ComputedRef<string> = computed(() => {
+    const datesFormatted: ComputedRef<string> = computed(() => {
       return dateUtils.formattedDate(datesParsed.value, 'DD/MM/YYYY')
     })
 
-    const unwatch:WatchStopHandle = watch(datesParsed, (newValue, oldValue) => {
+    const unwatch: WatchStopHandle = watch(datesParsed, (newValue, oldValue) => {
       if (newValue === oldValue) { return }
       if (Array.isArray(newValue) && newValue.length < 2) { return }
       emit('update', Array.isArray(newValue) ? dateUtils.sortDate(newValue) : newValue, field)

components/Ui/Input/Enum.vue

@@ -1,3 +1,9 @@
+<!--
+Liste déroulante dédiée à l'affichage d'objets Enum
+
+@see https://vuetifyjs.com/en/components/selects/
+-->
+
 <template>
   <main>
     <v-skeleton-loader

components/Ui/Input/Text.vue

@@ -1,3 +1,9 @@
+<!--
+Champs de saisie de texte
+
+@see https://vuetifyjs.com/en/components/text-fields/
+-->
+
 <template>
   <v-text-field
     autocomplete="off"

components/Ui/Map.vue

@@ -1,3 +1,9 @@
+<!--
+Leaflet map
+
+@see https://leafletjs.com/
+-->
+
 <template>
   <div id="map-wrap">
     <client-only>
@@ -37,7 +43,7 @@ export default defineComponent({
   },
   setup (props, { emit }) {
     const { $dataProvider, store } = useContext()
-    const { address }:ToRefs = toRefs(props)
+    const { address }: ToRefs = toRefs(props)
     const latitude: Ref<number> = ref(address.value.latitude)
     const longitude: Ref<number> = ref(address.value.longitude)
 

components/Ui/SubList.vue

@@ -1,3 +1,5 @@
+<!-- ? -->
+
 <template>
   <main>
     <v-skeleton-loader
@@ -38,7 +40,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { rootModel, rootId, model, query }:ToRefs = toRefs(props)
+    const { rootModel, rootId, model, query }: ToRefs = toRefs(props)
     const { $dataProvider } = useContext()
     useFetch(async () => {
       await $dataProvider.invoke({
@@ -49,7 +51,7 @@ export default defineComponent({
       })
     })
 
-    const items:ComputedRef<Collection> = computed(() => queryHelper.getCollection(query.value))
+    const items: ComputedRef<Collection> = computed(() => queryHelper.getCollection(query.value))
     // onUnmounted( useRepositoryHelper.cleanRepository(repository.value) )
 
     return {

components/Ui/Xeditable/Text.vue

@@ -1,3 +1,7 @@
+<!--
+?
+-->
+
 <template>
   <main>
     <div v-if="edit" class="d-flex align-baseline x-editable-input mt-n1">
@@ -36,8 +40,8 @@ export default defineComponent({
     }
   },
   setup (props, { emit }) {
-    const edit:Ref<boolean> = ref(false)
-    const inputValue:Ref<string|number|null> = ref(props.data)
+    const edit: Ref<boolean> = ref(false)
+    const inputValue: Ref<string|number|null> = ref(props.data)
 
     const update = () => {
       edit.value = false