<template> <div v-for="(nodes, index) in myArray" :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)" rows="5" ></textarea> <p class="info">*markdown supported & autosaves</p> <VSwatches v-model="nodes.node_color" :swatches="swatches" :shapes="shapes" @update:modelValue="chooseColor(nodes.node_id, nodes.node_color)" show-border show-fallback fallback-input-type="color" > <template v-slot:trigger> <button @click.prevent>{{ nodes.node_color }}</button> </template> </VSwatches> <select v-model="nodes.node_shape" @input="setShape" :id="nodes.node_id" > <option value="square">Square</option> <option value="circle">Circle</option> <option value="triangle">Triangle</option> <option value="hexegon">Hexegon</option> </select> <button @click.prevent="toggleMode(nodes.node_id)">Read</button> <button @click.prevent="discardNode(nodes.node_id)">Discard</button> </template> <template v-else> <p class="readmode" :id="nodes.node_id">{{ nodes.node_text }}</p> <button @click.prevent="toggleMode(nodes.node_id)">Edit</button> </template> </form> </div> </template> <script> // @ is an alias to /src import { mapState } from 'vuex' import VSwatches from 'vue3-swatches' // import marked from 'marked' export default { name: 'MyNodes', components: { VSwatches }, props: { added: Boolean, }, data() { return { myArray: [], shapes: 'circles', // swatches: [{ color: '#F493A7', showBorder: true }], swatches: [ ['#EB5757', '#F2994A', '#F2C94C'], ['#219653', '#27AE60', '#6FCF97'], ['#2F80ED', '#2D9CDB', '#56CCF2'], ['#9B51E0', '#BB6BD9', '#E9B7FC'], ], } }, computed: { ...mapState({ myNodes: (state) => state.myNodes, }), }, watch: { added: function () { setTimeout(this.loadData, 500) }, }, mounted() { setTimeout(this.loadData, 500) if (localStorage.nogg_name && localStorage.nogg_microcosm) { var devicename = localStorage.nogg_name var microcosm = localStorage.nogg_microcosm this.$store.dispatch('setMicrocosm', { devicename, microcosm }) } else { console.log('no') // go home } }, methods: { loadData() { var nodesFiltered = this.myNodes.myNodes.filter( (nodes) => nodes.node_deleted == false ) this.$store.dispatch('getMynodes') this.myArray = nodesFiltered.reverse() }, editNode(e) { var nodeid = e.target.id var nodetext = e.target.value this.$store.dispatch('editNode', { nodeid, nodetext }) }, discardNode(e) { if (confirm('Confirm discard?')) { this.$store.dispatch('discardNode', { e }) setTimeout(this.loadData, 500) } else { // nothing happens } }, toggleMode(e) { this.$store.dispatch('toggleMode', { e }) setTimeout(this.loadData, 500) }, chooseColor(nodeid, color) { this.$store.dispatch('colorNode', { nodeid, color }) setTimeout(this.loadData, 500) }, setShape(e) { var nodeid = e.target.id var shape = e.target.value this.$store.dispatch('setShape', { nodeid, shape }) setTimeout(this.loadData, 500) }, }, } </script> <style scoped> .nodes { width: 95%; border: 2px dashed black; background-color: rgb(155, 194, 216); margin-top: 1em; margin-left: 0.5em; } textarea { font-size: 1em; resize: none; border: none; background-color: rgb(187, 225, 247); width: 100%; box-sizing: border-box; } </style>