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

Adds textual search to Taxonomies list.

This commit is contained in:
Mateus Machado Luna 2019-10-16 15:38:17 -03:00
parent eb242ef739
commit ff6fd632b3
3 changed files with 59 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/admin/pages/lists/collections-page.vue
View File

@ -122,8 +122,10 @@
</option>
</b-select>
</b-field>
<!-- Textual Search -------------->
<b-field class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
@ -496,14 +498,15 @@ export default {
@import '../../scss/_variables.scss';
.sub-header {
min-height: $subheader-height;
height: $header-height;
min-height: $header-height;
height: auto;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #ddd;
display: inline-flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
.header-item {
@ -558,7 +561,7 @@ export default {
}
@media screen and (max-width: 769px) {
height: 60px;
height: 120px;
margin-top: -0.5em;
padding-top: 0.9em;

53
src/admin/pages/lists/taxonomies-page.vue
View File

@ -84,6 +84,25 @@
</option>
</b-select>
</b-field>
<!-- Textual Search -------------->
<b-field class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('taxonomies')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter="searchTaxonomies()">
<span
@click="searchTaxonomies()"
class="icon is-right">
<i class="tainacan-icon tainacan-icon-search" />
</span>
</div>
</b-field>
</div>
<div class="above-subheader">
@ -231,6 +250,7 @@
status: '',
order: 'asc',
ordeBy: 'date',
searchQuery: '',
sortingOptions: [
{ label: this.$i18n.get('label_title'), value: 'title' },
{ label: this.$i18n.get('label_creation_date'), value: 'date' },
@ -305,7 +325,8 @@
taxonomiesPerPage: this.taxonomiesPerPage,
status: this.status,
order: this.order,
orderby: this.orderBy
orderby: this.orderBy,
search: this.searchQuery
})
.then((res) => {
this.isLoading = false;
@ -318,6 +339,10 @@
getLastTaxonomyNumber() {
let last = (Number(this.taxonomiesPerPage * (this.page - 1)) + Number(this.taxonomiesPerPage));
return last > this.total ? this.total : last;
},
searchTaxonomies() {
this.page = 1;
this.load();
}
},
computed: {
@ -371,10 +396,15 @@
display: inline-flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
.header-item {
margin-bottom: 0 !important;
&:first-child {
margin-right: auto;
}
&:not(:last-child) {
padding-right: 0.5em;
}
@ -387,9 +417,13 @@
cursor: default;
}
.button {
display: flex;
align-items: center;
&:not(:first-child) {
.button {
display: flex;
align-items: center;
border-radius: 0 !important;
height: 1.95rem !important;
}
}
.field {
@ -405,10 +439,19 @@
font-size: 1.3125rem !important;
max-width: 26px;
}
.icon {
pointer-events: all;
cursor: pointer;
color: $blue5;
height: 27px;
font-size: 18px !important;
height: 1.75rem !important;
}
}
@media screen and (max-width: 769px) {
height: 60px;
height: 160px;
margin-top: -0.5em;
padding-top: 0.9em;

5
src/js/store/modules/taxonomy/actions.js
View File

@ -45,7 +45,7 @@ export const updateTaxonomy = ({ commit }, taxonomy) => {
});
};
export const fetch = ({ commit }, { page, taxonomiesPerPage, status, order, orderby } ) => {
export const fetch = ({ commit }, { page, taxonomiesPerPage, status, order, orderby, search } ) => {
return new Promise((resolve, reject) => {
let endpoint = `/taxonomies?paged=${page}&perpage=${taxonomiesPerPage}&context=edit`;
@ -55,6 +55,9 @@ export const fetch = ({ commit }, { page, taxonomiesPerPage, status, order, orde
if (order != undefined && order != '' && orderby != undefined && orderby != '')
endpoint = endpoint + '&order=' + order + '&orderby=' + orderby;
if (search != undefined && search != '')
endpoint = endpoint + '&search=' + search;
axios.tainacan.get(endpoint)
.then(res => {
let taxonomies = res.data;