First version of modal checkbox inside of item edition form. Moves search bar inside first tab of checkbox modals.
This commit is contained in:
mateuswetah
parent
943d046fec
commit
8337cd5bfe
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<!--
|
||||
<div>
|
||||
<p
|
||||
v-if="value instanceof Array ? value.length > 0 : (value != undefined && value != '')"
|
||||
|
|
@ -61,6 +62,26 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
<checkbox-radio-modal
|
||||
:is-modal="false"
|
||||
:is-filter="false"
|
||||
:parent="0"
|
||||
:taxonomy_id="taxonomyId"
|
||||
:selected="!value ? [] : value"
|
||||
:metadatum-id="itemMetadatum.metadatum.id"
|
||||
:taxonomy="taxonomy"
|
||||
:collection-id="itemMetadatum.metadatum.collection_id"
|
||||
:is-taxonomy="true"
|
||||
:query="''"
|
||||
:metadatum="itemMetadatum.metadatum"
|
||||
:is-checkbox="true"
|
||||
@input="(selected) => {
|
||||
value = selected;
|
||||
$emit('input', value);
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -69,6 +90,9 @@
|
|||
import CheckboxRadioModal from '../../modals/checkbox-radio-modal.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CheckboxRadioModal
|
||||
},
|
||||
props: {
|
||||
value: [ Number, String, Array ],
|
||||
disabled: false,
|
||||
|
|
|
|||
|
|
@ -1,17 +1,26 @@
|
|||
<template>
|
||||
<div
|
||||
autofocus
|
||||
role="dialog"
|
||||
class="tainacan-modal-content"
|
||||
tabindex="-1"
|
||||
aria-modal
|
||||
:autofocus="isModal"
|
||||
:role="isModal ? 'dialog' : ''"
|
||||
:class="{ 'tainacan-modal-content': isModal }"
|
||||
:tabindex="isModal ? -1 : 0"
|
||||
:aria-modal="isModal"
|
||||
ref="checkboxRadioModal">
|
||||
<header class="tainacan-modal-title">
|
||||
<header
|
||||
v-if="isModal"
|
||||
class="tainacan-modal-title">
|
||||
<h2 v-if="isFilter">{{ $i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
|
||||
<h2 v-else>{{ $i18n.get('metadatum') }} <em>{{ metadatum.name }}</em></h2>
|
||||
<hr>
|
||||
</header>
|
||||
<div class="tainacan-form">
|
||||
<b-tabs
|
||||
animated
|
||||
@input="fetchSelectedLabels()"
|
||||
v-model="activeTab">
|
||||
<b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
|
||||
|
||||
<!-- Search input -->
|
||||
<div class="is-clearfix tainacan-checkbox-search-section">
|
||||
<input
|
||||
autocomplete="on"
|
||||
|
|
@ -25,12 +34,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<b-tabs
|
||||
v-if="!isSearching"
|
||||
animated
|
||||
@input="fetchSelectedLabels()"
|
||||
v-model="activeTab">
|
||||
<b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
|
||||
<!-- Non-hierarchical lists -->
|
||||
<div
|
||||
v-if="!isSearching && !isTaxonomy"
|
||||
class="modal-card-body tainacan-checkbox-list-container">
|
||||
|
|
@ -82,6 +86,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Hierarchical lists -->
|
||||
<div
|
||||
v-if="!isSearching && isTaxonomy"
|
||||
class="modal-card-body tainacan-finder-columns-container">
|
||||
|
|
@ -154,63 +159,8 @@
|
|||
:is-full-page="false"
|
||||
:active.sync="isColumnLoading"/>
|
||||
</div>
|
||||
<nav
|
||||
v-if="!isSearching && isTaxonomy"
|
||||
style="margin-top: 6px;"
|
||||
class="breadcrumb is-small has-succeeds-separator"
|
||||
aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(pathItem, pi) in hierarchicalPath"
|
||||
:class="{'is-active': pi === hierarchicalPath.length-1}"
|
||||
:key="pi">
|
||||
<a
|
||||
@click="getOptionChildren(pathItem.option, pathItem.column, pathItem.element)">
|
||||
{{ pathItem.option.label }}
|
||||
<span
|
||||
v-if="isFilter && pathItem.option.total_items != undefined"
|
||||
class="has-text-gray">
|
||||
{{ "(" + pathItem.option.total_items + ")" }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</b-tab-item>
|
||||
|
||||
<b-tab-item
|
||||
:label="isTaxonomy ? $i18n.get('label_selected_terms') : $i18n.get('label_selected_metadatum_values')">
|
||||
|
||||
<div class="modal-card-body tainacan-tags-container">
|
||||
<b-field
|
||||
grouped
|
||||
group-multiline>
|
||||
<div
|
||||
v-for="(term, index) in (selected instanceof Array ? selected : [selected])"
|
||||
:key="index"
|
||||
class="control">
|
||||
<b-tag
|
||||
v-if="selected instanceof Array ? true : selected != ''"
|
||||
attached
|
||||
closable
|
||||
@close="selected instanceof Array ? selected.splice(index, 1) : selected = ''">
|
||||
{{ (isTaxonomy || metadatum_type === 'Tainacan\\Metadata_Types\\Relationship') ? selectedTagsName[term] : term }}
|
||||
</b-tag>
|
||||
</div>
|
||||
</b-field>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isSelectedTermsLoading"/>
|
||||
</div>
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
<!--<pre>{{ hierarchicalPath }}</pre>-->
|
||||
<!--<pre>{{ totalRemaining }}</pre>-->
|
||||
<!--<pre>{{ selected }}</pre>-->
|
||||
<!--<pre>{{ options }}</pre>-->
|
||||
<!--<pre>{{ searchResults }}</pre>-->
|
||||
<!--<pre>{{ selectedTagsName }}</pre>-->
|
||||
|
||||
<!-- Search Results -->
|
||||
<div
|
||||
v-if="isSearching"
|
||||
class="modal-card-body tainacan-search-results-container">
|
||||
|
|
@ -221,7 +171,7 @@
|
|||
:key="key">
|
||||
<label
|
||||
v-if="isCheckbox"
|
||||
class="b-checkbox checkbox is-small">
|
||||
class="b-checkbox checkbox">
|
||||
<input
|
||||
v-model="selected"
|
||||
:value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))"
|
||||
|
|
@ -250,11 +200,72 @@
|
|||
</li>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isSearchingLoading"/>
|
||||
:active.sync="isLoadingSearch"/>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<footer class="field is-grouped form-submit">
|
||||
<!-- Bradcrumb navigation -->
|
||||
<nav
|
||||
v-if="!isSearching && isTaxonomy"
|
||||
style="margin-top: 6px;"
|
||||
class="breadcrumb is-small has-succeeds-separator"
|
||||
aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(pathItem, pi) in hierarchicalPath"
|
||||
:class="{'is-active': pi === hierarchicalPath.length-1}"
|
||||
:key="pi">
|
||||
<a
|
||||
@click="getOptionChildren(pathItem.option, pathItem.column, pathItem.element)">
|
||||
{{ pathItem.option.label }}
|
||||
<span
|
||||
v-if="isFilter && pathItem.option.total_items != undefined"
|
||||
class="has-text-gray">
|
||||
{{ "(" + pathItem.option.total_items + ")" }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</b-tab-item>
|
||||
|
||||
<b-tab-item :label="isTaxonomy ? $i18n.get('label_selected_terms') : $i18n.get('label_selected_metadatum_values')">
|
||||
|
||||
<div class="modal-card-body tainacan-tags-container">
|
||||
<b-field
|
||||
grouped
|
||||
group-multiline>
|
||||
<div
|
||||
v-for="(term, index) in (selected instanceof Array ? selected : [selected])"
|
||||
:key="index"
|
||||
class="control">
|
||||
<b-tag
|
||||
v-if="selected instanceof Array ? true : selected != ''"
|
||||
attached
|
||||
closable
|
||||
:class="isModal ? '' : 'is-small'"
|
||||
@close="selected instanceof Array ? selected.splice(index, 1) : selected = ''">
|
||||
{{ (isTaxonomy || metadatum_type === 'Tainacan\\Metadata_Types\\Relationship') ? selectedTagsName[term] : term }}
|
||||
</b-tag>
|
||||
</div>
|
||||
</b-field>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isSelectedTermsLoading"/>
|
||||
</div>
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
<!--<pre>{{ hierarchicalPath }}</pre>-->
|
||||
<!--<pre>{{ totalRemaining }}</pre>-->
|
||||
<!--<pre>{{ selected }}</pre>-->
|
||||
<!--<pre>{{ options }}</pre>-->
|
||||
<!--<pre>{{ searchResults }}</pre>-->
|
||||
<!--<pre>{{ selectedTagsName }}</pre>-->
|
||||
|
||||
<footer
|
||||
v-if="isModal"
|
||||
class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-outlined"
|
||||
|
|
@ -305,6 +316,10 @@
|
|||
isCheckbox: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isModal: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -324,7 +339,7 @@
|
|||
maxNumOptionsCheckboxFinderColumns: 100,
|
||||
checkboxListOffset: 0,
|
||||
isCheckboxListLoading: false,
|
||||
isSearchingLoading: false,
|
||||
isLoadingSearch: false,
|
||||
noMorePage: 0,
|
||||
maxTextToShow: 47,
|
||||
activeTab: 0,
|
||||
|
|
@ -335,6 +350,11 @@
|
|||
lastTermOnFisrtPage: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected() {
|
||||
this.$emit('input', this.selected);
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
if(!this.isSearching){
|
||||
this.highlightHierarchyPath();
|
||||
|
|
@ -464,7 +484,7 @@
|
|||
promise.request
|
||||
.then((res) => {
|
||||
this.isCheckboxListLoading = false;
|
||||
this.isSearchingLoading = false;
|
||||
this.isLoadingSearch = false;
|
||||
|
||||
if (this.isUsingElasticSearch) {
|
||||
|
||||
|
|
@ -487,14 +507,14 @@
|
|||
this.getOptionsValuesCancel = promise.source;
|
||||
},
|
||||
autoComplete: _.debounce( function () {
|
||||
|
||||
this.isSearching = !!this.optionName.length;
|
||||
|
||||
if(!this.isSearching){
|
||||
if (!this.isSearching)
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isTaxonomy) {
|
||||
this.isSearchingLoading = true;
|
||||
this.isLoadingSearch = true;
|
||||
let query_items = { 'current_query': this.query };
|
||||
|
||||
let query = `?order=asc&number=${this.maxNumSearchResultsShow}&search=${this.optionName}&` + qs.stringify(query_items);
|
||||
|
|
@ -504,19 +524,18 @@
|
|||
|
||||
let route = `/collection/${this.collectionId}/facets/${this.metadatumId}${query}`;
|
||||
|
||||
if(this.collectionId == 'default'){
|
||||
route = `/facets/${this.metadatumId}${query}`
|
||||
}
|
||||
if (this.collectionId == 'default')
|
||||
route = `/facets/${this.metadatumId}${query}`;
|
||||
|
||||
axios.get(route)
|
||||
.then((res) => {
|
||||
this.searchResults = res.data.values;
|
||||
this.isSearchingLoading = false;
|
||||
this.isLoadingSearch = false;
|
||||
}).catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
} else {
|
||||
this.isSearchingLoading = true;
|
||||
this.isLoadingSearch = true;
|
||||
|
||||
this.getOptions(0);
|
||||
}
|
||||
|
|
@ -710,7 +729,7 @@
|
|||
value: this.selected,
|
||||
});
|
||||
} else {
|
||||
this.$emit('input', this.selected)
|
||||
this.$emit('input', this.selected);
|
||||
}
|
||||
|
||||
this.$emit('appliedCheckBoxModal');
|
||||
|
|
@ -721,6 +740,10 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tainacan-modal-title {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background-color: var(--tainacan-white) !important;
|
||||
|
||||
|
|
@ -893,7 +916,7 @@
|
|||
}
|
||||
|
||||
.tainacan-checkbox-search-section {
|
||||
margin-bottom: var(--tainacan-container-padding);
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
|
@ -952,13 +975,17 @@
|
|||
}
|
||||
|
||||
.tainacan-search-results-container {
|
||||
padding: 0 20px !important;
|
||||
padding: 0.7em 20px !important;
|
||||
min-height: 253px;
|
||||
}
|
||||
|
||||
.tainacan-tags-container {
|
||||
padding: 0 20px !important;
|
||||
min-height: 253px;
|
||||
|
||||
.tags.is-small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-modal-checkbox-search-results-body {
|
||||
|
|
|
|||
Loading…
Reference in New Issue