Compare commits

...

2 Commits

Author SHA1 Message Date
buttle f515da4a9f adds vuex store 2021-10-29 15:17:01 +02:00
buttle 31c70251bb adds search component 2021-10-29 11:54:24 +02:00
5 changed files with 153 additions and 9 deletions

View File

@ -10,6 +10,7 @@
"vue-loader": "^15.9.8", "vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3", "vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14", "vue-template-compiler": "^2.6.14",
"vuex": "^3.6.2",
"webpack-cli": "^4.9.1" "webpack-cli": "^4.9.1"
}, },
"scripts": { "scripts": {

View File

@ -7,6 +7,8 @@ This file is part of ArciveList.
<template> <template>
<div>
<Search></Search>
<section class="collections-list"> <section class="collections-list">
@ -40,7 +42,7 @@ This file is part of ArciveList.
</p> </p>
</div> </div>
</li> </li>
<li v-for="site in sites" <li v-for="site in getDisplayedSites()"
class="accordion-item" data-accordion-item> class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"> <a href="#" class="accordion-title">
<ul class=""> <ul class="">
@ -63,7 +65,8 @@ This file is part of ArciveList.
<figure> <figure>
<img :src="site.thumbnail" /> <img :src="site.thumbnail" />
</figure> </figure>
<p :html="site.summary"> <p>
<span v-html="site.summary"></span>
<a class="button small" <a class="button small"
:href="site.url"> :href="site.url">
View View
@ -80,20 +83,22 @@ This file is part of ArciveList.
</nav> </nav>
</aside> </aside>
</section> </section>
</div>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios';
import { mapMutations, mapGetters } from 'vuex'
import Search from './search.vue';
export default { export default {
name: "List",
components: { components: {
'Search': Search
}, },
data() { data() {
return { return {
sites: Array, //sites: Array,
}; };
}, },
created() { created() {
@ -103,7 +108,7 @@ export default {
}, },
mounted() { mounted() {
this.sites = JSON.parse(this.collections) this.setSites(JSON.parse(this.collections))
/* /*
var self = this; var self = this;
axios.get(this.api_endpoint +'/sites', { axios.get(this.api_endpoint +'/sites', {
@ -123,6 +128,12 @@ export default {
return this.base_url + '/s/' + slug return this.base_url + '/s/' + slug
} }
*/ */
...mapGetters([
'getDisplayedSites'
]),
...mapMutations([
'setSites'
]),
}, },
watched: { watched: {

99
src/components/search.vue Normal file
View File

@ -0,0 +1,99 @@
<!--
This file is part of ArciveList.
# SPDX-FileCopyrightText: 2021 Hangar.org
# SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<form class="search" action="">
<div class="input-group">
<input type="text"
name="fulltext_search"
placeholder="Search"
aria-label="Search"
v-model="search_text"
class="input-group-fieldbutton hollow" />
<button class="appear button"
type="button"
@click="search">
Search
</button>
</div>
</form>
</template>
<script>
import axios from 'axios';
export default {
name: "Search",
components: {
},
data() {
return {
search_text: "",
};
},
created() {
},
ready: function () {
},
mounted() {
/*
var self = this;
axios.get(this.api_endpoint +'/sites', {
})
.then(function (response) {
console.log(response.data)
self.sites = response.data
})
.catch(function (error) {
console.log(error);
});
*/
},
methods: {
search: function() {
console.log(this.search_text)
var search_url = this.api_endpoint + this.search_text;
var self = this;
axios.get(search_url, {
})
.then(function (response) {
console.log(response.data)
//self.sites = response.data
})
.catch(function (error) {
console.log(error);
});
}
/*
site_url: function(slug) {
return this.base_url + '/s/' + slug
}
*/
},
watched: {
},
computed: {
api_endpoint: function() {
return '/api/sites?search='
},
}
};
</script>
<style>
</style>

View File

@ -10,7 +10,7 @@ import Vue from "vue";
import ArchiveList from "../components/archiveList.vue"; import ArchiveList from "../components/archiveList.vue";
//import 'es6-promise/auto' //import 'es6-promise/auto'
//import store from "../store.js" import store from "../store.js"
//import i18n from "../i18n.js" //import i18n from "../i18n.js"
export const bus = new Vue(); export const bus = new Vue();
@ -31,8 +31,8 @@ document.querySelectorAll("[data-vue-component=archive-list]")
components: {'ArchiveList': ArchiveList}, components: {'ArchiveList': ArchiveList},
propsData: { ...element.dataset }, propsData: { ...element.dataset },
props: ["collections"], props: ["collections"],
/*
store: store, store: store,
/*
i18n: i18n, i18n: i18n,
*/ */
}).$mount(element); }).$mount(element);

33
src/store.js Normal file
View File

@ -0,0 +1,33 @@
/*
This file is part of ArciveList.
# SPDX-FileCopyrightText: 2021 Hangar.org
# SPDX-License-Identifier: AGPL-3.0-or-later
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
sites: [],
},
mutations: {
setSites(state, sites) {
state.sites = sites
},
},
getters: {
getSites: state => {
return state.sites
},
getDisplayedSites: state => {
return state.sites
},
}
})
export default store