src/components/archiveList.vue

@@ -19,11 +19,14 @@ This file is part of ArciveList.
     <main class="">
       <article class="">
 
-        <ul class="accordion">
+        <ul class="accordion"
+            data-responsive-accordion-tabs="accordion small-accordion"
+            data-multi-expand="true"
+            data-allow-all-closed="true"
+            data-deep-link="true">
           <li class="accordion-item title"
-              data-accordion-item
+              data-accordion-item disabled>
-              disabled>
+            <a href="#" class="accordion-title">
-            <div class="accordion-title">
               <ul class="">
                 <li class="title"
                     v-on:click="setActiveColumn('title')">
@@ -58,16 +61,18 @@ This file is part of ArciveList.
                   </span>
                 </li>
               </ul>
+            </a>
+            <div class="accordion-content"
+                 data-tab-content>
+              <figure>
+              </figure>
+              <p>
+              </p>
             </div>
           </li>
           <li v-for="site in sites"
-              :key="site.id"
+              class="accordion-item" data-accordion-item>
-              class="accordion-item"
+            <a href="#" class="accordion-title">
-              data-accordion-item>
-            <div class="accordion-title"
-                 role="tab"
-                 aria-expanded="false"
-                 aria-selected="false">
               <ul class="">
                 <li class="title">
                   {{ site.title }}
@@ -82,8 +87,8 @@ This file is part of ArciveList.
                   {{ site.project_date }}
                 </li>
               </ul>
-            </div>
+            </a>
-            <aside class="accordion-content">
+            <aside class="accordion-content" data-tab-content>
              <section>
               <figure>
                 <img :src="site.thumbnail" />
@@ -100,8 +105,9 @@ This file is part of ArciveList.
           </li>
         </ul>
         <div class="load_more"
-             v-if="more_sites_to_display">
+             v-if="more_sites_to_display"
-          <button v-on:click="loadMoreSites()">
+             v-on:click="loadMoreSites()">
+          <button>
             Load more
           </button>
         </div>
@@ -133,8 +139,11 @@ export default {
     return {
       columns_order: {'title': 'asc', 'artist': 'asc', 'collection': 'asc', 'date': 'asc'},
       active_column: 'date',
+      //faSortAlphaUp: faSortAlphaUp,
+      //faSortAlphaDown: faSortAlphaDown,
       faLongArrowAltUp: faLongArrowAltUp,
       faLongArrowAltDown: faLongArrowAltDown,
+      //faArrowsV: faArrowsV,
     };
   },
   created() {
@@ -170,7 +179,7 @@ export default {
       this.incrementPageCount()
     },
     ...mapGetters([
-      'getSitesForDisplay', 'getPageCount'
+      'getDisplayedSites', 'getPageSize', 'getPageCount'
     ]),
     ...mapMutations([
       'setSites', 'setColumnOrder', 'incrementPageCount'
@@ -181,10 +190,10 @@ export default {
   },
   computed: {
     sites: function() {
-      return this.getSitesForDisplay().slice(0, this.getPageCount() *  this.page_size)
+      return this.getDisplayedSites().slice(0, this.getPageCount() *  this.page_size)
     },
     more_sites_to_display: function() {
-      if (this.getSitesForDisplay().length > this.getPageCount() * this.page_size) {
+      if (this.getDisplayedSites().length > this.getPageCount() * this.page_size) {
         return true
       }
       return false
@@ -200,7 +209,4 @@ export default {
 .activeColumn {
   color: black;
 }
-.accordion-title {
-  cursor: pointer;
-}
 </style>

src/components/search.vue

@@ -27,7 +27,7 @@ This file is part of ArciveList.
 
 <script>
 import axios from 'axios';
-import { mapMutations, mapGetters } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
   name: "Search",
@@ -38,16 +38,16 @@ export default {
   },
   methods: {
     search: function() {
+      console.log(this.search_text)
       this.setSearchText(this.search_text)
-      var local_search_result = this.searchLocalSiteData()
       var api_endpoint = '/api/collections/search?fulltext_search='
       var search_url = api_endpoint + this.search_text;
       var self = this;
       axios.get(search_url, {
       })
       .then(function (response) {
-        //console.log(response.data)
+        console.log(response.data)
-        self.setFilteredSites(Object.assign({}, local_search_result, response.data))
+        self.setFilteredSites(response.data)
       })
       .catch(function (error) {
         console.log(error);
@@ -56,10 +56,6 @@ export default {
     ...mapMutations([
       'setFilteredSites', 'setSearchText'
     ]),
-    ...mapGetters([
-      'searchLocalSiteData'
-    ]),
-
   },
 };
 </script>

src/store.js

@@ -35,27 +35,23 @@ const store = new Vuex.Store({
       for (const [site_id, weight] of Object.entries(filtered_site_ids)) {
         var site = state.sites.find(x => x.id == site_id)
         if (site) {
+          console.log('push')
           sites.push(site)
         }
       }
       state.filtered_sites = sites
-      state.page_count = 1
     },
     setColumnOrder(state, payload) {
-      //state.sites = _.sortBy(state.sites, payload.column_name)
+      state.sites = _.sortBy(state.sites, payload.column_name)
-      //state.filtered_sites = _.sortBy(state.filtered_sites, payload.column_name)
+      state.filtered_sites = _.sortBy(state.filtered_sites, payload.column_name)
-      state.sites = order_items(state.sites, payload.column_name, payload.order)
-      state.filtered_sites = order_items(state.filtered_sites, payload.column_name, payload.order)
-      /*
       if (payload.order == 'desc') {
         state.sites.reverse()
         state.filtered_sites.reverse()
       }
-      */
     },
   },
   getters: {
-    getSitesForDisplay: state => {
+    getDisplayedSites: state => {
       if (state.search_text === "") {
         return state.sites
       }
@@ -64,64 +60,7 @@ const store = new Vuex.Store({
     getPageCount: state => {
       return state.page_count
     },
-    searchLocalSiteData: state => {
-      var result = {}
-      if (state.search_text==="") {
-        return result
-      }
-      for (let site in state.sites) {
-        var weight = 0
-        var found = state.sites[site].summary.toLowerCase().search(state.search_text.toLowerCase())
-        if (found != -1) {
-          weight = weight +1
-        }
-        var found = state.sites[site].collection.toLowerCase().search(state.search_text.toLowerCase())
-        if (found != -1) {
-          weight = weight +1
-        }
-        var found = state.sites[site].currator.toLowerCase().search(state.search_text.toLowerCase())
-        if (found != -1) {
-          weight = weight +1
-        }
-        var found = state.sites[site].title.toLowerCase().search(state.search_text.toLowerCase())
-        if (found != -1) {
-          weight = weight +1
-        }
-        if (weight > 0) {
-          var id = state.sites[site].id
-          result[id] = weight
-        }
-      }
-      console.log('load search')
-      console.log(result)
-      return result
-    },
   }
 })
-function order_items(items, field_name, ascending) {
-    items.sort(function compareFn(first_el, second_el) {
-      if (field_name == 'artist') {
-        field_name = 'currator'
-      }
-      if (field_name == 'date') {
-        field_name = 'project_date'
-      }
-      console.log("sss: "+ field_name)
-      console.log(first_el)
-      if (first_el[field_name] === undefined || first_el[field_name] === ""){
-        return -1
-      }
-      if (second_el[field_name] === undefined || second_el[field_name] === ""){
-        return 1
-      }
-      first_el = first_el[field_name].toLowerCase()
-      second_el = second_el[field_name].toLowerCase()
-      if (first_el < second_el) {
-        return -1;
-      }
-      return 1;
-    })
-    return ascending == 'asc' ? items : items.reverse()
-}
 
 export default store