ortense
9/23/2015 - 7:57 PM

Vue.js ES6 beerApp

Vue.js ES6 beerApp

/*
    Componente ES6 baseado na serie do Vedovelli sobre Vue.js
    http://vuejs.org/
    http://www.vedcasts.com.br/series/vuejs
    ultima aula assistida: http://www.vedcasts.com.br/series/vuejs/aula9
*/

"use strict";

Vue.filter('dataFormat', (value, formatString = 'DD/MM/YYYY') => {
    return moment(value).format(formatString);
});

new Vue({
    el: '#beerApp',
    
    data: {
        
        cervejarias : [],
        openDatails : [],
        filterTerm  : '',
        sortColumn  : 'name',
        sortInverse : false
    },
    
    methods: {
        
        doFilter(ev) {
            this.$set('filterTerm', ev.currentTarget.value);
        },
        
        doSort(ev, column) {
            this.sortColumn  = column;
            this.sortInverse = !this.sortInverse;
        },
        
        doOpenDatails(ev, id) {
            ev.preventDefault();
            let index = this.openDatails.indexOf(id);
            
            if (index > -1) this.openDatails.$remove(index);
            else this.openDatails.push(id);
        },
        
        openAllDetails(ev) {
            ev.preventDefault();
            let ids = [];
            
            for (let c of this.cervejaria) ids.push(c.id);
            
            if (this.openDatails.length > 0) this.$set('openDatails', []);
            else this.$set('openDatails', ids);
        }
    },
    
    ready() {
        this.$http.get('http://api/cervejarias', data => this.cervejarias = data);
    }
});