adds vuex store

package.json

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

src/components/archiveList.vue

@@ -42,7 +42,7 @@ This file is part of ArciveList.
               </p>
             </div>
           </li>
-          <li v-for="site in sites"
+          <li v-for="site in getDisplayedSites()"
               class="accordion-item" data-accordion-item>
             <a href="#" class="accordion-title">
               <ul class="">
@@ -89,6 +89,7 @@ This file is part of ArciveList.
 
 <script>
 import axios from 'axios';
+import { mapMutations, mapGetters } from 'vuex'
 import Search from './search.vue';
 export default {
   name: "List",
@@ -97,7 +98,7 @@ export default {
   },
   data() {
     return {
-      sites: Array,
+      //sites: Array,
     };
   },
   created() {
@@ -107,7 +108,7 @@ export default {
 
   },
   mounted() {
-    this.sites = JSON.parse(this.collections)
+    this.setSites(JSON.parse(this.collections))
     /*
     var self = this;
     axios.get(this.api_endpoint +'/sites', {
@@ -127,6 +128,12 @@ export default {
       return this.base_url + '/s/' + slug
     }
     */
+    ...mapGetters([
+      'getDisplayedSites'
+    ]),
+    ...mapMutations([
+      'setSites'
+    ]),
   },
   watched: {
 

src/components/search.vue

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

src/loaders/archiveListLoader.js

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

src/store.js

@@ -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