From 9e42291e3430a2efcb96503a3363fa45fa0e54d7 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 22 May 2018 14:44:51 -0300
Subject: [PATCH 1/3] Implements tabs on Collection List

---
 .../components/lists/collections-list.vue     |  4 +--
 src/admin/components/lists/items-list.vue     |  2 +-
 src/admin/pages/lists/collections-page.vue    | 32 ++++++++++++++++---
 src/admin/scss/tainacan-admin.scss            |  7 +++-
 src/js/store/modules/collection/actions.js    |  9 ++++--
 5 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index d8b2986d8..8c3dd35ec 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -331,7 +331,7 @@ export default {
 
     .selection-control {
         
-        padding: 6px 0px 0px 18px;
+        padding: 6px 0px 0px 12px;
         background: white;
         height: 40px;
 
@@ -394,7 +394,7 @@ export default {
                 justify-content: center;
 
             }
-            label.control-label {
+            label span.control-label {
                 display: none;
             }
             &.is-selecting {
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 230a725d0..29b1be4e3 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -294,7 +294,7 @@ export default {
 
     .selection-control {
         
-        padding: 6px 0px 0px 18px;
+        padding: 6px 0px 0px 12px;
         background: white;
         height: 40px;
 
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index b33940856..a6e7d88e9 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -30,6 +30,19 @@
             </div>
         </div>
         <div class="above-subheader">
+            <div class="tabs">
+                <ul>
+                    <li 
+                            @click="onChangeTab('')"
+                            :class="{ 'is-active': status == undefined || status == ''}"><a>{{ $i18n.get('label_all_items') }}</a></li>
+                    <li 
+                            @click="onChangeTab('draft')"
+                            :class="{ 'is-active': status == 'draft'}"><a>{{ $i18n.get('label_draft_items') }}</a></li>
+                    <li 
+                            @click="onChangeTab('trash')"
+                            :class="{ 'is-active': status == 'trash'}"><a>{{ $i18n.get('label_trash_items') }}</a></li>
+                </ul>
+            </div>
             <div>
                 <collections-list
                         :is-loading="isLoading"
@@ -91,7 +104,8 @@ export default {
             isLoading: false,
             totalCollections: 0,
             page: 1,
-            collectionsPerPage: 12
+            collectionsPerPage: 12,
+            status: ''
         }
     },
     components: {
@@ -104,6 +118,10 @@ export default {
         ...mapGetters('collection', [
             'getCollections'
         ]),
+        onChangeTab(status) {
+            this.status = status;
+            this.loadCollections();
+        },
         onChangeCollectionsPerPage(value) {
             let prevValue = this.collectionsPerPage;
             this.collectionsPerPage = value;
@@ -116,8 +134,7 @@ export default {
         },
         loadCollections() {    
             this.isLoading = true;
-            
-            this.fetchCollections({ 'page': this.page, 'collectionsPerPage': this.collectionsPerPage })
+            this.fetchCollections({ 'page': this.page, 'collectionsPerPage': this.collectionsPerPage, 'status': this.status })
             .then((res) => {
                 this.isLoading = false;
                 this.totalCollections = res.total;
@@ -134,9 +151,11 @@ export default {
     },
     computed: {
         collections(){
+            
             let collectionsList = this.getCollections(); 
             for (let collection of collectionsList) 
                 collection['creation'] = this.$i18n.get('info_created_by') + collection['author_name'] + '<br>' + this.$i18n.get('info_date') + collection['creation_date'];
+            
             return collectionsList;
         }
     },
@@ -185,7 +204,12 @@ export default {
             }
         }
     }
-
+    .tabs {
+        padding-top: 20px;
+        margin-bottom: 20px;
+        padding-left: $page-side-padding;
+        padding-right: $page-side-padding;
+    }
     .above-subheader {
         margin-bottom: 0;
         margin-top: 0;
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 3580df753..125a601b9 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -549,7 +549,12 @@ a:hover {
         overflow: auto;
         .table {
             tbody {
-                td { border-bottom: 0px solid $gray-light !important; }
+                td { 
+                    border-bottom: 0px solid $gray-light !important; 
+                }
+                .b-checkbox.checkbox .control-label {
+                    display: none;
+                }
             }
             .th-wrap {
                 font-size: 12px !important;
diff --git a/src/js/store/modules/collection/actions.js b/src/js/store/modules/collection/actions.js
index b99053675..fec8b715e 100644
--- a/src/js/store/modules/collection/actions.js
+++ b/src/js/store/modules/collection/actions.js
@@ -43,10 +43,15 @@ export const deleteItem = ({ commit }, item_id ) => {
     });
 };
 
-export const fetchCollections = ({commit} , { page, collectionsPerPage }) => {
+export const fetchCollections = ({commit} , { page, collectionsPerPage, status }) => {
     commit('cleanCollections');
     return new Promise((resolve, reject) => {
-        axios.tainacan.get('/collections?paged='+page+'&perpage='+collectionsPerPage+'&context=edit')
+        let endpoint = '/collections?paged='+page+'&perpage='+collectionsPerPage+'&context=edit';
+
+        if (status != '' && status != undefined)
+            endpoint = endpoint + '&status=' + status;
+            
+        axios.tainacan.get(endpoint)
         .then(res => {
             let collections = res.data;
             commit('setCollections', collections);

From c321cd0c937ae953b66438a152395f1dde53ef70 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 22 May 2018 15:35:36 -0300
Subject: [PATCH 2/3] Finishes implementation of tabs in collection list

---
 .../edition/collection-edition-form.vue       |  4 +--
 .../components/edition/item-edition-form.vue  |  4 +--
 .../components/lists/collections-list.vue     | 33 ++++-------------
 src/admin/components/lists/items-list.vue     |  2 +-
 src/admin/pages/lists/collections-page.vue    | 36 +++++++++++++++++--
 src/admin/tainacan-admin-i18n.php             |  2 ++
 6 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 9aad87c53..b31c588c9 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -25,12 +25,12 @@
                             </a>
                             <figure class="image is-128x128">
                                 <span 
-                                        v-if="collection.thumbnail == undefined || collection.thumbnail == false"
+                                        v-if="collection.thumbnail.thumb == undefined || collection.thumbnail.thumb == false"
                                         class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
                                 <img
                                         id="thumbail-image"  
                                         :alt="$i18n.get('label_thumbnail')" 
-                                        :src="(collection.thumbnail == undefined || collection.thumbnail == false) ? thumbPlaceholderPath : collection.thumbnail.thumb">
+                                        :src="(collection.thumbnail.thumb == undefined || collection.thumbnail.thumb == false) ? thumbPlaceholderPath : collection.thumbnail.thumb">
                             </figure>
                             <div class="thumbnail-buttons-row">
                                 <a 
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index 819f1840d..d79abd337 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -235,7 +235,7 @@
                                 <b-icon icon="pencil" />
                             </a>
                             <file-item
-                                    v-if="item.thumbnail != undefined && item.thumbnail != false"
+                                    v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
                                     :show-name="false"
                                     :file="{ 
                                         media_type: 'image', 
@@ -243,7 +243,7 @@
                                         title: { rendered: $i18n.get('label_thumbnail')},
                                         description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
                             <figure 
-                                    v-if="item.thumbnail == undefined || item.thumbnail == false"
+                                    v-if="item.thumbnail.thumb == undefined || item.thumbnail.thumb == false"
                                     class="image">
                                 <span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
                                 <img
diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index 8c3dd35ec..de41c5856 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="table-container">
+    <div 
+            v-if="totalCollections > 0 && !isLoading"
+            class="table-container">
         <div class="selection-control">
             <div class="field select-all is-pulled-left">
                 <span>
@@ -11,7 +13,7 @@
             <div class="field is-pulled-right">
                 <b-dropdown
                         position="is-bottom-left"
-                        v-if="collections.length > 0 && collections[0].current_user_can_edit"
+                        v-if="collections[0].current_user_can_edit"
                         :disabled="!isSelectingCollections"
                         id="bulk-actions-dropdown">
                     <button
@@ -139,28 +141,6 @@
                 </tbody>
             </table>
         </div>
-
-        <!-- Empty state image -->
-        <div v-if="!totalCollections || totalCollections <= 0">
-            <section class="section">
-                <div class="content has-text-grey has-text-centered">
-                    <p>
-                        <b-icon
-                                icon="inbox"
-                                size="is-large"/>
-                    </p>
-                    <p>{{ $i18n.get('info_no_collection_created') }}</p>
-                    <router-link
-                            id="button-create-collection"
-                            tag="button"
-                            class="button is-primary"
-                            :to="{ path: $routerHelper.getNewCollectionPath() }">
-                        {{ $i18n.getFrom('collections', 'new_item') }}
-                    </router-link>
-                </div>
-            </section>
-        </div>
-
     </div>
 </template>
 
@@ -319,8 +299,7 @@ export default {
         //     document.addEventListener('mouseup', function () {
         //         thElm = undefined;
         //     });
-        // })();
-        
+        // })();  
     }
 }
 </script>
@@ -331,7 +310,7 @@ export default {
 
     .selection-control {
         
-        padding: 6px 0px 0px 12px;
+        padding: 6px 0px 0px 13px;
         background: white;
         height: 40px;
 
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 29b1be4e3..54d555232 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -294,7 +294,7 @@ export default {
 
     .selection-control {
         
-        padding: 6px 0px 0px 12px;
+        padding: 6px 0px 0px 13px;
         background: white;
         height: 40px;
 
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index a6e7d88e9..3a08a09e8 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -3,7 +3,7 @@
         <tainacan-title />
         <div
                 class="sub-header"
-                v-if="totalCollections > 0">
+                v-if="checkIfUserCanEdit()">
             <div class="header-item">
                 <b-dropdown id="collection-creation-options-dropdown">
                     <button
@@ -49,7 +49,31 @@
                         :total-collections="totalCollections"
                         :page="page"
                         :collections-per-page="collectionsPerPage"
-                        :collections="collections"/>  
+                        :collections="collections"/> 
+
+                 <!-- Empty state image -->
+                <div v-if="totalCollections <= 0 && !isLoading">
+                    <section class="section">
+                        <div class="content has-text-grey has-text-centered">
+                            <p>
+                                <b-icon
+                                        icon="inbox"
+                                        size="is-large"/>
+                            </p>
+                            <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_collection_created') }}</p>
+                            <p v-if="status == 'draft'">{{ $i18n.get('info_no_collection_draft') }}</p>
+                            <p v-if="status == 'trash'">{{ $i18n.get('info_no_collection_trash') }}</p>
+                            <router-link
+                                    v-if="status == undefined || status == ''"
+                                    id="button-create-collection"
+                                    tag="button"
+                                    class="button is-primary"
+                                    :to="{ path: $routerHelper.getNewCollectionPath() }">
+                                {{ $i18n.getFrom('collections', 'new_item') }}
+                            </router-link>
+                        </div>
+                    </section>
+                </div> 
                 <!-- Footer -->
                 <div
                         class="pagination-area"
@@ -122,6 +146,13 @@ export default {
             this.status = status;
             this.loadCollections();
         },
+        checkIfUserCanEdit() {
+            for (let capability of tainacan_plugin.user_caps) {
+                if (capability == 'edit_tainacan-collections')
+                    return true;
+            }
+            return false;
+        },
         onChangeCollectionsPerPage(value) {
             let prevValue = this.collectionsPerPage;
             this.collectionsPerPage = value;
@@ -151,7 +182,6 @@ export default {
     },
     computed: {
         collections(){
-            
             let collectionsList = this.getCollections(); 
             for (let collection of collectionsList) 
                 collection['creation'] = this.$i18n.get('info_created_by') + collection['author_name'] + '<br>' + this.$i18n.get('info_date') + collection['creation_date'];
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index 4b5c495a5..fd28f7ccb 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -212,6 +212,8 @@ return [
 	// Info. Other feedback to user.
 	'info_name_is_required'                    => __( 'Name is required.', 'tainacan' ),
 	'info_no_collection_created'               => __( 'No collection was created in this repository.', 'tainacan' ),
+	'info_no_collection_draft'               => __( 'No draft collection found.', 'tainacan' ),
+	'info_no_collection_trash'               => __( 'No collection on trash.', 'tainacan' ),
 	'info_no_category_created'                 => __( 'No taxonomy was created in this repository.', 'tainacan' ),
 	'info_no_item_created'                     => __( 'No item was created in this collection.', 'tainacan' ),
 	'info_no_page_found'                       => __( 'No page was found with this name.', 'tainacan' ),

From 924079a02488538b896200e71cd1c9466b34bd2d Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 22 May 2018 16:01:06 -0300
Subject: [PATCH 3/3] Fixes checkbox cell not appearing on hover in tables.

---
 src/admin/components/lists/collections-list.vue | 14 +++++++++-----
 src/admin/components/lists/items-list.vue       | 14 +++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index de41c5856..ec99394fb 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -350,7 +350,6 @@ export default {
             position: -webkit-sticky !important;
             left: 0;
             top: auto;
-            visibility: hidden;
             display: table-cell;
             
             &::before {
@@ -361,6 +360,7 @@ export default {
                 position: absolute;
                 left: 0;
                 top: 0;
+                visibility: hidden;
             }
 
             label.checkbox {  
@@ -371,13 +371,14 @@ export default {
                 height: 100%; 
                 display: flex;
                 justify-content: center;
-
+                visibility: hidden;
             }
             label span.control-label {
                 display: none;
             }
             &.is-selecting {
-                visibility: visible; 
+                .checkbox { visibility: visible; }
+                &::before { visibility: visible !important; }
             }
         }
         // Only to be used in case we can implement Column resizing
@@ -464,8 +465,11 @@ export default {
                     cursor: pointer;
 
                     .checkbox-cell {
-                        visibility: visible; 
-                        .checkbox { background-color: $tainacan-input-background !important; }
+                        &::before { visibility: visible; }
+                        .checkbox { 
+                            visibility: visible; 
+                            background-color: $tainacan-input-background !important; 
+                        }
                     }
                     .actions-cell {
                         .actions-container {
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 54d555232..3d2903410 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -334,7 +334,6 @@ export default {
             position: -webkit-sticky !important;
             left: 0;
             top: auto;
-            visibility: hidden;
             display: table-cell;
 
             &::before {
@@ -345,6 +344,7 @@ export default {
                 position: absolute;
                 left: 0;
                 top: 0;
+                visibility: hidden;
             }
 
             label.checkbox {  
@@ -355,13 +355,14 @@ export default {
                 height: 100%; 
                 display: flex;
                 justify-content: center;
-
+                visibility: hidden;
             }
             label.control-label {
                 display: none;
             }
             &.is-selecting {
-                visibility: visible; 
+                .checkbox { visibility: visible; } 
+                &::before { visibility: visible !important; }
             }
         }
         // Only to be used in case we can implement Column resizing
@@ -448,8 +449,11 @@ export default {
                     cursor: pointer;
 
                     .checkbox-cell {
-                        visibility: visible; 
-                        .checkbox { background-color: $tainacan-input-background !important; }
+                        &::before { visibility: visible; }
+                        .checkbox { 
+                            visibility: visible; 
+                            background-color: $tainacan-input-background !important; 
+                        }
                     }
                     .actions-cell {
                         .actions-container {