mirror of https://github.com/4xmen/xshop.git
complete meta filter
parent
209541fb93
commit
5956918dad
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div id="meta-filter">
|
||||
<form action="#product-list-view" id="filter-form" ref="frm">
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" value="1" type="checkbox" v-model="only" role="switch"
|
||||
id="flexSwitchCheckDefault"
|
||||
name="only">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault">
|
||||
<!-- WIP translate -->
|
||||
Only available
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
Sort by
|
||||
</label>
|
||||
<select name="sort" v-model="sort" class="form-control">
|
||||
<option value="">
|
||||
Newest
|
||||
</option>
|
||||
<option value="oldest">
|
||||
Oldest
|
||||
</option>
|
||||
<option value="cheap">
|
||||
Cheaper
|
||||
</option>
|
||||
<option value="expensive">
|
||||
More expensive
|
||||
</option>
|
||||
<option value="fav">
|
||||
Favorite
|
||||
</option>
|
||||
<option value="sale">
|
||||
More sale
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
<template v-for="(prop,i) in props">
|
||||
<li v-if="prop.searchable" :key="i">
|
||||
<label :for="`prop-${i}`" v-if="prop.type != 'checkbox'">
|
||||
{{ prop.label }}
|
||||
</label>
|
||||
<template v-if="prop.type == 'checkbox'">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" :name="`meta[${prop.name}]`" type="checkbox"
|
||||
role="switch"
|
||||
:id="`prop-${i}`">
|
||||
<label class="form-check-label" :for="`prop-${i}`">{{ prop.label }}</label>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="prop.type == 'number'">
|
||||
<input type="number" :id="prop.name" class="form-control" :name="`meta[${prop.name}]`">
|
||||
</template>
|
||||
<template v-if="prop.type == 'color'">
|
||||
<select :id="prop.name" class="form-control color" :name="`meta[${prop.name}]`">
|
||||
<option value=""> All</option>
|
||||
<option v-for="op in prop.optionList" :style="`background: ${op.value} ;`"
|
||||
:value="op.value"> {{ op.title }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
<template v-if="prop.type == 'select'">
|
||||
<select :id="prop.name" class="form-control color" :name="`meta[${prop.name}]`">
|
||||
<option value=""> All</option>
|
||||
<option v-for="op in prop.optionList" :value="op.value"> {{ op.title }}</option>
|
||||
</select>
|
||||
</template>
|
||||
<template v-if="prop.type == 'multi' || prop.type == 'singemulti'">
|
||||
<searchable-multi-select2 :ref="prop.name" :items="prop.optionList" value-field="value"
|
||||
:xname="`meta[${prop.name}]`"
|
||||
v-model="metaz[prop.name]"
|
||||
></searchable-multi-select2>
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<button type="submit" class="btn btn-outline-primary btn-sm w-100">
|
||||
Apply filter
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import searchableMultiSelect2 from "./SearchableMultiSelect2.vue";
|
||||
|
||||
|
||||
function extractTextBetweenBrackets(input) {
|
||||
const regex = /\[(.*?)\]/g; // Regular expression to match text between []
|
||||
const matches = [];
|
||||
let match;
|
||||
|
||||
// Loop through all matches found in the input string
|
||||
while ((match = regex.exec(input)) !== null) {
|
||||
matches.push(match[1]); // Push the captured group into the matches array
|
||||
}
|
||||
|
||||
try {
|
||||
return matches[0]; // Return an array of matches
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getUrlVars() {
|
||||
try {
|
||||
const queryString = window.location.href.split('?')[1]?.split('#')[0];
|
||||
if (!queryString) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const pairs = queryString.split('&');
|
||||
const dict = {};
|
||||
|
||||
pairs.forEach(pair => {
|
||||
const [key, value] = pair.split('=');
|
||||
// Decode the key and value, handling cases where the value is undefined
|
||||
dict[decodeURIComponent(key)] = value !== undefined ? decodeURIComponent(value) : '';
|
||||
});
|
||||
|
||||
return dict;
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "meta-filter",
|
||||
components: {searchableMultiSelect2},
|
||||
data: () => {
|
||||
return {
|
||||
inited: false,
|
||||
only: false,
|
||||
sort: '',
|
||||
props: [],
|
||||
metaz: {},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
category: {
|
||||
default: null,
|
||||
},
|
||||
propsApiLink: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
// get props from category
|
||||
if (this.category != null) {
|
||||
try {
|
||||
const url = this.propsApiLink + this.category;
|
||||
let resp = await axios.get(url);
|
||||
|
||||
|
||||
// initial array multi select v-model
|
||||
for( const prop of resp.data.data) {
|
||||
if (prop.type == 'multi' || prop.type == 'singemulti'){
|
||||
this.metaz[prop.name] = [];
|
||||
}
|
||||
}
|
||||
|
||||
// set props after do it
|
||||
this.props = resp.data.data;
|
||||
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// set def filter value by get query
|
||||
let gets = getUrlVars();
|
||||
for (const get in gets) {
|
||||
if (typeof (this[get]) == 'boolean') {
|
||||
if (gets[get] == '1') {
|
||||
this[get] = true;
|
||||
}
|
||||
} else {
|
||||
|
||||
this[get] = gets[get];
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// for (const p of this.props) {
|
||||
// if (this[p.name] != undefined) {
|
||||
// this.name[p.name] = this[p.name];
|
||||
// }
|
||||
// }
|
||||
setTimeout(() => {
|
||||
this.inited = true;
|
||||
let gets = getUrlVars();
|
||||
|
||||
// set default values dynamic filters
|
||||
for( const get in gets) {
|
||||
if (gets[get] == 'on'){
|
||||
document.querySelector(`[name="${get}"]`).checked = true;
|
||||
}else{
|
||||
try {
|
||||
const val = JSON.parse(gets[get]);
|
||||
if (typeof(val) == 'object'){
|
||||
const k = extractTextBetweenBrackets(get);
|
||||
if (k != null){
|
||||
this.metaz[k] = val;
|
||||
// console.log(this.$refs[k][0],'xx');
|
||||
this.$refs[k][0].val = val;
|
||||
}
|
||||
}else{
|
||||
document.querySelector(`[name="${get}"]`).value = gets[get];
|
||||
}
|
||||
} catch(e) {
|
||||
document.querySelector(`[name="${get}"]`).value = gets[get];
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}, 300);
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
apply() {
|
||||
this.$refs.frm.submit();
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
only() {
|
||||
if (this.inited) {
|
||||
this.apply();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#meta-filter {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: .5rem;
|
||||
background: #ffffff44;
|
||||
margin-bottom: 4px;
|
||||
|
||||
label {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div id="searchable-select" ref="main">
|
||||
<div id="ss-modal" @click.self="hideModal" v-if="modalShow">
|
||||
<div id="ss-selector">
|
||||
<div class="p-2">
|
||||
<input type="text" class="form-control search" v-model="q" :placeholder="xtitle">
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<ul id="vue-search-list" class="list-group list-group-flush">
|
||||
<template v-for="(item,i) in items">
|
||||
<li
|
||||
tabindex="-1"
|
||||
v-if="finder(item[titleField])"
|
||||
@click="selecting(item[valueField])"
|
||||
:class="`list-group-item ${val.indexOf(item[valueField]) !== -1?'selected':''} ${focsed == i?'focused':''}`">
|
||||
<template v-if="xlang == null">
|
||||
{{ item[titleField] }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[titleField][xlang] }}
|
||||
</template>
|
||||
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend" id="vue-search-btn">
|
||||
<button class="input-group-text" id="basic-addon1" type="button" @click="showModal">
|
||||
<i class="ri-check-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-control" id="vue-lst" @click.self="showModal">
|
||||
<template v-for="item in items">
|
||||
<span class="tag-select" v-if=" val.indexOf(item[valueField]) !== -1">
|
||||
<template v-if="xlang == null">
|
||||
{{ item[titleField] }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[titleField][xlang] }}
|
||||
</template>
|
||||
<i class="ri-close-line" @click="rem(item[valueField])"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" :name="xname" :value="JSON.stringify(val)">
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "searchable-select",
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
modalShow: false, // modal handle
|
||||
q: '', // search query
|
||||
val: [],
|
||||
focsed: -1,
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
props: {
|
||||
xlang: {
|
||||
default: null
|
||||
},
|
||||
modelValue: {
|
||||
default: 'nop',
|
||||
},
|
||||
items: {
|
||||
required: true,
|
||||
default: [],
|
||||
type: Array,
|
||||
},
|
||||
valueField: {
|
||||
default: 'id',
|
||||
type: String,
|
||||
},
|
||||
titleField: {
|
||||
default: 'title',
|
||||
type: String,
|
||||
},
|
||||
xname: {
|
||||
default: "",
|
||||
type: String,
|
||||
},
|
||||
xtitle: {
|
||||
default: "Please select",
|
||||
type: String,
|
||||
},
|
||||
xvalue: {
|
||||
default: [],
|
||||
type: Array,
|
||||
},
|
||||
xid: {
|
||||
default: "",
|
||||
type: String,
|
||||
},
|
||||
customClass: {
|
||||
default: "",
|
||||
type: String,
|
||||
},
|
||||
err: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
onSelect: {
|
||||
default: function () {
|
||||
|
||||
},
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.modelValue != 'nop') {
|
||||
this.val = this.modelValue;
|
||||
} else {
|
||||
this.val = this.xvalue;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getClass: function () {
|
||||
if (this.err == true || (typeof this.err == 'String' && this.err.trim() == '1')) {
|
||||
return 'form-control is-invalid ' + this.customClass;
|
||||
}
|
||||
return 'form-control ' + this.customClass;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
finder(term = '') {
|
||||
//(q != '' && item[titleField].indexOf(q) != -1) || (q == '')
|
||||
if (this.q == '' || term == '') {
|
||||
return true;
|
||||
}
|
||||
if (typeof term == 'string' && term.toLocaleLowerCase().indexOf(this.q.toLocaleLowerCase()) != -1) {
|
||||
return true
|
||||
} else if (typeof term == 'object') {
|
||||
try {
|
||||
for (const t in term) {
|
||||
if (term[t].toLowerCase().indexOf(this.q.toLocaleLowerCase()) != -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
console.log(e.message);
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
rem(i) {
|
||||
this.val.splice(this.val.indexOf(i), 1);
|
||||
this.onSelect(this.val, i);
|
||||
},
|
||||
selecting(i) {
|
||||
if (this.val.indexOf(i) == -1) {
|
||||
this.val.push(i);
|
||||
} else {
|
||||
this.val.splice(this.val.indexOf(i), 1);
|
||||
}
|
||||
this.onSelect(this.val, i);
|
||||
},
|
||||
select() {
|
||||
this.onSelect(this.val);
|
||||
},
|
||||
hideModal: function () {
|
||||
this.modalShow = false;
|
||||
document.removeEventListener('keydown', this.keyHandle);
|
||||
},
|
||||
showModal() {
|
||||
this.modalShow = true;
|
||||
setTimeout(() => {
|
||||
if (this.$refs.main.querySelector('.search') != null) {
|
||||
this.$refs.main.querySelector('.search').focus();
|
||||
}
|
||||
}, 100);
|
||||
// this.$refs.main.querySelector('.search').focus();
|
||||
document.addEventListener('keydown', this.keyHandle);
|
||||
},
|
||||
keyHandle(e) {
|
||||
if (e.key == 'Escape') {
|
||||
this.hideModal();
|
||||
}
|
||||
try {
|
||||
if (this.$refs.main.querySelector('.search') == document.activeElement) {
|
||||
if (e.code == 'Tab') {
|
||||
e.preventDefault();
|
||||
this.$refs.main.querySelector('.search').blur();
|
||||
this.focsed = 0;
|
||||
}
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
if (e.key == 'ArrowDown') {
|
||||
this.focsed++;
|
||||
if (this.focsed > this.items.length - 1) {
|
||||
this.focsed = this.items.length - 1;
|
||||
}
|
||||
} else if (e.key == 'ArrowUp') {
|
||||
this.focsed--;
|
||||
if (this.focsed < -1) {
|
||||
this.focsed = -1;
|
||||
}
|
||||
} else if (e.key == ' ' || e.key == 'Enter') {
|
||||
this.selecting(this.items[this.focsed][this.valueField]);
|
||||
}
|
||||
return false;
|
||||
// console.log(e.key);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
val(newValue) {
|
||||
if (this.modelValue != 'nop') {
|
||||
this.$emit('update:modelValue', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#searchable-select {
|
||||
|
||||
}
|
||||
|
||||
#vue-search-btn {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#vue-search-btn:hover .input-group-text {
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
|
||||
#ss-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background: #ffffff33;
|
||||
backdrop-filter: blur(4px);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#ss-selector {
|
||||
height: 60vh;
|
||||
border-radius: 7px;
|
||||
min-width: 350px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
margin: 20vh auto;
|
||||
background: var(--xshop-background);
|
||||
box-shadow: 0 0 4px gray;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#vue-search-list {
|
||||
height: calc(60vh - 90px);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#vue-search-list .list-group-item:hover, #vue-search-list .list-group-item.focused {
|
||||
background: var(--xshop-primary);
|
||||
}
|
||||
|
||||
#vue-search-list .list-group-item.selected {
|
||||
background: var(--xshop-secondary);
|
||||
color: white;;
|
||||
}
|
||||
|
||||
#vue-search-list .list-group-item.selected:hover, #vue-search-list .list-group-item.selected.focused {
|
||||
background: var(--xshop-primary) !important;
|
||||
}
|
||||
|
||||
#vue-lst {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tag-select {
|
||||
display: inline-block;
|
||||
padding: 0 4px 0 20px;
|
||||
margin-right: 5px;
|
||||
background: #282c34dd;
|
||||
color: white;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tag-select i {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.tag-select i:hover {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<div id="meta-filter">
|
||||
<form action="#product-list-view" id="filter-form" ref="frm">
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" value="1" type="checkbox" v-model="only" role="switch" id="flexSwitchCheckDefault"
|
||||
name="only">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault">
|
||||
<!-- WIP translate -->
|
||||
Only available
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
Sort by
|
||||
</label>
|
||||
<select name="sort" v-model="sort" class="form-control">
|
||||
<option value="">
|
||||
Newest
|
||||
</option>
|
||||
<option value="oldest">
|
||||
Oldest
|
||||
</option>
|
||||
<option value="cheap">
|
||||
Cheaper
|
||||
</option>
|
||||
<option value="expensive">
|
||||
More expensive
|
||||
</option>
|
||||
<option value="fav">
|
||||
Favorite
|
||||
</option>
|
||||
<option value="sale">
|
||||
More sale
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
<button type="submit" class="btn btn-outline-primary btn-sm w-100">
|
||||
Apply filter
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
function getUrlVars()
|
||||
{
|
||||
var foo = window.location.href.split('?')[1].split('#')[0].split('&');
|
||||
var dict = {};
|
||||
var elem = [];
|
||||
for (var i = foo.length - 1; i >= 0; i--) {
|
||||
elem = foo[i].split('=');
|
||||
dict[elem[0]] = elem[1];
|
||||
}
|
||||
return dict;
|
||||
}
|
||||
export default {
|
||||
name: "meta-filter",
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
inited: false,
|
||||
only: false,
|
||||
sort: '',
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
let gets = getUrlVars();
|
||||
console.log(gets);
|
||||
for( const get in gets) {
|
||||
if (typeof(this[get]) == 'boolean'){
|
||||
if (gets[get] == '1'){
|
||||
this[get] = true;
|
||||
}
|
||||
}else{
|
||||
|
||||
this[get] = gets[get];
|
||||
}
|
||||
}
|
||||
|
||||
console.log(this.only);
|
||||
setTimeout( () => {
|
||||
this.inited = true;
|
||||
},100);
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
apply() {
|
||||
this.$refs.frm.submit();
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
only(){
|
||||
if (this.inited){
|
||||
this.apply();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#meta-filter {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: .5rem;
|
||||
background: #ffffff44;
|
||||
margin-bottom: 4px;
|
||||
|
||||
label {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue