vendredi 28 juillet 2017

Vue.JS Multiple checkbox series to filter apps

so here's my problem, I want to apply three filters to app thumbnails using Vue.js (I never used that framework before). It works fine for the first filter but I don't know how to proceed for the other ones. The goal is to be able to pick only one checkbox from each category (Platform, Field of activity and Device).

Screenshot of what it should look like. ("Toutes" meaning "All")

Here's the HTML

<div id="filter-realisations">
          <div id="filter">
            <div class="filter_container">
              <h3>Filtrer</h3>
              <div class="filter">
                <p>Plateforme</p>
                <input type="radio" v-model="selectedPlatform" value="AllPlatform" id="AllPlatform"><label for="AllPlatform">Toutes</label>
                <input type="radio" v-model="selectedPlatform" value="iOS" id="iOS" /><label for="iOS">iOS</label>
                <input type="radio" v-model="selectedPlatform" value="Android" id="Android" /><label for="Android">Android</label>
              </div>
              <div class="filter">
                <p>Secteur</p>
                <input type="radio" v-model="selectedSecteur" value="AllSecteur" id="AllSecteur" /><label for="AllSecteur">Toutes</label>
                <input type="radio" v-model="selectedSecteur" value="grandPublic" id="grandPublic"/><label for="grandPublic">Grand public</label>
                <input type="radio" v-model="selectedSecteur" value="metier" id="metier" /><label for="metier">Métier</label>
                <input type="radio" v-model="selectedSecteur" value="marchesPublics" id="marchesPublics" /><label for="marchesPublics">Marchés Publics</label>

              </div>
              <div class="filter">
                <p>Device</p>
                <input type="radio" v-model="selectedDevice" value="AllDevice" id="AllDevice" /><label for="AllDevice">Toutes</label>
                <input type="radio" v-model="selectedDevice" value="Smartphone" id="Smartphone" /><label for="Smartphone">Smartphone</label>
                <input type="radio" v-model="selectedDevice" value="Tablet" id="Tablet" /><label for="Tablet"> Tablette</label>
                <input type="radio" v-model="selectedDevice" value="Watch" id="Watch" /><label for="Watch"> Montre connectée</label>

              </div>
            </div>

          </div>

          <div id="realisations">
            <div class="realisations_container">
              <div class="realisations_bloc" v-for="app in filteredRealisations" v-bind:key="app">
                <img v-bind:src='"img/realisations/"+app.name+".jpg"' alt="app.name">
                <div class="overlay">
                  <div class="app_description"><p></p></div>
                  <div class="platform_container">
                     <div class="device">
                      <img v-bind:src='"img/"+app.device+".svg"' alt="app.device"/>
                    </div>
                    <div class="os">
                      <img v-bind:src='"img/"+app.platform+".svg"'alt="app.platform"/>
                    </div></div>
                </div>
              </div>

            </div>
          </div>
        </div>

And here's the script

var vm = new Vue({
    el:  "#filter-realisations",
    data: {
        realisations: [
            { name: "ASM", platform: "iOS", secteur: "grandPublic", secteur: "grandPublic", device:"Watch" },
            { name: "Biodiversea", platform: "Android", secteur: "marchesPublics", device:"Tablet" },
            { name: "CDBB", platform: "iOS", secteur: "grandPublic", device:"Smartphone" },
            { name: "Centre France", platform: "iOS", secteur: "grandPublic", device:"Watch" },
            { name: "Clermont", platform: "Android", secteur: "grandPublic", device:"Tablet" },
            { name: "Dassault", platform: "iOS", secteur: "metier", device:"Smartphone"},
            { name: "Journal", platform: "iOS", secteur: "metier", device:"Smartphone" },
            { name: "Somfy", platform: "Android", secteur: "metier", device:"Smartphone" },
            { name: "Sortir.vosges", platform: "Android", secteur: "metier", device:"Smartphone" },
      { name: "Sud Radio", platform: "Android", secteur: "metier", device:"Smartphone" },
      { name: "Verifrom", platform: "Android", secteur: "metier", device:"Smartphone" },
      { name: "Sports", platform: "iOS", secteur: "marchesPublics", device:"Watch" }

        ],
        selectedSecteur : "AllSecteur",
        selectedPlatform: "AllPlatform",
        selectedDevice : "AllDevice"
    },
    computed: {
        filteredRealisations: function() {
            var vm = this;
            var platform = vm.selectedPlatform;
            var secteur = vm.selectedSecteur;
            var device = vm.selectedDevice;



            if(platform === "AllPlatform") {
                return vm.realisations;
            } else {
                return vm.realisations.filter(function(app) {
                    return app.platform === platform;
                });
            }

            if(secteur === "AllSecteur") {
                return vm.realisations;
            } else {
                return vm.realisations.filter(function(app) {
                    return app.secteur === secteur;
                });
            }

            if(device === "AllDevice") {
                return vm.realisations;
            } else {
                return vm.realisations.filter(function(app) {
                    return app.device === device;
                });
            }

        }
    }
});




Aucun commentaire:

Enregistrer un commentaire