Fetch Dashboard News and cache assets and data

assets/js/DashboardNews.vue

@@ -4,12 +4,40 @@
         <span>Card name</span>
         <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
     </div>
-    <div v-for="o in 4" :key="o" class="text item">
-        {{'List item ' + o }}
+    <div v-for="newsItem in news" v-if="newsItem" :key="newsItem" class="text item">
+        {{ newsItem.title }}
+        <div v-html="newsItem.teaser"></div>
     </div>
     </el-card>
 </template>
 
+<script>
+import DashboardNewsAPI from './service/api/DashboardNews'
+
+export default {
+  name: 'DashBoardNews',
+
+  data () {
+    return {
+      loading: true,
+      news: []
+    }
+  },
+  created() {
+    this.news = DashboardNewsAPI.getNews();
+
+    // Asynchronously fetch (might take a while)
+    DashboardNewsAPI.fetchNews()
+      .then( news => {
+        this.news = news
+      })
+      .catch(error => console.log(error))
+      .finally(() => {
+        this.loading = false
+      });
+  }
+}
+</script>
 
 <style>
   .text {

assets/js/bolt.js

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import './registerServiceWorker'
 
 // Bolt Components
 import Hello from './Hello'

assets/js/registerServiceWorker.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+// if (process.env.NODE_ENV === 'production') {
+  register('/assets/service-worker.js', {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+// }

assets/js/service/api/DashboardNews.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+export default {
+    getNews () {
+        // return data from localstorage
+        let news = JSON.parse(localStorage.getItem('dashboardnews'));
+        return news;
+    },
+
+    fetchNews() {
+        return axios.get('/en/async/news')
+            .then(response => {
+                // save to localstorage _and_ return data
+                localStorage.setItem('dashboardnews', JSON.stringify(response.data));
+                return response.data
+            })
+    }
+
+}

composer.json

@@ -13,14 +13,16 @@
         "ezyang/htmlpurifier": "^4.10",
         "guzzlehttp/guzzle": "^6.3",
         "sensio/framework-extra-bundle": "^5.1",
-	"sensiolabs/security-checker": "^4.1",
+        "sensiolabs/security-checker": "^4.1",
+        "symfony/apache-pack": "^1.0",
         "symfony/asset": "^4.1",
         "symfony/console": "^4.1",
         "symfony/debug-pack": "^1.0",
         "symfony/expression-language": "^4.1",
         "symfony/flex": "^1.1",
         "symfony/form": "^4.1",
         "symfony/framework-bundle": "^4.1",
+        "symfony/intl": "^4.1",
         "symfony/lts": "^4@dev",
         "symfony/orm-pack": "^1.0",
         "symfony/polyfill-php72": "^1.8",