Compare commits

...

7 Commits

3 changed files with 94 additions and 35 deletions

View File

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

View File

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

View File

@ -35,23 +35,27 @@ const store = new Vuex.Store({
for (const [site_id, weight] of Object.entries(filtered_site_ids)) { for (const [site_id, weight] of Object.entries(filtered_site_ids)) {
var site = state.sites.find(x => x.id == site_id) var site = state.sites.find(x => x.id == site_id)
if (site) { if (site) {
console.log('push')
sites.push(site) sites.push(site)
} }
} }
state.filtered_sites = sites state.filtered_sites = sites
state.page_count = 1
}, },
setColumnOrder(state, payload) { 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') { if (payload.order == 'desc') {
state.sites.reverse() state.sites.reverse()
state.filtered_sites.reverse() state.filtered_sites.reverse()
} }
*/
}, },
}, },
getters: { getters: {
getDisplayedSites: state => { getSitesForDisplay: state => {
if (state.search_text === "") { if (state.search_text === "") {
return state.sites return state.sites
} }
@ -60,7 +64,64 @@ const store = new Vuex.Store({
getPageCount: state => { getPageCount: state => {
return state.page_count 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 export default store