vue example

<% include ../header %>

    <div id="app">
        <div class="level">
            <div class="level-left">
                <label class="level-item">
                    <input 
                        type="checkbox"
                        v-model="showCompleted"
                    />
                    Show completed items
                </label>
            </div>
            <div class="level-right">
                <a href="#" onClick="window.open('/checklists/<%= checklistID %>/print')" class="button level-item">Print Checklist</a>
            </div>
        </div>

        <hr />

        <div class="panel">
            <div class="panel-heading">{{ checklist && checklist.name }}</div>

            <label v-for="item in sortedItems" class="panel-block">
                <input
                    type="checkbox"
                    :checked="item.isComplete"
                    v-on:change="completedItem(item)"
                />
                {{ item.name }}
            </label>
            
            <div class="panel-block control has-addons">
                <input 
                    v-model="newItem"
                    type="text"
                    class="input is-expanded"
                    @keyup.enter="addItem"
                />
                <button v-on:click="addItem" class="button is-info">Add item</button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var APP = {
            checklistID: <%- JSON.stringify( checklistID ) %>
        };

        new Vue({
            el: '#app',
            data: {
                checklist: null,
                newItem: '',
                items: [],
                showCompleted: false
            },
            mounted: function() {
                this.$http.get('/api/checklists/' + APP.checklistID).then(function(response) {
                    this.checklist = response.body;
                });
                this.$http.get('/api/checklistItems?filter[where][checklistId]=' + APP.checklistID).then(function(response) {
                    this.items = response.body;
                });
            },
            computed: {
                sortedItems: function() {
                    return this.items.filter( function(item) {
                        return (this.showCompleted && item.isComplete) || !item.isComplete;
                    }.bind(this) ).sort(function(a, b) {
                        return a.createDate > b.createDate ? 1 : a.createDate < b.createDate ? -1 : 0;
                    });
                }
            },
            methods: {
                addItem: function() {
                    var value = this.newItem && this.newItem.trim()
                    if (!value) {
                        return
                    }

                    var item = {
                        id: uuid.v4(),
                        checklistId: APP.checklistID,
                        isComplete: false,
                        name: value,
                        createDate: new Date()
                    };

                    this.$http.post('/api/checklistItems', item).then(function(response) {
                        this.items.push( item );
                        this.newItem = '';
                    });
                },
                completedItem: function(item) {
                    item.isComplete = !item.isComplete;

                    this.$http.patch('/api/checklistItems/' + item.id, {
                        isComplete: item.isComplete
                    });
                }
            }
        })
    </script>

<% include ../footer %>