Browse Source

Added action items

keep-around/b9a20d532f37c41c09cd9a0ea4cf37e20429dbc4
Atridad Lahiji 4 months ago
parent
commit
b9a20d532f
  1. 93
      pages/retro.vue
  2. 22
      store/index.js

93
pages/retro.vue

@ -38,6 +38,9 @@
<li @click="addLess">
Less
</li>
<li @click="addAction">
Action Items
</li>
</ul>
</div>
</div>
@ -55,7 +58,7 @@
<b>Keep</b>
</h2>
<draggable
:list="keepList"
v-model="keepList"
tag="ul"
class="listColumn"
group="retro"
@ -80,7 +83,7 @@
<b>Add</b>
</h2>
<draggable
:list="addList"
v-model="addList"
tag="ul"
class="listColumn"
group="retro"
@ -105,7 +108,7 @@
<b>More</b>
</h2>
<draggable
:list="moreList"
v-model="moreList"
tag="ul"
class="listColumn"
group="retro"
@ -130,7 +133,7 @@
<b>Less</b>
</h2>
<draggable
:list="lessList"
v-model="lessList"
tag="ul"
class="listColumn"
group="retro"
@ -148,6 +151,31 @@
</draggable>
</div>
</div>
<div>
<div class="cardLong">
<h2 class="cardTitle">
<b>Action Items</b>
</h2>
<draggable
v-model="actionList"
tag="ul"
class="listColumnLong"
group="actionItems"
handle=".handle"
>
<li
v-for="item in actionList"
:key="item.id"
class="listItem"
>
<move-icon class="handle" />
<span class="text">{{ item.name }} </span>
<x-circle-icon class="delete" @click="removeFromLess(item)" />
</li>
</draggable>
</div>
</div>
</div>
</div>
</div>
@ -180,6 +208,7 @@ export default {
'add',
'more',
'less',
'action',
'state'
]),
keepList: {
@ -213,6 +242,14 @@ export default {
set (value) {
this.setLess(value)
}
},
actionList: {
get () {
return this.action
},
set (value) {
this.setAction(value)
}
}
},
methods: {
@ -221,14 +258,17 @@ export default {
'addToAdd',
'addToMore',
'addToLess',
'addToAction',
'setKeep',
'setAdd',
'setMore',
'setLess',
'setAction',
'removeFromKeep',
'removeFromAdd',
'removeFromMore',
'removeFromLess'
'removeFromLess',
'removeFromAction'
]),
addKeep () {
if (this.newItem) {
@ -262,6 +302,14 @@ export default {
this.newItem = ''
}
},
addAction () {
if (this.newItem) {
this.addToAction({
name: this.newItem
})
this.newItem = ''
}
},
exportBoard () {
const today = new Date()
const day = String(today.getDate()).padStart(2, '0')
@ -331,6 +379,41 @@ export default {
}
}
@media only screen and (min-width: 768px) {
.cardLong {
background-color: var(--card-background-color);
border-radius: 4px;
border: 1px solid var(--card-border-color);
transition: 0.3s;
padding: 10px;
margin: 2vw;
width: 90vw;
}
.listColumnLong {
height: 20vh;
overflow-y:auto;
}
}
@media only screen and (max-width: 768px) {
.cardLong {
background-color: var(--card-background-color);
border-radius: 4px;
border: 1px solid var(--card-border-color);
transition: 0.3s;
padding: 10px;
margin: 10px;
width: 90vw;
}
.listColumnLong {
height: 15vh;
min-height: 150px;
overflow-y:auto;
}
}
.cardTitle {
color: var(--card-text-color);
}

22
store/index.js

@ -4,7 +4,8 @@ const state = () => ({
keep: [],
add: [],
more: [],
less: []
less: [],
action: []
})
const mutations = {
@ -36,6 +37,13 @@ const mutations = {
name: item.name
})
},
addToAction (state, item) {
const newID = state.action.length
state.action.push({
id: newID,
name: item.name
})
},
setKeep (state, list) {
state.keep = (list)
},
@ -48,6 +56,9 @@ const mutations = {
setLess (state, list) {
state.less = (list)
},
setAction (state, list) {
state.action = (list)
},
removeFromKeep (state, itemToRemove) {
const itemIndex = state.keep.map((item) => {
return item.name
@ -71,6 +82,12 @@ const mutations = {
return item.name
}).indexOf(itemToRemove.name)
state.less.splice(itemIndex, 1)
},
removeFromAction (state, itemToRemove) {
const itemIndex = state.action.map((item) => {
return item.name
}).indexOf(itemToRemove.name)
state.action.splice(itemIndex, 1)
}
}
@ -87,6 +104,9 @@ const getters = {
less (state) {
return state.less
},
action (state) {
return state.action
},
state (state) {
return state
}

Loading…
Cancel
Save