adds 'load more' button

src/components/archiveList.vue

@@ -32,7 +32,7 @@ This file is part of ArciveList.
                     v-on:click="setActiveColumn('title')">
                   Title
                   <span class="ascToggle"
-                        v-bind:class="{ activeColumn: isActiveCol('title')}">
+                        v-bind:class="{activeColumn: isActiveCol('title')}">
                     <font-awesome-icon :icon="getOrderIcon('title')" size="1x" />
                   </span>
                 </li>
@@ -40,7 +40,7 @@ This file is part of ArciveList.
                     v-on:click="setActiveColumn('artist')">
                   Artist
                   <span class="ascToggle"
-                        v-bind:class="{ activeColumn: isActiveCol('artist')}">
+                        v-bind:class="{activeColumn: isActiveCol('artist')}">
                     <font-awesome-icon :icon="getOrderIcon('artist')" size="1x" />
                   </span>
                 </li>
@@ -48,7 +48,7 @@ This file is part of ArciveList.
                     v-on:click="setActiveColumn('collection')">
                   Collection
                   <span class="ascToggle"
-                        v-bind:class="{ activeColumn: isActiveCol('collection')}">
+                        v-bind:class="{activeColumn: isActiveCol('collection')}">
                     <font-awesome-icon :icon="getOrderIcon('collection')" size="1x" />
                   </span>
                 </li>
@@ -56,7 +56,7 @@ This file is part of ArciveList.
                     v-on:click="setActiveColumn('date')">
                   Date
                   <span class="ascToggle"
-                        v-bind:class="{ activeColumn: isActiveCol('date')}">
+                        v-bind:class="{activeColumn: isActiveCol('date')}">
                     <font-awesome-icon :icon="getOrderIcon('date')" size="1x" />
                   </span>
                 </li>
@@ -70,7 +70,7 @@ This file is part of ArciveList.
               </p>
             </div>
           </li>
-          <li v-for="site in getDisplayedSites()"
+          <li v-for="site in sites"
               class="accordion-item" data-accordion-item>
             <a href="#" class="accordion-title">
               <ul class="">
@@ -104,6 +104,13 @@ This file is part of ArciveList.
             </aside>
           </li>
         </ul>
+        <div class="load_more"
+             v-if="more_sites_to_display"
+             v-on:click="loadMoreSites()">
+          <button>
+            Load more
+          </button>
+        </div>
       </article>
     </main>
     <aside>
@@ -145,8 +152,8 @@ export default {
   mounted() {
     var payload = {
               'sites': JSON.parse(this.collections),
-              'column_name': 'date',
+              'column_name': this.active_column,
-              'order': this.columns_order['date']}
+              'order': this.columns_order[this.active_column]}
     this.setSites(payload)
 
   },
@@ -165,18 +172,30 @@ export default {
     getOrderIcon: function(name) {
       return this.columns_order[name] == 'asc' ? faSortAlphaUp : faSortAlphaDown
     },
+    loadMoreSites() {
+      console.log('loading')
+      this.incrementPageCount()
+    },
     ...mapGetters([
-      'getDisplayedSites'
+      'getDisplayedSites', 'getPageSize', 'getPageCount'
     ]),
     ...mapMutations([
-      'setSites', 'setColumnOrder'
+      'setSites', 'setColumnOrder', 'incrementPageCount'
     ]),
   },
   watched: {
 
   },
   computed: {
-
+    sites: function() {
+      return this.getDisplayedSites().slice(0, this.getPageCount() *  this.getPageSize())
+    },
+    more_sites_to_display: function() {
+      if (this.getDisplayedSites().length > this.getPageCount() * this.getPageSize()) {
+        return true
+      }
+      return false
+    }
   }
 };
 </script>

src/store.js

@@ -17,6 +17,8 @@ const store = new Vuex.Store({
     search_text: "",
     sites: [],
     filtered_sites: [],
+    page_size: 10,
+    page_count: 1,
   },
   mutations: {
     setSearchText(state, text) {
@@ -25,6 +27,9 @@ const store = new Vuex.Store({
     setSites(state, payload) {
       state.sites = _.sortBy(payload.sites, payload.column_name)
     },
+    incrementPageCount(state) {
+      state.page_count = state.page_count +1
+    },
     setFilteredSites(state, filtered_site_ids) {
       console.log(filtered_site_ids)
       var sites = []
@@ -38,11 +43,9 @@ const store = new Vuex.Store({
       state.filtered_sites = sites
     },
     setColumnOrder(state, payload) {
-      var column_name = payload.column_name
+      state.sites = _.sortBy(state.sites, payload.column_name)
-      var order = payload.order
+      state.filtered_sites = _.sortBy(state.filtered_sites, payload.column_name)
-      state.sites = _.sortBy(state.sites, column_name)
+      if (payload.order == 'desc') {
-      state.filtered_sites = _.sortBy(state.filtered_sites, column_name)
-      if (order == 'desc') {
         state.sites.reverse()
         state.filtered_sites.reverse()
       }
@@ -55,6 +58,12 @@ const store = new Vuex.Store({
       }
       return state.filtered_sites
     },
+    getPageSize: state => {
+      return state.page_size
+    },
+    getPageCount: state => {
+      return state.page_count
+    },
   }
 })