graphic improvements and routing fixes

assets/style/global.css

@@ -6,6 +6,14 @@
   height: 100% !important;
 }
 
+.max-w100 {
+  max-width: 100%;
+}
+
+.max-h100 {
+  max-height: 100%;
+}
+
 .flex-order-0 {
   order: 0;
 }

assets/style/global.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["global.scss"],"names":[],"mappings":"AACA;EACE;;;AAGF;EACE;;;AAGF;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAEhB;EACE","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["global.scss"],"names":[],"mappings":"AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAEhB;EACE","file":"global.css"}

assets/style/global.scss

@@ -7,6 +7,14 @@
   height: 100% !important;
 }
 
+.max-w100 {
+  max-width: 100%;
+}
+
+.max-h100 {
+  max-height: 100%;
+}
+
 .flex-order-0 { order: 0; }
 .flex-order-1 { order: 1; }
 .flex-order-2 { order: 2; }

components/Ui/Map/Structures.vue

@@ -1,6 +1,8 @@
 <template>
   <LayoutContainer>
     <v-responsive :aspect-ratio="1" width="100%">
+      <!-- /!\ We do not use the nuxt-leaflet library here,
+      because in its current version it's way too slow to deal with hundreds of markers     -->
       <div id="map" />
     </v-responsive>
 

pages/structures/_id.vue

@@ -0,0 +1,238 @@
+<template>
+  <LayoutContainer>
+    <header class="mb-4">
+      <v-layout>
+        <v-btn
+          to="/structures"
+          nuxt
+          plain
+        >
+          <font-awesome-icon class="icon mr-1" :icon="['fas', 'chevron-left']" />
+          {{ $t('go_back') }}
+        </v-btn>
+      </v-layout>
+    </header>
+
+    <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"
+        />
+
+        <h2 class="flex mx-4 d-flex align-center">
+          {{ structure.name }}
+        </h2>
+
+        <div class="d-flex flex-row align-center">
+          <a v-if="structure.facebook" :href="structure.facebook" class="facebook" target="_blank" :title="$t('find_us_on') + ' Facebook'">
+            <font-awesome-icon class="icon social-icon" :icon="['fab', 'facebook']" />
+          </a>
+          <a v-if="structure.instagram" :href="structure.instagram" class="instagram" target="_blank" :title="$t('find_us_on') + ' Instagram'">
+            <font-awesome-icon class="icon social-icon" :icon="['fab', 'instagram-square']" />
+          </a>
+          <a v-if="structure.twitter" :href="structure.twitter" class="twitter" target="_blank" title="$t('find_us_on') + ' Twitter'">
+            <font-awesome-icon class="icon social-icon" :icon="['fab', 'twitter']" />
+          </a>
+        </div>
+      </v-layout>
+
+      <v-row>
+        <v-col cols="12">
+          <nuxt-img src="/images/piano.jpg" alt="" class="max-w100" />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12">
+          <v-chip-group v-if="structure.practices" :max="0" active-class="primary--text" class="justify-center">
+            <v-chip v-for="practice in structure.practices" :key="practice">
+              {{ $t(practice) }}
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+      </v-row>
+
+      <v-divider class="my-2" />
+
+      <v-row class="my-2 py-2">
+        <v-col cols="6" class="description">
+          <div class="d-flex flex-row mb-3">
+            <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>
+        </v-col>
+
+        <v-col cols="6" class="contact">
+          <div class="d-flex flex-row mb-3">
+            <h4>{{ $t('contact') }}</h4>
+            <v-spacer />
+          </div>
+
+          <table>
+            <tr>
+              <td>
+                <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
+              </td>
+              <td class="mx-2">
+                {{ structure.address }}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <font-awesome-icon class="icon" :icon="['fas', 'phone-alt']" />
+              </td>
+              <td class="phone">
+                <a :href="'tel:' + structure.telphone">{{ structure.telphone }}</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <font-awesome-icon class="icon" :icon="['fas', 'envelope']" />
+              </td>
+              <td class="mail">
+                <a :href="'mailto:' + structure.mail">{{ structure.mail }}</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <font-awesome-icon class="icon" :icon="['fas', 'globe-europe']" />
+              </td>
+              <td class="website">
+                <a :href="structure.website">{{ structure.website }}</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <font-awesome-icon class="icon" :icon="['fas', 'project-diagram']" />
+              </td>
+              <td class="network">
+                {{ structure.n1Name }}
+              </td>
+            </tr>
+          </table>
+        </v-col>
+      </v-row>
+
+      <v-row class="mb-4">
+        <v-col cols="12">
+          <v-btn disabled>
+            {{ $t('spot_on_from') }} 01/01/2021
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="structure.latitude && structure.longitude">
+        <v-col cols="12">
+          <v-responsive width="100%" height="450px">
+            <no-ssr>
+              <l-map
+                :zoom="13"
+                :center="[structure.latitude, structure.longitude]"
+                :options="{ scrollWheelZoom: false, zoomSnap: 0.25 }"
+              >
+                <l-tile-layer
+                  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
+                  attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
+                />
+                <l-marker
+                  :key="structure.id"
+                  :lat-lng="[structure.latitude, structure.longitude]"
+                >
+                  <l-popup>
+                    <b>{{ structure.name }}</b><br>
+                    {{ structure.postalCode }} {{ structure.addressCity }}<br>
+                    <a :href="structure.website" target="_blank">{{ structure.website }}</a>
+                  </l-popup>
+                </l-marker>
+              </l-map>
+            </no-ssr>
+          </v-responsive>
+        </v-col>
+      </v-row>
+    </v-container>
+  </LayoutContainer>
+</template>
+
+<script>
+export default {
+  async asyncData ({ $config, params }) {
+    return await fetch(
+      `${$config.baseURL}/api/public/federation_structures/get?organization-id=${params.id}`
+    ).then(
+      res => res.json()
+    ).then(
+      (s) => {
+        s.n1Id = s.n1Id ? parseInt(s.n1Id) : null
+        s.n2Id = s.n2Id ? parseInt(s.n2Id) : null
+        s.n3Id = s.n3Id ? parseInt(s.n3Id) : null
+        s.n4Id = s.n4Id ? parseInt(s.n4Id) : null
+        s.n5Id = s.n5Id ? parseInt(s.n5Id) : null
+        s.practices = s.practices !== null ? s.practices.split(',') : []
+        s.latitude = s.latitude ? parseFloat(s.latitude) : null
+        s.longitude = s.longitude ? parseFloat(s.longitude) : null
+        s.address = [s.streetAddress, s.postalCode, s.addressCity].join(' ')
+
+        s.facebook = 'https://facebook.com'
+        s.twitter = 'https://twitter.com'
+        s.instagram = 'https://instagram.com'
+
+        return { structure: s }
+      }
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import 'assets/style/variables.scss';
+
+  .content {
+    margin: 18px 10%;
+    max-width: 80%;
+  }
+
+  h2 {
+    color: $theme;
+    font-size: 22px;
+  }
+
+  h4 {
+    color: #666;
+    border-bottom: solid 1px $theme;
+    font-size: 22px;
+  }
+
+  .social-icon {
+    font-size: 24px;
+    color: gray;
+    margin: auto 4px;
+  }
+
+  .description {
+    border-right: solid 2px #e4611b;
+    width: 45%;
+    padding-right: 5%;
+  }
+
+  .contact {
+    width: 45%;
+    padding-left: 5%;
+  }
+
+  .contact td {
+    padding: 6px 12px;
+  }
+
+  .contact .icon {
+    color: $theme;
+  }
+</style>

pages/structures_adherentes/index.vue → pages/structures/index.vue

@@ -5,7 +5,7 @@
     <!-- Header -->
     <v-row>
       <v-layout>
-        <h2 style="flex: 1;">
+        <h2 class="flex">
           {{ $t("member_companies") }}
         </h2>
         <v-btn-toggle mandatory dense @change="viewChanged">
@@ -34,104 +34,111 @@
         <!-- Search form -->
         <v-row>
           <v-form method="get" class="mt-8 w100">
-            <v-row>
-              <v-col cols="6" class="py-2 px-1">
-                <v-text-field
-                  v-model="textFilter"
-                  type="text"
-                  outlined
-                  clearable
-                  append-icon="mdi-magnify"
-                  :label="$t('what') + ' ?'"
-                  @click:append="search"
-                  @keydown.enter="search"
-                />
-              </v-col>
+            <v-container>
+              <v-row>
+                <v-col cols="6" class="py-2 px-1">
+                  <v-text-field
+                    v-model="textFilter"
+                    type="text"
+                    outlined
+                    clearable
+                    hide-details
+                    append-icon="mdi-magnify"
+                    :label="$t('what') + ' ?'"
+                    @click:append="search"
+                    @keydown.enter="search"
+                  />
+                </v-col>
 
-              <v-col cols="6" class="py-2 px-1">
-                <UiSearchAddress
-                  ref="addressSearch"
-                  type="municipality"
-                  @change="locationFilterChanged"
-                />
-              </v-col>
-            </v-row>
+                <v-col cols="6" class="py-2 px-1">
+                  <UiSearchAddress
+                    ref="addressSearch"
+                    type="municipality"
+                    @change="locationFilterChanged"
+                  />
+                </v-col>
+              </v-row>
 
-            <v-row>
-              <v-col v-if="listview" cols="2" class="py-2 px-1">
-                <v-btn class="h100" @click="reinitializeFilters">
+              <v-row>
+                <v-col v-if="listview" cols="2" class="py-2 px-1">
+                  <v-btn class="h100" @click="reinitializeFilters">
+                    {{ $t('reinitialize') }}
+                  </v-btn>
+                </v-col>
+                <v-col :cols="listview ? 8 : 12">
+                  <v-row class="filters">
+                    <v-col :cols="3" class="py-2 px-1">
+                      <v-select
+                        v-model="practicesFilter"
+                        :label="$t('type')"
+                        :items="translatedPractices"
+                        item-value="id"
+                        item-text="label"
+                        filled
+                        hide-details
+                        @change="search"
+                      />
+                    </v-col>
+                    <v-col :cols="3" class="py-2 px-1">
+                      <v-select
+                        v-model="departmentFilter"
+                        :items="departments"
+                        item-value="code"
+                        item-text="label"
+                        :label="$t('department')"
+                        filled
+                        hide-details
+                        @change="search"
+                      />
+                    </v-col>
+                    <v-col :cols="3" class="py-2 px-1">
+                      <v-select
+                        v-model="federationFilter"
+                        :items="federations"
+                        item-value="id"
+                        item-text="name"
+                        :label="$t('federation')"
+                        filled
+                        hide-details
+                        @change="search"
+                      />
+                    </v-col>
+                    <v-col :cols="3" class="py-2 px-1">
+                      <v-select
+                        v-model="distanceFilter"
+                        :label="$t('distance')"
+                        :items="[
+                          {distance: 10, label: '10km'},
+                          {distance: 30, label: '30km'},
+                          {distance: 100, label: '100km'},
+                          {distance: 200, label: '200km'}
+                        ]"
+                        item-value="distance"
+                        item-text="label"
+                        filled
+                        hide-details
+                        @change="search"
+                      />
+                    </v-col>
+                  </v-row>
+                </v-col>
+                <v-col v-if="listview" cols="2" class="py-2 px-1 d-flex justify-end">
+                  <v-btn class="h100">
+                    {{ $t('search') }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+              <v-row v-show="mapview" class="px-2 pt-2">
+                <v-btn @click="reinitializeFilters">
                   {{ $t('reinitialize') }}
                 </v-btn>
-              </v-col>
-              <v-col :cols="listview ? 8 : 12">
-                <v-row class="filters">
-                  <v-col :cols="3" class="py-2 px-1">
-                    <v-select
-                      v-model="practicesFilter"
-                      :label="$t('type')"
-                      :items="translatedPractices"
-                      item-value="id"
-                      item-text="label"
-                      filled
-                      @change="search"
-                    />
-                  </v-col>
-                  <v-col :cols="3" class="py-2 px-1">
-                    <v-select
-                      v-model="departmentFilter"
-                      :items="departments"
-                      item-value="code"
-                      item-text="label"
-                      :label="$t('department')"
-                      filled
-                      @change="search"
-                    />
-                  </v-col>
-                  <v-col :cols="3" class="py-2 px-1">
-                    <v-select
-                      v-model="federationFilter"
-                      :items="federations"
-                      item-value="id"
-                      item-text="name"
-                      :label="$t('federation')"
-                      filled
-                      @change="search"
-                    />
-                  </v-col>
-                  <v-col :cols="3" class="py-2 px-1">
-                    <v-select
-                      v-model="distanceFilter"
-                      :label="$t('distance')"
-                      :items="[
-                        {distance: 10, label: '10km'},
-                        {distance: 30, label: '30km'},
-                        {distance: 100, label: '100km'},
-                        {distance: 200, label: '200km'}
-                      ]"
-                      item-value="distance"
-                      item-text="label"
-                      filled
-                      @change="search"
-                    />
-                  </v-col>
-                </v-row>
-              </v-col>
-              <v-col v-if="listview" cols="2" class="py-2 px-1 d-flex justify-end">
-                <v-btn class="h100">
+                <v-spacer />
+                <v-btn @click="search">
                   {{ $t('search') }}
                 </v-btn>
-              </v-col>
-            </v-row>
-
-            <v-row v-show="mapview" class="px-2 pt-2">
-              <v-btn @click="reinitializeFilters">
-                {{ $t('reinitialize') }}
-              </v-btn>
-              <v-spacer />
-              <v-btn @click="search">
-                {{ $t('search') }}
-              </v-btn>
-            </v-row>
+              </v-row>
+            </v-container>
           </v-form>
         </v-row>
 
@@ -215,7 +222,7 @@
                               <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
                             </td>
                             <td class="py-1">
-                              {{ [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ") }}
+                              {{ structure.address }}
                             </td>
                           </tr>
                           <tr>
@@ -232,7 +239,7 @@
                     <span class="flex-fill" />
 
                     <v-card-actions :class="listview ? 'align-self-end' : ''">
-                      <v-btn class="see" :to="'/structures_adherentes/' + structure.id">
+                      <v-btn class="see" :to="'/structures/' + structure.id" nuxt>
                         <span style="margin-right: 6px;">{{ $t("see_more") }}</span>
                         <font-awesome-icon :icon="['fa', 'caret-right']" />
                       </v-btn>
@@ -299,6 +306,7 @@ export default {
         s.practices = s.practices !== null ? s.practices.split(',') : []
         s.latitude = s.latitude ? parseFloat(s.latitude) : null
         s.longitude = s.longitude ? parseFloat(s.longitude) : null
+        s.address = [s.streetAddress, s.postalCode, s.addressCity].join(' ')
         return s
       })
     ).then((res) => {

pages/structures_adherentes/_id.vue

@@ -1,93 +0,0 @@
-<template>
-  <LayoutContainer>
-    <header>
-      <a class="go-back" href="#"><i class="fas fa-chevron-left" />{{ $t('go_back') }}</a>
-    </header>
-    <span class="please-wait">
-      <nuxt-img
-        src="/images/gear.gif"
-        :alt="$t('please_wait')"
-        style="margin-top:100px; width:70px"
-      />
-    </span>
-    <div class="content" style="display: none">
-      <div class="structure-header">
-        <nuxt-img class="default-logo" src="/images/event-default.jpg" alt="logo" />
-        <img class="logo" src="" alt="logo" style="display:none">
-
-        <h3 class="structure-name" />
-
-        <span class="social">
-          <a href="" class="facebook" target="_blank" style="display: none" :title="$t('find_us_on') + ' Facebook'">
-            <i class="fab fa-facebook" />
-          </a>
-          <a href="" class="instagram" target="_blank" style="display: none">
-            <i class="fab fa-instagram-square" :title="$t('find_us_on') + ' Instagram'" />
-          </a>
-          <a href="" class="twitter" target="_blank" style="display: none">
-            <i class="fab fa-twitter" title="$t('find_us_on') + ' Twitter'" />
-          </a>
-        </span>
-      </div>
-      <div class="illustration-container">
-        <nuxt-img src="/images/event-default-modern.jpg" alt="" />
-      </div>
-      <div class="structure-practices">
-        <span class="structure-practice-model" style="display: none" />
-      </div>
-      <div class="details">
-        <div class="description">
-          <h4>{{ $t('descriptive') }}</h4>
-
-          <p>
-            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>
-        <div class="contact">
-          <h4>{{ $t('contact') }}</h4>
-
-          <table>
-            <tr>
-              <td><i class="fas fa-map-marker-alt" /></td>
-              <td class="address" />
-            </tr>
-            <tr>
-              <td><i class="fas fa-phone-alt" /></td>
-              <td class="phone">
-                <a href="" />
-              </td>
-            </tr>
-            <tr>
-              <td><i class="fas fa-envelope" /></td>
-              <td class="mail">
-                <a href="" />
-              </td>
-            </tr>
-            <tr>
-              <td><i class="fas fa-globe-europe" /></td>
-              <td class="website">
-                <a href="" />
-              </td>
-            </tr>
-            <tr>
-              <td><i class="fas fa-project-diagram" /></td>
-              <td class="network" />
-            </tr>
-          </table>
-        </div>
-      </div>
-
-      <div class="spot-on-bar">
-        <button disabled>
-          {{ $t('spot_on_from') }} 01/01/2021
-        </button>
-      </div>
-
-      <div id="structure-details-map" style="display: none" />
-    </div>
-  </LayoutContainer>
-</template>