commit 4834bc81e8d111061538df531f865f737108e86b
parent 051e6bbe10b5e80e41a693d9cb8c696b0d0540de
Author: vh <vetle.haflan@gmail.com>
Date: Sun, 12 Jan 2020 18:11:55 +0100
Some modifications in VueJS exp
Diffstat:
5 files changed, 63 insertions(+), 40 deletions(-)
diff --git a/vuejs/exdata.json b/vuejs/exdata.json
@@ -1,9 +0,0 @@
-[{
- "id": "42",
- "text": "/todo This is my great todo\n-[ ] oppg1.\n-[x] oppg2."
-},
-{
- "id": "45",
- "text": "/todo The *other* task"
-
-}]
diff --git a/vuejs/src/App.vue b/vuejs/src/App.vue
@@ -1,14 +1,16 @@
<template>
- <div style="margin: 10px;">
- <List :header="'List number one'">
- <Task v-for="(item, index) in exArray" @update="updateTask"
- :key="item.id"
+ <div class="row" style="margin: 10px;">
+ <List :header="'List number one'" :key="'1'">
+ <!-- TODO: Consider moving into the actual List component -->
+ <Task v-for="(task, index) in tasks" @update="updateTask"
:index="index"
- :text="item.text"
+ :key="task.id"
+ :text="task.text"
+ @select="selectTask"
@move="moveTask">
</Task>
</List>
- <List :header="'Another list'"></List>
+ <List :header="'Another list' ":key="'2'"></List>
</div>
</template>
@@ -23,29 +25,37 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import Task from './components/Task.vue';
import List from './components/List.vue';
+ import qumpToTask from './qumptasks.js';
export default {
name: "App",
components: {List, Task},
data: function () {
return {
- exArray: [],
- taskMoving: 0
+ qumps: []
+ }
+ },
+ computed: {
+ tasks() {
+ // https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
+ return this.qumps.map(qumpToTask);
}
},
methods: {
getData() {
- axios.get("/exdata.json").then(response => {
- this.exArray = response.data;
+ axios.get("/qumps.json").then(response => {
+ this.qumps = response.data;
});
},
updateTask(index, newText) {
- let newItem = this.exArray[index];
- newItem.text = newText
- this.$set(this.exArray, index, newItem);
+ let newItem = this.qumps[index];
+ newItem.text = newText;
+ this.$set(this.qumps, index, newItem);
+ console.log(newText);
+ },
+ selectTask() {
},
- moveTask(taskIndex) {
- console.log("Moving task " + taskIndex);
- this.dragTask = taskIndex;
+ moveTask() {
+ console.log("Moving task " + this.selected);
}
},
mounted() {
diff --git a/vuejs/src/apps/app.js b/vuejs/src/apps/app.js
@@ -1,7 +1,10 @@
import Vue from 'vue';
import App from "../App.vue";
+const taskAppData = {};
+
export const app = new Vue({
el: "#app",
render: h => h(App),
+ data: taskAppData,
});
diff --git a/vuejs/src/components/List.vue b/vuejs/src/components/List.vue
@@ -1,14 +1,19 @@
<template>
- <div>
+ <div class="col col-12 col-md-6 col-lg-4 col-xl-3">
<div class="card list-card"
ondragover="event.preventDefault();"
v-on:drop="moveTask">
- <div class="list-title">{{header}}</div>
- <div class="card-text">
+ <div class="list-title">
+ {{header}}
+ <button @click="collapsed = !collapsed" type="button" class="float-right btn btn-info btn-sm">
+ {{ collapsed ? 'v' : '^' }}
+ </button>
+ </div>
+ <div v-if="!collapsed" class="card-text">
<slot></slot>
- <button type="button" class="btn btn-primary">
- +
- </button>
+ <button type="button" class="btn btn-primary">+</button>
+ <button type="button" class="btn btn-primary">^</button>
+ <button type="button" class="btn btn-primary">></button>
</div>
</div>
</div>
@@ -21,7 +26,12 @@
export default {
name: "List",
props: {
- header: String
+ header: String,
+ },
+ data() {
+ return {
+ collapsed: true
+ }
},
computed: {
style() {
@@ -32,7 +42,7 @@
moveTask(event) {
console.log("Dropped task on list " + this.header);
console.log(event);
- }
+ },
}
}
</script>
@@ -44,7 +54,6 @@
}
.list-card {
padding: 5px;
- width: 400px;
border-color: black;
background-color: #EEE;
}
diff --git a/vuejs/src/components/Task.vue b/vuejs/src/components/Task.vue
@@ -1,4 +1,6 @@
<template>
+ <!-- TODO: Instead of dbclick - make first click select task and second click activate edit -->
+
<div class="card"
@dblclick="editToggle"
@keyup.ctrl.enter="editToggle"
@@ -11,14 +13,15 @@
v-bind:rows="textRows"></textarea>
</template>
<template v-else>
- <div style="font-size:12px;position:absolute;padding:0;left:350">
- #{{index}}
- </div>
<component v-for="component in renderedComponents"
+ :key="component.id"
:is="component.name"
:contents="component.contents"
@update="updateTask"></component>
</template>
+ <!-- NOTE: This dot menu might not be necessary.
+ Simply clicking the task should be sufficient -->
+ <span class="dot-menu">...</span>
</div>
</template>
@@ -47,14 +50,12 @@
for (var i in lines) {
// If line starts starts with '- ':
let comp = {
+ id: i,
name: "RawText"
};
let line = lines[i];
// TODO: Make more generic, like an array of objects w/
// component name, parser/modifier and regex to match on
- if (/^ *\/todo +/.test(lines[i])) {
- line = line.replace(/\/todo /, '');
- }
if (/^ *- *\[[ x]*\]/.test(lines[i])) {
comp.name = "Checkbox";
} else if (/^ *- /.test(lines[i])) {
@@ -121,6 +122,15 @@
margin-top: 2px;
margin-bottom: 2px;
}
+ span.dot-menu {
+ margin-left: auto;
+ font-size:12px;
+ padding:0;
+ position: absolute;
+ right: 5px;
+ margin:0;
+ cursor: pointer;
+ }
textarea {
width: 100%;
font-family: monospace;
