added searchinfos

web/modules/custom/materio_sapi/src/Controller/Base.php

@@ -91,6 +91,12 @@ class Base extends ControllerBase {
       $this->sapiQuery();
 
       $resp['count'] = $this->results->getResultCount();
+      $resp['infos'] = t('The search found @count result(s) with keywords @keys.', array(
+        "@count" => $resp['count'],
+        "@keys" => $this->keys
+      ));
+      
+      
       $resp['options'] = $this->query->getOptions();
 
       $items = [];

web/themes/custom/materiotheme/assets/dist/main.js

@@ -417,7 +417,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  name: \"Base\",\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    items: function items(state) {\n      return state.Search.items;\n    }\n  })),\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    newSearch: 'Search/newSearch'\n  })),\n  created: function created() {\n    // at first page load or first route entering launch a search if params exists in url query\n    console.log('Base created() location', window.location);\n    var params = new URLSearchParams(window.location.search);\n\n    if (params.has('keys') || params.has('term')) {\n      this.$store.commit('Search/setKeys', params.get('keys'));\n      this.$store.commit('Search/setTerm', params.get('term'));\n      this.newSearch();\n    }\n  },\n  beforeRouteUpdate: function beforeRouteUpdate(to, from, next) {\n    // when query change launch a new search\n    console.log('Base beforeRouteUpdate', to, from, next);\n    this.$store.commit('Search/setKeys', to.query.keys);\n    this.$store.commit('Search/setTerm', to.query.term);\n    this.newSearch();\n    next();\n  },\n  components: {\n    Card: _Card.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  name: \"Base\",\n  data: function data() {\n    return {\n      pagetitle: \"Base\" // searchinfos: null\n\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    items: function items(state) {\n      return state.Search.items;\n    },\n    searchinfos: function searchinfos(state) {\n      return state.Search.infos;\n    }\n  })),\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    newSearch: 'Search/newSearch'\n  })),\n  created: function created() {\n    // at first page load or first route entering launch a search if params exists in url query\n    console.log('Base created() location', window.location);\n    var params = new URLSearchParams(window.location.search);\n\n    if (params.has('keys') || params.has('term')) {\n      this.$store.commit('Search/setKeys', params.get('keys'));\n      this.$store.commit('Search/setTerm', params.get('term'));\n      this.pagetitle = params.get('keys');\n      this.newSearch();\n    }\n  },\n  beforeRouteUpdate: function beforeRouteUpdate(to, from, next) {\n    // when query change launch a new search\n    console.log('Base beforeRouteUpdate', to, from, next);\n    this.$store.commit('Search/setKeys', to.query.keys);\n    this.$store.commit('Search/setTerm', to.query.term);\n    this.pagetitle = to.query.keys;\n    this.newSearch();\n    next();\n  },\n  components: {\n    Card: _Card.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -638,7 +638,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"Base\" } }, [\n    _c(\"h1\", [_vm._v(\"Base\")]),\n    _vm._v(\" \"),\n    _c(\"div\", { staticClass: \"results\" }, [\n      _c(\n        \"ul\",\n        _vm._l(_vm.items, function(item) {\n          return _c(\n            \"li\",\n            { key: item.nid },\n            [_c(\"Card\", { attrs: { item: item } })],\n            1\n          )\n        }),\n        0\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"Base\" } }, [\n    _c(\"h1\", { staticClass: \"page-title\" }, [_vm._v(_vm._s(_vm.pagetitle))]),\n    _vm._v(\" \"),\n    _c(\"aside\", { staticClass: \"search-info\" }, [\n      _vm._v(\"\\n    \" + _vm._s(_vm.searchinfos) + \"\\n  \")\n    ]),\n    _vm._v(\" \"),\n    _c(\"div\", { staticClass: \"results\" }, [\n      _c(\n        \"ul\",\n        _vm._l(_vm.items, function(item) {\n          return _c(\n            \"li\",\n            { key: item.nid },\n            [_c(\"Card\", { attrs: { item: item } })],\n            1\n          )\n        }),\n        0\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1185,7 +1185,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  namespaced: true,\n  // initial state\n  state: {\n    keys: \"\",\n    term: \"\",\n    items: [],\n    offset: 0,\n    limit: 15\n  },\n  // getters\n  getters: {},\n  // mutations\n  mutations: {\n    setItems: function setItems(state, items) {\n      state.items = items;\n    },\n    setKeys: function setKeys(state, keys) {\n      state.keys = keys;\n    },\n    setTerm: function setTerm(state, term) {\n      state.term = term;\n    },\n    resetOffset: function resetOffset(state) {\n      state.offset = 0;\n    },\n    incrementOffset: function incrementOffset(state) {\n      state.offset += state.limit;\n    }\n  },\n  // actions\n  actions: {\n    newSearch: function newSearch(_ref) {\n      var dispatch = _ref.dispatch,\n          commit = _ref.commit,\n          state = _ref.state;\n      console.log('Search newSearch');\n      commit('resetOffset');\n      dispatch('getResults');\n    },\n    getResults: function getResults(_ref2) {\n      var dispatch = _ref2.dispatch,\n          commit = _ref2.commit,\n          state = _ref2.state;\n      var params = {\n        keys: state.keys,\n        term: state.term,\n        offset: state.offset,\n        limit: state.limit // console.log('Search getResults params', params);\n\n      };\n\n      var q = _querystring.default.stringify(params);\n\n      return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref3) {\n        var data = _ref3.data;\n        console.log('search MA getresults data', data);\n        commit('setItems', data.items);\n      }).catch(function (error) {\n        console.warn('Issue with getResults', error);\n        Promise.reject(error);\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/search.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  namespaced: true,\n  // initial state\n  state: {\n    keys: \"\",\n    term: \"\",\n    items: [],\n    offset: 0,\n    limit: 15,\n    infos: null,\n    count: 0\n  },\n  // getters\n  getters: {},\n  // mutations\n  mutations: {\n    setItems: function setItems(state, items) {\n      state.items = items;\n    },\n    setKeys: function setKeys(state, keys) {\n      state.keys = keys;\n    },\n    setTerm: function setTerm(state, term) {\n      state.term = term;\n    },\n    setInfos: function setInfos(state, infos) {\n      state.infos = infos;\n    },\n    setCount: function setCount(state, count) {\n      state.count = count;\n    },\n    resetOffset: function resetOffset(state) {\n      state.offset = 0;\n    },\n    incrementOffset: function incrementOffset(state) {\n      state.offset += state.limit;\n    }\n  },\n  // actions\n  actions: {\n    newSearch: function newSearch(_ref) {\n      var dispatch = _ref.dispatch,\n          commit = _ref.commit,\n          state = _ref.state;\n      console.log('Search newSearch');\n      commit('resetOffset');\n      dispatch('getResults');\n    },\n    getResults: function getResults(_ref2) {\n      var dispatch = _ref2.dispatch,\n          commit = _ref2.commit,\n          state = _ref2.state;\n      var params = {\n        keys: state.keys,\n        term: state.term,\n        offset: state.offset,\n        limit: state.limit // console.log('Search getResults params', params);\n\n      };\n\n      var q = _querystring.default.stringify(params);\n\n      return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref3) {\n        var data = _ref3.data;\n        console.log('search MA getresults data', data);\n        commit('setItems', data.items);\n        commit('setInfos', data.infos);\n        commit('setCount', data.count);\n      }).catch(function (error) {\n        console.warn('Issue with getResults', error);\n        Promise.reject(error);\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/search.js?");
 
 /***/ }),
 

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

@@ -1,6 +1,9 @@
 <template>
   <div id="Base">
-    <h1>Base</h1>
+    <h1 class="page-title">{{ pagetitle }}</h1>
+    <aside class="search-info">
+      {{ searchinfos }}
+    </aside>
     <div class="results">
       <ul>
         <li v-for="item in items" v-bind:key="item.nid">
@@ -20,9 +23,16 @@ import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Base",
+  data() {
+    return {
+      pagetitle:"Base",
+      // searchinfos: null
+    }
+  },
   computed: {
     ...mapState({
-      items: state => state.Search.items
+      items: state => state.Search.items,
+      searchinfos: state =>  state.Search.infos
     })
   },
   methods: {
@@ -37,6 +47,7 @@ export default {
     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()
     }
   },
@@ -45,6 +56,7 @@ export default {
     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()
   },

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -11,7 +11,9 @@ export default {
     term: "",
     items: [],
     offset: 0,
-    limit: 15
+    limit: 15,
+    infos: null,
+    count: 0
   },
 
   // getters
@@ -28,6 +30,12 @@ export default {
     setTerm (state, term) {
       state.term = term
     },
+    setInfos (state, infos) {
+      state.infos = infos
+    },
+    setCount (state, count) {
+      state.count = count
+    },
     resetOffset(state) {
       state.offset = 0
     },
@@ -56,6 +64,8 @@ export default {
         .then(({ data }) => {
           console.log('search MA getresults data', data)
           commit('setItems', data.items)
+          commit('setInfos', data.infos)
+          commit('setCount', data.count)
         })
         .catch(( error ) => {
             console.warn('Issue with getResults', error)