MyNodes.vue 2.29 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div v-for="(nodes, index) in myArray" v-bind:key="index">
    <form class="nodes">
      <template v-if="nodes.node_readmode == false">
        <textarea
          v-model="nodes.node_text"
          @input="editNode"
          :id="nodes.node_id"
          ref="textentry"
          placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
        ></textarea>
        <p class="info">*markdown supported &amp; autosaves</p>
      </template>
      <template v-else>
        <p
          class="readmode"
          :id="nodes.node_id"
          :inner-html.prop="nodes.node_text"
        ></p>
      </template>
    </form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
28

Adam Procter's avatar
Adam Procter committed
29
// import marked from 'marked'
30
31

export default {
32
  name: 'MyNodes',
33
34
35
36
37
38
39
40
41
42
43
44
45

  props: {
    added: Boolean,
  },

  data() {
    return {
      myArray: [],
    }
  },

  computed: {
    ...mapState({
Adam Procter's avatar
Adam Procter committed
46
      // TODO: Can you filter here instead ?
47
      myNodes: (state) => state.myNodes,
48
49
50
51
52
53
54
55
56
57
58
    }),

    nodesFiltered: function () {
      return this.myNodes.myNodes.filter((nodes) => {
        return nodes.node_deleted == false
      })
    },
  },

  mounted() {
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
59
    //console.log(this.microcosmName.microcosmName)
Adam Procter's avatar
Adam Procter committed
60
61
62
63
64
65
66
67
68
69
    // NOT SURE THIS IS DOING ANYTHING ???
    // const unwatch = this.$watch('nodesFiltered', (value) => {
    //   this.$options.myArray = this.nodesFiltered
    //   this.$forceUpdate()
    //   // ignore falsy values
    //   if (!value) return
    //   // stop watching when nodesFiltered[] is not empty
    //   if (value && value.length) unwatch()
    //   // process value here
    // })
70
71
72
73
74
75
  },

  watch: {
    added: {
      deep: true,
      handler() {
76
        setTimeout(this.loadData, 500)
77
78
79
80
81
82
      },
    },
  },

  methods: {
    loadData() {
Adam Procter's avatar
Adam Procter committed
83
      // console.log('loading data')
84
      this.myArray = this.nodesFiltered
Adam Procter's avatar
Adam Procter committed
85
86
      // console.log(this.myArray)
      // this.$forceUpdate()
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
    },

    editNode(e) {
      var nodeid = e.target.id
      var nodetext = e.target.value
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },
  },
}
</script>

<style scoped>
.nodes {
  width: 95%;
  border: 2px dashed black;
  background-color: rgb(155, 194, 216);
  margin-top: 1em;
  margin-left: 0.5em;
}
ap2x07's avatar
ap2x07 committed
106
107
108
109

textarea {
  width: 95%;
}
110
</style>