structures search: implements filters

components/Ui/Search/Address.vue

@@ -6,6 +6,7 @@
     outlined
     :label="$t('where') + ' ?'"
     autocomplete="off"
+    @change="$emit('change', $event)"
   >
     <button
       class="search-bar-btn"

components/Ui/Search/Text.vue

@@ -6,6 +6,7 @@
       name="search-query"
       outlined
       :label="$t('what') + ' ?'"
+      @input="$emit('change', $event)"
     >
       <button
         class="search-bar-btn"

components/Ui/Select/Department.vue

@@ -1,121 +0,0 @@
-<template>
-  <v-select
-    :items="departments"
-    item-value="code"
-    item-text="label"
-    :label="$t('department')"
-    filled
-  />
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      departments: [
-        { code: '01', label: '01 - Ain' },
-        { code: '02', label: '02 - Aisne' },
-        { code: '03', label: '03 - Allier' },
-        { code: '04', label: '04 - Alpes-de-Haute-Provence' },
-        { code: '05', label: '05 - Hautes-Alpes' },
-        { code: '06', label: '06 - Alpes-Maritimes' },
-        { code: '07', label: '07 - Ardèche' },
-        { code: '08', label: '08 - Ardennes' },
-        { code: '09', label: '09 - Ariège' },
-        { code: '10', label: '10 - Aube' },
-        { code: '11', label: '11 - Aude' },
-        { code: '12', label: '12 - Aveyron' },
-        { code: '13', label: '13 - Bouches-du-Rhône' },
-        { code: '14', label: '14 - Calvados' },
-        { code: '15', label: '15 - Cantal' },
-        { code: '16', label: '16 - Charente' },
-        { code: '17', label: '17 - Charente-Maritime' },
-        { code: '18', label: '18 - Cher' },
-        { code: '19', label: '19 - Corrèze' },
-        { code: '2A', label: '2A - Corse-du-Sud' },
-        { code: '2B', label: '2B - Haute-Corse' },
-        { code: '21', label: '21 - Côte-d\'Or' },
-        { code: '22', label: '22 - Côtes-d\'Armor' },
-        { code: '23', label: '23 - Creuse' },
-        { code: '24', label: '24 - Dordogne' },
-        { code: '25', label: '25 - Doubs' },
-        { code: '26', label: '26 - Drôme' },
-        { code: '27', label: '27 - Eure' },
-        { code: '28', label: '28 - Eure-et-Loir' },
-        { code: '29', label: '29 - Finistère' },
-        { code: '30', label: '30 - Gard' },
-        { code: '31', label: '31 - Haute-Garonne' },
-        { code: '32', label: '32 - Gers' },
-        { code: '33', label: '33 - Gironde' },
-        { code: '34', label: '34 - Hérault' },
-        { code: '35', label: '35 - Ille-et-Vilaine' },
-        { code: '36', label: '36 - Indre' },
-        { code: '37', label: '37 - Indre-et-Loire' },
-        { code: '38', label: '38 - Isère' },
-        { code: '39', label: '39 - Jura' },
-        { code: '40', label: '40 - Landes' },
-        { code: '41', label: '41 - Loir-et-Cher' },
-        { code: '42', label: '42 - Loire' },
-        { code: '43', label: '43 - Haute-Loire' },
-        { code: '44', label: '44 - Loire-Atlantique' },
-        { code: '45', label: '45 - Loiret' },
-        { code: '46', label: '46 - Lot' },
-        { code: '47', label: '47 - Lot-et-Garonne' },
-        { code: '48', label: '48 - Lozère' },
-        { code: '49', label: '49 - Maine-et-Loire' },
-        { code: '50', label: '50 - Manche' },
-        { code: '51', label: '51 - Marne' },
-        { code: '52', label: '52 - Haute-Marne' },
-        { code: '53', label: '53 - Mayenne' },
-        { code: '54', label: '54 - Meurthe-et-Moselle' },
-        { code: '55', label: '55 - Meuse' },
-        { code: '56', label: '56 - Morbihan' },
-        { code: '57', label: '57 - Moselle' },
-        { code: '58', label: '58 - Nièvre' },
-        { code: '59', label: '59 - Nord' },
-        { code: '60', label: '60 - Oise' },
-        { code: '61', label: '61 - Orne' },
-        { code: '62', label: '62 - Pas-de-Calais' },
-        { code: '63', label: '63 - Puy-de-Dôme' },
-        { code: '64', label: '64 - Pyrénées-Atlantiques' },
-        { code: '65', label: '65 - Hautes-Pyrénées' },
-        { code: '66', label: '66 - Pyrénées-Orientales' },
-        { code: '67', label: '67 - Bas-Rhin' },
-        { code: '68', label: '68 - Haut-Rhin' },
-        { code: '69', label: '69 - Rhône' },
-        { code: '70', label: '70 - Haute-Saône' },
-        { code: '71', label: '71 - Saône-et-Loire' },
-        { code: '72', label: '72 - Sarthe' },
-        { code: '73', label: '73 - Savoie' },
-        { code: '74', label: '74 - Haute-Savoie' },
-        { code: '75', label: '75 - Paris' },
-        { code: '76', label: '76 - Seine-Maritime' },
-        { code: '77', label: '77 - Seine-et-Marne' },
-        { code: '78', label: '78 - Yvelines' },
-        { code: '79', label: '79 - Deux-Sèvres' },
-        { code: '80', label: '80 - Somme' },
-        { code: '81', label: '81 - Tarn' },
-        { code: '82', label: '82 - Tarn-et-Garonne' },
-        { code: '83', label: '83 - Var' },
-        { code: '84', label: '84 - Vaucluse' },
-        { code: '85', label: '85 - Vendée' },
-        { code: '86', label: '86 - Vienne' },
-        { code: '87', label: '87 - Haute-Vienne' },
-        { code: '88', label: '88 - Vosges' },
-        { code: '89', label: '89 - Yonne' },
-        { code: '90', label: '90 - Territoire de Belfort' },
-        { code: '91', label: '91 - Essonne' },
-        { code: '92', label: '92 - Hauts-de-Seine' },
-        { code: '93', label: '93 - Seine-Saint-Denis' },
-        { code: '94', label: '94 - Val-de-Marne' },
-        { code: '95', label: '95 - Val-d\'Oise' },
-        { code: '971', label: '971 - Guadeloupe' },
-        { code: '972', label: '972 - Martinique' },
-        { code: '973', label: '973 - Guyane' },
-        { code: '974', label: '974 - La Réunion' },
-        { code: '976', label: '976 - Mayotte' }
-      ]
-    }
-  }
-}
-</script>

nuxt.config.js

@@ -44,6 +44,7 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    '~/plugins/enums.js',
     { src: '~/plugins/vue2-leaflet-markercluster.js', mode: 'client' }
   ],
 

pages/structures_adherentes/index.vue

@@ -22,7 +22,7 @@
     <v-row>
       <!-- Map Column (hidden in 'list-view' mode)-->
       <v-col v-show="mapview" cols="6">
-        <UiMapStructures :structures="structures"/>
+        <UiMapStructures :structures="structures" />
       </v-col>
 
       <!-- Results column -->
@@ -32,17 +32,17 @@
           <v-form method="get" class="mt-8 w100">
             <v-row>
               <v-col cols="6" class="py-2 px-1">
-                <UiSearchText />
+                <UiSearchText @change="textFilterChanged" />
               </v-col>
 
               <v-col cols="6" class="py-2 px-1">
-                <UiSearchAddress />
+                <UiSearchAddress @change="locationFilterChanged" />
               </v-col>
             </v-row>
 
             <v-row>
               <v-col v-if="listview" cols="2" class="py-2 px-1">
-                <v-btn class="h100">
+                <v-btn class="h100" @click="reinitializeFilters">
                   {{ $t('reinitialize') }}
                 </v-btn>
               </v-col>
@@ -51,16 +51,28 @@
                   <v-col :cols="3" class="py-2 px-1">
                     <v-select
                       :label="$t('type')"
+                      :value="textFilter"
                       filled
+                      @change="typeFilterChanged"
                     />
                   </v-col>
                   <v-col :cols="3" class="py-2 px-1">
-                    <UiSelectDepartment />
+                    <v-select
+                      :items="departmentsEnum"
+                      item-value="code"
+                      item-text="label"
+                      :label="$t('department')"
+                      :value="departmentFilter"
+                      filled
+                      @change="departmentFilterChanged"
+                    />
                   </v-col>
                   <v-col :cols="3" class="py-2 px-1">
                     <v-select
                       :label="$t('federation')"
+                      :value="federationFilter"
                       filled
+                      @change="federationFilterChanged"
                     />
                   </v-col>
                   <v-col :cols="3" class="py-2 px-1">
@@ -74,7 +86,9 @@
                       ]"
                       item-value="distance"
                       item-text="label"
+                      :value="distanceFilter"
                       filled
+                      @change="distanceFilterChanged"
                     />
                   </v-col>
                 </v-row>
@@ -87,7 +101,9 @@
             </v-row>
 
             <v-row v-show="mapview" class="px-2 pt-2">
-              <v-btn>{{ $t('reinitialize') }}</v-btn>
+              <v-btn @click="reinitializeFilters">
+                {{ $t('reinitialize') }}
+              </v-btn>
               <v-spacer />
               <v-btn>{{ $t('search') }}</v-btn>
             </v-row>
@@ -114,6 +130,7 @@
               <v-col
                 v-for="structure in props.items"
                 :key="structure.name"
+                v-if="matchFilters(structure)"
                 cols="12"
                 sm="12"
                 :md="mapview ? 6 : 12"
@@ -197,6 +214,8 @@
 </template>
 
 <script>
+import departmentsEnum from '~/plugins/enums'
+
 export default {
   data () {
     return {
@@ -1778,7 +1797,14 @@ export default {
         }],
       page: 1,
       itemsPerPage: 8,
-      mapview: true
+      mapview: true,
+      departmentsEnum,
+      textFilter: '',
+      locationFilter: '',
+      typeFilter: null,
+      departmentFilter: null,
+      federationFilter: null,
+      distanceFilter: null
     }
   },
   computed: {
@@ -1795,6 +1821,85 @@ export default {
   methods: {
     viewChanged (e) {
       this.mapview = (e === 0)
+    },
+    textFilterChanged (newVal) {
+      this.textFilter = newVal
+    },
+    locationFilterChanged (newVal) {
+      this.locationFilter = newVal
+    },
+    typeFilterChanged (newVal) {
+      this.typeFilter = newVal
+    },
+    departmentFilterChanged (newVal) {
+      this.departmentFilter = newVal
+    },
+    federationFilterChanged (newVal) {
+      this.federationFilter = newVal
+    },
+    distanceFilterChanged (newVal) {
+      this.distanceFilter = newVal
+    },
+    reinitializeFilters () {
+      this.textFilter = null
+      this.locationFilter = null
+      this.typeFilter = null
+      this.departmentFilter = null
+      this.federationFilter = null
+      this.distanceFilter = null
+    },
+    matchFilters (structure) {
+      // Filter by name
+      if (this.textFilter && !structure.name.toLowerCase().includes(this.textFilter.toLowerCase())) {
+        return false
+      }
+
+      // filter by geographical position
+      // if (query['lat'] && query['long']) {
+      //   if (!structure.latitude || !structure.longitude) {
+      //     return false;
+      //   }
+      //
+      //   let radius = Number(query['radius']) ?? 0;
+      //
+      //   // radius is increased by 10km to approximate the city radius
+      //   radius += 10;
+      //
+      //   if (sphericDistance(query['lat'], query['long'], structure.latitude, structure.longitude) > radius) {
+      //     return false;
+      //   }
+      // }
+
+      // filter by practice
+      if (this.typeFilter && !structure.practices.split(',').includes(this.typeFilter)) {
+        return false
+      }
+
+      // filter by department
+      if (this.departmentFilter && !structure.postalCode.startsWith(this.departmentFilter)) {
+        return false
+      }
+
+      // filter by federation
+      if (this.federationFilter && !structure.parents.includes(Number(this.federationFilter))) {
+        return false
+      }
+
+      // filter by map bounds
+      // if (area !== null) {
+      //   if (structure.longitude < area[0] ||
+      //     structure.latitude < area[1] ||
+      //     structure.longitude > area[2] ||
+      //     structure.latitude > area[3]
+      //   ) {
+      //     if (structure.id == 498) {
+      //       console.log(structure.longitude, structure.latitude, area);
+      //       console.log(structure.longitude < area[0], structure.latitude < area[1], structure.longitude > area[2], structure.latitude > area[3])
+      //     }
+      //     return false;
+      //   }
+      // }
+      return true
     }
   }
 }

plugins/enums.js

@@ -0,0 +1,408 @@
+const departmentsEnum = [
+  {
+    code: '01',
+    label: '01 - Ain'
+  },
+  {
+    code: '02',
+    label: '02 - Aisne'
+  },
+  {
+    code: '03',
+    label: '03 - Allier'
+  },
+  {
+    code: '04',
+    label: '04 - Alpes-de-Haute-Provence'
+  },
+  {
+    code: '05',
+    label: '05 - Hautes-Alpes'
+  },
+  {
+    code: '06',
+    label: '06 - Alpes-Maritimes'
+  },
+  {
+    code: '07',
+    label: '07 - Ardèche'
+  },
+  {
+    code: '08',
+    label: '08 - Ardennes'
+  },
+  {
+    code: '09',
+    label: '09 - Ariège'
+  },
+  {
+    code: '10',
+    label: '10 - Aube'
+  },
+  {
+    code: '11',
+    label: '11 - Aude'
+  },
+  {
+    code: '12',
+    label: '12 - Aveyron'
+  },
+  {
+    code: '13',
+    label: '13 - Bouches-du-Rhône'
+  },
+  {
+    code: '14',
+    label: '14 - Calvados'
+  },
+  {
+    code: '15',
+    label: '15 - Cantal'
+  },
+  {
+    code: '16',
+    label: '16 - Charente'
+  },
+  {
+    code: '17',
+    label: '17 - Charente-Maritime'
+  },
+  {
+    code: '18',
+    label: '18 - Cher'
+  },
+  {
+    code: '19',
+    label: '19 - Corrèze'
+  },
+  {
+    code: '2A',
+    label: '2A - Corse-du-Sud'
+  },
+  {
+    code: '2B',
+    label: '2B - Haute-Corse'
+  },
+  {
+    code: '21',
+    label: '21 - Côte-d\'Or'
+  },
+  {
+    code: '22',
+    label: '22 - Côtes-d\'Armor'
+  },
+  {
+    code: '23',
+    label: '23 - Creuse'
+  },
+  {
+    code: '24',
+    label: '24 - Dordogne'
+  },
+  {
+    code: '25',
+    label: '25 - Doubs'
+  },
+  {
+    code: '26',
+    label: '26 - Drôme'
+  },
+  {
+    code: '27',
+    label: '27 - Eure'
+  },
+  {
+    code: '28',
+    label: '28 - Eure-et-Loir'
+  },
+  {
+    code: '29',
+    label: '29 - Finistère'
+  },
+  {
+    code: '30',
+    label: '30 - Gard'
+  },
+  {
+    code: '31',
+    label: '31 - Haute-Garonne'
+  },
+  {
+    code: '32',
+    label: '32 - Gers'
+  },
+  {
+    code: '33',
+    label: '33 - Gironde'
+  },
+  {
+    code: '34',
+    label: '34 - Hérault'
+  },
+  {
+    code: '35',
+    label: '35 - Ille-et-Vilaine'
+  },
+  {
+    code: '36',
+    label: '36 - Indre'
+  },
+  {
+    code: '37',
+    label: '37 - Indre-et-Loire'
+  },
+  {
+    code: '38',
+    label: '38 - Isère'
+  },
+  {
+    code: '39',
+    label: '39 - Jura'
+  },
+  {
+    code: '40',
+    label: '40 - Landes'
+  },
+  {
+    code: '41',
+    label: '41 - Loir-et-Cher'
+  },
+  {
+    code: '42',
+    label: '42 - Loire'
+  },
+  {
+    code: '43',
+    label: '43 - Haute-Loire'
+  },
+  {
+    code: '44',
+    label: '44 - Loire-Atlantique'
+  },
+  {
+    code: '45',
+    label: '45 - Loiret'
+  },
+  {
+    code: '46',
+    label: '46 - Lot'
+  },
+  {
+    code: '47',
+    label: '47 - Lot-et-Garonne'
+  },
+  {
+    code: '48',
+    label: '48 - Lozère'
+  },
+  {
+    code: '49',
+    label: '49 - Maine-et-Loire'
+  },
+  {
+    code: '50',
+    label: '50 - Manche'
+  },
+  {
+    code: '51',
+    label: '51 - Marne'
+  },
+  {
+    code: '52',
+    label: '52 - Haute-Marne'
+  },
+  {
+    code: '53',
+    label: '53 - Mayenne'
+  },
+  {
+    code: '54',
+    label: '54 - Meurthe-et-Moselle'
+  },
+  {
+    code: '55',
+    label: '55 - Meuse'
+  },
+  {
+    code: '56',
+    label: '56 - Morbihan'
+  },
+  {
+    code: '57',
+    label: '57 - Moselle'
+  },
+  {
+    code: '58',
+    label: '58 - Nièvre'
+  },
+  {
+    code: '59',
+    label: '59 - Nord'
+  },
+  {
+    code: '60',
+    label: '60 - Oise'
+  },
+  {
+    code: '61',
+    label: '61 - Orne'
+  },
+  {
+    code: '62',
+    label: '62 - Pas-de-Calais'
+  },
+  {
+    code: '63',
+    label: '63 - Puy-de-Dôme'
+  },
+  {
+    code: '64',
+    label: '64 - Pyrénées-Atlantiques'
+  },
+  {
+    code: '65',
+    label: '65 - Hautes-Pyrénées'
+  },
+  {
+    code: '66',
+    label: '66 - Pyrénées-Orientales'
+  },
+  {
+    code: '67',
+    label: '67 - Bas-Rhin'
+  },
+  {
+    code: '68',
+    label: '68 - Haut-Rhin'
+  },
+  {
+    code: '69',
+    label: '69 - Rhône'
+  },
+  {
+    code: '70',
+    label: '70 - Haute-Saône'
+  },
+  {
+    code: '71',
+    label: '71 - Saône-et-Loire'
+  },
+  {
+    code: '72',
+    label: '72 - Sarthe'
+  },
+  {
+    code: '73',
+    label: '73 - Savoie'
+  },
+  {
+    code: '74',
+    label: '74 - Haute-Savoie'
+  },
+  {
+    code: '75',
+    label: '75 - Paris'
+  },
+  {
+    code: '76',
+    label: '76 - Seine-Maritime'
+  },
+  {
+    code: '77',
+    label: '77 - Seine-et-Marne'
+  },
+  {
+    code: '78',
+    label: '78 - Yvelines'
+  },
+  {
+    code: '79',
+    label: '79 - Deux-Sèvres'
+  },
+  {
+    code: '80',
+    label: '80 - Somme'
+  },
+  {
+    code: '81',
+    label: '81 - Tarn'
+  },
+  {
+    code: '82',
+    label: '82 - Tarn-et-Garonne'
+  },
+  {
+    code: '83',
+    label: '83 - Var'
+  },
+  {
+    code: '84',
+    label: '84 - Vaucluse'
+  },
+  {
+    code: '85',
+    label: '85 - Vendée'
+  },
+  {
+    code: '86',
+    label: '86 - Vienne'
+  },
+  {
+    code: '87',
+    label: '87 - Haute-Vienne'
+  },
+  {
+    code: '88',
+    label: '88 - Vosges'
+  },
+  {
+    code: '89',
+    label: '89 - Yonne'
+  },
+  {
+    code: '90',
+    label: '90 - Territoire de Belfort'
+  },
+  {
+    code: '91',
+    label: '91 - Essonne'
+  },
+  {
+    code: '92',
+    label: '92 - Hauts-de-Seine'
+  },
+  {
+    code: '93',
+    label: '93 - Seine-Saint-Denis'
+  },
+  {
+    code: '94',
+    label: '94 - Val-de-Marne'
+  },
+  {
+    code: '95',
+    label: '95 - Val-d\'Oise'
+  },
+  {
+    code: '971',
+    label: '971 - Guadeloupe'
+  },
+  {
+    code: '972',
+    label: '972 - Martinique'
+  },
+  {
+    code: '973',
+    label: '973 - Guyane'
+  },
+  {
+    code: '974',
+    label: '974 - La Réunion'
+  },
+  {
+    code: '976',
+    label: '976 - Mayotte'
+  }
+]
+
+export default departmentsEnum