diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 0bead5604f0b014ee9ad2c36f43b7a04a902a971..6e860beb8aa31f3bc69b083bc882dd9fae82e4b8 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -1,39 +1,82 @@
<template>
- <div class="list">
- <ul v-for="value in myNodes" v-bind:key="value.node_id">
- <li
- class="dataeach"
- v-if="nodeid == value.node_id"
- :inner-html.prop="value.node_text | marked"
- ></li>
- </ul>
+ <div>
+ <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <div v-if="nodeid == value.node_id && deleted == false">
+ <form>
+ <!-- <div v-if="posvalue.read_mode == false"> -->
+ <div v-for="value in $options.myArray" v-bind:key="value.node_id">
+ <div v-if="value.deleted == false">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ v-model="value.node_text"
+ @input="editNode"
+ :id="value.node_id"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
</div>
</template>
<script>
import { mapState } from 'vuex'
-import marked from 'marked'
export default {
name: 'ListLayer',
+
+ data: function () {
+ return {}
+ },
+
props: {
nodeid: String,
nodetext: String,
+ deleted: Boolean,
},
computed: mapState({
myNodes: (state) => state.myNodes,
+ configPositions: (state) => state.configPositions,
+ // shortcutstate: (state) => state.shortcutstate,
}),
- filters: {
- // reverse was added to the view (List.vue) for reference (didnt need filter)
- marked: marked,
+ myArray: null,
+ created() {
+ this.$options.myArray = this.myNodes
+ },
+
+ methods: {
+ editNode(e) {
+ var nodeid = e.target.id
+ var nodetext = e.target.value
+ this.$store.dispatch('editNode', { nodeid, nodetext })
+ },
+
+ editTrue(e) {
+ this.$emit('editTrue', e)
+ // this.firstload = false
+ // // console.log(e)
+ },
},
}
</script>
<style lang="css" scoped>
-li {
- margin-bottom: -15px;
+h2 {
+ color: red;
+}
+
+textarea {
+ width: 95%;
+ height: 100px;
+ margin-left: 1em;
+ margin-bottom: 1em;
}
</style>
diff --git a/app/src/store/index.js b/app/src/store/index.js
index d8905bbd5df24a8974f76d8eede02feaaf373cc6..d3756fb9575a9ae939f594a80470769396758cc7 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -478,6 +478,7 @@ const store = new Vuex.Store({
},
EDIT_NODE(state, e) {
+ // console.log(e)
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.nodeid == state.myNodes[i].node_id) {
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index d90b3de32e4bb9200a7cc8f4355e1c25d0212f95..10d600c0dd5b771bc8a94e4467d8c4e5334a65db 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -1,43 +1,23 @@
<template>
<div id="listwrapper">
- <!-- <div v-for="(posvalue, index) in configPositions" v-bind:key="index"> -->
- <h1 class="mobile">Your nodes - list mode</h1>
- <!-- <OffLine
- v-for="value in myNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- @editTrue="(e) => editTrue(e)"
- /> -->
<div v-if="clientset">
+ <h1 class="mobile">Your nodes - list mode</h1>
+
+ <ListLayer
+ @editTrue="(e) => editTrue(e)"
+ v-for="value in myNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
<div class="btn-row">
<BaseButton class="new" buttonClass="action" @click="addNode()"
>Create Node</BaseButton
>
</div>
-
- <form>
- <!-- <div v-if="posvalue.read_mode == false"> -->
- <div
- v-for="value in myNodes.slice().reverse()"
- v-bind:key="value.node_id"
- >
- <div v-if="value.deleted == false">
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- v-model="value.node_text"
- @input="editNode"
- :id="nodeid"
- ref="nodetext"
- placeholder="Idea goes here!"
- ></textarea>
- </div>
- </div>
- </form>
</div>
- <!-- // onboarding for list view -->
+
<div v-else>
<form>
<div>
@@ -96,24 +76,21 @@
</div>
</form>
</div>
-
- <ModeToolbar />
+ <!-- <ModeToolbar /> -->
</div>
- <!-- </div> -->
</template>
<script>
-// import OffLine from '@/components/OffLine'
-// import OnBoard from '@/components/OnBoard.vue'
import Router from '@/router'
-import ModeToolbar from '@/experimental/ModeToolbar'
+//import ModeToolbar from '@/experimental/ModeToolbar'
+import ListLayer from '@/components/ListLayer'
import { mapState } from 'vuex'
import marked from 'marked'
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-import lodash from 'lodash'
export default {
name: 'List',
+
mixins: [shortcutsMixin],
data: function () {
return {
@@ -136,11 +113,15 @@ export default {
deleted: Boolean,
},
- computed: mapState({
- myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- shortcutstate: (state) => state.shortcutstate,
- }),
+ computed: {
+ ...mapState({
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ shortcutstate: (state) => state.shortcutstate,
+ toolmode: (state) => state.ui.mode,
+ connections: (state) => state.configConnections,
+ }),
+ },
created() {
if (typeof window !== 'undefined') {
@@ -165,20 +146,25 @@ export default {
}
},
- components: {
- // OnBoard,
- // OffLine,
- ModeToolbar,
- },
-
- filters: {
- marked: marked,
- },
methods: {
clientAdded() {
this.clientset = !this.clientset
},
+ addNode() {
+ this.$store.dispatch('addNode')
+ },
+
+ editTrue(e) {
+ this.$store.dispatch('shortcutState', e)
+ },
+
+ // editNode(e) {
+ // var nodeid = e.target.id
+ // var nodetext = e.target.value
+ // this.$store.dispatch('editNode', { nodeid, nodetext })
+ // },
+
createMicrocosm() {
this.$store.dispatch('createMicrocosm', this.localmicrocosm)
localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
@@ -194,44 +180,26 @@ export default {
this.clientset = !this.clientset
this.$emit('clientAdded')
},
-
- addNode() {
- this.$store.dispatch('addNode')
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
-
- editNode: lodash.debounce(function (e) {
- var nodeid = e.target.id
- var nodetext = e.target.value
- this.$store.dispatch('editNode', { nodeid, nodetext })
- }, 2000),
+ },
+ components: {
+ ListLayer,
+ // ModeToolbar,
+ },
+ filters: {
+ marked: marked,
},
}
</script>
<style lang="css" scoped>
-h2 {
- color: red;
-}
-.mobile {
- font-size: 1em;
-}
-
#listwrapper {
margin-left: 1em;
margin-bottom: 1em;
}
-.new {
- margin-bottom: 1em;
+.mobile {
+ font-size: 1em;
}
-
-textarea {
- width: 95%;
- height: 100px;
- margin-left: 1em;
+.new {
margin-bottom: 1em;
}
</style>