From eb242ef7395386adb91e7b42f16f504bc11ff0d5 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 16 Oct 2019 15:21:07 -0300
Subject: [PATCH] Adds textual search to collections list.

---
 .../components/lists/activities-list.vue      |  6 +--
 src/admin/pages/lists/activities-page.vue     |  4 +-
 src/admin/pages/lists/collections-page.vue    | 54 ++++++++++++++++---
 src/js/store/modules/collection/actions.js    | 35 ++++++------
 4 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/admin/components/lists/activities-list.vue b/src/admin/components/lists/activities-list.vue
index 4e69c8c81..f699fe642 100644
--- a/src/admin/components/lists/activities-list.vue
+++ b/src/admin/components/lists/activities-list.vue
@@ -154,9 +154,9 @@
                 'approve',
                 'notApprove'
             ]),
-            getThis(){
-                return this;
-            },
+            // getThis(){
+            //     return this;
+            // },
             approveActivity(activity) {
                 this.approve(activity.id)
                     .then(data => {
diff --git a/src/admin/pages/lists/activities-page.vue b/src/admin/pages/lists/activities-page.vue
index f00230940..f893e1675 100644
--- a/src/admin/pages/lists/activities-page.vue
+++ b/src/admin/pages/lists/activities-page.vue
@@ -456,7 +456,7 @@
 <style lang="scss" scoped>
     @import '../../scss/_variables.scss';
 
-     .sub-header {
+    .sub-header {
         min-height: $subheader-height;
         height: $header-height;
         padding-left: 0;
@@ -509,7 +509,7 @@
                 color: $blue5;
                 height: 27px;
                 font-size: 18px !important;
-                height: 1.5rem !important;
+                height: 1.75rem !important;
             }
         }
 
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index 638031812..688fccc40 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -122,6 +122,23 @@
                     </option>
                 </b-select>
             </b-field>
+            <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('collections')"
+                            autocomplete="on"
+                            v-model="searchQuery"
+                            @keyup.enter="searchCollections()">
+                    <span
+                            @click="searchCollections()"
+                            class="icon is-right">
+                        <i class="tainacan-icon tainacan-icon-search" />
+                    </span>
+                </div>
+            </b-field>
         </div>
 
         <div class="above-subheader">
@@ -310,6 +327,7 @@ export default {
             status: '',
             order: 'desc',
             ordeBy: 'date',
+            searchQuery: '',
             sortingOptions: [
                 { label: this.$i18n.get('label_title'), value: 'title' },
                 { label: this.$i18n.get('label_creation_date'), value: 'date' },
@@ -405,7 +423,8 @@ export default {
                 status: this.status,
                 contextEdit: true, 
                 order: this.order,
-                orderby: this.orderBy
+                orderby: this.orderBy,
+                search: this.searchQuery
             })
             .then((res) => {
                 this.isLoading = false;
@@ -427,7 +446,11 @@ export default {
                 hasModalCard: true,
                 trapFocus: true
             });
-        }
+        },
+        searchCollections() {
+            this.page = 1;
+            this.loadCollections();
+        },
     },
     created() {
         this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
@@ -484,7 +507,11 @@ export default {
         width: 100%;
 
         .header-item {
+            margin-bottom: 0 !important;
 
+            &:first-child {
+                margin-right: auto;
+            }
             &:not(:last-child) {
                 padding-right: 0.5em;
             }
@@ -497,9 +524,13 @@ export default {
                 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 {
@@ -515,14 +546,23 @@ export default {
                 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;
             margin-top: -0.5em;
             padding-top: 0.9em;
-        
-            .header-item {
+
+            .header-item:not(:last-child) {
                 padding-right: 0.2em;
             }
         }
diff --git a/src/js/store/modules/collection/actions.js b/src/js/store/modules/collection/actions.js
index 88aedd843..24345ab23 100644
--- a/src/js/store/modules/collection/actions.js
+++ b/src/js/store/modules/collection/actions.js
@@ -137,7 +137,7 @@ export const deleteItem = ({ commit }, { itemId, isPermanently }) => {
     });
 };
  
-export const fetchCollections = ({commit} , { page, collectionsPerPage, status, contextEdit, order, orderby }) => {
+export const fetchCollections = ({commit} , { page, collectionsPerPage, status, contextEdit, order, orderby, search }) => {
     
     return new Promise((resolve, reject) => {
         let endpoint = '/collections?paged='+page+'&perpage='+collectionsPerPage;
@@ -150,25 +150,28 @@ export const fetchCollections = ({commit} , { page, collectionsPerPage, status,
                     
         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 collections = res.data;
-            commit('setCollections', collections);
+            .then(res => {
+                let collections = res.data;
+                commit('setCollections', collections);
 
-            commit('setRepositoryTotalCollections', {
-                draft: res.headers['x-tainacan-total-collections-draft'],
-                trash: res.headers['x-tainacan-total-collections-trash'],
-                publish: res.headers['x-tainacan-total-collections-publish'],
-                private: res.headers['x-tainacan-total-collections-private'],
+                commit('setRepositoryTotalCollections', {
+                    draft: res.headers['x-tainacan-total-collections-draft'],
+                    trash: res.headers['x-tainacan-total-collections-trash'],
+                    publish: res.headers['x-tainacan-total-collections-publish'],
+                    private: res.headers['x-tainacan-total-collections-private'],
+                });
+
+                resolve({'collections': collections, 'total': res.headers['x-wp-total'] });
+            }) 
+            .catch(error => {
+                console.log(error);
+                reject(error);
             });
-
-            resolve({'collections': collections, 'total': res.headers['x-wp-total'] });
-        }) 
-        .catch(error => {
-            console.log(error);
-            reject(error);
-        });
     });
 };