added showrooms pages, made page-title color

web/themes/custom/materiotheme/vuejs/components/Pages/Base.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="Base">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <div class="cards-list" v-else>
+      <aside class="search-info">
+        {{ searchinfos }}
+      </aside>
+      <ul>
+        <li v-for="item in items" v-bind:key="item.uuid">
+          <Card :item="item"/>
+        </li>
+      </ul>
+      <infinite-loading
+        v-if="count > limit"
+        @infinite="nextPage"
+      >
+        <div slot="no-more">No more results</div>
+      </infinite-loading>
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+import Card from 'vuejs/components/Content/Card'
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Base",
+  data() {
+    return {
+      pagetitle:"Base",
+      // searchinfos: null
+    }
+  },
+  computed: {
+    ...mapState({
+      items: state => state.Search.items,
+      searchinfos: state =>  state.Search.infos,
+      count: state => state.Search.count,
+      limit: state => state.Search.limit
+    })
+  },
+  methods: {
+    ...mapActions({
+      newSearch: 'Search/newSearch',
+      nextPage: 'Search/nextPage'
+    }),
+    // infiniteHandler($state){
+    //   console.log('inifiniteHandler', $state);
+    //   this.nextPage()
+    // }
+  },
+  created() {
+    // at first page load or first route entering launch a search if params exists in url query
+    console.log('Base created() location',window.location);
+    let params = new URLSearchParams(window.location.search)
+    if(params.has('keys') || params.has('term')){
+      this.$store.commit('Search/setKeys', params.get('keys'))
+      this.$store.commit('Search/setTerm', params.get('term'))
+      this.pagetitle = params.get('keys')
+      this.newSearch()
+    }
+  },
+  beforeRouteUpdate (to, from, next) {
+    // when query change launch a new search
+    console.log('Base beforeRouteUpdate', to, from, next);
+    this.$store.commit('Search/setKeys', to.query.keys)
+    this.$store.commit('Search/setTerm', to.query.term)
+    this.pagetitle = to.query.keys
+    this.newSearch()
+    next()
+  },
+  components: {
+    Card
+  }
+
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>