From 03d506eabf1e6c3f4c66d13e393c36cf6a221af3 Mon Sep 17 00:00:00 2001
From: sustained <sustained.dissonance@gmail.com>
Date: Tue, 26 Feb 2019 03:54:42 +0000
Subject: [PATCH] Move nav to Vuex, closes #9.

---
 db.json                 |  40 ++++++---
 src/components/List.vue |  73 ++++++++++++++++-
 src/store.js            | 117 +++++++++++++++++++++++++--
 src/views/ViewBoard.vue | 175 +++++++++++-----------------------------
 4 files changed, 254 insertions(+), 151 deletions(-)

diff --git a/db.json b/db.json
index 65bc324..a28ebc4 100644
--- a/db.json
+++ b/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,7 +119,7 @@
   "cards": [
     {
       "id": 1,
-      "title": "gesgseg",
+      "title": "Foo bar baz",
       "listId": 1,
       "boardId": 1,
       "author": "sustained",
@@ -113,7 +127,7 @@
     },
     {
       "id": 2,
-      "title": "eousgheg",
+      "title": "Foo doo loo",
       "listId": 1,
       "boardId": 1,
       "author": "sustained",
@@ -121,32 +135,32 @@
     },
     {
       "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"
@@ -154,7 +168,7 @@
     {
       "id": 7,
       "title": "goesughseog",
-      "listId": 1,
+      "listId": 3,
       "boardId": 1,
       "author": "sustained",
       "createdAt": "1550642064565"
diff --git a/src/components/List.vue b/src/components/List.vue
index e98bcde..e3f9ed1 100644
--- a/src/components/List.vue
+++ b/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>
 
diff --git a/src/store.js b/src/store.js
index 3b6a28f..ed37f78 100644
--- a/src/store.js
+++ b/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];
     }
   }
 });
diff --git a/src/views/ViewBoard.vue b/src/views/ViewBoard.vue
index b162bb8..ce2fff8 100644
--- a/src/views/ViewBoard.vue
+++ b/src/views/ViewBoard.vue
@@ -2,26 +2,27 @@
   <div id="board">
     <router-view></router-view>
 
-    <div class="grid" v-for="(group, groupIndex) in groups" :key="groupIndex">
+    <div class="grid" v-for="(group) in groups" :key="'group-' + group.id">
       <list
-        v-for="(list, listIndex) in group.lists"
-        :key="list.id"
-        :selected="isSelected(listIndex, groupIndex)"
-        :ref="`lists-${groupIndex}`"
+        v-for="(list, listIndex) in listsForGroup(group.id)"
+        :key="'list-' + list.id"
+        :selected="isSelected(listIndex, group.id)"
+        :list="list"
       >
+        {{ list.id }}, {{ group.id}}
         <!-- TODO: ^ Get rid of refs. -->
         <!-- NOTE: ^ group.lists was before "the changes" - cardsForList (vuex) -->
-        <card v-for="card in list.cards" :key="card.id" :card="card"></card>
+        <card v-for="card in cardsForList(list.id)" :key="'card-' + card.id" :card="card"></card>
       </list>
     </div>
   </div>
 </template>
 
 <script>
-import Vue from "vue";
+// import Vue from "vue";
 import { mapState, mapGetters } from "vuex";
 
-import throttle from "lodash.throttle";
+// import throttle from "lodash.throttle";
 
 import List from "@/components/List.vue";
 import Card from "@/components/Card.vue";
@@ -30,25 +31,25 @@ export default {
   components: { List, Card },
 
   data() {
-    return {
-      currentGroup: 0,
-      currentList: 0,
-
-      groups: [],
-
-      navigating: false
-    };
+    return {};
   },
 
   beforeDestroy() {
-    console.info("cleaning up event listeners");
+    // console.info("cleaning up event listeners");
     document.removeEventListener("keydown", this.handleKeyDown);
     document.removeEventListener("mousewheel", this.handleMouseWheel);
   },
 
   async mounted() {
-    window.scrollTo(0, 0);
+    // HACK: Not really sure what else to do, we need to reset the scroll position since at least Chrome
+    // remembers the previous scroll position which looks kind of odd if you refresh the page.
+    if (document.readyState === "loading")
+      document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(() => window.scrollTo(0, 0), 100);
+      });
+    else window.scrollTo(0, 0);
 
+    /*
     const randBetween = (minimum, maximum) =>
       Math.max(minimum, Math.floor(Math.random() * maximum));
 
@@ -82,9 +83,10 @@ export default {
         group.lists.push(list);
       }
 
-      console.log("setting group", group);
+      // console.log("setting group", group);
       Vue.set(this.groups, i, group);
     }
+    */
 
     console.info("registering event listeners");
     document.addEventListener("keydown", this.handleKeyDown);
@@ -97,8 +99,15 @@ export default {
   },
 
   computed: {
-    ...mapState(["board"]),
-    ...mapGetters(["cardsForList"]),
+    ...mapState([
+      "board",
+      "lists",
+      "cards",
+      "groups",
+      "currentList",
+      "currentGroup"
+    ]),
+    ...mapGetters(["cardsForList", "listsForGroup"]),
 
     // overflows() {
     //   return document.body.scrollWidth > document.body.clientWidth;
@@ -112,132 +121,39 @@ export default {
   },
 
   methods: {
-    isSelected(listId, groupIndex) {
+    isSelected(listIndex, groupId) {
       // NOTE: DB indexes start at 1 but we switched to using local state for the new navigation prototype thing.
-      return listId === this.currentList && groupIndex === this.currentGroup;
+      return (
+        listIndex === this.currentList && groupId - 1 === this.currentGroup
+      );
     },
 
     /*
-      TODO: Move all navigation-related stuff to Vuex.
+      TODO: Move all navigation-related stuff to Vuex / remove refs.
+
+      https://github.com/sustained/cello/issues/9
 
       We can store a mapping of groupId => listCount (needed for when we navigate up/down).
     */
 
     scrollLeft() {
-      if (--this.currentList < 0)
-        this.currentList = this.$refs["lists-" + this.currentGroup].length - 1;
-
-      this.scrollToCurrentList();
+      this.$store.dispatch("navigateLeft");
     },
 
     scrollRight() {
-      if (
-        ++this.currentList >
-        this.$refs["lists-" + this.currentGroup].length - 1
-      )
-        this.currentList = 0;
-
-      this.scrollToCurrentList();
+      this.$store.dispatch("navigateRight");
     },
 
     scrollDown() {
-      let didWrap = false;
-
-      // Bottom wraps back around to top.
-      if (++this.currentGroup > this.groups.length - 1) {
-        didWrap = true;
-        this.currentGroup = 0;
-      }
-
-      // Select final list if we were scrolled further right in the previous group.
-      if (
-        this.currentList >
-        this.$refs["lists-" + this.currentGroup].length - 1
-      )
-        this.currentList = this.$refs["lists-" + this.currentGroup].length - 1;
-
-      this.scrollToCurrentList(didWrap, false);
+      this.$store.dispatch("navigateDown");
     },
 
     scrollUp() {
-      let didWrap = false;
-
-      // Top wraps back around to top.
-      if (--this.currentGroup < 0) {
-        didWrap = true;
-        this.currentGroup = this.groups.length - 1;
-      }
-
-      // Select final list if we were scrolled further right in the previous group.
-      if (
-        this.currentList >
-        this.$refs["lists-" + this.currentGroup].length - 1
-      )
-        this.currentList = this.$refs["lists-" + this.currentGroup].length - 1;
-
-      this.scrollToCurrentList(didWrap, false);
-    },
-
-    /* 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".
-    */
-    scrollToCurrentList(disableSmoothBehaviour, disableObserver = true) {
-      const lists = this.$refs["lists-" + this.currentGroup];
-
-      if (!lists) return console.warn("no refs for group " + this.currentGroup);
-
-      const component = lists[this.currentList];
-
-      if (!component || !component.$el)
-        return console.warn(
-          "no component/el for group " + this.currentGroup,
-          component,
-          component.$el
-        );
-
-      const element = component.$el;
-
-      if (!disableObserver) this.createObserver(element);
-
-      console.log("scrolling to element");
-      element.scrollIntoView({
-        behavior: disableSmoothBehaviour ? "auto" : "smooth", // TODO: Let user choose auto/smooth.
-        inline: "center"
-      });
-    },
-
-    createObserver(element) {
-      this.navigating = true;
-
-      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.navigating = false;
-          }
-        },
-        {
-          root: document.getElementById("div#board"),
-          threshold: [1.0]
-        }
-      );
-
-      console.log("observing element", element);
-      observer.observe(element);
+      this.$store.dispatch("navigateUp");
     },
 
     handleKeyDown(event) {
-      if (this.navigating) return;
+      // if (this.navigating) return;
 
       switch (event.keyCode) {
         case 65:
@@ -256,10 +172,9 @@ export default {
           this.scrollDown();
           break;
       }
-    },
-
+    }
+    /*
     handleMouseWheel(event) {
-      /*
       return throttle(() => {
         event.preventDefault();
 
@@ -278,8 +193,8 @@ export default {
 
         this.scrollToCurrentList();
       }, 50);
-      */
     }
+    */
   }
 };
 </script>