Begins implementation of textual search on Terms List. Adjusts max-width for metadatum name in Filters List.
This commit is contained in:
Mateus Machado Luna
parent
80dafb7c0c
commit
a800bc1027
|
|
@ -642,4 +642,47 @@
|
|||
|
||||
}
|
||||
|
||||
.advanced-search-header-dropdown {
|
||||
height: 27px !important;
|
||||
|
||||
.dropdown-content {
|
||||
width: 800px !important;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1087px) {
|
||||
.dropdown-menu {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
span.icon:not(.is-right) {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-search-text {
|
||||
margin: 0 12px;
|
||||
font-size: 12px;
|
||||
color: $blue5;
|
||||
}
|
||||
|
||||
.advanced-search-text-di {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #01295c;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.advanced-search-hr {
|
||||
height: 1px;
|
||||
margin: 8px 0;
|
||||
background-color: #298596;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -908,6 +908,9 @@ export default {
|
|||
padding: 4px 6px;
|
||||
.icon { font-size: 20px; }
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
|
||||
.icon { color: $gray2; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -694,7 +694,7 @@ export default {
|
|||
font-weight: bold;
|
||||
margin-left: 0.4em;
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
max-width: 180px;
|
||||
}
|
||||
&:after,
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,49 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="terms-list-header">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
type="button"
|
||||
@click="addNewTerm()">
|
||||
{{ $i18n.get('label_new_term') }}
|
||||
</button>
|
||||
<b-field class="order-area">
|
||||
<button
|
||||
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'asc'"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder('asc')">
|
||||
<b-icon
|
||||
class="gray-icon"
|
||||
icon="sort-ascending"/>
|
||||
</button>
|
||||
<button
|
||||
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'desc'"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder('desc')">
|
||||
<b-icon
|
||||
class="gray-icon"
|
||||
icon="sort-descending"/>
|
||||
</button>
|
||||
</b-field>
|
||||
<div class="search-area is-hidden-mobile">
|
||||
<div class="control has-icons-right is-small is-clearfix">
|
||||
<input
|
||||
class="input is-small"
|
||||
:placeholder="$i18n.get('instruction_search')"
|
||||
type="search"
|
||||
autocomplete="on"
|
||||
v-model="searchQuery"
|
||||
@keyup.enter="loadTerms(0)">
|
||||
<span
|
||||
@click="loadTerms(0)"
|
||||
class="icon is-right">
|
||||
<i class="mdi mdi-magnify" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
type="button"
|
||||
@click="addNewTerm()">
|
||||
{{ $i18n.get('label_new_term') }}
|
||||
</button>
|
||||
<b-field class="order-area">
|
||||
<button
|
||||
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'asc'"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder('asc')">
|
||||
<b-icon
|
||||
class="gray-icon"
|
||||
icon="sort-ascending"/>
|
||||
</button>
|
||||
<button
|
||||
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'desc'"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder('desc')">
|
||||
<b-icon
|
||||
class="gray-icon"
|
||||
icon="sort-descending"/>
|
||||
</button>
|
||||
</b-field>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<div
|
||||
class="term-item"
|
||||
|
|
@ -107,6 +124,7 @@
|
|||
:active.sync="isLoadingTerms"
|
||||
:can-cancel="false"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -123,7 +141,8 @@ export default {
|
|||
formWithErrors: '',
|
||||
orderedTermsList: [],
|
||||
order: 'asc',
|
||||
termEditionFormTop: 0
|
||||
termEditionFormTop: 0,
|
||||
searchQuery: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -371,7 +390,8 @@ export default {
|
|||
loadTerms(parentId) {
|
||||
|
||||
this.isLoadingTerms = true;
|
||||
this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: '', order: this.order})
|
||||
let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : '';
|
||||
this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order})
|
||||
.then(() => {
|
||||
// Fill this.form data with current data.
|
||||
this.isLoadingTerms = false;
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
|
|
@ -219,49 +219,6 @@
|
|||
width: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-search-header-dropdown {
|
||||
height: 27px !important;
|
||||
|
||||
.dropdown-content {
|
||||
width: 800px !important;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1087px) {
|
||||
.dropdown-menu {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
span.icon:not(.is-right) {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-search-text {
|
||||
margin: 0 12px;
|
||||
font-size: 12px;
|
||||
color: $blue5;
|
||||
}
|
||||
|
||||
.advanced-search-text-di {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #01295c;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.advanced-search-hr {
|
||||
height: 1px;
|
||||
margin: 8px 0;
|
||||
background-color: #298596;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taginput-container {
|
||||
padding: 0 !important;
|
||||
background-color: white !important;
|
||||
|
|
@ -42,7 +43,10 @@
|
|||
&:focus, &:active {
|
||||
border: none !important;
|
||||
}
|
||||
.input { margin-bottom: 0px !important; }
|
||||
.input {
|
||||
margin-bottom: 0px !important;
|
||||
height: 1.85rem !important;
|
||||
}
|
||||
.input.has-selected, .input:focus, .input:active {
|
||||
background-color: white;
|
||||
border: 1px solid $gray2 !important;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover{
|
||||
background-color: $gray2;
|
||||
&:hover, &:hover .tag {
|
||||
background-color: $gray1;
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
|
@ -20,5 +20,14 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.is-delete {
|
||||
border-radius: 50px !important;
|
||||
border-radius: 50px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -181,6 +181,8 @@ export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, orde
|
|||
query = `?order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
|
||||
} else if(fetchOnly && search && all ){
|
||||
query = `?hideempty=0&order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
|
||||
} else if(search && !all && !fetchOnly){
|
||||
query = `?hideempty=0&order=${order}&${qs.stringify(search)}`;
|
||||
} else {
|
||||
query =`?hideempty=0&order=${order}`;
|
||||
}
|
||||
|
|
@ -205,12 +207,15 @@ export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, s
|
|||
order = 'asc';
|
||||
}
|
||||
|
||||
if (fetchOnly && search && !all) {
|
||||
if(fetchOnly && search && !all ){
|
||||
query = `?order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
|
||||
} else if (fetchOnly && search && all) {
|
||||
} else if(fetchOnly && search && all ){
|
||||
query = `?hideempty=0&order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
|
||||
} else if(search && !all && !fetchOnly){
|
||||
console.log(search)
|
||||
query = `?hideempty=0&order=${order}&${qs.stringify(search)}`;
|
||||
} else {
|
||||
query = `?hideempty=0&order=${order}`;
|
||||
query =`?hideempty=0&order=${order}`;
|
||||
}
|
||||
query += '&parent=' + parentId;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue