Move nav to Vuex, closes #9.

db.json

@@ -81,6 +81,20 @@
       "groupId": 3,
       "title": "Blah",
       "author": "sustained"
+    },
+    {
+      "id": 11,
+      "boardId": 1,
+      "groupId": 1,
+      "title": "UYIYF",
+      "author": "sustained"
+    },
+    {
+      "id": 12,
+      "boardId": 1,
+      "groupId": 1,
+      "title": "GHOUFH",
+      "author": "sustained"
     }
   ],
 
@@ -91,12 +105,12 @@
       "title": "Group One"
     },
     {
-      "id": 1,
+      "id": 2,
       "boardId": 1,
       "title": "Group One"
     },
     {
-      "id": 1,
+      "id": 3,
       "boardId": 1,
       "title": "Group One"
     }
@@ -105,56 +119,56 @@
   "cards": [
     {
       "id": 1,
-      "title": "gesgseg",
+      "title": "Foo bar baz",
       "listId": 1,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550948066565"
     },
     {
       "id": 2,
-      "title": "eousgheg",
+      "title": "Foo doo loo",
       "listId": 1,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550935066565"
     },
     {
       "id": 3,
-      "title": "gesughsueg",
-      "listId": 2,
+      "title": "Foo da doo",
+      "listId": 1,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550642064565"
     },
     {
       "id": 4,
-      "title": "gesoughosueg",
-      "listId": 1,
+      "title": "Bar de baz",
+      "listId": 2,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550642064565"
     },
     {
       "id": 5,
-      "title": "gesughosuhg",
-      "listId": 1,
+      "title": "Bar de diddely doo",
+      "listId": 2,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550642064565"
     },
     {
       "id": 6,
-      "title": "goesughoesu",
-      "listId": 1,
+      "title": "Bar de blah",
+      "listId": 2,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550642064565"
     },
     {
       "id": 7,
       "title": "goesughseog",
-      "listId": 1,
+      "listId": 3,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550642064565"

src/components/List.vue

@@ -1,7 +1,7 @@
 <template>
-  <div ref="el" :class="['list', {selected}]">
+  <div ref="list" :class="['list', {selected}]">
     <div class="list-wrapper">
-      <p>List!</p>
+      <p>{{ list.title }}</p>
 
       <slot>
         <p style="margin: 20px 10px;">No cards!</p>
@@ -16,7 +16,74 @@
 
 <script>
 export default {
-  props: ["selected"]
+  props: ["list", "selected"],
+
+  data() {
+    return {
+      refsSet: false
+    };
+  },
+
+  watch: {
+    selected(selected) {
+      this.selected = selected;
+
+      if (selected) this.bringIntoView(false, false);
+    }
+  },
+
+  mounted() {},
+
+  methods: {
+    /* IDEA: We could intelligently handle the disableSmoothBehaviour thing.
+      
+      The scrolling with the smooth behaviour enabled with large numbers of groups 
+      is extremely jarring (and may well be (one of) the cause(s) of the frame rate 
+      drops from the performance test (mostly 60 FPS but the odd dip to ~10).
+
+      We can probably make it so that if there are too many groups, then it will just 
+      intelligently set behaviour to "auto".
+    */
+    bringIntoView(disableSmoothBehaviour, disableObserver = false) {
+      const list = this.$refs["list"];
+
+      if (!list) return console.warn("no ref for list " + this.list.id);
+
+      if (!disableObserver) this.createObserver(list);
+
+      // console.log("scrolling to element");
+      list.scrollIntoView({
+        behavior: disableSmoothBehaviour ? "auto" : "smooth", // TODO: Let user choose auto/smooth.
+        inline: "center"
+      });
+
+      // setTimeout(() => {
+      //   this.$store.commit("SET_NAVIGATING", false);
+      // }, 1000);
+    },
+
+    createObserver(element) {
+      // console.log("creating observer");
+      let observer = new IntersectionObserver(
+        entry => {
+          let ratio = entry[0].intersectionRatio;
+
+          // HACK: Workaround potential Chrome bug (or IntersectionObserver quirk).
+          if (ratio >= 1.0) {
+            observer.unobserve(element);
+            this.$store.commit("SET_NAVIGATING", false);
+          }
+        },
+        {
+          root: document.getElementById("div#board"),
+          threshold: [1.0]
+        }
+      );
+
+      // console.log("observing element", element);
+      observer.observe(element);
+    }
+  }
 };
 </script>
 

src/store.js

@@ -7,6 +7,21 @@ import cello from "@/services/CelloService";
 
 export default new Vuex.Store({
   state: {
+    currentList: 0,
+    currentGroup: 0,
+    groupListCounts: [],
+    isNavigating: false,
+    scrollBehaviour: "smooth", // smooth | auto
+    wrappedToTop: false,
+    wrappedToBottom: false,
+    loadingState: "unloaded",
+
+    cards: [],
+    lists: [],
+    groups: [],
+    // fields: [],
+    // votes: [],
+
     boards: [],
     board: {
       lists: [],
@@ -15,27 +30,119 @@ export default new Vuex.Store({
   },
 
   mutations: {
+    SET_LOADING_STATE: (state, value) => (state.loadingState = value),
+    SET_NAVIGATING: (state, value) => (state.isNavigating = value),
+
     SET_BOARD: (state, board) => (state.board = board),
-    SET_BOARDS: (state, boards) => (state.boards = boards)
+    SET_BOARDS: (state, value) => (state.boards = value),
+
+    SET_CARDS: (state, value) => (state.cards = value),
+    SET_LISTS: (state, value) => (state.lists = value),
+    SET_GROUPS: (state, value) => (state.groups = value),
+    // SET_FIELDS: (state, value) => (state.fields = value),
+    // SET_VOTES: (state, value) => (state.votes= value),
+
+    SET_CURRENT_LIST: (state, index) => (state.currentList = index),
+    SET_CURRENT_GROUP: (state, index) => (state.currentGroup = index),
+    SET_GROUP_LIST_COUNTS: (state, value) => (state.groupListCounts = value),
+
+    SET_DID_WRAP_TO_TOP: (state, value) => (state.wrappedToTop = value),
+    SET_DID_WRAP_TO_BOTTOM: (state, value) => (state.wrappedToBottom = value)
   },
 
   actions: {
+    navigateLeft({ commit, state }) {
+      if (state.isNavigating) return;
+      commit("SET_NAVIGATING", true);
+
+      if (state.currentList - 1 < 0) commit("SET_CURRENT_LIST", state.groupListCounts[state.currentGroup] - 1);
+      else commit("SET_CURRENT_LIST", state.currentList - 1);
+    },
+
+    navigateRight({ commit, state }) {
+      if (state.isNavigating) return;
+      commit("SET_NAVIGATING", true);
+
+      if (state.currentList + 1 > state.groupListCounts[state.currentGroup] - 1) commit("SET_CURRENT_LIST", 0);
+      else commit("SET_CURRENT_LIST", state.currentList + 1);
+    },
+
+    navigateUp({ commit, getters, state }) {
+      if (state.isNavigating) return;
+      commit("SET_NAVIGATING", true);
+
+      // Top wraps back around to bottom.
+      if (state.currentGroup - 1 < 0) {
+        commit("SET_DID_WRAP_TO_BOTTOM", true);
+        setTimeout(() => commit("SET_DID_WRAP_TO_BOTTOM", false), 500);
+        commit("SET_CURRENT_GROUP", state.groups.length - 1);
+      } else {
+        commit("SET_CURRENT_GROUP", state.currentGroup - 1);
+      }
+
+      // Select final list if we were scrolled further right in the previous group than this group allows for.
+      if (state.currentList > getters.listCountsForGroup(state.currentGroup) - 1)
+        commit("SET_CURRENT_LIST", getters.listCountsForGroup(state.currentGroup) - 1);
+    },
+
+    navigateDown({ commit, getters, state }) {
+      if (state.isNavigating) return;
+      commit("SET_NAVIGATING", true);
+
+      // Bottom wraps back around to top.
+      if (state.currentGroup + 1 > state.groups.length - 1) {
+        commit("SET_DID_WRAP_TO_TOP", true);
+        setTimeout(() => commit("SET_DID_WRAP_TO_TOP", false), 500);
+        commit("SET_CURRENT_GROUP", 0);
+      } else {
+        commit("SET_CURRENT_GROUP", state.currentGroup + 1);
+      }
+
+      // Select final list if we were scrolled further right in the previous group than this group allows for.
+      if (state.currentList > getters.listCountsForGroup(state.currentGroup) - 1)
+        commit("SET_CURRENT_LIST", getters.listCountsForGroup(state.currentGroup) - 1);
+    },
+
     loadBoards({ commit }) {
       return cello.getBoards().then(boards => {
         commit("SET_BOARDS", boards.data);
       });
     },
 
-    loadBoard({ commit }, id) {
-      return cello.getBoard(id, ["cards", "lists", "fields", "votes"]).then(response => {
-        commit("SET_BOARD", response.data);
+    loadBoard({ commit, state }, id) {
+      commit("SET_LOADING_STATE", "loading");
+
+      return cello.getBoard(id, ["cards", "lists", "fields", "votes", "groups"]).then(response => {
+        commit("SET_CARDS", response.data.cards);
+        commit("SET_LISTS", response.data.lists);
+        commit("SET_GROUPS", response.data.groups);
+
+        const groupListCounts = [];
+        for (let i = 0; i < state.groups.length; i++) {
+          groupListCounts[i] = state.lists.filter(list => list.groupId === state.groups[i].id).length;
+        }
+
+        commit("SET_GROUP_LIST_COUNTS", groupListCounts);
+
+        commit("SET_LOADING_STATE", "loaded");
       });
     }
   },
 
   getters: {
     cardsForList(state) {
-      return listId => state.board.cards.filter(card => card.listId === listId);
+      return listId => state.cards.filter(card => card.listId === listId);
+    },
+
+    listsForGroup(state) {
+      return groupId =>
+        state.lists.filter(list => {
+          return list.groupId === groupId;
+        });
+    },
+
+    listCountsForGroup(state) {
+      return groupId => state.groupListCounts[groupId];
     }
   }
 });