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

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

src/components/search.vue

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

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