Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
nodenoggin vue3 duplicate
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Deploy
Releases
Package registry
Model registry
Operate
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Adam Procter
nodenoggin vue3 duplicate
Commits
e4de5675
Commit
e4de5675
authored
3 years ago
by
Adam Procter
Browse files
Options
Downloads
Patches
Plain Diff
read mode toggle working and discarding working
parent
21610583
No related branches found
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
src/components/AddNodes-old.vue
+0
-265
0 additions, 265 deletions
src/components/AddNodes-old.vue
src/components/MyNodes.vue
+32
-32
32 additions, 32 deletions
src/components/MyNodes.vue
src/store/modules/mynodes.js
+105
-1
105 additions, 1 deletion
src/store/modules/mynodes.js
with
137 additions
and
298 deletions
src/components/AddNodes-old.vue
deleted
100644 → 0
+
0
−
265
View file @
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
&
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
>
This diff is collapsed.
Click to expand it.
src/components/MyNodes.vue
+
32
−
32
View file @
e4de5675
<
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"
: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>
<button>
Colour
</button>
<button>
Read
</button>
<button>
Discard
</button>
<!--
</
template
>
<
template
v-else
>
<p
class=
"readmode"
:id=
"nodes.node_id"
:id=
"nodes.node_id"
:inner-html.prop=
"nodes.node_text"
ref=
"textentry"
></p>
placeholder=
"Type your thoughts and ideas here! (auto saved every keystroke)"
</
template
>
-->
rows=
"5"
></textarea>
<p
class=
"info"
>
*markdown supported
&
autosaves
</p>
<button>
Colour
</button>
<button>
Shape
</button>
<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>
</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
>
...
...
This diff is collapsed.
Click to expand it.
src/store/modules/mynodes.js
+
105
−
1
View file @
e4de5675
...
@@ -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
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment