Modal checkbox hierarchical: new features (#127)
New tab to show selected terms as a tag list Breadcrumb at the bottom of finder view
This commit is contained in:
weryques
parent
79290c7fd6
commit
5512244715
|
|
@ -60,63 +60,104 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<b-tabs
|
||||
v-if="!isSearching && isTaxonomy"
|
||||
class="modal-card-body tainacan-finder-columns-container">
|
||||
<ul
|
||||
class="tainacan-finder-column"
|
||||
v-for="(finderColumn, key) in finderColumns"
|
||||
:key="key">
|
||||
@input="fetchSelectedLabels()"
|
||||
v-model="activeTab">
|
||||
<b-tab-item :label="$i18n.get('label_all_terms')">
|
||||
<div class="modal-card-body tainacan-finder-columns-container">
|
||||
<ul
|
||||
class="tainacan-finder-column"
|
||||
v-for="(finderColumn, key) in finderColumns"
|
||||
:key="key">
|
||||
<b-field
|
||||
role="li"
|
||||
:addons="false"
|
||||
v-if="finderColumn.length"
|
||||
class="tainacan-li-checkbox-modal"
|
||||
v-for="(option, index) in finderColumn"
|
||||
:id="`${key}.${index}-tainacan-li-checkbox-model`"
|
||||
:ref="`${key}.${index}-tainacan-li-checkbox-model`"
|
||||
:key="index">
|
||||
<b-checkbox
|
||||
v-if="isCheckbox"
|
||||
v-model="selected"
|
||||
:native-value="option.value">
|
||||
{{ `${option.label}` }}
|
||||
</b-checkbox>
|
||||
<b-radio
|
||||
v-else
|
||||
v-model="selected"
|
||||
:native-value="option.value">
|
||||
{{ `${option.label}` }}
|
||||
</b-radio>
|
||||
<a
|
||||
v-if="option.total_children > 0"
|
||||
@click="getOptionChildren(option, key, index)">
|
||||
<b-icon
|
||||
class="is-pulled-right"
|
||||
icon="menu-right"
|
||||
/>
|
||||
</a>
|
||||
</b-field>
|
||||
<li v-if="finderColumn.length">
|
||||
<div
|
||||
v-if="finderColumn.length < totalRemaining[key].remaining"
|
||||
@click="getMoreOptions(finderColumn, key)"
|
||||
class="tainacan-show-more">
|
||||
<b-icon
|
||||
size="is-small"
|
||||
icon="chevron-down"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isColumnLoading"/>
|
||||
</div>
|
||||
<nav
|
||||
style="margin-top: 10px;"
|
||||
class="breadcrumb is-small has-succeeds-separator"
|
||||
aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(pathItem, pi) in hierarchicalPath"
|
||||
:key="pi">
|
||||
<a
|
||||
@click="getOptionChildren(pathItem.option, pathItem.column, pathItem.element)"
|
||||
:class="{'is-active': pi == Object.keys(hierarchicalPath).length-1}">
|
||||
{{ pathItem.option.label }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</b-tab-item>
|
||||
|
||||
<b-tab-item
|
||||
:label="$i18n.get('label_selected_terms')">
|
||||
<b-field
|
||||
role="li"
|
||||
:addons="false"
|
||||
v-if="finderColumn.length"
|
||||
class="tainacan-li-checkbox-modal"
|
||||
v-for="(option, index) in finderColumn"
|
||||
:id="`${key}.${index}-tainacan-li-checkbox-model`"
|
||||
:ref="`${key}.${index}-tainacan-li-checkbox-model`"
|
||||
:key="index">
|
||||
<b-checkbox
|
||||
v-if="isCheckbox"
|
||||
v-model="selected"
|
||||
:native-value="option.value">
|
||||
{{ `${option.label}` }}
|
||||
</b-checkbox>
|
||||
<b-radio
|
||||
v-else
|
||||
v-model="selected"
|
||||
:native-value="option.value">
|
||||
{{ `${option.label}` }}
|
||||
</b-radio>
|
||||
<a
|
||||
v-if="option.total_children > 0"
|
||||
@click="getOptionChildren(option, key, index)">
|
||||
<b-icon
|
||||
class="is-pulled-right"
|
||||
icon="menu-right"
|
||||
/>
|
||||
</a>
|
||||
</b-field>
|
||||
<li v-if="finderColumn.length">
|
||||
grouped
|
||||
group-multiline>
|
||||
<div
|
||||
v-if="finderColumn.length < totalRemaining[key].remaining"
|
||||
@click="getMoreOptions(finderColumn, key)"
|
||||
class="tainacan-show-more">
|
||||
<b-icon
|
||||
size="is-small"
|
||||
icon="chevron-down"/>
|
||||
v-for="(term, index) in (selected instanceof Array ? selected : [this.selected])"
|
||||
:key="index"
|
||||
class="control">
|
||||
<b-tag
|
||||
attached
|
||||
closable
|
||||
@close="selected.splice(index, 1)">
|
||||
{{ selectedTagsName[term] }}
|
||||
</b-tag>
|
||||
</div>
|
||||
</li>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isColumnLoading"/>
|
||||
</ul>
|
||||
</div>
|
||||
</b-field>
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
<!--<pre>{{ hierarchicalPath }}</pre>-->
|
||||
<!--<pre>{{ totalRemaining }}</pre>-->
|
||||
<!--<pre>{{ selected }}</pre>-->
|
||||
<!--<pre>{{ options }}</pre>-->
|
||||
<!--<pre>{{ searchResults }}</pre>-->
|
||||
<!--<pre>{{ selectedTagsName }}</pre>-->
|
||||
|
||||
<div
|
||||
v-if="isSearching"
|
||||
|
|
@ -219,6 +260,8 @@
|
|||
isSearchingLoading: false,
|
||||
noMorePage: 0,
|
||||
maxTextToShow: 47,
|
||||
activeTab: 0,
|
||||
selectedTagsName: {}
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
|
|
@ -236,6 +279,24 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
fetchSelectedLabels() {
|
||||
let selected = this.selected instanceof Array ? this.selected : [this.selected];
|
||||
|
||||
for(const term of selected) {
|
||||
axios.get(`/taxonomy/${this.taxonomy_id}/terms/${term}`)
|
||||
.then((res) => {
|
||||
this.saveSelectedTagName(res.data.id, res.data.name);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
saveSelectedTagName(value, label){
|
||||
if(!this.selectedTagsName[value]) {
|
||||
this.$set(this.selectedTagsName, `${value}`, label);
|
||||
}
|
||||
},
|
||||
limitChars(label){
|
||||
if(label.length > this.maxTextToShow){
|
||||
return label.slice(0, this.maxTextToShow)+'...';
|
||||
|
|
@ -342,12 +403,13 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
addToHierarchicalPath(column, element){
|
||||
addToHierarchicalPath(column, element, option){
|
||||
|
||||
let found = undefined;
|
||||
let toBeAdded = {
|
||||
column: column,
|
||||
element: element
|
||||
element: element,
|
||||
option: option,
|
||||
};
|
||||
|
||||
for (let f in this.hierarchicalPath) {
|
||||
|
|
@ -418,7 +480,7 @@
|
|||
let query_items = { 'current_query': this.query };
|
||||
|
||||
if(key != undefined) {
|
||||
this.addToHierarchicalPath(key, index);
|
||||
this.addToHierarchicalPath(key, index, option);
|
||||
}
|
||||
|
||||
let parent = 0;
|
||||
|
|
@ -306,6 +306,8 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'label_untrash_selected_items' => __( 'Recover from trash', 'tainacan' ),
|
||||
'label_value_not_informed' => __( 'Value not informed.', 'tainacan' ),
|
||||
'label_description_not_informed' => __( 'Description not informed.', 'tainacan' ),
|
||||
'label_all_terms' => __( 'All terms', 'tainacan' ),
|
||||
'label_selected_terms' => __( 'Selected terms', 'tainacan'),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<script>
|
||||
import { tainacan as axios } from '../../../js/axios/axios';
|
||||
import { filter_type_mixin } from '../filter-types-mixin';
|
||||
import CheckboxFilterModal from '../../../admin/components/other/checkbox-filter-modal.vue';
|
||||
import CheckboxRadioModal from '../../../admin/components/other/checkbox-radio-modal.vue';
|
||||
|
||||
export default {
|
||||
created(){
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
openCheckboxModal() {
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
component: CheckboxFilterModal,
|
||||
component: CheckboxRadioModal,
|
||||
props: {
|
||||
//parent: parent,
|
||||
filter: this.filter,
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<script>
|
||||
import qs from 'qs';
|
||||
import { tainacan as axios } from '../../../js/axios/axios';
|
||||
import CheckboxFilterModal from '../../../admin/components/other/checkbox-filter-modal.vue';
|
||||
import CheckboxRadioModal from '../../../admin/components/other/checkbox-radio-modal.vue';
|
||||
|
||||
export default {
|
||||
created(){
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
openCheckboxModal(parent) {
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
component: CheckboxFilterModal,
|
||||
component: CheckboxRadioModal,
|
||||
props: {
|
||||
parent: parent,
|
||||
filter: this.filter,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
import TainacanTaxonomyCheckbox from './TaxonomyCheckbox.vue'
|
||||
import TainacanTaxonomyTagInput from './TaxonomyTaginput.vue'
|
||||
import AddNewTerm from './AddNewTerm.vue'
|
||||
import HierarchicalCheckboxModal from '../../../admin/components/other/checkbox-filter-modal.vue'
|
||||
import CheckboxRadioModal from '../../../admin/components/other/checkbox-radio-modal.vue'
|
||||
|
||||
export default {
|
||||
created(){
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
openCheckboxModal(){
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
component: HierarchicalCheckboxModal,
|
||||
component: CheckboxRadioModal,
|
||||
props: {
|
||||
isFilter: false,
|
||||
parent: 0,
|
||||
|
|
|
|||
Loading…
Reference in New Issue