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

Adds textual filter search on the available metadata list of the filters page #595

This commit is contained in:
mateuswetah 2021-08-27 18:02:29 -03:00
parent d3de562ed7
commit 0250c38cf1
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/admin/pages/lists/filters-page.vue
View File

@ -190,8 +190,25 @@
<div
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
class="column available-metadata-area">
<div class="tainacan-form sub-header">
<h3>{{ $i18n.get('label_available_metadata') }}</h3>
<template v-if="availableMetadata && availableMetadata.length > 5 && !isLoadingMetadatumTypes">
<b-field class="header-item">
<b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model="metadatumNameFilterString"
icon="magnify"
size="is-small"
icon-right="close-circle"
icon-right-clickable
@icon-right-click="metadatumNameFilterString = ''" />
</b-field>
</template>
</div>
<div class="field" >
<h3 class="label"> {{ $i18n.get('label_available_metadata') }}</h3>
<draggable
@change="handleChangeOnMetadata"
v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
@ -209,6 +226,7 @@
'disabled-metadatum': isSelectingFilterType
}"
v-if="metadatum.enabled"
v-show="metadatumNameFilterString == '' || metadatum.name.toString().toLowerCase().indexOf(metadatumNameFilterString.toString().toLowerCase()) >= 0"
:key="index"
@click.prevent="addMetadatumViaButton(metadatum, index)">
<span
@ -409,7 +427,8 @@ export default {
columnsTopY: 0,
filtersSearchCancel: undefined,
metadataSearchCancel: undefined,
filterNameFilterString: ''
filterNameFilterString: '',
metadatumNameFilterString: ''
}
},
computed: {
@ -1043,11 +1062,10 @@ export default {
}
.available-metadata-area {
padding: 10px 0px 10px 10px;
padding: 0px 0px 10px 10px;
margin: 0;
max-width: 500px;
min-width: 20.8333333%;
font-size: 0.875em;
max-width: 600px;
min-width: 41.66666667%;
@media screen and (max-width: 769px) {
max-width: 100%;
@ -1066,6 +1084,10 @@ export default {
font-weight: 500;
}
&>.field {
font-size: 0.875em;
}
.available-metadatum-item {
padding: 0.6em;
margin: 4px 4px 4px 1.2em;