From 78a403c450425ea86fad7df5737a4a53ed4c6714 Mon Sep 17 00:00:00 2001
From: donal <donalspring@gmail.com>
Date: Mon, 16 Apr 2018 12:57:45 +0200
Subject: [PATCH] Template for TDD
---
src/components/TodoItem.vue | 68 ++++++++++++++++++++++-----------
1 files changed, 45 insertions(+), 23 deletions(-)
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 6c2081e..6287bee 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -1,30 +1,37 @@
<template>
<div>
- <md-list-item
- @click="markDone"
- >
- <md-checkbox :value="isActive" />
- <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.msg }}</span>
- </md-list-item>
+ <div class="itemCardAndFlag">
+ <md-list-item
+ @click="markCompleted()"
+ >
+ <checkbox v-model="todoItem.completed" class="checkbox-completed"/>
+
+ <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
+ </md-list-item>
+ <!-- TODO - SVG for use in Lab3 -->
+ <!-- <svg :class="{'red-flag': todoItem.important}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ><path d="M0 0h24v24H0z" fill="none"/><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg> -->
+ </div>
</div>
</template>
<script>
+import Vue from "vue";
+import { Checkbox, Radio } from "vue-checkbox-radio";
+Vue.component("checkbox", Checkbox);
+Vue.component("radio", Radio);
+
export default {
name: "TodoItem",
props: {
// type any object ;)
todoItem: {}
},
- data () {
- return {
- isActive: false
- }
- },
methods: {
- markDone () {
- // set to greyed out / true false
- this.isActive = !this.isActive;
- console.info('INFO - ', this.todoItem , this.isActive)
+ markCompleted() {
+ this.$store.dispatch("updateTodo", {id :this.todoItem._id});
+ console.info("INFO - Mark todo as completed ", this.todoItem.completed);
+ },
+ markImportant() {
+ // TODO - FILL THIS OUT IN THE LAB EXERCISE
}
}
};
@@ -32,17 +39,32 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
-.md-list {
- width: 320px;
- max-width: 100%;
- height: 400px;
- display: inline-block;
- overflow: auto;
- border: 1px solid rgba(#000, .12);
- vertical-align: top;
+.md-list-item {
+ width: 320px;
+ max-width: 100%;
+ height: 50px;
+ display: inline-block;
+ overflow: auto;
+}
+
+.md-list-item-text {
+ padding-left: 0.5em;
+}
+
+.itemCardandFlag {
+ display: inline-block;
}
.strike-through {
text-decoration: line-through;
+ font-style: italic;
+}
+
+.important-flag {
+ height: 50px;
+ margin: 0px;
+}
+.red-flag {
+ fill: #cc0000;
}
</style>
--
Gitblit v1.9.3