Crear columnas

src/components/ColumnList.vue

@@ -19,7 +19,7 @@ export default {
   setup() {
     const store = useStore();
     const columns = computed({
-      get: () => store.state.boardModule.columns,
+      get: () => store.getters["boardModule/getColumns"],
       set: value => store.dispatch("boardModule/updateColumns", value)
     });
     return { columns };

src/components/NavBar.vue

@@ -7,7 +7,10 @@
         >
           {{ boardName }}
         </h1>
-        <a href="#" class="ml-2 text-sm block text-center mt-3"
+        <a
+          @click="createColumn"
+          href="#"
+          class="ml-2 text-sm block text-center mt-3"
           >Create column</a
         >
       </div>
@@ -43,7 +46,14 @@ export default {
         console.error(error);
       }
     }
-    return { boardName, userLogout };
+    async function createColumn() {
+      try {
+        await store.dispatch("boardModule/createColumn");
+      } catch (error) {
+        console.error(error.message);
+      }
+    }
+    return { boardName, userLogout, createColumn };
   },
   components: {
     UserAvatar

src/store/boardModule.js

@@ -10,14 +10,20 @@ export default {
   },
   getters: {
     getBoardName: state => state.board.name,
+    getColumns: state => state.columns.sort((a, b) => a.order - b.order),
     getCardsByColumn: state => column =>
       state.cards
         .filter(card => card.column === column)
-        .sort((a, b) => a.order - b.order)
+        .sort((a, b) => a.order - b.order),
+    getNextColumnOrder: state =>
+      Math.max(...state.columns.map(column => column.order)) + 1
   },
   mutations: {
     setBoard(state, board) {
       state.board = board;
+    },
+    setColumns(state, columns) {
+      state.columns = columns;
     }
   },
   actions: {
@@ -46,6 +52,34 @@ export default {
 
       commit("setBoard", board);
     },
+
+    async getColumns({ commit, rootState }) {
+      await db
+        .collection("columns")
+        .where("board", "==", rootState.userModule.user.uid)
+        .onSnapshot(doSnapshot);
+
+      function doSnapshot(querySnapshot) {
+        const columns = [];
+        querySnapshot.forEach(doc => {
+          columns.push(doc.data());
+        });
+        commit("setColumns", columns);
+      }
+    },
+
+    async createColumn({ rootState, state, getters }) {
+      const ref = db.collection("columns");
+      const { id } = ref.doc();
+      const column = {
+        name: "New Column",
+        id,
+        board: rootState.userModule.user.uid,
+        order: state.columns.length ? getters["getNextColumnOrder"] : 0
+      };
+      await ref.doc(id).set(column);
+    },
+
     updateColumns(context, columns) {
       console.log(columns);
     },

src/store/index.js

@@ -6,6 +6,7 @@ export default createStore({
   actions: {
     initApp({ dispatch }) {
       dispatch("boardModule/getBoard");
+      dispatch("boardModule/getColumns");
     }
   },
   modules: { boardModule, userModule }