Added action items

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);
 }

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
   }