<div id="app"> <h1>Masterclass Academy Videos</h1> <hr/> <span>{{numberResults}}Result(s)</span> <hr/> <div v-if="(filterConceptArray && filterConceptArray.length > 0) || (filterPositionArray && filterPositionArray.length > 0) || (filterCategoryArray && filterCategoryArray.length > 0)"> <div v-if="(filterConceptArray && filterConceptArray.length > 0)"> <span>Concept(s):</span> <span>{{filterConceptArray.join(", ")}}</span> </div><div v-if="(filterPositionArray && filterPositionArray.length > 0)"> <span>Position(s):</span> <span>{{filterPositionArray.join(", ")}}</span> </div><div v-if="(filterCategoryArray && filterCategoryArray.length > 0)"> <span>Category(ies):</span> <span>{{filterCategoryArray.join(", ")}}</span> </div><a href='' class='btn btn-primary btn-sm' v-on:click='clearFilters'>Clear Filters</a> <hr/> </div><div v-for="item in filteredEvents"> <h3> <a class="ma-video-link" :href="item['fields']['Release URL']">{{item['fields']['Name']}}</a> </h3> <div class="ma-divider-div" v-if="item['fields']['Concept(s)']"> <h6>Concept(s)</h6> <span class="ma-conpos-button-span" v-for="concept in item['fields']['Concept(s)']"> <button v-on:click='filterConcept' class='btn btn-info btn-sm'>{{concept}}</button> </span> </div><div class="ma-divider-div" v-if="item['fields']['Position(s)']"> <h6>Position(s)</h6> <span class="ma-conpos-button-span" v-for="position in item['fields']['Position(s)']"> <button v-on:click='filterPosition' class='btn btn-info btn-sm'>{{position}}</button> </span> </div><div class="ma-divider-div" v-if="item['fields']['Category(ies)']"> <h6>Category(ies)</h6> <span class="ma-conpos-button-span" v-for="category in item['fields']['Category(ies)']"> <button v-on:click='filterCategory' class='btn btn-info btn-sm'>{{category}}</button> </span> </div><hr/> </div></div></body> <script type="text/javascript" src="https://unpkg.com/vue"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script type="text/javascript">var app=new Vue({el: '#app', props:{filterConceptArray:{type: Array, default: function (){return []}}, filterPositionArray:{type: Array, default: function (){return []}}, filterCategoryArray:{type: Array, default: function(){return []}}, numberResults:{type: Number}}, data:{items: [],}, mounted: function (){this.loadItems();}, computed:{filteredEvents(){var filteredByConcept=[]; var filteredByConceptAndPosition=[]; var filteredByConceptAndPositionAndCategory=[]; this.numberResults=0; let temp=this; this.items.forEach(function (item){if (!temp.filterConceptArray || temp.filterConceptArray.length==0){filteredByConcept.push(item);}else if (item['fields']['Concept(s)']){let addItem=true; for (i=0; i < temp.filterConceptArray.length; i++){if (item['fields']['Concept(s)'].indexOf(temp.filterConceptArray[i]) < 0){addItem=false;}}if (addItem){filteredByConcept.push(item);}}}); filteredByConcept.forEach(function (item){if (!temp.filterPositionArray || temp.filterPositionArray.length==0){filteredByConceptAndPosition.push(item);}else if (item['fields']['Position(s)']){let addItem=true; for (i=0; i < temp.filterPositionArray.length; i++){if (item['fields']['Position(s)'].indexOf(temp.filterPositionArray[i]) < 0){addItem=false;}}if (addItem){filteredByConceptAndPosition.push(item);}}}); filteredByConceptAndPosition.forEach(function (item){if (!temp.filterCategoryArray || temp.filterCategoryArray.length==0){filteredByConceptAndPositionAndCategory.push(item); temp.numberResults +=1;}else if (item['fields']['Category(ies)']){let addItem=true; for (i=0; i < temp.filterCategoryArray.length; i++){if (item['fields']['Category(ies)'].indexOf(temp.filterCategoryArray[i]) < 0){addItem=false;}}if (addItem){filteredByConceptAndPositionAndCategory.push(item); temp.numberResults +=1;}}}); filteredByConceptAndPositionAndCategory.sort(function(a, b){var textA=a['fields']['Name'].toUpperCase(); var textB=b['fields']['Name'].toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;}); return filteredByConceptAndPositionAndCategory;},}, methods:{loadItems: function (){var self=this; var app_id="appTRTzgSnWF5Qy2V"; var app_key="keyoG5jaNTItCjhO1"; this.items=[]; axios.get( "https://api.airtable.com/v0/" + app_id + "/Masterclass%20Videos?view=Grid%20view",{headers:{Authorization: "Bearer " + app_key}}).then(function (response){var filteredList=[]; for (i=0; i < response.data.records.length; i++){if (response.data.records[i]['fields']['Release URL'] && response.data.records[i]['fields']['Release URL'].length > 0){filteredList.push(response.data.records[i]);}}self.items=filteredList;}).catch(function (error){console.log(error)})}, filterConcept: function (event){if (this.filterConceptArray.indexOf(event.currentTarget.innerText)==-1){this.filterConceptArray.push(event.currentTarget.innerText);}}, filterPosition: function (event){if (this.filterPositionArray.indexOf(event.currentTarget.innerText)==-1){this.filterPositionArray.push(event.currentTarget.innerText);}}, filterCategory: function (event){if (this.filterCategoryArray.indexOf(event.currentTarget.innerText)==-1){this.filterCategoryArray.push(event.currentTarget.innerText);}}, clearFilters: function (){this.filterConceptArray.length=0; this.filterPositionArray.length=0; this.filterCategoryArray.length=0;}}}) </script><style>.ma-conpos-button-span{padding-right:2px; padding-left:2px;}.ma-video-link{text-decoration: none;}.ma-divider-div{padding-bottom:5px;}</style>