Implements tabs on Collection List

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 {

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;
 

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;

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;

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