Removes terms-list-linear and moves its logic back to terms-list-hierarchical.
This commit is contained in:
mateuswetah
parent
83772fd023
commit
d70ec0f38b
|
|
@ -24,7 +24,9 @@
|
|||
v-for="(column, columnIndex) in termColumns"
|
||||
class="tainacan-hierarchical-list-column"
|
||||
:key="column.name + '-' + columnIndex">
|
||||
<div class="column-header">
|
||||
<div
|
||||
v-if="!searchString.length"
|
||||
class="column-header">
|
||||
<p class="column-name">
|
||||
<span>{{ column.name ? $i18n.getWithVariables('info_children_of_%s', [ column.name ]) : $i18n.get('label_root_terms') }}</span>
|
||||
</p>
|
||||
|
|
@ -77,7 +79,17 @@
|
|||
:value="term.id"
|
||||
type="checkbox">
|
||||
<span class="check" />
|
||||
<span class="control-label">{{ term.name }}</span>
|
||||
<span class="control-label">
|
||||
<span
|
||||
v-if="isHierarchical && !searchString.length"
|
||||
class="checkbox-name-text">
|
||||
{{ term.name }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="checkbox-name-text"
|
||||
v-html="renderTermHierarchyLabel(term)" />
|
||||
</span>
|
||||
<div class="actions-container">
|
||||
<button
|
||||
v-if="currentUserCanEditTaxonomy"
|
||||
|
|
@ -112,6 +124,7 @@
|
|||
</div>
|
||||
</label>
|
||||
<button
|
||||
v-if="isHierarchical && !searchString.length"
|
||||
class="load-children-button"
|
||||
type="button"
|
||||
@click="fetchTerms(term, columnIndex)">
|
||||
|
|
@ -212,19 +225,29 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import TermDeletionDialog from '../other/term-deletion-dialog.vue';
|
||||
import TermParentSelectionDialog from '../other/term-parent-selection-dialog.vue';
|
||||
import { tainacan as axios } from '../../js/axios';
|
||||
import { termsListMixin } from '../../js/terms-list-mixin';
|
||||
|
||||
export default {
|
||||
name: 'TermsListHierarchical',
|
||||
mixins: [
|
||||
termsListMixin
|
||||
],
|
||||
props: {
|
||||
taxonomyId: Number,
|
||||
currentUserCanEditTaxonomy: Boolean,
|
||||
selected: Array,
|
||||
selectedColumnIndex: Number,
|
||||
searchString: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
termColumns: [],
|
||||
isColumnLoading: false,
|
||||
maxTermsPerColumn: 100,
|
||||
isHierarchical: true,
|
||||
totalRemaining: {},
|
||||
isEditingTerm: false,
|
||||
editTerm: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -237,16 +260,56 @@ export default {
|
|||
return 0;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchString: {
|
||||
handler(newValue, oldValue) {
|
||||
if (newValue != oldValue) {
|
||||
this.resetTermsListUI();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.fetchTerms();
|
||||
this.$parent.$on('deleteSelectedTerms', this.deleteSelectedTerms);
|
||||
this.$parent.$on('updateSelectedTermsParent', this.updateSelectedTermsParent);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$parent.$off('deleteSelectedTerms', this.deleteSelectedTerms);
|
||||
this.$parent.$off('updateSelectedTermsParent', this.updateSelectedTermsParent);
|
||||
},
|
||||
methods: {
|
||||
...mapActions('taxonomy', [
|
||||
'updateTerm',
|
||||
'deleteTerm',
|
||||
'deleteTerms',
|
||||
'changeTermsParent'
|
||||
]),
|
||||
renderTermHierarchyLabel(term) {
|
||||
if ( term.hierarchy_path )
|
||||
return '<span style="color: var(--tainacan-info-color);">' + term.hierarchy_path.replace(/>/g, ' <span class="hierarchy-separator"> > </span> ') + '</span>' + term.name;
|
||||
|
||||
return term.name;
|
||||
},
|
||||
isTermSelected(termId) {
|
||||
return this.selected.findIndex(aSelectedTerm => aSelectedTerm.id == termId) >= 0;
|
||||
},
|
||||
getTermIdAsNumber(termId) {
|
||||
return isNaN(Number(termId)) ? termId : Number(termId)
|
||||
},
|
||||
onEditTerm(term) {
|
||||
this.editTerm = term;
|
||||
this.isEditingTerm = true;
|
||||
},
|
||||
shouldShowMoreButton(columnIndex) {
|
||||
return this.totalRemaining[columnIndex].remaining === true || (this.termColumns[columnIndex].children.length < this.totalRemaining[columnIndex].remaining);
|
||||
},
|
||||
removeLevelsAfterIndex(parentColumnIndex){
|
||||
if (parentColumnIndex != undefined)
|
||||
this.termColumns.length = parentColumnIndex + 1;
|
||||
else
|
||||
this.termColumns.length = 0;
|
||||
},
|
||||
removeLevelsAfterTerm(term) {
|
||||
for (let i = 0; i < this.termColumns.length; i++) {
|
||||
|
|
@ -318,7 +381,15 @@ export default {
|
|||
this.isColumnLoading = true;
|
||||
|
||||
const parentId = parentTerm ? parentTerm.id : 0;
|
||||
const route = `/taxonomy/${this.taxonomyId}/terms?order=asc&parent=${parentId}&number=${this.maxTermsPerColumn}&offset=0&hideempty=0`;
|
||||
|
||||
let route = `/taxonomy/${this.taxonomyId}/terms?order=asc&number=${this.maxTermsPerColumn}&offset=0&hideempty=0`;
|
||||
|
||||
if ( this.isHierarchical && !this.searchString.length)
|
||||
route += '&parent=' + parentId;
|
||||
|
||||
if ( this.searchString.length )
|
||||
route += '&searchterm=' + this.searchString;
|
||||
|
||||
axios.get(route)
|
||||
.then(res => {
|
||||
|
||||
|
|
@ -327,7 +398,7 @@ export default {
|
|||
remaining: res.headers['x-wp-total'],
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
this.removeLevelsAfterIndex(parentColumnIndex);
|
||||
this.createColumn(res, parentColumnIndex, parentTerm ? parentTerm.name : null, parentId);
|
||||
|
||||
|
|
@ -347,7 +418,14 @@ export default {
|
|||
|
||||
this.isColumnLoading = true;
|
||||
|
||||
const route = `/taxonomy/${this.taxonomyId}/terms/?order=asc&parent=${parentId}&number=${this.maxTermsPerColumn}&offset=${offset}&hideempty=`;
|
||||
let route = `/taxonomy/${this.taxonomyId}/terms/?order=asc&number=${this.maxTermsPerColumn}&offset=${offset}&hideempty=`;
|
||||
|
||||
if ( this.isHierarchical && !this.searchString.length)
|
||||
route += '&parent=' + parentId;
|
||||
|
||||
if (this.searchString.length)
|
||||
route += '&searchterm=' + this.searchString;
|
||||
|
||||
axios.get(route)
|
||||
.then(res => {
|
||||
|
||||
|
|
@ -372,6 +450,108 @@ export default {
|
|||
const newIndex = this.selectedColumnIndex != index ? index : -1;
|
||||
this.$emit('onUpdateSelectedColumnIndex', { index: newIndex, object: this.termColumns[newIndex] ? this.termColumns[newIndex] : null });
|
||||
},
|
||||
removeTerm(term) {
|
||||
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: TermDeletionDialog,
|
||||
props: {
|
||||
message: term.total_children && term.total_children != '0' ? this.$i18n.get('info_warning_term_with_child') : this.$i18n.get('info_warning_selected_term_delete'),
|
||||
showDescendantsDeleteButton: term.total_children && term.total_children != '0',
|
||||
amountOfTerms: 1,
|
||||
onConfirm: (typeOfDelete) => {
|
||||
|
||||
// If all checks passed, term can be deleted
|
||||
if ( typeOfDelete == 'descendants' ) {
|
||||
this.deleteTerm({
|
||||
taxonomyId: this.taxonomyId,
|
||||
termId: term.id,
|
||||
parent: term.parent,
|
||||
deleteChildTerms: true })
|
||||
.then(() => {
|
||||
this.onTermRemovalFinished(term);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
} else {
|
||||
this.deleteTerm({
|
||||
taxonomyId: this.taxonomyId,
|
||||
termId: term.id,
|
||||
parent: term.parent })
|
||||
.then(() => {
|
||||
this.onTermRemovalFinished(term);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
deleteSelectedTerms() {
|
||||
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: TermDeletionDialog,
|
||||
props: {
|
||||
message: this.$i18n.get('info_warning_some_terms_with_child'),
|
||||
showDescendantsDeleteButton: true,
|
||||
amountOfTerms: this.amountOfTermsSelected,
|
||||
onConfirm: (typeOfDelete) => {
|
||||
// If all checks passed, term can be deleted
|
||||
this.deleteTerms({
|
||||
taxonomyId: this.taxonomyId,
|
||||
terms: this.selectedColumnIndex >= 0 ? [] : this.selected.map((aTerm) => aTerm.id),
|
||||
parent: this.selectedColumnIndex >= 0 ? this.termColumns[this.selectedColumnIndex].id : undefined,
|
||||
deleteChildTerms: typeOfDelete === 'descendants'
|
||||
})
|
||||
.then(() => {
|
||||
this.resetTermsListUI();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
updateSelectedTermsParent() {
|
||||
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: TermParentSelectionDialog,
|
||||
props: {
|
||||
amountOfTerms: this.amountOfTermsSelected,
|
||||
excludeTree: this.selectedColumnIndex >= 0 ? this.termColumns[this.selectedColumnIndex].id : this.selected.map((aTerm) => aTerm.id),
|
||||
taxonomyId: this.taxonomyId,
|
||||
onConfirm: (selectedParentTerm) => {
|
||||
this.changeTermsParent({
|
||||
taxonomyId: this.taxonomyId,
|
||||
terms: this.selectedColumnIndex >= 0 ? [] : this.selected.map((aTerm) => aTerm.id),
|
||||
parent: this.selectedColumnIndex >= 0 ? this.termColumns[this.selectedColumnIndex].id : undefined,
|
||||
newParentTerm: selectedParentTerm
|
||||
})
|
||||
.then(() => {
|
||||
this.resetTermsListUI();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
updateSelectedTerms(selectedTerm) {
|
||||
this.$emit('onUpdateSelectedColumnIndex', { index: -1, object: null });
|
||||
|
||||
|
|
@ -517,19 +697,15 @@ export default {
|
|||
align-items: stretch;
|
||||
margin-left: 0px !important;
|
||||
padding: 0 !important;
|
||||
-webkit-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
|
||||
/deep/ .b-checkbox, /deep/ .b-radio {
|
||||
max-width: 100%;
|
||||
min-height: 1.5em;
|
||||
min-height: 1.875em;
|
||||
margin-left: 0.7em;
|
||||
margin-bottom: 0px !important;
|
||||
height: auto;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
-webkit-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
|
||||
.control-label {
|
||||
white-space: normal;
|
||||
|
|
@ -538,7 +714,10 @@ export default {
|
|||
padding-bottom: 0.125em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
input:disabled+.check {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.control-label {
|
||||
padding-top: 0.8125em;
|
||||
|
|
|
|||
|
|
@ -1,434 +0,0 @@
|
|||
<template>
|
||||
<div class="tainacan-checkbox-list-container">
|
||||
<a
|
||||
v-if="searchResultsOffset"
|
||||
role="button"
|
||||
class="tainacan-checkbox-list-page-changer"
|
||||
@click="previousSearchPage">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-previous"/>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="tainacan-modal-checkbox-list-body">
|
||||
<template v-if="searchResults.length">
|
||||
<li
|
||||
class="tainacan-li-checkbox-list"
|
||||
v-for="(term, index) in searchResults"
|
||||
:key="index">
|
||||
<label class="b-checkbox checkbox">
|
||||
<input
|
||||
@input="updateSelectedTerms(term)"
|
||||
:checked="isTermSelected(term.id)"
|
||||
:value="getTermIdAsNumber(term.id)"
|
||||
type="checkbox">
|
||||
<span class="check" />
|
||||
<span class="control-label">
|
||||
<span
|
||||
class="checkbox-name-text"
|
||||
v-html="renderTermHierarchyLabel(term)" />
|
||||
</span>
|
||||
<div class="actions-container">
|
||||
<button
|
||||
v-if="currentUserCanEditTaxonomy"
|
||||
type="button"
|
||||
@click.prevent="onEditTerm(term)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="currentUserCanEditTaxonomy"
|
||||
type="button"
|
||||
@click.prevent="removeTerm(term)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
</li>
|
||||
</template>
|
||||
<template v-if="!isLoadingSearch && !searchResults.length">
|
||||
<li class="tainacan-li-checkbox-list result-info">
|
||||
{{ $i18n.get('info_no_terms_found') }}
|
||||
</li>
|
||||
</template>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingSearch"/>
|
||||
</ul>
|
||||
<button
|
||||
v-if="hasMoreSearchPages"
|
||||
type="button"
|
||||
class="tainacan-checkbox-list-page-changer"
|
||||
@click="nextSearchPage">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-next"/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<b-modal
|
||||
v-model="isEditingTerm"
|
||||
:width="768"
|
||||
trap-focus
|
||||
aria-role="dialog"
|
||||
aria-modal
|
||||
:can-cancel="['outside', 'escape']"
|
||||
custom-class="tainacan-modal"
|
||||
:close-button-aria-label="$i18n.get('close')">
|
||||
<term-edition-form
|
||||
:taxonomy-id="taxonomyId"
|
||||
:is-modal="true"
|
||||
@onEditionFinished="onTermEditionFinished($event.term, $event.hasChangedParent, $event.initialParent)"
|
||||
:original-form="editTerm" />
|
||||
</b-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tainacan as axios } from '../../js/axios';
|
||||
import { termsListMixin } from '../../js/terms-list-mixin';
|
||||
|
||||
export default {
|
||||
name: 'TermsListLinear',
|
||||
mixins: [
|
||||
termsListMixin
|
||||
],
|
||||
props: {
|
||||
searchString: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchResults: [],
|
||||
maxSearchResultsPerPage: 20,
|
||||
searchResultsOffset: 0,
|
||||
isLoadingSearch: false,
|
||||
hasMoreSearchPages: true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchString: {
|
||||
handler(newValue, oldValue) {
|
||||
if (newValue != oldValue) {
|
||||
this.hasMoreSearchPages = true;
|
||||
this.searchResultsOffset = 0;
|
||||
|
||||
this.fetchTerms();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
previousSearchPage() {
|
||||
|
||||
this.hasMoreSearchPages = true;
|
||||
|
||||
this.searchResultsOffset -= this.maxSearchResultsPerPage;
|
||||
if ( this.searchResultsOffset < 0 )
|
||||
this.searchResultsOffset = 0;
|
||||
|
||||
this.fetchTerms();
|
||||
|
||||
},
|
||||
nextSearchPage() {
|
||||
|
||||
if ( this.hasMoreSearchPages ) {
|
||||
if ( this.searchResultsOffset === this.maxSearchResultsPerPage )
|
||||
this.searchResultsOffset += this.maxSearchResultsPerPage - 1;
|
||||
else
|
||||
this.searchResultsOffset += this.maxSearchResultsPerPage;
|
||||
}
|
||||
|
||||
this.fetchTerms();
|
||||
},
|
||||
fetchTerms: _.debounce( function () {
|
||||
|
||||
if (!this.searchString.length)
|
||||
return;
|
||||
|
||||
this.isLoadingSearch = true;
|
||||
|
||||
const query = `?order=asc&number=${this.maxSearchResultsPerPage}&searchterm=${this.searchString}&hideempty=0&offset=${this.searchResultsOffset}`;
|
||||
|
||||
const route = `/taxonomy/${this.taxonomyId}/terms/${query}`;
|
||||
axios.get(route)
|
||||
.then((res) => {
|
||||
this.searchResults = res.data;
|
||||
this.isLoadingSearch = false;
|
||||
|
||||
if (res.headers && res.headers['x-wp-total'])
|
||||
this.hasMoreSearchPages = res.headers['x-wp-total'] > (this.searchResultsOffset + this.searchResults.length);
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
|
||||
}, 500),
|
||||
updateSelectedTerms(selectedTerm) {
|
||||
|
||||
let currentSelected = JSON.parse(JSON.stringify(this.selected));
|
||||
|
||||
const existingValueIndex = this.selected.findIndex(aSelectedTerm => aSelectedTerm.id == selectedTerm.id);
|
||||
|
||||
if (existingValueIndex >= 0)
|
||||
currentSelected.splice(existingValueIndex, 1);
|
||||
else
|
||||
currentSelected.push(selectedTerm);
|
||||
|
||||
this.$emit('onUpdateSelectedTerms', currentSelected);
|
||||
},
|
||||
onTermRemovalFinished(term) {
|
||||
const removedTermIndex = this.searchResults.findIndex((aTerm) => aTerm.id == term.id);
|
||||
|
||||
if ( removedTermIndex >= 0 )
|
||||
this.searchResults.splice(removedTermIndex, 1);
|
||||
},
|
||||
onTermEditionFinished(term) {
|
||||
const updatedTermIndex = this.searchResults.findIndex((aTerm) => aTerm.id == term.id);
|
||||
|
||||
if ( updatedTermIndex >= 0 )
|
||||
this.searchResults.splice(updatedTermIndex, 1, term);
|
||||
},
|
||||
resetTermsListUI() {
|
||||
this.$emit('onUpdateSelectedTerms', []);
|
||||
this.fetchTerms();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tainacan-li-checkbox-list {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
max-width: 100%;
|
||||
padding-left: 0.5em;
|
||||
margin: 0;
|
||||
-webkit-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
min-height: 1.5em;
|
||||
|
||||
/deep/ .b-checkbox, /deep/ .b-radio {
|
||||
margin-right: 0px;
|
||||
margin-bottom: 0;
|
||||
-webkit-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
|
||||
.control-label {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
padding-top: 0.125em;
|
||||
padding-bottom: 0.125em;
|
||||
word-break: break-word;
|
||||
}
|
||||
input:disabled+.check {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.control-label {
|
||||
padding-top: 0.8125em;
|
||||
padding-bottom: 0.8125em;
|
||||
padding-left: calc(0.875em - 1px);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--tainacan-gray1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>a:not(.add-link),
|
||||
&>button:not(.add-link) {
|
||||
opacity: 0.0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
&.load-children-button {
|
||||
opacity: 0.95;
|
||||
border-left: 1px dashed var(--tainacan-gray1);
|
||||
}
|
||||
.tainacan-icon {
|
||||
color: var(--tainacan-blue5);
|
||||
}
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
right: -0.5em;
|
||||
opacity: 0.0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover:not(.result-info) {
|
||||
background-color: var(--tainacan-gray1);
|
||||
|
||||
&>a:not(.add-link),
|
||||
&>button:not(.add-link),
|
||||
.actions-container {
|
||||
opacity: 1.0;
|
||||
background-color: var(--tainacan-gray2);
|
||||
}
|
||||
}
|
||||
&.result-info {
|
||||
padding: 0.5rem 0.25rem 0.25rem 0.25rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
column-span: all;
|
||||
font-size: 0.75em;
|
||||
color: var(--tainacan-info-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
// For Safari
|
||||
-webkit-margin-after: 0;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
-webkit-padding-start: 0;
|
||||
-webkit-margin-before: 0;
|
||||
}
|
||||
|
||||
.field:not(:last-child) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.tainacan-checkbox-list-container {
|
||||
border: 1px solid var(--tainacan-gray2);
|
||||
min-height: 232px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 20px !important;
|
||||
|
||||
&>ul+.tainacan-checkbox-list-page-changer {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
a:not(.add-link),
|
||||
button:not(.add-link) {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.75em;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0.5rem;
|
||||
|
||||
.tainacan-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-checkbox-list-page-changer {
|
||||
height: calc(100% - 1px);
|
||||
top: 1px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: auto;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 !important;
|
||||
background-color: var(--tainacan-gray1) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--tainacan-blue1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-modal-checkbox-list-body {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
-webkit-column-count: 2;
|
||||
-webkit-column-gap: 0;
|
||||
-webkit-column-rule: none;
|
||||
column-count: 2;
|
||||
column-gap: 2em;
|
||||
column-rule: none;
|
||||
column-fill: auto;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
max-height: 42vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tainacan-modal-checkbox-search-results-body {
|
||||
list-style: none;
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
-webkit-column-count: 2;
|
||||
-webkit-column-gap: 0;
|
||||
-webkit-column-rule: none;
|
||||
column-count: 2;
|
||||
column-gap: 2em;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.b-checkbox .control-label {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: visible !important;
|
||||
white-space: normal !important;
|
||||
|
||||
.checkbox-name-text {
|
||||
line-height: 1.25em;
|
||||
padding-right: 3px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
.tainacan-modal-checkbox-list-body,
|
||||
.tainacan-modal-checkbox-search-results-body {
|
||||
-moz-column-count: auto;
|
||||
-webkit-column-count: auto;
|
||||
column-count: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tainacan-modal-checkbox-search-results-body,
|
||||
.tainacan-modal-checkbox-list-body {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
.tainacan-li-checkbox-list {
|
||||
max-width: calc(100% - 20px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
@ -35,7 +35,8 @@
|
|||
:mobile-modal="true"
|
||||
id="selected-terms-dropdown"
|
||||
aria-role="list"
|
||||
trap-focus>
|
||||
trap-focus
|
||||
position="is-bottom-left">
|
||||
<button
|
||||
type="button"
|
||||
class="button is-white"
|
||||
|
|
@ -102,19 +103,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
<terms-list-linear
|
||||
v-if="isSearching"
|
||||
:search-string="searchString"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
|
||||
:selected="selected"
|
||||
@onUpdateSelectedTerms="(newSelected) => selected = newSelected"
|
||||
/>
|
||||
|
||||
<!-- Terms list with hierarchy -->
|
||||
<terms-list-hierarchical
|
||||
v-else
|
||||
:search-string="searchString"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
|
||||
:selected="selected"
|
||||
|
|
@ -127,13 +118,11 @@
|
|||
|
||||
<script>
|
||||
import TermsListHierarchical from './terms-list-hierarchical.vue';
|
||||
import TermsListLinear from './terms-list-linear.vue';
|
||||
|
||||
export default {
|
||||
name: 'TermsList',
|
||||
components: {
|
||||
TermsListHierarchical,
|
||||
TermsListLinear
|
||||
TermsListHierarchical
|
||||
},
|
||||
props: {
|
||||
taxonomyId: Number,
|
||||
|
|
@ -155,9 +144,6 @@ export default {
|
|||
return this.selected.length;
|
||||
else
|
||||
return 0;
|
||||
},
|
||||
isSearching() {
|
||||
return !!this.searchString;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -249,10 +235,19 @@ export default {
|
|||
/deep/ .dropdown-trigger {
|
||||
font-size: 1.125em !important;
|
||||
}
|
||||
/deep/ .dropdown-menu {
|
||||
width: max-content;
|
||||
max-width: 380px;
|
||||
}
|
||||
.checkbox-name-text {
|
||||
font-size: 1.375em !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.field) {
|
||||
border: 1px solid var(--tainacan-input-border-color);
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,152 +0,0 @@
|
|||
import { mapActions } from 'vuex';
|
||||
import TermDeletionDialog from '../components/other/term-deletion-dialog.vue';
|
||||
|
||||
export const termsListMixin = {
|
||||
props: {
|
||||
taxonomyId: Number,
|
||||
currentUserCanEditTaxonomy: Boolean,
|
||||
selected: Array,
|
||||
selectedColumnIndex: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalRemaining: {},
|
||||
isEditingTerm: false,
|
||||
editTerm: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$parent.$on('deleteSelectedTerms', this.deleteSelectedTerms);
|
||||
this.$parent.$on('updateSelectedTermsParent', this.updateSelectedTermsParent);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$parent.$off('deleteSelectedTerms', this.deleteSelectedTerms);
|
||||
this.$parent.$off('updateSelectedTermsParent', this.updateSelectedTermsParent);
|
||||
},
|
||||
methods: {
|
||||
...mapActions('taxonomy', [
|
||||
'updateTerm',
|
||||
'deleteTerm',
|
||||
'deleteTerms',
|
||||
'changeTermsParent'
|
||||
]),
|
||||
renderTermHierarchyLabel(term) {
|
||||
if ( term.hierarchy_path )
|
||||
return '<span style="color: var(--tainacan-info-color);">' + term.hierarchy_path.replace(/>/g, ' <span class="hierarchy-separator"> > </span> ') + '</span>' + term.name;
|
||||
|
||||
return term.name;
|
||||
},
|
||||
isTermSelected(termId) {
|
||||
return this.selected.findIndex(aSelectedTerm => aSelectedTerm.id == termId) >= 0;
|
||||
},
|
||||
getTermIdAsNumber(termId) {
|
||||
return isNaN(Number(termId)) ? termId : Number(termId)
|
||||
},
|
||||
onEditTerm(term) {
|
||||
this.editTerm = term;
|
||||
this.isEditingTerm = true;
|
||||
},
|
||||
removeTerm(term) {
|
||||
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: TermDeletionDialog,
|
||||
props: {
|
||||
message: term.total_children && term.total_children != '0' ? this.$i18n.get('info_warning_term_with_child') : this.$i18n.get('info_warning_selected_term_delete'),
|
||||
showDescendantsDeleteButton: term.total_children && term.total_children != '0',
|
||||
amountOfTerms: 1,
|
||||
onConfirm: (typeOfDelete) => {
|
||||
|
||||
// If all checks passed, term can be deleted
|
||||
if ( typeOfDelete == 'descendants' ) {
|
||||
this.deleteTerm({
|
||||
taxonomyId: this.taxonomyId,
|
||||
termId: term.id,
|
||||
parent: term.parent,
|
||||
deleteChildTerms: true })
|
||||
.then(() => {
|
||||
this.onTermRemovalFinished(term);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
} else {
|
||||
this.deleteTerm({
|
||||
taxonomyId: this.taxonomyId,
|
||||
termId: term.id,
|
||||
parent: term.parent })
|
||||
.then(() => {
|
||||
this.onTermRemovalFinished(term);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
deleteSelectedTerms() {
|
||||
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: TermDeletionDialog,
|
||||
props: {
|
||||
message: this.$i18n.get('info_warning_some_terms_with_child'),
|
||||
showDescendantsDeleteButton: true,
|
||||
amountOfTerms: this.amountOfTermsSelected,
|
||||
onConfirm: (typeOfDelete) => {
|
||||
// If all checks passed, term can be deleted
|
||||
this.deleteTerms({
|
||||
taxonomyId: this.taxonomyId,
|
||||
terms: this.selectedColumnIndex >= 0 ? [] : this.selected.map((aTerm) => aTerm.id),
|
||||
parent: this.selectedColumnIndex >= 0 ? this.termColumns[this.selectedColumnIndex].id : undefined,
|
||||
deleteChildTerms: typeOfDelete === 'descendants'
|
||||
})
|
||||
.then(() => {
|
||||
this.resetTermsListUI();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
updateSelectedTermsParent() {
|
||||
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: TermParentSelectionDialog,
|
||||
props: {
|
||||
amountOfTerms: this.amountOfTermsSelected,
|
||||
excludeTree: this.selectedColumnIndex >= 0 ? this.termColumns[this.selectedColumnIndex].id : this.selected.map((aTerm) => aTerm.id),
|
||||
taxonomyId: this.taxonomyId,
|
||||
onConfirm: (selectedParentTerm) => {
|
||||
this.changeTermsParent({
|
||||
taxonomyId: this.taxonomyId,
|
||||
terms: this.selectedColumnIndex >= 0 ? [] : this.selected.map((aTerm) => aTerm.id),
|
||||
parent: this.selectedColumnIndex >= 0 ? this.termColumns[this.selectedColumnIndex].id : undefined,
|
||||
newParentTerm: selectedParentTerm
|
||||
})
|
||||
.then(() => {
|
||||
this.resetTermsListUI();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue