add url parameters, disable SSR, include new structure data

README.md

@@ -10,11 +10,24 @@ Iframes implémentées:
 
 ## Run / build
 
-To start the development server
+To start the development server:
+
+    yarn dev
+
+To build:
+
+    yarn build
+
+
 
 
 ## Run tests
 
+To run unit tests:
+
+    yarn test
+
+
 To run end-to-end tests with [Cypress](https://docs.cypress.io/guides/):
 
     yarn cypress

lang/fr-FR.js

@@ -18,6 +18,7 @@ export default (_context, _locale) => {
     find_us_on: 'Retrouvez-nous sur',
     descriptive: 'Descriptif',
     contact: 'Contact',
+    no_description: 'Aucune description',
     spot_on_from: 'Coup de projecteur du',
     department: 'Département',
     distance: 'Distance',

nuxt.config.js

@@ -3,7 +3,7 @@ import colors from 'vuetify/es5/util/colors'
 export default {
 
   // Enable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
-  ssr: true,
+  ssr: false,
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,

pages/structures/_id.vue

@@ -3,7 +3,7 @@
     <header class="mb-4">
       <v-layout>
         <v-btn
-          to="/structures"
+          :to="{path: '/structures', query: { parent: parent, view: view, theme: theme }}"
           nuxt
           plain
         >
@@ -16,7 +16,6 @@
     <v-container class="content">
       <v-layout class="flex-row align-center mb-4">
         <nuxt-img
-          v-if="structure.logoId"
           :src="structure.logoId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.logoId + '/0x60' : '/images/default.jpg'"
           alt="logo"
         />
@@ -39,8 +38,12 @@
       </v-layout>
 
       <v-row>
-        <v-col cols="12">
-          <nuxt-img src="/images/piano.jpg" alt="" class="max-w100" />
+        <v-col class="d-flex justify-center" cols="12">
+          <nuxt-img
+            v-if="structure.imageId"
+            :src="'https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.imageId + '/raw'"
+            alt="banner"
+          />
         </v-col>
       </v-row>
 
@@ -66,13 +69,12 @@
             <h4>{{ $t('descriptive') }}</h4>
             <v-spacer />
           </div>
-          <p class="pa-2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
-            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-            deserunt mollit anim id est laborum.
-          </p>
+          <div class="pa-2">
+            <p v-if="structure.description" class="text-justify">
+              {{ structure.description }}
+            </p>
+            <i v-else>({{ $t('no_description') }})</i>
+          </div>
         </v-col>
 
         <v-col
@@ -107,6 +109,7 @@
                     {{ $t('show_tel') }}
                   </v-btn>
                 </div>
+                <span v-else>-</span>
               </td>
             </tr>
             <tr>
@@ -120,6 +123,7 @@
                     {{ $t('show_email') }}
                   </v-btn>
                 </div>
+                <span v-else>-</span>
               </td>
             </tr>
             <tr>
@@ -135,9 +139,16 @@
                 <font-awesome-icon class="icon" :icon="['fas', 'project-diagram']" />
               </td>
               <td class="network">
-                <NuxtLink :to="'/structures/' + structure.n1Id" nuxt>
+                <NuxtLink
+                  v-if="structure.n1Id !== parent"
+                  :to="{path: '/structures/' + structure.n1Id, query: { parent: parent, view: view, theme: theme }}"
+                  nuxt
+                >
                   {{ structure.n1Name }}
                 </NuxtLink>
+                <div v-else>
+                  {{ structure.n1Name }}
+                </div>
               </td>
             </tr>
           </table>
@@ -145,9 +156,16 @@
       </v-row>
 
       <v-row class="mb-4">
-        <v-col cols="12">
-          <v-btn small disabled>
-            {{ $t('spot_on_from') }} 01/01/2021
+        <v-col cols="12" >
+          <v-btn
+            v-for="article in structure.articles"
+            :key="article.id"
+            :href="(article.link.match(/https?:\/\/.*/) ? '' : 'https://') + article.link "
+            small
+            target="_blank"
+            class="ma-2"
+          >
+            {{ $t('spot_on_from') + ' ' + new Date(article.date).toLocaleDateString($i18n.locale) }}
           </v-btn>
         </v-col>
       </v-row>
@@ -190,6 +208,14 @@ import Vue from 'vue'
 import StructuresProvider from '~/services/data/StructuresProvider'
 
 export default Vue.extend({
+  validate ({ query }) {
+    if (!/^\d+$/.test(query.parent as string ?? '')) {
+      // eslint-disable-next-line no-console
+      console.error('Missing parameter: parent')
+      return false
+    }
+    return true
+  },
   async asyncData ({
     params, $axios
   }): Promise<{ structure: Structure }> {
@@ -199,6 +225,9 @@ export default Vue.extend({
   },
   data (): object {
     return {
+      parent: parseInt(this.$route.query.parent as string),
+      view: this.$route.query.view ?? 'map',
+      theme: this.$route.query.theme ?? 'orange',
       showTel: false,
       showMail: false
     }

pages/structures/index.vue

@@ -8,7 +8,7 @@
         <h2 class="flex">
           {{ $t("member_companies") }}
         </h2>
-        <v-btn-toggle mandatory dense @change="viewChanged">
+        <v-btn-toggle mandatory dense :value="mapview ? 0 : 1" @change="viewChanged">
           <v-btn>
             {{ $t("map") }}
           </v-btn>
@@ -151,22 +151,12 @@
           </v-form>
         </v-row>
 
-        <!-- loading skeleton -->
         <div class="pt-4 mt-6">
+          <!-- loading skeleton -->
           <v-container v-if="$fetchState.pending">
             <v-row v-for="i in 3" :key="i" justify="space-between" class="mt-1 mb-3">
-              <v-col
-                v-for="j in 2"
-                :key="j"
-                cols="12"
-                sm="12"
-                :md="mapview ? 6 : 12"
-                class="py-2 px-1"
-              >
-                <v-skeleton-loader
-                  type="card"
-                  :loading="true"
-                />
+              <v-col v-for="j in 2" :key="j" cols="12" :md="mapview ? 6 : 12" class="py-2 px-1">
+                <v-skeleton-loader type="card" :loading="true" />
               </v-col>
             </v-row>
           </v-container>
@@ -249,7 +239,11 @@
                     <span class="flex-fill" />
 
                     <v-card-actions :class="listview ? 'align-self-end' : ''">
-                      <v-btn class="see" :to="'/structures/' + structure.id" nuxt>
+                      <v-btn
+                        class="see"
+                        :to="{path: '/structures/' + structure.id, query: { parent: parent, view: view, theme: theme }}"
+                        nuxt
+                      >
                         <span style="margin-right: 6px;">{{ $t("see_more") }}</span>
                         <font-awesome-icon :icon="['fa', 'caret-right']" />
                       </v-btn>
@@ -283,15 +277,30 @@ import sphericDistance from '@/services/utils/geo'
 import StructuresProvider from '~/services/data/StructuresProvider'
 
 export default Vue.extend({
+  validate ({ query }) {
+    if (!/^\d+$/.test(query.parent as string ?? '')) {
+      // eslint-disable-next-line no-console
+      console.error('Missing parameter: parent')
+      return false
+    }
+    if (query.view && !['map', 'list'].includes(query.view as string)) {
+      // eslint-disable-next-line no-console
+      console.error('Invalid parameter: view')
+      return false
+    }
+    return true
+  },
   data () {
     return {
+      parent: parseInt(this.$route.query.parent as string),
+      view: this.$route.query.view ?? 'map',
+      theme: this.$route.query.theme ?? 'orange',
       structures: [] as Array<Structure>,
       filteredStructures: [] as Array<Structure>,
       federations: [] as Array<{ id: number | null, name: string | null }>,
       loading: true,
       page: 1,
       itemsPerPage: 8,
-      mapview: true,
       departments: departments as {code: string, label: string}[],
       practices: practices as {id: string}[],
       textFilter: null as string | null,
@@ -305,7 +314,7 @@ export default Vue.extend({
     }
   },
   async fetch () {
-    await new StructuresProvider(this.$axios).getAll(12097).then(
+    await new StructuresProvider(this.$axios).getAll(this.parent).then(
       (res) => {
         this.structures = res
         this.filteredStructures = res
@@ -338,8 +347,11 @@ export default Vue.extend({
     pageCount (): number {
       return Math.floor(this.totalRecords / this.itemsPerPage) + 1
     },
+    mapview (): boolean {
+      return this.view === 'map'
+    },
     listview (): boolean {
-      return !this.mapview
+      return this.view === 'list'
     },
     translatedPractices (): Array<{ id: string, label: string }> {
       const tPractices = []
@@ -351,7 +363,7 @@ export default Vue.extend({
   },
   methods: {
     viewChanged (e: number) {
-      this.mapview = (e === 0)
+      this.view = (e === 0) ? 'map' : 'list'
     },
     textFilterChanged (newVal: string) {
       this.textFilter = newVal

services/data/StructuresProvider.ts

@@ -11,6 +11,7 @@ class StructuresProvider extends BaseProvider {
     s.latitude = s.latitude ? parseFloat(s.latitude) : null
     s.longitude = s.longitude ? parseFloat(s.longitude) : null
     s.parents = s.parents ? s.parents.split(',').map((i: string) => Number(i)) : []
+    s.articles = (s.articles && s.articles !== '{}') ? JSON.parse('[' + s.articles + ']').reverse() : []
     return s
   }
 

types/interfaces.d.ts

@@ -24,7 +24,10 @@ interface Structure {
   n3Id: number | null,
   n4Id: number | null,
   n5Id: number | null,
-  parents: Array<number>
+  parents: Array<number>,
+  description: string | null,
+  imageId: string | null,
+  articles: Array<{id: number, title: string, date: string, link: string}>
 }
 
 interface Coordinates {