Finder columns view mode for modal filter checkbox (issue #83)
This commit is contained in:
weryques
parent
6d41c1a90a
commit
198a777d19
|
|
@ -2934,11 +2934,6 @@
|
|||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"dom-walk": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
|
||||
"integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
|
||||
},
|
||||
"domain-browser": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||
|
|
@ -3876,24 +3871,6 @@
|
|||
"pinkie-promise": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"finderjs": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/finderjs/-/finderjs-1.2.1.tgz",
|
||||
"integrity": "sha512-xzGJHGDELnut+4z44Y0gS/6QIEFIJ3LQVjOsVj8SpoMgKp4Da/TvBOxavUnPd6Ypo76HVxrZyxBaVPT7LDEHXA==",
|
||||
"requires": {
|
||||
"eventemitter3": "^2.0.3",
|
||||
"global": "^4.3.0",
|
||||
"x-is-array": "^0.1.0",
|
||||
"xtend": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"eventemitter3": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
||||
}
|
||||
}
|
||||
},
|
||||
"flat-cache": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz",
|
||||
|
|
@ -4715,22 +4692,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"global": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
|
||||
"integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
|
||||
"requires": {
|
||||
"min-document": "^2.19.0",
|
||||
"process": "~0.5.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"process": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
|
||||
"integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
|
||||
}
|
||||
}
|
||||
},
|
||||
"global-dirs": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
|
||||
|
|
@ -6279,14 +6240,6 @@
|
|||
"integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=",
|
||||
"dev": true
|
||||
},
|
||||
"min-document": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
|
||||
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
|
||||
"requires": {
|
||||
"dom-walk": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"minimalistic-assert": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
|
||||
|
|
@ -10036,11 +9989,6 @@
|
|||
"mkdirp": "^0.5.1"
|
||||
}
|
||||
},
|
||||
"x-is-array": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/x-is-array/-/x-is-array-0.1.0.tgz",
|
||||
"integrity": "sha1-3lIBcdR7P0FvVYfWKbidJrEtwp0="
|
||||
},
|
||||
"xregexp": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
|
||||
|
|
@ -10050,7 +9998,8 @@
|
|||
"xtend": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
|
||||
"integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
|
||||
"integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
|
||||
"dev": true
|
||||
},
|
||||
"y18n": {
|
||||
"version": "3.2.1",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
"axios": "^0.18.0",
|
||||
"buefy": "^0.6.6",
|
||||
"bulma": "^0.7.1",
|
||||
"finderjs": "^1.2.1",
|
||||
"mdi": "^2.2.43",
|
||||
"moment": "^2.22.2",
|
||||
"qs": "^6.5.2",
|
||||
|
|
|
|||
|
|
@ -1,52 +1,84 @@
|
|||
<template>
|
||||
<form action="">
|
||||
<div
|
||||
class="tainacan-modal-content"
|
||||
style="width: auto">
|
||||
<header class="tainacan-modal-title">
|
||||
<h2>{{ this.$i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
|
||||
<hr>
|
||||
</header>
|
||||
<section class="tainacan-form">
|
||||
<section
|
||||
id="filter-modal-checkbox-body"
|
||||
class="modal-card-body">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(optionLevel0, index) in optionsLevel0"
|
||||
:key="index">
|
||||
<b-checkbox
|
||||
v-model="selected"
|
||||
:native-value="optionLevel0.id"
|
||||
>{{ optionLevel0.name }}
|
||||
</b-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
<pre>{{ selected }}</pre>
|
||||
</section>
|
||||
|
||||
<footer class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="$parent.close()">{{ $i18n.get('cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
@click="applyFilter"
|
||||
class="button is-success">{{ $i18n.get('apply') }}</button>
|
||||
</div>
|
||||
</footer>
|
||||
<div
|
||||
class="tainacan-modal-content"
|
||||
style="width: auto">
|
||||
<header class="tainacan-modal-title">
|
||||
<h2>{{ this.$i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
|
||||
<hr>
|
||||
</header>
|
||||
<section class="tainacan-form">
|
||||
<div class="is-clearfix tainacan-checkbox-search-section">
|
||||
<input
|
||||
disabled
|
||||
autocomplete="on"
|
||||
:placeholder="$i18n.get('instruction_search')"
|
||||
class="input">
|
||||
<span class="icon is-right">
|
||||
<i
|
||||
class="mdi mdi-magnify"/>
|
||||
</span>
|
||||
</div>
|
||||
<section
|
||||
class="modal-card-body tainacan-finder-columns-container">
|
||||
<ul
|
||||
class="tainacan-finder-column"
|
||||
v-for="(finderColumn, key) in finderColumns"
|
||||
:key="key">
|
||||
<li
|
||||
class="tainacan-li-checkbox-modal"
|
||||
v-for="(option, index) in finderColumn"
|
||||
:key="index">
|
||||
<b-checkbox
|
||||
v-model="selected"
|
||||
:native-value="option.id">
|
||||
{{ `${option.name} (${option.total_children})` }}
|
||||
</b-checkbox>
|
||||
<a @click="getOptionChildren(option, key)">
|
||||
<b-icon
|
||||
class="is-pulled-right"
|
||||
icon="menu-right"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
@click="getMoreOptions(finderColumn, key)"
|
||||
class="tainacan-show-more">
|
||||
<b-icon
|
||||
size="is-small"
|
||||
icon="chevron-down"/>
|
||||
</div>
|
||||
</li>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isColumnLoading"/>
|
||||
</ul>
|
||||
<!--<pre>{{ selected }}</pre>-->
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<footer class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="$parent.close()">{{ $i18n.get('cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
@click="applyFilter"
|
||||
type="button"
|
||||
class="button is-success">{{ $i18n.get('apply') }}
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import finder from 'finderjs/index.js';
|
||||
import {tainacan as axios} from '../../../js/axios/axios';
|
||||
|
||||
export default {
|
||||
name: 'CheckboxFilterModal',
|
||||
|
|
@ -55,29 +87,101 @@
|
|||
parent: Number,
|
||||
taxonomy_id: Number,
|
||||
taxonomy: String,
|
||||
optionsLevel0: Array,
|
||||
collection_id: Number,
|
||||
metadatum_id: Number,
|
||||
selected: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
finderColumns: [],
|
||||
itemActive: false,
|
||||
isColumnLoading: false,
|
||||
loadingComponent: undefined,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
let container = document.getElementById('filter-modal-checkbox-body');
|
||||
|
||||
this.createFinder(container);
|
||||
this.getOptionChildren();
|
||||
},
|
||||
methods: {
|
||||
prepareDataForFinder(dataVanilla){
|
||||
return true;
|
||||
removeLevelsAfter(key){
|
||||
if(key != undefined){
|
||||
this.finderColumns.splice(key+1);
|
||||
}
|
||||
},
|
||||
getOptionChildren(){
|
||||
return true;
|
||||
},
|
||||
createFinder(container){
|
||||
let F = finder(container, {}, {});
|
||||
createColumn(children) {
|
||||
if (children.length > 0) {
|
||||
let first = undefined;
|
||||
|
||||
console.log(F);
|
||||
for (let f in this.finderColumns) {
|
||||
if (this.finderColumns[f][0].id == children[0].id) {
|
||||
first = f;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (first != undefined) {
|
||||
this.finderColumns.splice(first, 1, children);
|
||||
} else {
|
||||
this.finderColumns.push(children);
|
||||
}
|
||||
}
|
||||
},
|
||||
applyFilter(){
|
||||
this.$emit('input', {
|
||||
appendMore(options, key) {
|
||||
for (let option of options) {
|
||||
this.finderColumns[key].push(option)
|
||||
}
|
||||
},
|
||||
getOptionChildren(option, key) {
|
||||
let parent = 0;
|
||||
|
||||
if (option) {
|
||||
parent = option.id;
|
||||
}
|
||||
|
||||
let query = `?hideempty=0&order=asc&parent=${parent}&number=100`;
|
||||
|
||||
this.isColumnLoading = true;
|
||||
|
||||
axios.get(`/taxonomy/${this.taxonomy_id}/terms${query}`)
|
||||
.then(res => {
|
||||
this.removeLevelsAfter(key);
|
||||
this.createColumn(res.data);
|
||||
|
||||
this.isColumnLoading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.$console.log(error);
|
||||
|
||||
this.isColumnLoading = false;
|
||||
});
|
||||
|
||||
},
|
||||
getMoreOptions(finderColumn, key) {
|
||||
if (finderColumn.length > 0) {
|
||||
let parent = finderColumn[0].parent;
|
||||
let offset = finderColumn.length;
|
||||
|
||||
let query = `?hideempty=0&order=asc&parent=${parent}&number=100&offset=${offset}`;
|
||||
|
||||
this.isColumnLoading = true;
|
||||
|
||||
axios.get(`/taxonomy/${this.taxonomy_id}/terms${query}`)
|
||||
.then(res => {
|
||||
this.appendMore(res.data, key);
|
||||
|
||||
this.isColumnLoading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.$console.log(error);
|
||||
|
||||
this.isColumnLoading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
applyFilter() {
|
||||
this.$parent.close();
|
||||
|
||||
this.$eventBusSearch.$emit('input', {
|
||||
filter: 'checkbox',
|
||||
taxonomy: this.taxonomy,
|
||||
compare: 'IN',
|
||||
|
|
@ -87,16 +191,24 @@
|
|||
});
|
||||
|
||||
let onlyLabels = [];
|
||||
for(let selected of this.selected) {
|
||||
let valueIndex = this.options.findIndex(option => option.id == selected );
|
||||
if (valueIndex >= 0)
|
||||
onlyLabels.push(this.options[valueIndex].name)
|
||||
|
||||
for (let selected of this.selected) {
|
||||
|
||||
for(let i in this.finderColumns){
|
||||
let valueIndex = this.finderColumns[i].findIndex(option => option.id == selected);
|
||||
|
||||
if (valueIndex >= 0) {
|
||||
onlyLabels.push(this.finderColumns[i][valueIndex].name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$eventBusSearch.$emit("sendValuesToTags", {
|
||||
this.$eventBusSearch.$emit('sendValuesToTags', {
|
||||
filterId: this.filter.id,
|
||||
value: onlyLabels
|
||||
value: onlyLabels,
|
||||
});
|
||||
|
||||
this.$root.$emit('appliedCheckBoxModal', onlyLabels);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -104,6 +216,66 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/variables.scss";
|
||||
|
||||
.tainacan-show-more {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #f2f2f2;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.tainacan-li-checkbox-modal:hover {
|
||||
background-color: #e6f4ff;
|
||||
}
|
||||
|
||||
.tainacan-finder-columns-container {
|
||||
background-color: white;
|
||||
border: solid 1px #f2f2f2;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tainacan-finder-columns-container:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tainacan-finder-column {
|
||||
border-right: solid 1px #f2f2f2;
|
||||
max-height: 400px;
|
||||
min-height: inherit;
|
||||
min-width: 200px;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
padding: 0 0.2rem 0 1rem;
|
||||
}
|
||||
|
||||
.tainacan-li-checkbox-modal:first-child {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.tainacan-checkbox-search-section {
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
pointer-events: all;
|
||||
color: $blue5;
|
||||
cursor: pointer;
|
||||
height: 27px;
|
||||
font-size: 18px;
|
||||
width: 30px !important;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
:style="{ paddingLeft: (option.level * 30) + 'px' }"
|
||||
v-model="selected"
|
||||
:native-value="option.id"
|
||||
v-if="!option.isChild"
|
||||
>{{ option.name }}</b-checkbox>
|
||||
<div
|
||||
:style="{ paddingLeft: (option.level * 30) + 'px' }"
|
||||
|
|
@ -61,6 +62,12 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$root.$on('appliedCheckBoxModal', (labels) => {
|
||||
if(labels.length){
|
||||
this.selectedValues();
|
||||
}
|
||||
});
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -94,7 +101,7 @@
|
|||
},
|
||||
methods: {
|
||||
getValuesTaxonomy( taxonomy ){
|
||||
return axios.get(`/taxonomy/${taxonomy}/terms?hideempty=0&order=asc&childrencounts=1&parent=0&number=${this.filter.max_options}`).then( res => {
|
||||
return axios.get(`/taxonomy/${taxonomy}/terms?hideempty=0&order=asc&parent=0&number=${this.filter.max_options}`).then( res => {
|
||||
for (let item of res.data) {
|
||||
this.taxonomy = item.taxonomy;
|
||||
this.options.push(item);
|
||||
|
|
@ -175,9 +182,25 @@
|
|||
let onlyLabels = [];
|
||||
for(let selected of this.selected) {
|
||||
let valueIndex = this.options.findIndex(option => option.id == selected );
|
||||
if (valueIndex >= 0)
|
||||
onlyLabels.push(this.options[valueIndex].name)
|
||||
|
||||
if (valueIndex >= 0) {
|
||||
onlyLabels.push(this.options[valueIndex].name)
|
||||
} else {
|
||||
axios.get(`/taxonomy/${this.taxonomy_id}/terms/${selected}?fetch_only[0]=name&fetch_only[1]=id`)
|
||||
.then( res => {
|
||||
onlyLabels.push(res.data.name);
|
||||
this.options.push({
|
||||
isChild: true,
|
||||
name: res.data.name,
|
||||
id: res.data.id
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.$eventBusSearch.$emit("sendValuesToTags", {
|
||||
filterId: this.filter.id,
|
||||
value: onlyLabels
|
||||
|
|
@ -191,9 +214,9 @@
|
|||
parent: parent,
|
||||
filter: this.filter,
|
||||
taxonomy_id: this.taxonomy_id,
|
||||
optionsLevel0: this.options,
|
||||
selected: this.selected,
|
||||
metadatum_id: this.metadatum,
|
||||
taxonomy: this.taxonomy,
|
||||
collection_id: this.collection,
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue