started advanced search UI

This commit is contained in:
Bachir Soussi Chiadmi 2021-04-02 16:35:29 +02:00
parent 1851c84ea5
commit fd8237037a
9 changed files with 3879 additions and 23501 deletions

8780
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
/* /*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * 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. * 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/) * 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". * or disable the default devtool with "devtool: false".
@ -14,9 +14,6 @@
/*!*****************************************************************!*\ /*!*****************************************************************!*\
!*** ./web/themes/custom/materiotheme/assets/styles/print.scss ***! !*** ./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__) => { /***/ ((__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?"); 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 /******/ // The require scope
/******/ var __webpack_module_cache__ = {}; /******/ var __webpack_require__ = {};
/******/
/******/ // 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;
/******/ }
/******/ /******/
/************************************************************************/ /************************************************************************/
/******/ /* webpack/runtime/make namespace object */ /******/ /* webpack/runtime/make namespace object */
@ -61,9 +38,12 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
/******/ })(); /******/ })();
/******/ /******/
/************************************************************************/ /************************************************************************/
/******/
/******/ // startup /******/ // startup
/******/ // Load entry module /******/ // Load entry module and return exports
/******/ __webpack_require__("./web/themes/custom/materiotheme/assets/styles/print.scss"); /******/ // This entry module can't be inlined because the eval devtool is used.
/******/ // This entry module used 'exports' so it can't be inlined /******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./web/themes/custom/materiotheme/assets/styles/print.scss"](0, __webpack_exports__, __webpack_require__);
/******/
/******/ })() /******/ })()
; ;

View File

@ -53,6 +53,7 @@ import { mapState } from 'vuex'
// require('theme/assets/styles/main.scss'); // require('theme/assets/styles/main.scss');
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css' 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/main.scss'
import 'theme/assets/styles/print.scss' import 'theme/assets/styles/print.scss'

View File

@ -1,7 +1,8 @@
// @import '~slim-select/scss';
$mdi-font-path: './mdi/fonts/'; $mdi-font-path: './mdi/fonts/';
@import './mdi/scss/materialdesignicons'; @import './mdi/scss/materialdesignicons';
@import './base/variables'; @import './base/variables';
@import './base/colors'; @import './base/colors';
@import './base/reset'; @import './base/reset';
@ -587,22 +588,12 @@ header[role="banner"]{
} }
#edit-filters{ #edit-filters{
select.form-select{ .ss-main{
-webkit-appearance: none; .ss-single-selected{
-moz-appearance: none; border-radius: 15px;
appearance: none;
&::-ms-expand {
display: none;
} }
display: inline-block; .ss-content{
background-color: #e3e3e3; width:auto;
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;
} }
} }
} }

View File

@ -6,6 +6,8 @@ import router from 'vuejs/route'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import SlimSelect from 'slim-select'
export default { export default {
router, router,
props: ['form'], props: ['form'],
@ -99,6 +101,30 @@ export default {
// $input.focus() // $input.focus()
// Catch the jquery ui events for autocmplete widget // Catch the jquery ui events for autocmplete widget
jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect); 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) { render(h) {
// console.log('searchForm render') // console.log('searchForm render')

View File

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