drafted ajax search call

This commit is contained in:
Bachir Soussi Chiadmi 2019-06-01 16:15:08 +02:00
parent d21bd5ef4e
commit 7f65fd79a4
9 changed files with 278 additions and 17 deletions

View File

@ -8,8 +8,8 @@ dependencies:
- taxonomy - taxonomy
- search_api - search_api
config: config:
- field.storage.node.field_famille
- field.storage.node.body - field.storage.node.body
- field.storage.node.field_famille
- field.storage.node.field_tags - field.storage.node.field_tags
- field.storage.taxonomy_term.field_synonyms - field.storage.taxonomy_term.field_synonyms
- field.storage.node.field_thesaurus - field.storage.node.field_thesaurus
@ -52,6 +52,14 @@ field_settings:
dependencies: dependencies:
config: config:
- field.storage.node.field_famille - field.storage.node.field_famille
nid:
label: ID
datasource_id: 'entity:node'
property_path: nid
type: integer
dependencies:
module:
- node
node_grants: node_grants:
label: 'Node access information' label: 'Node access information'
property_path: search_api_node_grants property_path: search_api_node_grants
@ -68,7 +76,7 @@ field_settings:
config: config:
- field.storage.node.body - field.storage.node.body
status: status:
label: null label: status
datasource_id: 'entity:node' datasource_id: 'entity:node'
property_path: status property_path: status
type: boolean type: boolean
@ -101,6 +109,18 @@ field_settings:
- field.storage.taxonomy_term.field_synonyms - field.storage.taxonomy_term.field_synonyms
module: module:
- taxonomy - taxonomy
tag_tid:
label: 'Tags » Taxonomy term » Term ID'
datasource_id: 'entity:node'
property_path: 'field_tags:entity:tid'
type: text
boost: !!float 13
dependencies:
config:
- field.storage.node.field_tags
module:
- taxonomy
- taxonomy
thesaurus_name: thesaurus_name:
label: 'Thesaurus » Taxonomy term » Name' label: 'Thesaurus » Taxonomy term » Name'
datasource_id: 'entity:node' datasource_id: 'entity:node'
@ -125,6 +145,18 @@ field_settings:
- field.storage.taxonomy_term.field_synonyms - field.storage.taxonomy_term.field_synonyms
module: module:
- taxonomy - taxonomy
thesaurus_tid:
label: 'Thesaurus » Taxonomy term » Term ID'
datasource_id: 'entity:node'
property_path: 'field_thesaurus:entity:tid'
type: text
boost: !!float 21
dependencies:
config:
- field.storage.node.field_thesaurus
module:
- taxonomy
- taxonomy
title: title:
label: Title label: Title
datasource_id: 'entity:node' datasource_id: 'entity:node'
@ -135,7 +167,7 @@ field_settings:
module: module:
- node - node
uid: uid:
label: null label: uid
datasource_id: 'entity:node' datasource_id: 'entity:node'
property_path: uid property_path: uid
type: integer type: integer
@ -185,8 +217,10 @@ processor_settings:
- processed - processed
- tag_name - tag_name
- tag_synonyms - tag_synonyms
- tag_tid
- thesaurus_name - thesaurus_name
- thesaurus_synonyms - thesaurus_synonyms
- thesaurus_tid
- title - title
title: true title: true
alt: true alt: true

View File

@ -21,3 +21,18 @@ materio_sapi.search_form:
# _title: 'MaterioSapiSearchForm' # _title: 'MaterioSapiSearchForm'
# requirements: # requirements:
# _access: 'TRUE' # _access: 'TRUE'
materio_sapi.getresults:
path: '/materio_sapi/getresults'
defaults:
_controller: '\Drupal\materio_sapi\Controller\Base::getResults'
_format: json
requirements:
_permission: 'access materio search'
# materio_sapi.base:
# path: '/base/{keys}/{autocomplete}'
# defaults:
# _controller: '\Drupal\materio_sapi\Controller\Base::base'
# requirements:
# _permission: 'access materio search'

View File

@ -0,0 +1,97 @@
<?php
// https://www.qed42.com/blog/autocomplete-drupal-8
// https://www.drupal.org/docs/8/modules/search-api/developer-documentation/executing-a-search-in-code
namespace Drupal\materio_sapi\Controller;
use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Drupal\Component\Utility\Tags;
use Drupal\Component\Utility\Unicode;
use Drupal\search_api\Entity\Index;
// https://drupal.stackexchange.com/questions/225008/programatically-use-search-api
/**
* Defines a route controller for entity autocomplete form elements.
*/
class Base extends ControllerBase {
/**
* Handler for autocomplete request.
*/
public function getResults(Request $request) {
$resp = [
'tes' => 'ok',
'autocomplete' => $request->query->get('autocomplete'),
'keys' => $request->query->get('keys'),
'range' => array(
'offset' => $request->query->get('offset'),
'limit' => $request->query->get('limit'),
),
];
// Get the typed string from the URL, if it exists.
if ($keys = $resp['keys']) {
$typed_string = Tags::explode($keys);
$typed_string = Unicode::strtolower($keys);
\Drupal::logger('materio_sapi')->notice($typed_string);
$index = Index::load('database');
$query = $index->query();
// Change the parse mode for the search.
$parse_mode = \Drupal::service('plugin.manager.search_api.parse_mode')
->createInstance('direct');
$parse_mode->setConjunction('OR');
$query->setParseMode($parse_mode);
// Set fulltext search keywords and fields.
$query->keys($typed_string);
// $query->setFulltextFields(['name']);
// Set additional conditions.
// $query->addCondition('status', 1)
// ->addCondition('author', 1, '<>');
// Restrict the search to specific languages.
// $query->setLanguages(['de', 'it']);
// Do paging.
$query->range($resp['range']['offset'], $resp['range']['limit']);
// Add sorting.
$query->sort('search_api_relevance', 'DESC');
// Set one or more tags for the query.
// @see hook_search_api_query_TAG_alter()
// @see hook_search_api_results_TAG_alter()
$query->addTag('materio_sapi_search');
$results = $query->execute();
$resultitems = $results->getResultItems();
$resp['count'] = $results->getResultCount();
$resp['resultitems'] = array_keys($resultitems);
$resp['options'] = $query->getOptions();
$items = [];
foreach ($results as $result) {
// \Drupal::logger('materio_sapi')->notice(print_r($result->getField('tid')->getValues(),true));
// \Drupal::logger('materio_sapi')->notice(print_r($result->getField('name')->getValues(),true));
$nid = $result->getField('nid')->getValues()[0];
$title = $result->getField('title')->getValues()[0]->getText();
$items[] = [
'nid' => $nid,
'title' => $title,
];
}
$resp['items'] = $items;
}
return new JsonResponse($resp);
}
}

View File

@ -30,12 +30,19 @@ class MaterioSapiSearchForm extends FormBase {
'#weight' => '0', '#weight' => '0',
'#attributes' => [ '#attributes' => [
"placeholder" => $this->t('Search'), "placeholder" => $this->t('Search'),
"@keyup" => "keyup", // "@keyup" => "keyup",
"@keyup.enter" => "submit", "@keyup.enter" => "submit",
"v-model" => "typed" "v-model" => "keys",
// "v-on:select" => "typed",
], ],
'#autocomplete_route_name' => 'materio_sapi.search_autocomplete', '#autocomplete_route_name' => 'materio_sapi.search_autocomplete',
];
$form['searchautocomplete'] = [
'#type' => 'hidden',
'#attributes' => [
"v-model" => "autocomplete"
],
]; ];
$form['submit'] = [ $form['submit'] = [
'#type' => 'submit', '#type' => 'submit',

View File

@ -393,7 +393,7 @@ eval("\n\nvar bind = __webpack_require__(/*! ./helpers/bind */ \"./node_modules/
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\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 props: ['title', 'block'],\n data: function data() {\n return {\n template: null,\n mail: '',\n password: ''\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)(['User'])),\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin'\n }), {\n login: function login() {\n this.userLogin({\n mail: this.mail,\n pass: this.password\n });\n },\n request_password: function request_password() {\n console.log('request_password');\n },\n create_account: function create_account() {\n console.log('create_account');\n }\n }),\n beforeMount: function beforeMount() {\n var _this = this;\n\n console.log('LoginBlock beforeMount', this._props.block);\n\n if (this._props.block) {\n // console.log('LoginBlock beforeMount if this._props.block ok');\n this.template = _vue.default.compile(this._props.block);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n mounted: function mounted() {\n // console.log('LoginBlock mounted');\n Drupal.attachBehaviors(this.$el);\n },\n render: function render(h) {\n // console.log('LoginBlock render');\n if (!this.template) {\n // console.log('LoginBlock render NAN');\n return h('span', 'Loading ...');\n } else {\n // console.log('LoginBlock render template');\n return this.template.render.call(this);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.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 _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\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 props: ['title', 'block'],\n data: function data() {\n return {\n template: null,\n mail: '',\n password: ''\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)(['User'])),\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin'\n }), {\n login: function login() {\n this.userLogin({\n mail: this.mail,\n pass: this.password\n });\n },\n request_password: function request_password() {\n console.log('request_password');\n },\n create_account: function create_account() {\n console.log('create_account');\n }\n }),\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('LoginBlock beforeMount', this._props.block);\n if (this._props.block) {\n // console.log('LoginBlock beforeMount if this._props.block ok');\n this.template = _vue.default.compile(this._props.block);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n mounted: function mounted() {\n // console.log('LoginBlock mounted');\n Drupal.attachBehaviors(this.$el);\n },\n render: function render(h) {\n // console.log('LoginBlock render');\n if (!this.template) {\n // console.log('LoginBlock render NAN');\n return h('span', 'Loading ...');\n } else {\n // console.log('LoginBlock render template');\n return this.template.render.call(this);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }), /***/ }),
@ -441,7 +441,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n props: ['form'],\n data: function data() {\n return {\n template: null,\n typed: \"\"\n };\n },\n methods: {\n keyup: function keyup() {\n console.log(\"search typed\", this.typed);\n },\n submit: function submit() {\n console.log(\"search clicked\");\n }\n },\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('SearchForm beforeMount');\n if (this._props.form) {\n // console.log('SearchForm beforeMount if this._props.form ok');\n this.template = _vue.default.compile(this._props.form); // https://github.com/vuejs/vue/issues/9911\n\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n mounted: function mounted() {\n // console.log('SearchForm mounted');\n Drupal.attachBehaviors(this.$el);\n },\n render: function render(h) {\n // console.log('searchForm render');\n if (!this.template) {\n return h('span', 'Loading ...');\n } else {\n return this.template.render.call(this);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.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 _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\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 props: ['form'],\n data: function data() {\n return {\n template: null // keys: \"\",\n // autocomplete: \"\"\n\n };\n },\n computed: {\n // ...mapState(['Search'])\n // ...mapState({\n // // keys: state => state.Search.keys,\n // autocomplete: state => state.Search.autocomplete\n // }),\n keys: {\n get: function get() {\n return this.$store.state.Search.keys;\n },\n set: function set(value) {\n this.$store.commit('Search/setKeys', value);\n }\n },\n autocomplete: {\n get: function get() {\n return this.$store.state.Search.autocomplete;\n },\n set: function set(value) {\n this.$store.commit('Search/setAutocomplete', value);\n }\n }\n },\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n getResults: 'Search/getResults'\n }), {\n submit: function submit() {\n console.log(\"search clicked\", this.keys, this.autocomplete);\n this.getResults();\n },\n onAutoCompleteSelect: function onAutoCompleteSelect(event, ui) {\n event.preventDefault(); // console.log('autoCompleteSelect', event, ui);\n\n this.keys = ui.item.label;\n this.autocomplete = ui.item.value;\n }\n }),\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('SearchForm beforeMount');\n if (this._props.form) {\n // console.log('SearchForm beforeMount if this._props.form ok');\n this.template = _vue.default.compile(this._props.form); // https://github.com/vuejs/vue/issues/9911\n\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n watch: {\n keys: function keys() {\n console.log('keys changed', this.keys);\n }\n },\n mounted: function mounted() {\n // console.log('SearchForm mounted');\n Drupal.attachBehaviors(this.$el); // Catch the jquery ui events for autocmplete widget\n\n jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);\n },\n render: function render(h) {\n // console.log('searchForm render');\n if (!this.template) {\n return h('span', 'Loading ...');\n } else {\n return this.template.render.call(this);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }), /***/ }),
@ -1005,7 +1005,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vuex = _interopRequireDefault(__webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\"));\n\nvar _user = _interopRequireDefault(__webpack_require__(/*! ./modules/user */ \"./web/themes/custom/materiotheme/vuejs/store/modules/user.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart\n_vue.default.use(_vuex.default);\n\nvar _default = new _vuex.default.Store({\n modules: {\n User: _user.default\n }\n});\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/index.js?"); eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vuex = _interopRequireDefault(__webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\"));\n\nvar _user = _interopRequireDefault(__webpack_require__(/*! ./modules/user */ \"./web/themes/custom/materiotheme/vuejs/store/modules/user.js\"));\n\nvar _search = _interopRequireDefault(__webpack_require__(/*! ./modules/search */ \"./web/themes/custom/materiotheme/vuejs/store/modules/search.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart\n_vue.default.use(_vuex.default);\n\nvar _default = new _vuex.default.Store({\n modules: {\n User: _user.default,\n Search: _search.default\n }\n});\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/index.js?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/store/modules/search.js":
/*!**********************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/store/modules/search.js ***!
\**********************************************************************/
/*! no static exports found */
/***/ (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 autocomplete: \"\",\n results: {}\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setResults: function setResults(state, data) {\n state.results = data.results;\n },\n setKeys: function setKeys(state, keys) {\n state.keys = keys;\n },\n setAutocomplete: function setAutocomplete(state, autocomplete) {\n state.autocomplete = autocomplete;\n }\n },\n // actions\n actions: {\n getResults: function getResults(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n var params = {\n keys: state.keys,\n autocomplete: state.autocomplete,\n offset: 0,\n limit: 25\n };\n console.log('Search getResults params', params);\n\n var q = _querystring.default.stringify(params);\n\n return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref2) {\n var data = _ref2.data;\n console.log('search MA getresults data', data);\n commit('setResults', data);\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?");
/***/ }), /***/ }),

View File

@ -33,7 +33,7 @@ export default {
} }
}, },
beforeMount() { beforeMount() {
console.log('LoginBlock beforeMount', this._props.block); // console.log('LoginBlock beforeMount', this._props.block);
if(this._props.block){ if(this._props.block){
// console.log('LoginBlock beforeMount if this._props.block ok'); // console.log('LoginBlock beforeMount if this._props.block ok');
this.template = Vue.compile(this._props.block) this.template = Vue.compile(this._props.block)

View File

@ -2,20 +2,54 @@
import Vue from 'vue' import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
export default { export default {
props: ['form'], props: ['form'],
data() { data() {
return { return {
template: null, template: null
typed: "" // keys: "",
// autocomplete: ""
} }
}, },
methods: { computed: {
keyup() { // ...mapState(['Search'])
console.log("search typed", this.typed); // ...mapState({
// // keys: state => state.Search.keys,
// autocomplete: state => state.Search.autocomplete
// }),
keys: {
get(){
return this.$store.state.Search.keys
},
set(value){
this.$store.commit('Search/setKeys', value)
}
}, },
autocomplete: {
get(){
return this.$store.state.Search.autocomplete
},
set(value){
this.$store.commit('Search/setAutocomplete', value)
}
}
},
methods: {
...mapActions({
getResults: 'Search/getResults'
}),
submit() { submit() {
console.log("search clicked"); console.log("search clicked", this.keys, this.autocomplete);
this.getResults();
},
onAutoCompleteSelect(event, ui){
event.preventDefault();
// console.log('autoCompleteSelect', event, ui);
this.keys = ui.item.label
this.autocomplete = ui.item.value
} }
}, },
beforeMount() { beforeMount() {
@ -29,9 +63,16 @@ export default {
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn))); this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
} }
}, },
watch: {
keys(){
console.log('keys changed', this.keys);
}
},
mounted(){ mounted(){
// console.log('SearchForm mounted'); // console.log('SearchForm mounted');
Drupal.attachBehaviors(this.$el); Drupal.attachBehaviors(this.$el);
// Catch the jquery ui events for autocmplete widget
jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
}, },
render(h) { render(h) {
// console.log('searchForm render'); // console.log('searchForm render');

View File

@ -1,12 +1,14 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import User from './modules/user' import User from './modules/user'
import Search from './modules/search'
// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
User User,
Search
} }
}) })

View File

@ -0,0 +1,53 @@
import { JSONAPI } from 'vuejs/api/json-axios'
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring'
export default {
namespaced: true,
// initial state
state : {
keys: "",
autocomplete: "",
results: {}
},
// getters
getters : {},
// mutations
mutations : {
setResults (state, data) {
state.results = data.results
},
setKeys (state, keys) {
state.keys = keys
},
setAutocomplete (state, autocomplete) {
state.autocomplete = autocomplete
}
},
// actions
actions : {
getResults ({ dispatch, commit, state }) {
let params = {
keys: state.keys,
autocomplete: state.autocomplete,
offset:0,
limit: 25
}
console.log('Search getResults params', params);
let q = qs.stringify(params)
return MA.get(`/materio_sapi/getresults?`+q)
.then(({ data }) => {
console.log('search MA getresults data', data)
commit('setResults', data)
})
.catch(( error ) => {
console.warn('Issue with getResults', error)
Promise.reject(error)
})
}
}
}