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

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 2020-05-13 17:55:49 -03:00
parent 943d046fec
commit 8337cd5bfe
2 changed files with 131 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/admin/components/metadata-types/taxonomy/TaxonomyCheckbox.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<!--
<div> <div>
<p <p
v-if="value instanceof Array ? value.length > 0 : (value != undefined && value != '')" v-if="value instanceof Array ? value.length > 0 : (value != undefined && value != '')"
@ -61,6 +62,26 @@
</a> </a>
</div> </div>
</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> </template>
<script> <script>
@ -69,6 +90,9 @@
import CheckboxRadioModal from '../../modals/checkbox-radio-modal.vue'; import CheckboxRadioModal from '../../modals/checkbox-radio-modal.vue';
export default { export default {
components: {
CheckboxRadioModal
},
props: { props: {
value: [ Number, String, Array ], value: [ Number, String, Array ],
disabled: false, disabled: false,

195
src/views/admin/components/modals/checkbox-radio-modal.vue
View File

@ -1,17 +1,26 @@
<template> <template>
<div <div
autofocus :autofocus="isModal"
role="dialog" :role="isModal ? 'dialog' : ''"
class="tainacan-modal-content" :class="{ 'tainacan-modal-content': isModal }"
tabindex="-1" :tabindex="isModal ? -1 : 0"
aria-modal :aria-modal="isModal"
ref="checkboxRadioModal"> 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-if="isFilter">{{ $i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
<h2 v-else>{{ $i18n.get('metadatum') }} <em>{{ metadatum.name }}</em></h2> <h2 v-else>{{ $i18n.get('metadatum') }} <em>{{ metadatum.name }}</em></h2>
<hr> <hr>
</header> </header>
<div class="tainacan-form"> <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"> <div class="is-clearfix tainacan-checkbox-search-section">
<input <input
autocomplete="on" autocomplete="on"
@ -25,12 +34,7 @@
</span> </span>
</div> </div>
<b-tabs <!-- Non-hierarchical lists -->
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')">
<div <div
v-if="!isSearching && !isTaxonomy" v-if="!isSearching && !isTaxonomy"
class="modal-card-body tainacan-checkbox-list-container"> class="modal-card-body tainacan-checkbox-list-container">
@ -82,6 +86,7 @@
</a> </a>
</div> </div>
<!-- Hierarchical lists -->
<div <div
v-if="!isSearching && isTaxonomy" v-if="!isSearching && isTaxonomy"
class="modal-card-body tainacan-finder-columns-container"> class="modal-card-body tainacan-finder-columns-container">
@ -154,63 +159,8 @@
:is-full-page="false" :is-full-page="false"
:active.sync="isColumnLoading"/> :active.sync="isColumnLoading"/>
</div> </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">
&nbsp;{{ "(" + 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 <div
v-if="isSearching" v-if="isSearching"
class="modal-card-body tainacan-search-results-container"> class="modal-card-body tainacan-search-results-container">
@ -221,7 +171,7 @@
:key="key"> :key="key">
<label <label
v-if="isCheckbox" v-if="isCheckbox"
class="b-checkbox checkbox is-small"> class="b-checkbox checkbox">
<input <input
v-model="selected" v-model="selected"
:value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))" :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> </li>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
:active.sync="isSearchingLoading"/> :active.sync="isLoadingSearch"/>
</ul> </ul>
</div> </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">
&nbsp;{{ "(" + 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"> <div class="control">
<button <button
class="button is-outlined" class="button is-outlined"
@ -305,6 +316,10 @@
isCheckbox: { isCheckbox: {
type: Boolean, type: Boolean,
default: true, default: true,
},
isModal: {
type: Boolean,
default: true,
} }
}, },
data() { data() {
@ -324,7 +339,7 @@
maxNumOptionsCheckboxFinderColumns: 100, maxNumOptionsCheckboxFinderColumns: 100,
checkboxListOffset: 0, checkboxListOffset: 0,
isCheckboxListLoading: false, isCheckboxListLoading: false,
isSearchingLoading: false, isLoadingSearch: false,
noMorePage: 0, noMorePage: 0,
maxTextToShow: 47, maxTextToShow: 47,
activeTab: 0, activeTab: 0,
@ -335,6 +350,11 @@
lastTermOnFisrtPage: null lastTermOnFisrtPage: null
} }
}, },
watch: {
selected() {
this.$emit('input', this.selected);
}
},
updated(){ updated(){
if(!this.isSearching){ if(!this.isSearching){
this.highlightHierarchyPath(); this.highlightHierarchyPath();
@ -464,7 +484,7 @@
promise.request promise.request
.then((res) => { .then((res) => {
this.isCheckboxListLoading = false; this.isCheckboxListLoading = false;
this.isSearchingLoading = false; this.isLoadingSearch = false;
if (this.isUsingElasticSearch) { if (this.isUsingElasticSearch) {
@ -487,14 +507,14 @@
this.getOptionsValuesCancel = promise.source; this.getOptionsValuesCancel = promise.source;
}, },
autoComplete: _.debounce( function () { autoComplete: _.debounce( function () {
this.isSearching = !!this.optionName.length; this.isSearching = !!this.optionName.length;
if(!this.isSearching){ if (!this.isSearching)
return; return;
}
if (this.isTaxonomy) { if (this.isTaxonomy) {
this.isSearchingLoading = true; this.isLoadingSearch = true;
let query_items = { 'current_query': this.query }; let query_items = { 'current_query': this.query };
let query = `?order=asc&number=${this.maxNumSearchResultsShow}&search=${this.optionName}&` + qs.stringify(query_items); 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}`; let route = `/collection/${this.collectionId}/facets/${this.metadatumId}${query}`;
if(this.collectionId == 'default'){ if (this.collectionId == 'default')
route = `/facets/${this.metadatumId}${query}` route = `/facets/${this.metadatumId}${query}`;
}
axios.get(route) axios.get(route)
.then((res) => { .then((res) => {
this.searchResults = res.data.values; this.searchResults = res.data.values;
this.isSearchingLoading = false; this.isLoadingSearch = false;
}).catch((error) => { }).catch((error) => {
this.$console.log(error); this.$console.log(error);
}); });
} else { } else {
this.isSearchingLoading = true; this.isLoadingSearch = true;
this.getOptions(0); this.getOptions(0);
} }
@ -710,7 +729,7 @@
value: this.selected, value: this.selected,
}); });
} else { } else {
this.$emit('input', this.selected) this.$emit('input', this.selected);
} }
this.$emit('appliedCheckBoxModal'); this.$emit('appliedCheckBoxModal');
@ -721,6 +740,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.tainacan-modal-title {
margin-bottom: 16px;
}
.breadcrumb { .breadcrumb {
background-color: var(--tainacan-white) !important; background-color: var(--tainacan-white) !important;
@ -893,7 +916,7 @@
} }
.tainacan-checkbox-search-section { .tainacan-checkbox-search-section {
margin-bottom: var(--tainacan-container-padding); margin-bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -952,13 +975,17 @@
} }
.tainacan-search-results-container { .tainacan-search-results-container {
padding: 0 20px !important; padding: 0.7em 20px !important;
min-height: 253px; min-height: 253px;
} }
.tainacan-tags-container { .tainacan-tags-container {
padding: 0 20px !important; padding: 0 20px !important;
min-height: 253px; min-height: 253px;
.tags.is-small {
font-size: 0.875em;
}
} }
.tainacan-modal-checkbox-search-results-body { .tainacan-modal-checkbox-search-results-body {