started advanced search UI

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.21.0",
     "check-password-strength": "^1.0.15",
     "pretty-bytes": "^5.5.0",
+    "slim-select": "^1.27.0",
     "vue": "^2.6.12",
     "vue-autofocus-directive": "^1.0.4",
     "vue-cool-lightbox": "^2.6.9",

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

@@ -1,6 +1,6 @@
 /*
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is not neither made for production nor for readable output files.
+ * This devtool is neither made for production nor for readable output files.
  * It uses "eval()" calls to create a separate source file in the browser devtools.
  * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
  * or disable the default devtool with "devtool: false".
@@ -14,9 +14,6 @@
 /*!*****************************************************************!*\
   !*** ./web/themes/custom/materiotheme/assets/styles/print.scss ***!
   \*****************************************************************/
-/*! namespace exports */
-/*! exports [not provided] [no usage info] */
-/*! runtime requirements: __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/assets/styles/print.scss?");
@@ -25,28 +22,8 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /******/ 	});
 /************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		if(__webpack_module_cache__[moduleId]) {
-/******/ 			return __webpack_module_cache__[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/make namespace object */
@@ -61,9 +38,12 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+/******/ 	
 /******/ 	// startup
-/******/ 	// Load entry module
-/******/ 	__webpack_require__("./web/themes/custom/materiotheme/assets/styles/print.scss");
-/******/ 	// This entry module used 'exports' so it can't be inlined
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./web/themes/custom/materiotheme/assets/styles/print.scss"](0, __webpack_exports__, __webpack_require__);
+/******/ 	
 /******/ })()
 ;

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

@@ -53,6 +53,7 @@ import { mapState } from 'vuex'
 
 // require('theme/assets/styles/main.scss');
 import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
+import 'slim-select/slimselect.min.css'
 import 'theme/assets/styles/main.scss'
 import 'theme/assets/styles/print.scss'
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1,7 +1,8 @@
 
+// @import '~slim-select/scss';
+
 $mdi-font-path: './mdi/fonts/';
 @import './mdi/scss/materialdesignicons';
-
 @import './base/variables';
 @import './base/colors';
 @import './base/reset';
@@ -587,22 +588,12 @@ header[role="banner"]{
       }
 
 			#edit-filters{
-				select.form-select{
-					-webkit-appearance: none;
-				  -moz-appearance: none;
-				  appearance: none;
-					&::-ms-expand {
-						display: none;
+				.ss-main{
+					.ss-single-selected{
+						border-radius: 15px;
 					}
-					display: inline-block;
-					background-color: #e3e3e3;
-					padding:0;
-					border-radius: 10px;
-					font-size: 0.756em;
-					border: none;
-					// background: url(../images/caret-down.svg) no-repeat 98% 64% #bbb;
-					option{
-						width:5em;
+					.ss-content{
+						width:auto;
 					}
 				}
 			}

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -6,6 +6,8 @@ import router from 'vuejs/route'
 
 import { mapState } from 'vuex'
 
+import SlimSelect from 'slim-select'
+
 export default {
   router,
   props: ['form'],
@@ -99,6 +101,30 @@ export default {
     // $input.focus()
     // Catch the jquery ui events for autocmplete widget
     jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
+    // customize the select filters
+    // http://slimselectjs.com/options
+    const selects = this.$el.querySelectorAll('select')
+    selects.forEach((selectElement) => {
+      const placeholder_option = selectElement.querySelector('option:first-child')
+      console.log('placeholder_option', placeholder_option);
+      const placeholder = placeholder_option.innerText
+      placeholder_option.removeAttribute("value")
+      // let attr = document.createAttribute('data-placeholder')
+      // attr.value = true
+      placeholder_option.setAttribute("data-placeholder", true)
+      placeholder_option.innerHTML = ''
+      new SlimSelect({
+        select: selectElement,
+        placeholder: placeholder,
+        // allowDeselect: true
+        allowDeselectOption: true,
+        showSearch: false,
+        closeOnSelect: false,
+        onChange: (info) => {
+          console.log(info)
+        }
+      })
+    })
   },
   render(h) {
     // console.log('searchForm render')

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

@@ -182,7 +182,7 @@ export default {
                 if (state.isAdmin) {
                   window.location.reload(true)
                 }
-                if(state.isAdherent){
+                if (state.isAdherent) {
                   this.$router.push({
                     name: 'base'
                   })