App.vue

<template>
  <div id="app" class="container">
    <header>
      <h1>Todo List ({{ this.incompleteCount }})</h1>
      <label class="hide-completed">
        <input type="checkbox" readOnly v-model="hideCompleted" @click="toggleHideCompleted">
        Hide Completed Tasks
      </label>

      <account></account>

      <template v-if="currentUser">
        <form @submit="handleSubmit" class="new-task">
          <input type="text" v-model="taskInput" placeholder="type to add new tasks">
        </form>
      </template>
    </header>

    <task-list :tasks="filterTasks" :current-user="currentUser"></task-list>
  </div>
</template>

<script>
import 'meteor-client'
import TaskList from './components/Tasks'
import Account from './components/Account'
import { Tasks } from 'api/tasks'
import { Meteor } from 'meteor/meteor'
import { Tracker } from 'meteor/tracker'

export default {
  name: 'app',
  components: {
    TaskList,
    Account
  },
  data () {
    return {
      hideCompleted: false,
      taskInput: '',
      tasks: [],
      incompleteCount: 0,
      currentUser: null
    }
  },
  beforeCreate () {
    Meteor.subscribe('tasks')
  },
  mounted () {
    var _this = this
    Tracker.autorun(() => {
      _this.tasks = Tasks.find({}, { sort: { createdAt: -1 } }).fetch()
      _this.incompleteCount = Tasks.find({ checked: { $ne: true } }).count()
      _this.currentUser = Meteor.user()
    })
  },
  computed: {
    filterTasks () {
      var filteredTasks = this.tasks
      if (!this.tasks) return []

      if (this.hideCompleted) {
        filteredTasks = filteredTasks.filter(task => !task.checked)
      }
      return filteredTasks
    }
  },
  methods: {
    handleSubmit (event) {
      event.preventDefault()

      // Find the text field via the React ref
      const text = this.taskInput.trim()

      Meteor.call('tasks.insert', text)

      // Clear form
      this.taskInput = ''
    },
    toggleHideCompleted () {
      this.hideCompleted = !this.hideCompleted
    }
  }
}
</script>

<style>
body {
  font-family: sans-serif;
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-attachment: fixed;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 0;
  margin: 0;

  font-size: 14px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  background: white;
}

header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}

#login-buttons {
  display: block;
}

h1 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}

form {
  margin-top: 10px;
  margin-bottom: -10px;
  position: relative;
}

.new-task input {
  box-sizing: border-box;
  padding: 10px 0;
  background: transparent;
  border: none;
  width: 100%;
  padding-right: 80px;
  font-size: 1em;
}

.new-task input:focus{
  outline: 0;
}

ul {
  margin: 0;
  padding: 0;
  background: white;
}

.delete {
  float: right;
  font-weight: bold;
  background: none;
  font-size: 1em;
  border: none;
  position: relative;
}

li {
  position: relative;
  list-style: none;
  padding: 15px;
  border-bottom: #eee solid 1px;
}

li .text {
  margin-left: 10px;
}

li.checked {
  color: #888;
}

li.checked .text {
  text-decoration: line-through;
}

li.private {
  background: #eee;
  border-color: #ddd;
}

header .hide-completed {
  float: right;
}

.toggle-private {
  margin-left: 5px;
}

@media (max-width: 600px) {
  li {
    padding: 12px 15px;
  }

  .search {
    width: 150px;
    clear: both;
  }

  .new-task input {
    padding-bottom: 5px;
  }
}
</style>