Skip to content
Snippets Groups Projects
Select Git revision
11 results Searching

conf.py

Blame
  • MyNodes.vue 2.29 KiB
    <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'
    
    // import marked from 'marked'
    
    export default {
      name: 'MyNodes',
    
      props: {
        added: Boolean,
      },
    
      data() {
        return {
          myArray: [],
        }
      },
    
      computed: {
        ...mapState({
          // TODO: Can you filter here instead ?
          myNodes: (state) => state.myNodes,
        }),
    
        nodesFiltered: function () {
          return this.myNodes.myNodes.filter((nodes) => {
            return nodes.node_deleted == false
          })
        },
      },
    
      mounted() {
        setTimeout(this.loadData, 500)
        //console.log(this.microcosmName.microcosmName)
        // 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
        // })
      },
    
      watch: {
        added: {
          deep: true,
          handler() {
            setTimeout(this.loadData, 500)
          },
        },
      },
    
      methods: {
        loadData() {
          // console.log('loading data')
          this.myArray = this.nodesFiltered
          // console.log(this.myArray)
          // this.$forceUpdate()
        },
    
        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;
    }
    
    textarea {
      width: 95%;
    }
    </style>