Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f7f49a5

Browse files
first commit
1 parent c6324c4 commit f7f49a5

File tree

16 files changed

+352
-171
lines changed

16 files changed

+352
-171
lines changed

‎README.md

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"uuid": "^8.0.0",
1515
"vue": "^2.6.11",
1616
"vue-router": "^3.1.6",
17-
"vue2-editor": "^2.10.2"
17+
"vue2-editor": "^2.10.2",
18+
"vuex": "^3.3.0"
1819
},
1920
"devDependencies": {
2021
"@vue/cli-plugin-babel": "~4.3.0",

‎public/index.html

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
4+
<meta charset="utf-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
8+
<title>mi bloc</title>
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
<strong
13+
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14+
properly without JavaScript enabled. Please enable it to
15+
continue.</strong
16+
>
1317
</noscript>
1418
<div id="app"></div>
1519
<!-- built files will be auto injected -->
1620
</body>
21+
<script
22+
src="https://kit.fontawesome.com/ec697e5ab5.js"
23+
crossorigin="anonymous"
24+
></script>
1725
</html>

‎src/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
import BaseHeader from "./components/BaseHeader"
2727
2828
export default {
29+
2930
data() {
3031
return {
3132
welcome_msg: 'mi Bloc'

‎src/components/AddNote.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { mapActions } from 'vuex';
2+
<template>
3+
<div>
4+
<b-form v-on:submit.prevent="submitNote">
5+
<b-form-input type="text" v-model="title" placeholder="Ingresar dato..." />
6+
</b-form>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import { mapActions, mapGetters } from "vuex";
12+
import { v4 as uuidv4 } from "uuid";
13+
14+
export default {
15+
data() {
16+
return {
17+
title: ""
18+
};
19+
},
20+
name: "AddNote",
21+
computed: mapGetters(["onEditMode"]),
22+
methods: {
23+
...mapActions(["addNote"]),
24+
submitNote() {
25+
if (!this.onEditMode) {
26+
const newNote = {
27+
id: uuidv4(),
28+
title: this.title,
29+
completed: false
30+
};
31+
32+
// add new element to state
33+
this.addNote(newNote);
34+
35+
this.title = "";
36+
} else {
37+
this.$emit("update-note", this.title);
38+
}
39+
}
40+
},
41+
created() {}
42+
};
43+
</script>
44+
45+
<style scoped>
46+
</style>

‎src/components/BaseListItem.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
21
import DeleteButton from "@/components/DeleteButton.vue";
32
import EditButton from "@/components/EditButton.vue";
4-
import TextInput from "@/components/TextInput.vue"
53

64
export default {
7-
DeleteButton,
8-
EditButton,
9-
TextInput
10-
}
5+
DeleteButton,
6+
EditButton,
7+
};

‎src/components/DeleteButton.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<template>
2-
<b-button class="ml-3" @click="$emit('del-todo')" variant="danger">Delete</b-button>
2+
<b-button class="ml-3" @click="$emit('del-todo')" variant="danger">
3+
Delete
4+
<i class="far fa-trash-alt"></i>
5+
</b-button>
36
</template>
47

58
<script>
69
export default {
710
name: "DeleteButton",
811
9-
data() {
10-
return {
11-
id: String
12-
}
13-
}
12+
data() {
13+
return {
14+
id: String
15+
};
16+
}
1417
};
1518
</script>
1619

‎src/components/EditButton.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<template>
2-
<b-button class="ml-3" @click="$emit('edit-todo')" variant="warning">Edit</b-button>
2+
<b-button class="ml-3" @click="$emit('edit-mode')" variant="warning">
3+
Edit
4+
<i class="far fa-edit"></i>
5+
</b-button>
36
</template>
47

58
<script>
69
export default {
710
name: "EditButton",
811
9-
data() {
10-
return {
11-
id: String
12-
}
13-
}
12+
data() {
13+
return {
14+
id: String
15+
};
16+
}
1417
};
1518
</script>
1619

‎src/components/FilterNotes.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { mapActions } from 'vuex';
2+
<template>
3+
<div class="row">
4+
<p class="mt-1 col-2">Filter Notes:</p>
5+
<b-form-select
6+
v-model="selected"
7+
:options="options"
8+
class="mb-3 col-4"
9+
@change="filterNotes($event)"
10+
>
11+
<!-- This slot appears above the options from 'options' prop -->
12+
<template v-slot:first>
13+
<b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
14+
</template>
15+
16+
<!-- These options will appear after the ones from 'options' prop -->
17+
<b-form-select-option value="0">Nothing here for you</b-form-select-option>
18+
</b-form-select>
19+
</div>
20+
</template>
21+
22+
<script>
23+
import { mapActions } from "vuex";
24+
25+
export default {
26+
name: "FilterNotes",
27+
data() {
28+
return {
29+
selected: null,
30+
options: [
31+
{ value: "200", text: "200" },
32+
{ value: "100", text: "100" },
33+
{ value: "50", text: "50" },
34+
{ value: "20", text: "20" },
35+
{ value: "10", text: "10" },
36+
{ value: "5", text: "5" }
37+
]
38+
};
39+
},
40+
methods: {
41+
...mapActions(["filterNotes"])
42+
}
43+
};
44+
</script>
45+
46+
<style scoped>
47+
</style>

‎src/components/List.vue

Lines changed: 87 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,119 @@
11
<template>
22
<div class="row">
3-
<div class="col-12 mx-auto">
4-
<TextInput v-on:add-note="addNote"/>
5-
<b-list-group v-bind:key="item.id" v-for="item in items">
6-
<ListItem v-bind:data="item" v-on:del-todo="deleteItem"></ListItem>
7-
</b-list-group>
3+
<div class="col-12">
4+
<FilterNotes />
5+
<div class="row mb-2">
6+
<AddNote v-if="!onEditMode" class="col-12" />
7+
</div>
8+
<div class="row mx-auto">
9+
<div class="legend col-12 mb-1">
10+
<span>Double Click to mark as complete</span>
11+
<span>
12+
<span class="legend-box incomplete-note"></span> = Incomplete
13+
</span>
14+
<span>
15+
<span class="legend-box complete-note"></span> = Complete
16+
</span>
17+
</div>
18+
19+
<b-list-group
20+
v-bind:key="item.id"
21+
v-for="item in allNotes"
22+
class="col-6"
23+
@dblclick="onDblClick(item)"
24+
>
25+
<ListItem
26+
v-bind:data="item"
27+
v-on:del-todo="deleteItem"
28+
v-bind:class="{'complete-note':item.completed, 'incomplete-note':!item.completed}"
29+
class="note"
30+
/>
31+
</b-list-group>
32+
</div>
833
</div>
934
</div>
1035
</template>
1136

1237
<script>
13-
import axios from "axios";
38+
// import axios from "axios";
39+
import { mapGetters, mapActions } from "vuex";
1440
15-
import TextInput from '@/components/TextInput.vue';
41+
import AddNote from "@/components/AddNote.vue";
42+
import FilterNotes from "@/components/FilterNotes.vue";
1643
import ListItem from "@/components/ListItem.vue";
1744
1845
export default {
1946
name: "List",
47+
computed: mapGetters(["allNotes", "onEditMode"]),
2048
data() {
2149
return {
2250
items: []
2351
};
2452
},
2553
components: {
26-
TextInput,
54+
FilterNotes,
55+
AddNote,
2756
ListItem
2857
},
29-
created() {
30-
axios
31-
.get("https://jsonplaceholder.typicode.com/todos?_limit=5")
32-
.then(res => (this.items = res.data))
33-
.catch(err => console.log(err));
34-
},
3558
methods: {
59+
...mapActions(["fetchNotes", "deleteNote", "updateNote"]),
3660
deleteItem(id) {
37-
this.items=this.items.filter(todo=>todo.id!== id)
61+
this.deleteNote(id);
3862
},
3963
addNote(newNote) {
4064
this.items = [newNote, ...this.items];
65+
},
66+
onDblClick(note) {
67+
const newNote = {
68+
id: note.id,
69+
completed: !note.completed,
70+
title: note.title
71+
};
72+
this.updateNote(newNote);
4173
}
74+
},
75+
created() {
76+
this.fetchNotes();
4277
}
43-
4478
};
4579
</script>
4680

4781
<style scoped>
82+
@media (max-width: 500px) {
83+
.todos {
84+
grid-template-columns: 1fr;
85+
}
86+
}
87+
88+
.notes {
89+
display: grid;
90+
grid-template-columns: repeat(3, 1fr);
91+
grid-gap: 1rem;
92+
}
93+
.note:hover,
94+
.note:focus {
95+
opacity: 1;
96+
box-shadow: none;
97+
}
98+
.legend {
99+
display: flex;
100+
justify-content: space-around;
101+
margin-bottom: 1rem;
102+
}
103+
104+
.legend-box {
105+
display: inline-block;
106+
width: 10px;
107+
height: 10px;
108+
}
109+
110+
.complete-note {
111+
background: greenyellow;
112+
color: black;
113+
}
114+
115+
.incomplete-note {
116+
background: rgb(66, 61, 61);
117+
color: white;
118+
}
48119
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /