commit 051e6bbe10b5e80e41a693d9cb8c696b0d0540de
parent 75950063299980974641eda2390f62c5e4063862
Author: Vetle Haflan <vetle@haflan.dev>
Date: Sat, 11 Jan 2020 15:57:40 +0100
List component and drag-and-drop WIP
Diffstat:
3 files changed, 82 insertions(+), 16 deletions(-)
diff --git a/vuejs/src/App.vue b/vuejs/src/App.vue
@@ -1,39 +1,41 @@
<template>
- <div style="margin: 20px;">
- <!-- This should replace the card div eventually: <List></List> -->
- <div class="card"
- style="width: 400px; background-color: #BBF; padding: 10px;"
- ondragover="event.preventDefault()"
- ondrop="console.log(event)" >
- <b>This workin?</b>
+ <div style="margin: 10px;">
+ <List :header="'List number one'">
<Task v-for="(item, index) in exArray" @update="updateTask"
:key="item.id"
:index="index"
- :text="item.text">
+ :text="item.text"
+ @move="moveTask">
</Task>
- </div>
+ </List>
+ <List :header="'Another list'"></List>
</div>
</template>
<script>
+ // TODO: Move all Qump logic outside of the task components?
+ // Perform parsing and generation separately
+ // Don't forget that the text area should be editable, though!
+ // Unless a UI editor is implemented instead (not sure if I want)
import axios from 'axios/dist/axios.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import Task from './components/Task.vue';
+ import List from './components/List.vue';
export default {
name: "App",
- components: {Task},
+ components: {List, Task},
data: function () {
return {
- exArray: []
+ exArray: [],
+ taskMoving: 0
}
},
methods: {
getData() {
axios.get("/exdata.json").then(response => {
this.exArray = response.data;
- console.log(response.data)
});
},
updateTask(index, newText) {
@@ -41,8 +43,9 @@
newItem.text = newText
this.$set(this.exArray, index, newItem);
},
- moveTask(event) {
- console.log(event);
+ moveTask(taskIndex) {
+ console.log("Moving task " + taskIndex);
+ this.dragTask = taskIndex;
}
},
mounted() {
diff --git a/vuejs/src/components/List.vue b/vuejs/src/components/List.vue
@@ -0,0 +1,54 @@
+<template>
+ <div>
+ <div class="card list-card"
+ ondragover="event.preventDefault();"
+ v-on:drop="moveTask">
+ <div class="list-title">{{header}}</div>
+ <div class="card-text">
+ <slot></slot>
+ <button type="button" class="btn btn-primary">
+ +
+ </button>
+ </div>
+ </div>
+ </div>
+</template>
+
+
+
+<script>
+ import 'bootstrap/dist/css/bootstrap.min.css';
+ export default {
+ name: "List",
+ props: {
+ header: String
+ },
+ computed: {
+ style() {
+ return "background-color: " + this.color;
+ }
+ },
+ methods: {
+ moveTask(event) {
+ console.log("Dropped task on list " + this.header);
+ console.log(event);
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .list-title{
+ margin: 10px;
+ font-weight: bold;
+ }
+ .list-card {
+ padding: 5px;
+ width: 400px;
+ border-color: black;
+ background-color: #EEE;
+ }
+ .card-text {
+ width: 100%;
+ }
+</style>
diff --git a/vuejs/src/components/Task.vue b/vuejs/src/components/Task.vue
@@ -3,11 +3,17 @@
@dblclick="editToggle"
@keyup.ctrl.enter="editToggle"
@keyup.enter="enterAction"
- draggable="true">
+ draggable="true"
+ v-on:dragstart="$emit('move', index)">
<template v-if="editing">
- <textarea v-model="contents" v-bind:rows="textRows"></textarea>
+ <textarea ref="editor"
+ v-model="contents"
+ 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"
:is="component.name"
:contents="component.contents"
@@ -81,6 +87,9 @@
this.editing = !this.editing;
if (!this.editing) {
this.$emit("update", this.index, this.contents);
+ } else {
+ let refs = this.$refs;
+ console.log(refs.editor);//.focus();
}
},
enterAction(e) {
