Adds textual search to Taxonomies list.

src/admin/pages/lists/collections-page.vue

@@ -122,6 +122,8 @@
                     </option>
                 </b-select>
             </b-field>
+
+            <!-- Textual Search -------------->
             <b-field class="header-item">
                 <div class="control has-icons-right is-small is-clearfix">
                     <input
@@ -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;
 

src/admin/pages/lists/taxonomies-page.vue

@@ -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;
             }
 
+            &: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;
 

src/js/store/modules/taxonomy/actions.js

@@ -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;