First usage of summary endpoints #483.

src/views/admin/js/store/modules/report/actions.js

@@ -19,3 +19,24 @@ export const fetchReports = ({ commit }, {} ) => {
             .catch(error => reject(error));
     });
 };
+
+export const fetchSummary = ({ commit }, { collectionId } ) => {
+
+    let endpoint = '/reports';
+    
+    if (collectionId && collectionId != 'default')
+        endpoint += '/collection/' + collectionId + '/summary';
+    else
+        endpoint += '/repository/summary';
+
+    return new Promise((resolve, reject) => {
+        axios.tainacan.get(endpoint)
+            .then(res => {
+                let summary = res.data;
+
+                commit('setSummary', summary);
+                resolve(summary);
+            })
+            .catch(error => reject(error));
+    });
+};

src/views/admin/js/store/modules/report/getters.js

@@ -1,3 +1,7 @@
 export const getReports = state => {
   return state.reports;
 };
+
+export const getSummary = state => {
+  return state.summary;
+};

src/views/admin/js/store/modules/report/index.js

@@ -644,7 +644,8 @@ const state = {
               },
             },
         }
-    ]
+    ],
+    summary: {}
 };
 function generateData (count, yrange) {
     var i = 0;

src/views/admin/js/store/modules/report/mutations.js

@@ -1,3 +1,7 @@
 export const setReports = (state, reports) => {
   state.reports = reports;
 };
+
+export const setSummary = (state, summary) => {
+  state.summary = summary;
+};

src/views/reports/components/number-block.vue

@@ -33,38 +33,19 @@
 export default {
     props: {
         sourceCollection: String,
-        entityType: String
+        entityType: String,
+        summary: Object
     },
-    data() {
+    computed: {
+        total() {
+            return this.summary.totals[this.entityType].total;
+        },
+        totalByStatus() {
             return {
-            total: 0,
+                'publish': this.summary.totals[this.entityType].publish,
-            totalByStatus: {}
+                'private': this.summary.totals[this.entityType].private,
-        }
+                'draft': this.summary.totals[this.entityType].draft,
-    },
+                'trash': this.summary.totals[this.entityType].trash
-    mounted() {
-        // Fake data until we fetch and load this from store
-        if (this.entityType === 'items') {
-            this.total = 2344;
-            this.totalByStatus = {
-                'publish': 2326,
-                'private': 8,
-                'draft': 9,
-                'trash': 1
-            }
-        } else if (this.entityType === 'collections') {
-            this.total = 23;
-            this.totalByStatus = {
-                'publish': 18,
-                'private': 2,
-                'trash': 3
-            }
-        } else if (this.entityType === 'taxonomies') {
-            this.total = 8;
-            this.totalByStatus = {
-                'publish': 5,
-                'private': 0,
-                'draft': 1,
-                'trash': 1
             }
         }
     }

src/views/reports/js/reports-main.js

@@ -19,14 +19,6 @@ import NumberBlock from '../components/number-block.vue';
 
 Vue.use(VueApexCharts)
 
-// Apex.theme = {
-//     monochrome: {
-//         enabled: true,
-//         color: '#298596',
-//         shadeTo: 'light',
-//         shadeIntensity: 0.65
-//     }
-// }
 Apex.colors = [
     '#298596', // Tainacan Turquoise
     '#01295c', // Tainacan Blue
@@ -37,7 +29,6 @@ Apex.colors = [
     '#ed4f63'  // Tainacan Pink
 ];
 
-
 Vue.use(I18NPlugin);
 Vue.use(UserCapabilitiesPlugin);
 Vue.use(StatusHelperPlugin);

src/views/reports/pages/reports-list.vue

@@ -17,22 +17,32 @@
             </option>
         </select>
         <div class="columns is-multiline">
-            <div class="column is-full is-one-third-tablet has-text-centered">
+            <div 
+                    v-if="!selectedCollection || selectedCollection == 'default'"
+                    class="column is-full is-one-third-tablet has-text-centered">
                 <number-block
+                        v-if="!isFetchingSummary && summary && summary.totals"
                         class="postbox"
                         :source-collection="selectedCollection"
+                        :summary="summary"
                         entity-type="collections"/>
             </div>
             <div class="column is-full is-one-third-tablet has-text-centered">
                 <number-block 
+                        v-if="!isFetchingSummary && summary && summary.totals"
                         class="postbox"
                         :source-collection="selectedCollection"
+                        :summary="summary"
                         entity-type="items"/>
             </div>
-            <div class="column is-full is-one-third-tablet has-text-centered">
+            <div 
+                    v-if="!selectedCollection || selectedCollection == 'default'"
+                    class="column is-full is-one-third-tablet has-text-centered">
                <number-block
+                        v-if="!isFetchingSummary && summary && summary.totals"
                         class="postbox"
                         :source-collection="selectedCollection"
+                        :summary="summary"
                         entity-type="taxonomies"/>
             </div>
             <div class="column is-half is-one-quarter-widescreen">
@@ -83,7 +93,8 @@ export default {
     data() {
         return {
             selectedCollection: 'default',
-            isLoadingCollections: false,
+            isFetchingCollections: false,
+            isFetchingSummary: false
         }
     },
     computed: {
@@ -92,11 +103,13 @@ export default {
         }),
         ...mapGetters('report', {
             reports: 'getReports',
-        }),
+            summary: 'getSummary' 
+        })
     },
     watch: {
         '$route.query' (to) {
             this.selectedCollection = to['collection'] ? to['collection'] : 'default';
+            this.loadSummary();
         }
     },
     created() {
@@ -104,15 +117,27 @@ export default {
         this.selectedCollection = this.$route.query['collection'] ? this.$route.query['collection'] : 'default';
         
         // Loads collection for the select input
-        this.isLoadingCollections = true;
+        this.isFetchingCollections = true;
         this.fetchAllCollectionNames()
-            .then(() => this.isLoadingCollections = false)
+            .then(() => {
-            .catch(() => this.isLoadingCollections = false);
+                this.loadSummary();
+                this.isFetchingCollections = false;
+            })
+            .catch(() => this.isFetchingCollections = false);
     },
     methods: {
         ...mapActions('collection', [
             'fetchAllCollectionNames'
-        ])
+        ]),
+        ...mapActions('report', [
+            'fetchSummary',
+        ]),
+        loadSummary() {
+            this.isFetchingSummary = true;
+            this.fetchSummary({ collectionId: this.selectedCollection })
+                .then(() => this.isFetchingSummary = false)
+                .catch(() => this.isFetchingSummary = false);
+        }
     }
 }
 </script>