vue-laws

@extends('layouts.app')

@section('content')
    <div class="container-fluid" id="vue-laws">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">Leis</div>

                    <div class="panel-body scrollable">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>Número / Ano</th>
                                            <th>Título (nome_lei)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="law in laws" class="clickable" @click="__selectLaw(law)">
                                            <td>@{{ law.numero }} / @{{ law.ano }}</td>
                                            <td>@{{ law.nome_lei }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" v-if="currentLaw">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">Lei @{{ law.numero }} / @{{ law.ano }}</div>

                    <div class="panel-body scrollable">
                        <div class="row">
                            <div class="col-md-12">
                                TODO
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


// ------------------------------------ 


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

var appName = '';

/*
 * Passport
 */

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

/*
 * Components
 */

Vue.component('example', require('./components/Example.vue'));

/**
 * App
 */

if (document.getElementById(appName = 'vue-laws')) {
    const app = new Vue({
        el: '#'+appName,

        data: {
            laws: [],
            currentLaw: null,
            currentLaw2: 'nothing',
        },

        methods: {
            __loadLaws() {
                var vue = this;

                axios.get('/api/laws')
                    .then(function (response) {
                        vue.laws = response.data;
                    })
            },

            __selectLaw(law) {
                console.log(law); // shows the law in the console

                this.$set(this.currentlaw, law)

                console.log(this.currentlaw);
            }
        },

        mounted() {
            this.__loadLaws();
        }
    });
}