Commit e4de5675 authored by Adam Procter's avatar Adam Procter
Browse files

read mode toggle working and discarding working

parent 21610583
/// this is from Vue 2 // check and rebuild
<template>
<div>
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<form
class="nodes"
:style="{
backgroundColor: nodes.color,
}"
>
<template v-if="nodes.read_mode == false">
<textarea
@focus="editTrue(true)"
@blur="editTrue(false)"
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
v-focus
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 | marked"
></p>
</template>
<div class="btn-row">
<SvgButton
buttonClass="nodes"
@click.prevent="deleteFlag(nodes.node_id), updateNodes()"
/>
<SvgButton2
buttonClass="nodes"
@click.prevent="
readFlag(nodes.node_id, nodes.read_mode), updateNodes()
"
/>
<v-swatches
v-model="color"
@input="chooseColor(color, nodes.node_id)"
:swatches="swatches"
:shapes="shapes"
show-border
show-fallback
fallback-input-type="color"
>
<SvgButton3 buttonClass="nodes" @click.prevent slot="trigger" />
</v-swatches>
</div>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<template v-if="emojis.node_id == nodes.node_id">{{
emojis.emoji_text
}}</template>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import marked from 'marked'
import SvgButton from '@/components/SvgButton'
import SvgButton2 from '@/components/SvgButton2'
import SvgButton3 from '@/components/SvgButton3'
import VSwatches from 'vue-swatches'
import 'vue-swatches/dist/vue-swatches.css'
var readmode
export default {
name: 'ListLayer',
props: {
added: Boolean,
},
data: function () {
return {
color: '#9bc2d8',
shapes: 'circles',
// swatches: [{ color: '#F493A7', showBorder: true }],
swatches: [
['#EB5757', '#F2994A', '#F2C94C'],
['#219653', '#27AE60', '#6FCF97'],
['#2F80ED', '#2D9CDB', '#56CCF2'],
['#9B51E0', '#BB6BD9', '#E9B7FC'],
],
localreadmode: false,
myArray: null,
update: false,
}
},
filters: {
marked: marked,
},
computed: {
...mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configEmoji: (state) => state.configEmoji,
// toolmode: (state) => state.ui.mode,
}),
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
return nodes.deleted == false
})
},
},
mounted() {
setTimeout(this.loadData, 500)
const unwatch = this.$watch('nodes_filtered', (value) => {
this.$options.myArray = this.nodes_filtered
this.$forceUpdate()
// this.focusInput()
// ignore falsy values
if (!value) return
// stop watching when nodes_filtered[] is not empty
if (value && value.length) unwatch()
// process value here
})
},
watch: {
added: {
deep: true,
handler() {
setTimeout(this.loadData, 200)
},
},
update: {
deep: true,
handler() {
setTimeout(this.loadData, 200)
},
},
},
methods: {
chooseColor(color, nodeid) {
this.$store.dispatch('colorNode', { nodeid, color })
this.$options.myArray = this.nodes_filtered
},
updateNodes() {
this.update = !this.update
},
loadData() {
this.$options.myArray = this.nodes_filtered
this.$forceUpdate()
},
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
editTrue(e) {
this.$emit('edit-true', e)
},
deleteFlag(e) {
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
} else {
// nothing happens
}
},
readFlag(e, f) {
readmode = f
readmode = !readmode
this.$store.dispatch('readFlag', { e, readmode })
if (readmode == true) {
this.mode = 'Read'
} else {
this.mode = 'Edit'
}
},
},
components: {
SvgButton,
SvgButton2,
SvgButton3,
VSwatches,
},
}
</script>
<style lang="css" scoped>
.nodes {
width: 95%;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
.readmode {
margin-top: 1em;
margin-left: 1em;
}
textarea {
width: 100%;
height: 175px;
resize: none;
box-sizing: border-box;
font-size: 18px;
font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
outline: none;
background-color: rgb(187, 227, 255);
scrollbar-color: yellow rgb(187, 227, 255);
}
.btn-row {
position: relative;
margin-bottom: 5px;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 15px;
border-radius: 4px;
}
.allemoji {
font-size: 2em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
/* float: left; */
}
.eachemoji p {
margin: 0em;
}
@media only screen and (max-width: 600px) {
.readmode >>> a {
font-size: 2em;
word-break: break-all;
padding-right: 0.5em;
}
}
</style>
<template> <template>
<div v-for="(nodes, index) in myArray" :key="index"> <div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes"> <form class="nodes">
<!-- <template v-if="nodes.node_readmode == false"> --> <template v-if="nodes.read_mode == false">
<textarea <textarea
v-model="nodes.node_text" v-model="nodes.node_text"
@input="editNode" @input="editNode"
...@@ -12,16 +12,14 @@ ...@@ -12,16 +12,14 @@
></textarea> ></textarea>
<p class="info">*markdown supported &amp; autosaves</p> <p class="info">*markdown supported &amp; autosaves</p>
<button>Colour</button> <button>Colour</button>
<button>Read</button> <button>Shape</button>
<button>Discard</button> <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
<!-- </template> <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
</template>
<template v-else> <template v-else>
<p <p class="readmode" :id="nodes.node_id">{{ nodes.node_text }}</p>
class="readmode" <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
:id="nodes.node_id" </template>
:inner-html.prop="nodes.node_text"
></p>
</template> -->
</form> </form>
</div> </div>
</template> </template>
...@@ -54,14 +52,11 @@ export default { ...@@ -54,14 +52,11 @@ export default {
watch: { watch: {
added: function () { added: function () {
setTimeout(this.loadData, 500) setTimeout(this.loadData, 500)
}, },
}, },
mounted() { mounted() {
//console.log('mounted')
setTimeout(this.loadData, 500) setTimeout(this.loadData, 500)
if (localStorage.nogg_name && localStorage.nogg_microcosm) { if (localStorage.nogg_name && localStorage.nogg_microcosm) {
var devicename = localStorage.nogg_name var devicename = localStorage.nogg_name
var microcosm = localStorage.nogg_microcosm var microcosm = localStorage.nogg_microcosm
...@@ -73,21 +68,12 @@ export default { ...@@ -73,21 +68,12 @@ export default {
}, },
methods: { methods: {
emptyData() {
if (this.myNodes.myNodes == 0) {
/// that
} else {
// this
}
},
loadData() { loadData() {
var nodesFiltered = this.myNodes.myNodes.filter( var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false (nodes) => nodes.node_deleted == false
) )
this.$store.dispatch('getMynodes') this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse() this.myArray = nodesFiltered.reverse()
// console.log(this.myArray.length)
}, },
editNode(e) { editNode(e) {
...@@ -95,6 +81,20 @@ export default { ...@@ -95,6 +81,20 @@ export default {
var nodetext = e.target.value var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext }) 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)
},
}, },
} }
</script> </script>
......
...@@ -125,7 +125,6 @@ export const mutations = { ...@@ -125,7 +125,6 @@ export const mutations = {
{ {
_id: deviceName, _id: deviceName,
_rev: doc._rev, _rev: doc._rev,
_attachments: doc._attachments,
nodes: state.myNodes, nodes: state.myNodes,
}, },
]) ])
...@@ -141,6 +140,99 @@ export const mutations = { ...@@ -141,6 +140,99 @@ export const mutations = {
} }
}) })
}, },
DISCARD_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.e == state.myNodes[i].node_id) {
state.myNodes[i].node_deleted = true
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
nodes: state.myNodes,
},
])
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
})
})
.catch(function (err) {
if (err.status == 404) {
// pouchdb.put({ })
}
})
},
RESTORE_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.e == state.myNodes[i].node_id) {
state.myNodes[i].node_deleted = false
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
_attachments: doc._attachments,
nodes: state.myNodes,
},
])
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
})
})
.catch(function () {})
},
TOGGLE_MODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (
e.e == state.myNodes[i].node_id &&
state.myNodes[i].read_mode == false
) {
state.myNodes[i].read_mode = true
} else if (
e.e == state.myNodes[i].node_id &&
state.myNodes[i].read_mode == true
) {
state.myNodes[i].read_mode = false
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
nodes: state.myNodes,
},
])
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
})
})
.catch(function () {})
},
} }
export const actions = { export const actions = {
...@@ -156,6 +248,18 @@ export const actions = { ...@@ -156,6 +248,18 @@ export const actions = {
commit('EDIT_NODE', { nodeid, nodetext }) commit('EDIT_NODE', { nodeid, nodetext })
}, },
discardNode: ({ commit }, e) => {
commit('DISCARD_NODE', e)
},
restoreNode: ({ commit }, e) => {
commit('RESTORE_NODE', e)
},
toggleMode: ({ commit }, e) => {
commit('TOGGLE_MODE', e)
},
getMicrocosm(vuexContext) { getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName deviceName = vuexContext.rootState.setup.deviceName
// microcosmName = vuexContext.rootState.setup.microcosmName // microcosmName = vuexContext.rootState.setup.microcosmName
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment