adds vuex store

This commit is contained in:
buttle 2021-10-29 15:17:01 +02:00
parent 31c70251bb
commit f515da4a9f
5 changed files with 69 additions and 11 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

@ -42,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="">
@ -89,6 +89,7 @@ This file is part of ArciveList.
<script> <script>
import axios from 'axios'; import axios from 'axios';
import { mapMutations, mapGetters } from 'vuex'
import Search from './search.vue'; import Search from './search.vue';
export default { export default {
name: "List", name: "List",
@ -97,7 +98,7 @@ export default {
}, },
data() { data() {
return { return {
sites: Array, //sites: Array,
}; };
}, },
created() { created() {
@ -107,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', {
@ -127,6 +128,12 @@ export default {
return this.base_url + '/s/' + slug return this.base_url + '/s/' + slug
} }
*/ */
...mapGetters([
'getDisplayedSites'
]),
...mapMutations([
'setSites'
]),
}, },
watched: { watched: {

View File

@ -11,18 +11,19 @@ This file is part of ArciveList.
<form class="search" action=""> <form class="search" action="">
<div class="input-group"> <div class="input-group">
<input type="text" <input type="text"
name="fulltext_search" value="" name="fulltext_search"
placeholder="Search" placeholder="Search"
aria-label="Search" aria-label="Search"
v-model="search_text"
class="input-group-fieldbutton hollow" /> class="input-group-fieldbutton hollow" />
<button class="appear button" <button class="appear button"
type="submit"> type="button"
@click="search">
Search Search
</button> </button>
</div> </div>
</form> </form>
</template> </template>
@ -36,7 +37,7 @@ export default {
}, },
data() { data() {
return { return {
search_text: "",
}; };
}, },
created() { created() {
@ -60,6 +61,22 @@ export default {
*/ */
}, },
methods: { 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) { site_url: function(slug) {
return this.base_url + '/s/' + slug return this.base_url + '/s/' + slug
@ -71,7 +88,7 @@ export default {
}, },
computed: { computed: {
api_endpoint: function() { api_endpoint: function() {
return this.base_url + '/api' return '/api/sites?search='
}, },
} }
}; };

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