Add widgets on dashboard

Author: ALPIXELMaiki

dist/build.js

@@ -11,7 +11,8 @@ sudo service apahce2 restart
 
 
 3.
-mkdir ~/.npm-global && npm config set prefix '~/.npm-global' && export PATH=~/.npm-global/bin:$PATH && source ~/.profile
+mkdir ~/.npm-global
+npm config set prefix '~/.npm-global' && export PATH=~/.npm-global/bin:$PATH && source ~/.profile
 
 
 4.

dist/build.js.map

@@ -26,7 +26,7 @@
     const api = 'src/js/fakeapi/widget-highcharts-1.json'
 
 	export default {
-		name: 'widget-highcharts',
+		name: 'widget-highcharts-1',
         data() {
             return {
                 loading:true,

memo.txt

@@ -26,7 +26,7 @@
     const api = 'src/js/fakeapi/widget-highcharts-2.json'
 
 	export default {
-		name: 'widget-highcharts',
+		name: 'widget-highcharts-2',
         data() {
             return {
                 loading:true,

src/js/components/widget-highcharts-1.vue

@@ -26,7 +26,7 @@
     const api = 'src/js/fakeapi/widget-highcharts-3.json'
 
 	export default {
-		name: 'widget-highcharts',
+		name: 'widget-highcharts-3',
         data() {
             return {
                 loading:true,

src/js/components/widget-highcharts-2.vue

@@ -0,0 +1,123 @@
+<template>
+
+    <div class="wrap-widget">
+        <div class="cc-loader" v-if="loading">
+            <div class="spinner"></div>
+        </div>
+
+        <div v-else>
+            <div v-if="!fetchError" class="widget-lastusers">
+                
+                <div class="columns">
+                   
+                    <div v-for="(user, index) in users" class="user-item">
+                            
+                        <router-link :to="{name:'user-profile', params:{id: user.id.value}}">
+                            <img :src="user.picture.medium" :alt="user.name.first" />
+
+                            <p class="user-name">
+                                {{user.name.first|capitalize}} {{user.name.last|upper}}
+                            </p>
+                            <p class="user-date">
+                                {{user.registered | fromnow('fr')}}
+                            </p>
+                        </router-link>
+                    </div>
+                </div>
+
+            </div>
+
+            <div v-else class="alert alert-error">
+                {{fetchError}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+
+    // Set const api url to get admins
+    const api = 'https://randomuser.me/api/?results=5&nat=fr'
+
+	export default {
+        // Name of the component
+        name: 'widget-lastusers',
+
+        // Datas : model
+        data () {
+            return {
+                // ============
+                // General datas
+                // ============
+                // Is the page loading ?
+                loading:true,
+
+                // If fetchData() returns an error, will be filled with error detail
+                fetchError : '',
+
+
+                // ============
+                // last users datas
+                // ============
+                // Tab contains all last users
+                users: []
+            }
+        },
+
+        // When view is created, launch ajax fetchData
+        created () {
+            this.fetchData()
+        },
+
+        // Methods
+        methods: {
+
+            // Ajax to get admins
+            fetchData () {
+
+                // Reset error msg
+                this.fetchError = ''
+
+                // It's loading dude :)
+                this.loading = true
+
+
+                // AJAX FIRE!
+                Vue.axios.get(api, {
+
+                    // params
+
+                }).then(response => {
+
+                    if(response.data.error) {
+
+                        this.showError('data.error : API return an error value')
+
+                    } else {
+
+                        // Loading is finished :)
+                        this.loading = false
+
+                        // Contains 5 last users, sort by date asc
+                        this.users = _.reverse(_.sortBy(response.data.results, 'registered'))
+                    }
+
+                }).catch(error => {
+
+                    // Set the error msg
+                    this.showError('API url not found')
+
+                })
+            },
+
+            // Show Error message if fetching data return an error
+            showError(msg) {
+                this.fetchError = msg
+                this.loading = false
+                this.users = []
+            }
+        }
+    }
+
+</script>

src/js/components/widget-highcharts-3.vue

@@ -1,7 +1,7 @@
 {
 	"error": false,
 	"title": {
-		"text": "Monthly Average Temperature",
+		"text": "",
 		"x": -20
 	},
 	"subtitle": {

src/js/components/widget-lastusers.vue

@@ -7,7 +7,7 @@
         "type": "pie"
     },
     "title": {
-        "text": "Browser market shares January, 2015 to May, 2015"
+        "text": ""
     },
     "tooltip": {
         "pointFormat": "{series.name}: <b>{point.percentage:.1f}%</b>"

src/js/fakeapi/widget-highcharts-1.json

@@ -4,7 +4,7 @@
         "type": "column"
     },
     "title": {
-        "text": "Users Vs Admins"
+        "text": ""
     },
     "xAxis": {
         "categories": [