mirror of https://github.com/4xmen/xshop.git
complete meta filter
parent
f45ac25f9a
commit
20d5fde215
@ -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