tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Highlights selected path (issue #83)

This commit is contained in:
weryques 2018-07-27 22:37:12 -03:00
parent 1e107f8afe
commit 1e764bb2df
1 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/admin/components/other/checkbox-filter-modal.vue
View File

@ -26,7 +26,8 @@
class="tainacan-finder-column" class="tainacan-finder-column"
v-for="(finderColumn, key) in finderColumns" v-for="(finderColumn, key) in finderColumns"
:key="key"> :key="key">
<li <b-field
:addons="false"
v-if="finderColumn.length" v-if="finderColumn.length"
class="tainacan-li-checkbox-modal" class="tainacan-li-checkbox-modal"
v-for="(option, index) in finderColumn" v-for="(option, index) in finderColumn"
@ -44,7 +45,7 @@
icon="menu-right" icon="menu-right"
/> />
</a> </a>
</li> </b-field>
<li v-if="finderColumn.length"> <li v-if="finderColumn.length">
<div <div
v-if="finderColumn.length < totalRemaining[key].remaining" v-if="finderColumn.length < totalRemaining[key].remaining"
@ -74,10 +75,10 @@
:is-full-page="false" :is-full-page="false"
:active.sync="isColumnLoading"/> :active.sync="isColumnLoading"/>
</ul> </ul>
</div>
<!--<pre>{{ hierarchicalPath }}</pre>--> <!--<pre>{{ hierarchicalPath }}</pre>-->
<!--<pre>{{ totalRemaining }}</pre>--> <!--<pre>{{ totalRemaining }}</pre>-->
<!--<pre>{{ selected }}</pre>--> <!--<pre>{{ selected }}</pre>-->
</div>
<div <div
v-if="isSearching" v-if="isSearching"
@ -162,9 +163,7 @@
}, 300), }, 300),
highlightHierarchyPath(){ highlightHierarchyPath(){
for(let [index, el] of this.hierarchicalPath.entries()){ for(let [index, el] of this.hierarchicalPath.entries()){
let htmlEl = this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`]; let htmlEl = this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`][0].$el;
console.log(this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`].classList);
if(index == this.hierarchicalPath.length-1){ if(index == this.hierarchicalPath.length-1){
htmlEl.classList.add('tainacan-li-checkbox-last-active') htmlEl.classList.add('tainacan-li-checkbox-last-active')
@ -174,13 +173,41 @@
} }
}, },
addToHierarchicalPath(column, element){ addToHierarchicalPath(column, element){
this.hierarchicalPath.push({
let found = undefined;
let toBeAdded = {
column: column, column: column,
element: element element: element
}); };
for (let f in this.hierarchicalPath) {
if (this.hierarchicalPath[f].column == column) {
found = f;
break;
}
}
if (found != undefined) {
this.removeHighlightNotSelectedLevels();
this.hierarchicalPath.splice(found);
this.hierarchicalPath.splice(found, 1, toBeAdded);
} else {
this.hierarchicalPath.push(toBeAdded);
}
this.highlightHierarchyPath(); this.highlightHierarchyPath();
}, },
removeHighlightNotSelectedLevels(){
for(let el of this.hierarchicalPath){
if(!!this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`][0]) {
let htmlEl = this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`][0].$el;
htmlEl.classList.remove('tainacan-li-checkbox-last-active');
htmlEl.classList.remove('tainacan-li-checkbox-parent-active');
}
}
},
removeLevelsAfter(key){ removeLevelsAfter(key){
if(key != undefined){ if(key != undefined){
this.finderColumns.splice(key+1); this.finderColumns.splice(key+1);
@ -219,9 +246,9 @@
}, },
getOptionChildren(option, key, index) { getOptionChildren(option, key, index) {
// if(key != undefined) { if(key != undefined) {
// this.addToHierarchicalPath(key, index); this.addToHierarchicalPath(key, index);
// } }
let parent = 0; let parent = 0;
@ -349,6 +376,10 @@
margin-top: 0.7rem; margin-top: 0.7rem;
} }
.field:not(:last-child) {
margin-bottom: 0 !important;
}
.tainacan-checkbox-search-section { .tainacan-checkbox-search-section {
margin-bottom: 40px; margin-bottom: 40px;
display: flex; display: flex;
@ -381,7 +412,7 @@
} }
.tainacan-li-checkbox-last-active { .tainacan-li-checkbox-last-active {
background-color: $blue1; background-color: $blue2;
} }
.tainacan-li-checkbox-parent-active { .tainacan-li-checkbox-parent-active {